When I use jQuery with ajax (XMLhttpREquest), jQuery doesn't work, why?

Question

I have a XMLhttpRequest when I get the response I want to bind a div that uses jQuery for some animation (tabs), but when I get the response the display the tabs, then the jQuery doesn't work, but if I transfer the block (div) that uses jQuery outside the position that uses Ajax, then it works fine ....

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="";

    }

Where div usual is that uses jQuery like this :

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

Answer 1

Let me try to simplify this for you (with jQuery's ajax()) and hopefully it'll resolve your problem and help you out going forward...

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

But I don't really get your div issue - can you rephrase and explain better?

Answer 2

this is a jQuery ajax call. I've simplified the whole thing:

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

I guess you have to understand how jQuery selectors work, before.

PS: server's response will be a JSON, as I've specified in the dataType.

If your dataType is XML then you have to change your call like this

dataType: "xml",

Your XMLHttpRequest.responseText should contain your XML and you will parse it with something like this:

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

You can find a detailed explanation here and here.

Hope it helps.