Javascript code dosn't work after ajax request

Question

Я перезагружаю страницу с помощью ajax, но у меня есть проблема, что код javascript работает только в первый раз, после того как обновление не работает, я использую этот код javascript для ajax:

function showUser(str, pageno, type, sub) { 
    if (str == "" || pageno == "" || type == "" || sub == "") { 
     document.getElementById("txtHint").innerHTML = ""; 
     return; 
    } 
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
     } 
    } 

    xmlhttp.open("GET", "<?php echo $view['router']->generate('listing') ?>?page=" + pageno + "&genre=" + str + "&cat=" + type + "&subcat=" + sub, true); 
    xmlhttp.send(); 
} 

и на странице листинга я делаю так:

$(document).ready(function() { 
    alert('test'); //I see alert message only at the first time I run the page 
    $("#category-table").tablesorter(); 
}); 

Кто-нибудь есть идеи?

Answer 1

Если вы используете jQuery ajax, он не только исправит любые проблемы с перекрестным браузером, которые могут возникнуть, вы также получите удобные обратные вызовы.

Ваша проблема заключается в том, что готовое событие не запускается на документе после запроса ajax. Поэтому вам необходимо использовать обратный вызов для запроса ajax, поэтому после его завершения вы можете повторно запустить плагин tablesorter.

Вы можете сделать это, повторно позвонив этому плагину, после того как вы присвоите текст ответа DIV html. Однако, так как у вас есть JQuery, вы можете сделать вещи намного проще для себя

Поменяйте свой FUNC к этому:

function showUser(str, pageno, type, sub) { 

    var ele = $('#txtHint'); 

    if (str == "" || pageno == "" || type == "" || sub == "") { 
     ele.html(''); 
     return; 
    } 

    ele.load("<?php echo $view['router']->generate('listing') ?>?page=" + pageno + "&genre=" + str + "&cat=" + type + "&subcat=" + sub, function(){ 

     $("#category-table").tablesorter(); 

    }); 


} 

Answer 2

Попробуйте

function showUser(str, pageno, type, sub) { 
    var $txtHint = $("#txtHint"); 
    $txtHint.empty(); 
    if (str && pageno && type && sub) { // assuming none of them are 0 
    $txtHint.load("<?php echo $view['router']->generate('listing') ?>", 
    {"page":pageno, "genre":str,"cat":type, "subcat":sub}, 
     function() { 
     $("#category-table").tablesorter(); 
     } 
    ); 
    } 
}