JQUERY / AJAX Recréer une requête httpRequest avec JQUERY?

Marsh Posté le 06-09-2012 à 10:25:29

Bonjour,
N'ayant trouvé de solution à mon problème, je vais donc vous l'exposer ici avec l’espoir d'obtenir votre aide.

1. Le cas présent

Pour mes développements nécessitant de l'AJAX, j'utilise depuis des années une fonction simple d'utilisation qui jusqu'à présent ne m'a jamais fait défaut.
L'appel de la fonction se fait généralement via un évènement.
Exemple :

Code :

<div id="liens" class="lien_actif" onclick="makeRequest('ajax/request_user_info.php?user_id=325&action=edit', 'primary_request');" >Cliquez ici</div>

Elle contient deux paramètres, l'URL et la zone cible ou sera affiché le résultat.

La fonction se présente de manière classique :

Code :

function makeRequest(url, cible) {
var httpRequest = false;
[...]
vérification de navigateur et de version
[...]
httpRequest.onreadystatechange = function() { alertContents(httpRequest, cible); };
httpRequest.open('GET', url, true);
httpRequest.send(null);
}
function alertContents(httpRequest, cible) {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
document.getElementById(cible).innerHTML = httpRequest.responseText ;
} else {
alert('Un problème est survenu avec la requête.');
}
}
}

J'ai également créé un dérivé pour traiter les requêtes "POST"
Comme dit, tout fonctionne, sauf que...

2. Le problème
J'utilise de plus en plus la librairie JQUERY dans mes sites ainsi que d'autres scripts JS divers. Hors, une fois qu'un contenu est passé à la moulinette AJAX, il ne tien plus compte ni n’exécute ces scripts, je pense notamment à JQUERY UI ou à d'autres scripts intervenants sur des formulaires.
Mais je suis encore un gros Noob en JQUERY, alors...

3. Un début de solution
A force de recherches, j'ai trouvé des explications mais pas de véritable solution. J'ai compris que jquery .ajax permettait entre autre de lancer des scripts en fin de requête [success si je ne m'abuse?].
J'ai trouvé beaucoup, peut être trop, d'infos sur les méthodes, mais nul n'aborde la base qui m’intéresse, à savoir ; Comment recréer ma requête AJAX en JQUERY en gardant une utilisation similaire des paramètres (URL, CIBLE).

J'ai le début

Code :

$(document).ready( function () {
$("#liens" ).click( function() {
$.ajax({
type: "GET",
url: "Que je récupère comment?",
data:"Que je récupère comment?" ,
success: function(msg){
if(msg==1) // si la connexion en php a fonctionnée
{
$("#madiv" ).html("" ); //<= #madiv est-elle l'équivalent de ma zone cible?
}
else
{
}
}
});
}
}

Voilà, j'espère avoir posé mon problème aussi compréhensible-ment que possible.
Merci pour votre aide

---------------
http://www.mocpages.com/home.php/7650

Reply

Marsh Posté le 06-09-2012 à 10:25:29

Reply

Marsh Posté le 06-09-2012 à 13:26:19

C'est ca.

Dans url tu mets l'url : "ajax/request_user_info.php"
Dans data tu peux mettre :
une chaine de caractères, un objet, un array :
data : {
user_id : 325,
action : "edit"
}

Et madiv est bien l'équivalent de la zone cible :
success : function(msg){
$("#madiv" ).html(msg);
}

Voila.

Reply

Marsh Posté le 06-09-2012 à 14:44:20

Ok, merci Devil'sTiger. Je suis donc sur la bonne piste.

Mais comment faire pour récupérer les données ?
Dans ma requête initiale elles étaient transmises en paramètres à la fonction, mais là, avec la détection du click sur l’élément qui contient l'id "lien", $("#liens" ).click( function(), je ne sais ni comment inscrire ces paramètres dans ma div, ni par quel méthode les récupérer avec jquery.

Comme mon appel de fonction ne sert plus à rien avec JQ, comment je place l'url, les variables et la zone cible au sein de ma div? (ou p, span, tr, td et j'en passe...)

<div id="liens" class="lien_actif" title="ajax/request_user_info.php?user_id=325&action=edit" rel="primary_request" >Cliquez ici</div>
ou alors je doit obligatoirement séparer la page de requête de la liste des variables

En JS classique ça me parait tellement évident, mais là je ne capte vraiment pas cette logique pour le moment, et pourtant, il le faudra bien :sweat:

[EDIT]
J'ai trouvé comment récupérer les données mais le script ne passe pas et renvoie le alert('erreur')

Code :

$(document).ready( function () {
$("div#liens" ).click( function() {
var urlcomplete=($(this).attr("title" ));
var cible=($(this).attr("rel" ));
$.ajax({
type: "GET",
url: urlcomplete,
data: 'cible='+cible,
success: function(msg){
if(msg==1)
{
alert("ok" );
}
else
{
alert("erreur" );
}
}
});
return false;
});
});

Message édité par b3rl1go le 06-09-2012 à 15:54:24

---------------
http://www.mocpages.com/home.php/7650

Reply

Marsh Posté le 06-09-2012 à 17:06:45

Je pense avoir résulo le problème. Pour commencer j'ai supprimé le test

Code :

if(msg==1) {
alert("ok" );
} else {
alert("erreur" );
}

ce qui me donne ça et qui fonctionne

Code :

success: function(msg){
$("#"+cible).html(msg);
$("#"+cible).css("background", "yellow" );
}

La couche graphique JQUERY UI est directement prise en compte
Je vais maintenant tester mes autres fonctions et reviendrais fermer le post si en effet je ne rencontre plus de problèmes

---------------
http://www.mocpages.com/home.php/7650

Reply

Marsh Posté le 10-09-2012 à 17:35:14

Ca y est !!! J'ai bien cerné les bases de fonctionnement de la fonction .ajax de JQUERY et ai fait ma petite mixture pour gérer GET et POST au sein d'une même requête, J'adore le jquery

J'ai ce que je souhaitais, une seule fonction pour tout gérer. Je sais qu'elle est perfectible et j'affinerai avec le temps.

Par contre, je me pose la question. Est-il possible de faire de l'upload en ajax à partir d'un formulaire multipart/form-data?

---------------
http://www.mocpages.com/home.php/7650

Reply

Marsh Posté le 21-09-2012 à 14:11:26

Ok, j'ai trouvé mes réponses.

Le sujet est clôt.
Merci

---------------
http://www.mocpages.com/home.php/7650

Reply