Ajax callback refresh div

Question

J'ai implémenté une fonction de rappel Ajax pour mettre à jour un div (annonce) dans ma page Web. Cela fonctionne très bien, mais le problème actuel est que la fonction d'appel Ajax mettre à jour l'annonce div, cependant, après réécrire le contenu, les fonctions Javascript dans ce contenu ne le charge pas. Par conséquent, ma fonction de bascule dans la table ne fonctionne pas après le contenu de mise à jour.

Ma ajax fonction appel

setInterval("_checkUpdate()", 2000); //2 seconds one call. 

function _checkUpdate() { 
    var callback=new Object(); 
    callback.success=this.checkUpdateonExternalSuccess; 
    callback.failure=this.checkUpdateonExternalFailure; 
    YAHOO.util.Connect.asyncRequest('GET' , '/ci/ajaxCustom/ajaxCheckUpdate',callback); 
}; 

En cas de succès, il mettre à jour le contenu de réécrire ma division

function checkUpdateonExternalSuccess (o){ 
    if(o.responseText!==undefined) { 
     var str=o.responseText; 
     if(str !== 'nocontent') { 
      document.getElementById('updateContent').innerHTML=str; (Write the new content to my div) 
      location.reload(); //Reload the whole page, i do not want that 
     } 
    } 
}; 

Il fonctionne, Recopie le nouveau contenu avec JavaScript, mais le Les fonctions Javascript ne le chargent pas.

Javascript:

$(document).ready(function() { 
    //First hide all the contects except the headcontent 
    $(".content").hide(); 
    $(".headContent").show(); 

    //If user click on the head title, it hide/show content 
    $(".headTitle").click(function() { 
    collapseHeadContent();//reset all 
     var aParentTD= $(this).closest("td"); 
     var aHeadContent = aParentTD.find (".headContent"); 
     aHeadContent.toggle(); 
    }); 

    // If uses click on the title, it has toggle event for the content 
    $(".title").click(function() { 
     collapseContent(); //First reset all 
     var aParentTD = $(this).closest("td"); 
     var aContent = aParentTD.find(".content"); // Content in the same TD with Title 
     aContent.toggle(); 
    }); 

}); 

function collapseContent() { 
    //find the Head content to hide and reset of content 
    $(".headContent").hide(); 
    $(".content").hide(); 
} 

function collapseHeadContent() { 
    $(".content").hide(); 
} 

HTML:

<div id="annoucementTableDiv"> 
    <table id="annoucementTable"> 
    <tbody id="tdContent"> 
     <tr> 
    <td><span id="tdtitle"><a class="headTitle"> Forbidden: Error 403</a></span> <br /> 
     <span class="annfrom">PLC team - 19/08/2010 at 10:30<br /> </span> 
     <br /> 
     <span class="headContent"><P>Due to scheduled maintenance, HOME showed the error 403:<br/> 
    This is now resolved and customers can update again as normal </P> 
     </span> 
    </td> 
    </tr> 
    </tbody> 
    <tbody id="tdContent"> 
     <tr> 
    <td> 
     <span id="tdtitle"> 
    <a class="title">Downloading maps</a> 
     </span> <img src="/euf/assets/themes/standard/images/layout/important.png" class="alert_icon" alt="alert"></img><br /> 
     <span class="annfrom">Sent by 2nd line - 05/11/2009 at 15:30<br /> </span> 
     <span class="content">Since this morning it has been reported that multiple customers are again receiving this error message.<br /><br />This error has been escalated to the relevant teams with the highest priority and is currently being looked into. 
    An estimated time for a fix is not yet available but we will keep you updated. 
     </span> 
     <br /> 
    </td> 
    </tr> 
    </tbody> 
    </table> 
</div> 

Si je fais location.reload, le travail des fonctions Javascript. Mais je ne veux pas rafraîchir la page.

Des idées?

Answer 1

Puisque vous êtes également cacher/montrer les choses, je vous recommande de changement que vous êtes prêt gestionnaire dans une fonction appelée alors l'appeler sur document.ready, comme ceci:

function loadFunc() { 
    $(".content").hide(); 
    $(".headContent").show(); 
} 

$(function() { 
    loadFunc(): 

    $(".headTitle").live('click', function() { 
    collapseHeadContent(); 
    $(this).closest("td").find(".headContent").toggle(); 
    }); 

    $(".title").live('click', function() { 
     collapseContent(); 
     $(this).closest("td").find(".content").toggle(); 
    }); 
}); 

Il utilise également .live() pour définir votre click fonctionne une fois. Ensuite, lorsque vous faites votre charge AJAX, vous pouvez simplement appeler à nouveau loadFunc faire masquer/afficher ou tout autre travail, comme celui-ci:

function checkUpdateonExternalSuccess (o){ 
    if(o.responseText!==undefined) { 
     var str=o.responseText; 
     if(str !== 'nocontent') { 
      document.getElementById('updateContent').innerHTML=str; 
      loadFunc(); 
     } 
    } 
}; 

Answer 2

On dirait que vous avez besoin de la fonction en direct. C'est assez simple.

$('.title').live('click', function() { 
     collapseContent(); //First reset all 
     var aParentTD = $(this).closest("td"); 
    var aContent = aParentTD.find(".content"); // Content in the same TD with Title 
    aContent.toggle(); 

    }); 

Ajoute fondamentalement le gestionnaire de clic à tous les éléments de titre. Même si un autre charge l'événement lui est toujours associé. Vous pouvez l'utiliser pour tous les éléments qui sont chargés par AJAX pendant la durée de vie de la page. Donc, vous faites la même chose pour l'élément de tête et ainsi de suite.

Answer 3

Dans un projet, je vous écris au moment, insérer HTML et Javascript contenu séparément. Le code HTML est inséré comme d'habitude dans innerHTML. Et je suis le javascript dans un fichier JS que je charge dans mon document lors de l'exécution comme ceci:

var newScript = document.createElement('script'); 
newScript.type = 'text/javascript'; 
newScript.src = 'myJavascriptFile.js'; 
headID.appendChild(newScript); 

Answer 4

Enveloppez le code lié à votre table dans une fonction et l'appeler une fois sur document.ready et après que vous ajax-demande. Évitez de déclencher document.ready comme suggéré par Uoli, car il peut provoquer des effets secondaires imprévisibles car tous vos blocs $ (document) .ready (function() {seront exécutés à nouveau