Когда я использую jQuery с ajax (XMLhttpREquest), jQuery не работает, почему?

Question

У меня есть XMLhttpRequest, когда я получаю ответ, я хочу связать div, который использует jQuery для некоторой анимации (вкладки), но когда я получаю ответ, отображаются вкладки, тогда jQuery не работает, но если я перенесу блок (div), использующий jQuery, за пределы позиции, в которой используется Ajax, то он работает нормально ....

function searchLocations()
{
    var xmlhttp;
    var x, xx, txt;

    var search_text = document.getElementById("txtSearch").value;

    if(search_text != "")
    {
        if(window.XMLHttpRequest)
            xmlhttp = new XMLHttpRequest();
        else
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

        xmlhttp.onreadystatechange = function()
        {
             if(xmlhttp.readyState == 1)
                 document.getElementById("search_locations_result").innerHTML="<p align='center' ><img src='account/images/working.gif'></p>";

             else if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
             {
                document.getElementById("status").innerHTML="";
                //document.getElementById("txtSearch").value="";
                x=xmlhttp.responseXML.documentElement.getElementsByTagName("Result");   
                txt="<table border='0' width='100%'>";

                for (i = 0; i < x.length; i++)
                {
                    txt = txt + "<div class=\"d"+id2+"\" style=\"display:none\">"+
"<div id='adv' class='usual'> "+
  "<ul>"+
    "<li><a href='#t13'>Tab 1</a></li> "+
    "<li><a href='#t23' class='selected'>Tab 2</a></li> "+
   " <li><a href='#t33'>Tab 3</a></li> "+
  "</ul> "+
  "<div id='t13' style='display: none; '>This is tab 1.</div> "+
  "<div id='t23' style='display: block; '>More content in tab 2.</div>" +
 " <div id='t33' style='display: none; '>Tab 3 is always last!</div> "+
"</div> "+

        "</div>";

        }// end for

                document.getElementById("search_locations_result").innerHTML=txt;               
             }
            }
        xmlhttp.open("GET","ajax_search_locations.php?name="+search_text+"&page="+page,true);
        xmlhttp.send();
        }
        else
            document.getElementById("status").innerHTML="";

    }

Где div обычно использует jQuery следующим образом:

$(document).ready(function() {
    $("div.usual ul").idTabs();
});

Answer 1

это вызов jQuery ajax.Я упростил все это:

$.ajax({
    type: 'GET',
    url: 'ajax_search_locations.php',
    data: { name: $('txtSearch').val(),  page: page },
    dataType: 'json',
    complete: function(XMLHttpRequest, textStatus) {
    if (XMLHttpRequest.status === 200)
    {

    var txt= "<div class=\"d"+id2+"\" style=\"display:none\">"+
        "<div id='adv' class='usual'> "+
        "<ul>"+
         "<li><a href='#t13'>Tab 1</a></li> "+
         "<li><a href='#t23' class='selected'>Tab 2</a></li> "+
        " <li><a href='#t33'>Tab 3</a></li> "+
        "</ul> "+
        "<div id='t13' style='display: none; '>This is tab 1.</div> "+
        "<div id='t23' style='display: block; '>More content in tab 2.</div>" +
        " <div id='t33' style='display: none; '>Tab 3 is always last!</div> "+
        "</div> "+
        "</div>";

    $('#search_locations_result').html(txt);
    }
    }
});

Полагаю, вы должны понять, как работают jQuery селекторы , прежде чем

PS: ответ сервера будет JSON, как я указал в dataType.

Если ваш dataType является XML, то вы должны изменить свой вызов следующим образом

dataType: "xml",

Ваш XMLHttpRequest.responseText должен содержать ваш XML, и вы будетеразберите его примерно так:

$(XMLHttpRequest.responseText).find("<your XML tag>").each(function()
  {
    // $(this).attr("<your XML attribute>");
  });

Вы можете найти подробное объяснение здесь и здесь .

Надеюсь, это поможет.

Answer 2

Позвольте мне попытаться упростить это для вас (с помощью jjuery's ajax () ) и, надеюсь, это решит вашу проблему и поможет вам двигаться вперед ...

var search_text = $('#txtSearch').val();

$.ajax({
   type: "GET",
   url: "ajax_search_locations.php",
   data: ({search_text : search_text, page : page}),
   dataType: 'json',
   success: function(response){
      // Do stuff with response here..  
      var markup = '<div>' + response + '</div>';
      $('#search_locations_result').html(markup);
   }, 
   error: function(response) { 
      alert("error: " + response); 
   }
 });

Но я не понимаю твою проблему с div - можешь ли ты перефразировать и объяснить лучше?