Append div using Ajax call works only in the first load

Question

I'm using YQL + jQuery to get the content from a remote page, I'm able to load the content in the 1st page load but after clicking the page menu to return back to the same page the div not appended.

I was able to achieve the refresh using ele.html(ele.html()), my code is bellow:

$(document).ready(function() {
$("#divAjaxLoading").show();
$.ajax({
    type: 'GET',
    url: "https://query.yahooapis.com/v...",
    dataType: 'xml',
    success: function (data) {
        var result = $(data).find('results').find('.content');
        //debugger;
        $('#Home_CP_Home').html(result);
        $("#Home_CP_Home").html($("#Home_CP_Home").html());
        $("#divAjaxLoading").hide();
    }
    });
});

enter image description here

What is `results` in your `.find('results')`? `results` is not a valid selector as there is no HTML element called `results`. Is it a class or id maybe? — War10ck, Sep 23 '14 at 14:35
He may have registered a custom HTML element. Though that's not likely the case... — Cyril Duchon-Doris, Sep 23 '14 at 14:40
Results is an attribute of **YQL** which contains the HTML content I need (div element from remote page). i.e: — Tarik, Sep 23 '14 at 14:43
Is this the problem? http://stackoverflow.com/questions/2638292/after-travelling-back-in-firefox-history-javascript-wont-run — artm, Sep 23 '14 at 14:45
You can use other ajax functions i.e. `$.get`, `$.post`, `$.ajax` instead of `$().load`. After getting response in success callback, just append that to your div using `$('#Home_CP_Home').append(result);` — Apul Gupta, Sep 23 '14 at 14:49

Nicolas Albert · Answer 1 · 2014-09-23T15:26:32.057

Your result is from a pure XML, it's a XmlDocument implementation and contains XmlElement implementations.

Your page is a HtmlDocument implementation and interpret HtmlElement, not pure XmlElement.

Option 1, transform your Document to a string and let jQuery parse it has an HtmlDocument:

success: function (data) {
    var result = $(data).find('results').find('.content');
    $('#Home_CP_Home').html(new XMLSerializer().serializeToString(result[0]));
    $("#divAjaxLoading").hide();
}

Option 2, walk the XmlDocument to create same elements in HtmlDocument:

function convertHTML(input, output) {
    switch (input.nodeType) {
    case Node.ELEMENT_NODE:
        var i;
        var newelt = document.createElement(input.tagName);
        for (i = 0 ; i < input.attributes.length ; i++) {
            newelt.setAttribute(input.attributes[i].name, input.attributes[i].value);
        }
        for (i = 0 ; i < input.childNodes.length ; i++) {
            convertHTML(input.childNodes[i], newelt);
        }
        output.appendChild(newelt);
        break;
    case Node.TEXT_NODE:
        output.appendChild(document.createTextNode(input.nodeValue))
        break;
    }
    return output;
}

Then use it:

success: function (data) {
    var result = $(data).find('results').find('.content');
    convertHTML(result[0], $("#Home_CP_Home").empty()[0])
    $("#divAjaxLoading").hide();
}

The 1st option works only on the first load after postback using page menu it doesn't work! Please can you review option 2, Nicolas. — Tarik, Sep 23 '14 at 15:19
Is there no problem using convertHTML(result[0], $("#divAjaxLoading").empty()[0]), Nicolas ? Because I don't see a use of $('#Home_CP_Home'). — Tarik, Sep 23 '14 at 15:25
You right, I replaced #Home_CP_Home by #divAjaxLoading > fixed — Nicolas Albert, Sep 23 '14 at 15:27
Thank you I used option 2 it works well in the 1st load but after postback it still shows spinner but without appending div with it's content. — Tarik, Sep 23 '14 at 15:35

score 0 · Accepted Answer · answered Sep 23 '14 at 21:38

0

Because I'm using ASP.NET project the control had attribute runat="server" after making it a normal html div by removing that attribute, I got div appended after postback.

Thank you

answered Sep 23 '14 at 21:38

Tarik

146
2
8

Append div using Ajax call works only in the first load

2 Answers2