jquery returning null - why?

Question

I am using jquery ajax $.get which calls a php script on my server and retrieves content from another site (domain). It return's the full web page ok. I then want to extract html data from the 'center' tag using the .find() method, but I am having some issues.

$("#btnGetData").click(function(){
  $.get("pgiproxy.php",{ data: $("#formdata").serialize() },
    function(result) {

      alert($(result).find('center').html()); 

      val = $(result).find('center').html();
      alert(val);

      $('#BFX').html(result);
      alert( $('#BFX').find('center').html() );  

    });
});

The first 2 methods both return 'null', but when I insert the ('result') html into the #BFX div it displays correctly on my monitor, the final alert works correctly, it find()s the 'center' tag and displays the html data in the alert.

Can anybody see why I get 'null' returned (as in the first 2 alerts) when trying to 'find()' the 'center' tag from the returned ajax data 'result'.

Any help is appreciated

Nic.

Answer 1

The contents of result here are going to depend on the MIME type of the response, as mentioned here. If result is just text, the $() function is going to treat it as a selector.

Answer 2

you should try this:

$("#btnGetData").click(function(){
  $.get("pgiproxy.php",{ data: $("#formdata").serialize() },
    function(result) {
      var temp = $('<div/>').html(result);

      alert(temp.find('center').html()); 

      val = temp.find('center').html();
      alert(val);

      $('#BFX').html(result);
      alert( $('#BFX').find('center').html() );  

    });
});