jquery traverse html result of $.get(url, function(data){

Question

Hi,

I'm wondering what the correct syntax is to traverse the data returned of this function:

$.get(url, function(data){
            alert(data);
        });

data.find("table") or similar does not work. The returned html data looks like this, parsed from a django template:

<div class="pagination"> 
        <span class="step-links"> 

            <span style="visibility:hidden;">previous</span> 
            <span class="current"> 
                    Page 1 of 2.
            </span> 
            <a id="next" href="?page=2">next</a>  
        </span> 
    </div> 

        <form class="" id="action-selecter" action="" method="POST"> 
        <div class="action_dropdown"> 
            <label>Action: <select name="action"> 
                <option value="" selected="selected">---------</option> 
                <option value="new_selection">Add to new selection</option> 
                <option value="delete_selected">Delete selected projects</option> 
            </select></label> 
            <button type="submit" class="button" title="Run the selected action" name="index" value="1">Go</button> 
        </div> 

        <div id="ajax_table_result"> 
            <table cellspacing="5"> 
                ...
                </thead> 
                    <tbody> 
                     ...

                    </tbody> 
            </table> 
        </div> 
    </form> 

Answer 1

Remember to wrap your results in the jQuery wrapper to use jQuery methods against it.

$.get("script.php", {foo:"bar"}, function(results){
  var table = $("table", results);
  /* from comments: how to get span.step-links */
  var spans = $("span.step-links", results);
}, "html");

Answer 2

I think what you want is

$(data).find("table");

data is a string, but $(data) is a DOM. See http://docs.jquery.com/Core/jQuery#htmlownerDocument.

Answer 3

The data variable is just a string containing the html. I think if you just wrap it in $(data).find('table') that jquery will html parse the string and turn it into dome elements.

Answer 4

$.get("url", function(data){
  var table = $(data).find("table");
  if ($(table).length>0)
    alert("ok");
  else
    alert("error");
}, "html");