CODEWITHSUNDEEP
javascriptjqueryajax
krisg
krisg

Reputation: 806

AJAX response has script tags in wrong location

I have an issue on a website where a page content (results) are updated via AJAX. Contained within this AJAX returned content is a script tag which renders the LinkedIN "share" button.

When the page first loads with the initial resultset the layout looks like this:

Social media controls on page load

Each of these buttons is within a left-floated div, and the HTML looks like this in Chrome developer tools:

HTML on page load

As you can see the script tag is appearing where it is supposed to be, in the div, and the dynamically generated span containing the button is just above.

Now, when i append more results via an AJAX request, things go a bit haywire, and look like this:

AJAX returned results

As you can see the LinkedIN button is way out of place, and the reason is apparent when looking at the HTML in developer tools:

HTML from AJAX request

The script tag is not within the div where it appears in the code file, instead appearing after the closing tr tag - and the span with the button is just above.

So, why is this, and more importantly what can be done to ensure that the script tag is where it belongs so that the layout is correct?

FYI - At the foot of the body is javascript which loads the LinkedIn .js file and after the AJAX request for more results completes there is an invocation of the LinkedIn .parse() method which is supposed to parse the full document and render the buttons.

EDIT

The application is built using ASP.NET MVC and the response returned uses the same .ascx control to format the results as the initial page load does.

EDIT - AJAX request used to retrieve extra data

function LoadMore(uri, last, loader, end)
{    
    isLoading = true;
    $(loader).show();
    $.post(uri, function(data)
    {
        if (data != "") 
        {
            $(last).after(data);
            isLoading = false;
            // re-do social media share initialisation on the new AJAX-added content
            gapi.plusone.go('container');
            twttr.widgets.load();
            FB.XFBML.parse();
            IN.parse(document.body);
        }
        else
        {
            $(end).show();;
        }
        $(loader).hide();           
    });
}

EDIT

The actual HTML returned from the server is correct. Viewing the source shows the script tag in the correct location, but viewing the page in Chrome developer tools, as shown in the images above, shows the script in the wrong place in the DOM. This occurs in both IE9 and Chrome.

Upvotes: 1

Views: 557

Answers (2)

Prasanth
Prasanth

Reputation: 3041

Use ajax call like this

$.ajax({ url: 'url',
                type: 'POST',
                data: json,
                dataType: 'json',
                contentType: 'text/html',
                success: function (data) {

                    //you response will be data


                }

            });

Upvotes: 0

Frederik.L
Frederik.L

Reputation: 5620

Are you building the html dynamically ? Maybe it has something to do with misconfigured callbacks. If you are using $.ajax({...}), make sure that the next iteration is specified into the "success:" property to prevent unordered render.

Upvotes: 0

Related Questions