jQuery Ajax loading content from another page of the site

Question

I'm trying to pull the contents of Div from another page of the site I'm working on and update the Div on the current page. I want to do this so I don't need a page reload. The Ajax call I'm making works fine in Firefox, it updates the Div with the content from the other page of the site. The problem is it breaks in IE, when I try to get the HTML from the data being returned using .html() I get null in IE. If I do an alert just on the data being returned, the html shows up.

var divItems = $("#tab-bbp a").attr("href");
$.ajax({
   type: "GET",
   url: divItems,
   dataType: "html",
   success: function(msg){
       $("#persistenslcont").html($("#persistenslcont",msg).html());
       //null in IE, returns HTML in FF
       alert($("#persistenslcont",msg).html());
   },
   error: function () {
       alert("error");
}                   
});

It seems odd this doesn't work in IE. Also, I'm not sure if the is the best technique to do what I am trying to accomplish. Any help would be appreciated.

Edit

When I tried the .load function I still ran into issues with IE below is the commented code. I have numerous alerts to try and figure out what the issue is. It seems #2 should work but in IE returns null.

Is it possible to manipulate the [object Object] or to see what it contains?

var divItems = $("#tab-bbp a").attr("href");
 $("#persistenslcont").load(slItems + " #persistenslcont",
                                    function (data, textStatus, req) {
                                        //returns HTML code in the alert in IE & FF
                                        alert("test 1" + req.responseText);

                                        //returns null in IE - In FF returns proper code
                                        alert("test 2" + $("#persistenslcont",req.responseText).html());

                                        //returns [object Object] same in IE & FF
                                        alert("test 3" + $("#persistenslcont",data));

                                        //returns [object Object] same in IE & FF
                                        var $response = $('<div />').html(data);
                                        var $test4 = $response.find('#persistenslcont');
                                        $('#persistenslcont').append($test4);
                                        alert("test 4" + $test4);

                                        if (textStatus == "error") {
                                          alert("error");
                                        }
                                  });

Answer 1

i think you can make the success function simpler like this:

success: function(msg){
   $("#persistenslcont").html(msg);

   alert($("#persistenslcont").html(msg));

}

Answer 2

You can specify what part of a requested page you want in jquery. I would use the load() function:

     $("#persistenslcont").load($(divItems + " #divcontent");

I think I botched your code, but the basic idea is right and should work in IE. Basically just point the ajax query to the part of the page you want, rather then dealing with messing around inside the HTML of the entire page requested.

Answer 3

The problem with my Ajax call in IE was related to an open <div>. Somehow I didn't check my HTML structure at first. It's just another reason why HTML validation is important!