[jquery] Comment utiliser live() et ajax() en meme temps ?

Voici ma fonction :

function postnews(info_message)
{
$.ajax({
type: "POST",
url: "postnews.php",
data: '&info_message='+info_message,
success: function(data) {
$('#submid').html(data);
}});
}

J'aimerai que le contenu chargé dans #submid soit intégré au DOM, donc il faut que j'utilise la fonction live. Mais dans le cas ci-présent, je ne sais pas comment la placer.

Pourriez-vous m'aider s'il vous-plait ?

Merci,

Je vous souhaite une excellente journée.

Live permet de binder des événements à des éléments ajoutés après le chargement du DOM.

Donc, si dans #submid tu charges un bouton avec la classe "toclick" (par exemple), il faudra utiliser :

$('.toclick').live('click', function() {
  // Ta fonction
});

Et placer ce bout de code dans le $document.ready(function).

Soit je fais comme au dessus (pour les événements).
Soit j'ajoute une ou plusieurs fonctions après l'ajout du code (html/append/prepend etc.) qui lance l'analyse de ce qui vient d'être ajouté.

Exemple, j'ai des formulaires que j'affiche via Ajax et qui ont des champs qui doivent être "analysé" via jQuery pour être "mis en page" comme il faut.

Ce qui donne un truc du genre

success: function(data) {
  obj.html(data);
  obj.formAnalyse();
}

Pour Vincent :

$(document).ready(function()
{
$('.button').live('click', function() {
function postnews(info_message)
{
$.ajax({
type: "POST",
url: "postnews.php",
data: '&info_message='+info_message,
success: function(data) {
$('#submid').html(data);
}});
}});
});

Si je fais ça dès lors que j'utilise le bouton de classe .button (enfin de class button), le contenu chargé devrait être intégré au DOM ?

Car cela ne fonctionne pas...

D'ailleurs ma requête Ajax ne fonctionne plus

Pour Kenor : obj.formAnalyse();


Quel est le contenu de la fonction suscité ? Car je comprends conceptuellement ton idée, cependant je ne sais pas du tout comment la réaliser.




Merci à vous deux en tout cas pour votre aide !
Modifié par Monoski (10 Oct 2011 - 16:22)

Non je n'ai pas dit ça.

J'ai dit que les éléments chargés par Ajax que tu veux "intégrer" au DOM, et bien tu dois utiliser live() dessus.

Dans mon code, le commentaire // Ta fonction correspond à la fonction que tu veux attribuer à un élément chargé par Ajax.
Si tu veux attribuer sur un bouton avec l'ID "button", et que ce bouton est chargé par AJAX il faut faire :

function postnews(info_message)
{
   $.ajax({
     type: "POST",
     url: "postnews.php",
     data: '&info_message='+info_message,
     success: function(data) {
     $('#submid').html(data);
   }});
}

$(document).ready(function() {
    $('#button').live('click', function() {
        alert('Clic ok !');
    }
});
});

l'objectif est simple, tu as un élément, tu y ajoutes du HTML à l'intérieur.

avec la fonction en question, tu analyse ce qui s'y trouve (et uniquement ce qui a été ajouté)

du genre :

$.fn.formAnalyse = function() {
  $(this).find('.input').css('color','red');

  // tu peux aussi utiliser un $(this).find('.elementPrecis').click() ... (sans live() du coup)
};

tu comprends ici que le texte de tes champs de formulaire sera rouge, alors que si cette couleur avait été définis par JS avant l'ajout via .html(), tes champs n'auraient pas été rouge.

Dans mon cas, j'utilise une fois

$(document).formAnalyse(); pour les formulaires présents dès l'affichage de la page
puis
$('.elementAjoute').formAnalyse(); où .elementAjoute contient le formulaire récemment affiché (en Ajax dans mon cas).

Evidemment, l'objectif est par exemple de charger un éditeur de texte lorsque je charge un textarea comprenant une certaine class. (et non d'y mettre une simple couleur de texte )

Oki merci beaucoup pour toutes ces précisions qui vont beaucoup m'aider pour la suite, je vais faire en sorte d'appliquer tout ça rapidement, c'est très gentil de ta part d'avoir pris le temps de tout m'expliquer