2011-08-23 6 views
5

J'utilise un plugin jQuery, il obtient des données à partir d'un URL, récupère, calcule et écrit des données dans un div.lorsque le travail d'une fonction est terminée

Je veux copier ce div contenu à un autre div, lorsque ces fonctions font son travail.

par exemple:

$("#div1").myfunction(); // it gets and calculates data and adds to #div1 . it needs 2-3 seconds to be done 
var contents = $("#div1").html(); // when myfunction() done, copy contents 
$("#div2").html(contents); 

quand je courais ce code, je n'avais pas de nouveaux contenus dans #div2.

+2

Est-ce que 'myfunction' faire une requête Ajax? –

+0

Si 'myFunction()' se termine de manière asynchrone, vous devrez utiliser un rappel pour déclencher la copie. –

+0

@ karim79: et les appels ajax effectués par jquery peuvent être * synchrones *. Donc - non, ce n'est pas si clair. – zerkms

Répondre

5

vous devez avoir myfunction prendre un paramètre de rappel qui il exécute une fois que la demande est faite

function myfunction(cb) 
    $.ajax({ 
     type: "get", 
     url: "page.html", 
     success: function(data){ 
      $("#div1").html(data); 
      if(typeof cb === 'function') cb(); 
     } 
    }); 
} 

myfunction(function(){ 
    $("#div2").html($("#div1").html()); 
}); 
+0

Vous devez également mettre une vérification que 'cb' est une fonction valide, comme ici: http://stackoverflow.com/questions/6792663/javascript-style-optional-callbacks/6792694#6792694 – zerkms

+0

en supposant que vous voulez qu'il soit un paramètre optionnel. –

+0

tant qu'il est javascript et chaque paramètre est facultatif par définition - oui, ce genre de vérification serait obligatoire – zerkms

2

Vous aurez simplement besoin de mettre cette ligne:

$("#div2").html($("#div1").html()); 

dans le rappel de succès du code ajax mis en œuvre myFunction, afin d'assurer que l'opération se produit une fois que le client a reçu la réponse et insérée dans le DOM.

0

Si vous êtes une écriture du plug-in, vous devez soit coder en dur dans la fonction de rappel AJAX ou autoriser l'envoi d'une fonction de rappel avec les options.

Si vous avez aucun contrôle sur le plug-in, vous devrez interroger constamment votre div pour voir si elle a été mise à jour:

var oldHTML = $("#div1").html(), 
    counter = 0; 

$("#div1").myfunction(); 

copyHTML(); 

function copyHTML() 
{ 
    var newHTML = $("#div1").html(); 

    // we don't want this function to run indefinitely 
    if (++counter > 15) return; 

    if (newHTML == oldHTML) 
     setTimeout(copyHTML, 1000); 
    else 
     $("#div2").html(newHTML); 
} 
+0

Si un plugin n'offre pas de paramètre de rappel, vous devez vous poser des questions sur sa qualité ... De plus, ce n'est pas sorcier d'ajouter le vôtre. Mais comment votre code fait-il face à une demande qui a échoué? –

+0

@ilia choly: Tout à fait raison! Cependant, en l'absence de quelque chose de mieux, j'opterais pour cela. Je pourrais cependant augmenter le délai d'attente (ou l'augmenter par la suite à chaque appel). Je l'ai ajouté à l'avertissement cependant ... –

+0

@ilia choly: Ajout d'un compteur pour stopper l'exécution après x tentatives infructueuses. –

1

Ajax callbacks (tels que success) seront dépréciés dans jQuery 1.8 . Au lieu de cela, vous pouvez utiliser l'objet deferred de jQuery pour exécuter (ou annuler) une action qui nécessite d'autres conditions avant d'être exécutée.

var successFunction = function() { 
    var contents = $("#div1").html(); 
    var newElement = $("<div id=div2></div>").html(contents); 
    $("body").append(newElement); 
} 

var failedFunction = function() { 
    // reset element or undo last change 
    window.alert("Update Failed"); 
} 


$.when(
    $.ajax(countParams), 
    doCalculate() 
).then(
    successFunction(), 
    failedFunction() 
); 

Creating Responsive Applications Using jQuery Deferred and Promises

Questions connexes