load innerhtml of different page in div of another page

Question

I have a template Details.aspx page which has set of dropdown which gets filled in ajax call. i want all these filled dropdown in another page's div

Code:

$.ajax({
    url: "Details.aspx",
    type: 'GET',
    dataType: "text/html",
    success: function (data) {
        $data = $.parseHTML(data);
        console.log($data);
        $("#divDetails").html($("div #tblRegistration", $data).html());
    },
    error: function (xhr, status) {
        console.log(status);
        console.log(xhr.responseText);
    }
    });

Error : parseerror (in console)

When i run Page2.aspx in Net tab of my firebug i came to see only empty dropdown. Why it is not getting filled ? How can i get filled dropdown in Page2.aspx

PS : If i run Default.aspx isolated in browser dropdown gets filles

Answer 1

First, check that your ajax response has valid HTML code, and isn't broken, etc. As broken html can cause undesired results.

Next, use $.parseHTML() to convert the string to an html object.

$data = $.parseHTML(data);
$("#divDetails").html( $("div #tblRegistration",$data).html() );