Ajax callback refresh div

Question

I implemented an Ajax callback function to update div(declare) on my web page.

It works fine, but the current problem is that the Ajax call function updates the declaration div, however, after overwriting the contents, the Javascript functions in this content do not load it. Therefore, my switch function in the table does not work after the contents of the update.

My ajax call function

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);
};

If successful, it updates the content to transfer it to my div

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
        }
    }
};

It works, it writes new content using Javascript, but Javascript functions do not load it.

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>

If I execute location.reload, the Javascript functions work. But I do not want to refresh the page.

Any ideas?

Answer 1

/ , , document.ready, :

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();
  });
});

.live(), click . , AJAX, loadFunc , / , :

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

Answer 2

, . .

  $('.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();

   });

. . , AJAX . , head ..

Answer 3

, , HTML Javascript . HTML innerHTML. javascript JS , :

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

Answer 4

, , document.ready ajax-. document.ready, Uoli, , $(document).ready(() { .