Convert embedded JavaScript into ajax call

Question

I am currently embedding a third-party javascript file directly on my page.

However, the website I'm embedding it from takes a while to respond so it stops the rendering of my site for several seconds.

I'm currently embedding it on my page on the spot where it will write some values:

<script language="javascript" type="text/javascript" src="[third-party site/file.js]"></script>

The response from the embedded script is just some JavaScript:

document.write('<div class="value">Value 1</div><div class="value">Value 2</div>');

I was thinking that after the page loads use jQuery to make an AJAX request and somehow parsing the response so I can get the values I need.

Is there be a better approach?

See developer.yahoo.com/performance/rules.html#js_bottom

Matthew Dean
– Matthew Dean

2012-11-28 23:28:34 +00:00
Commented Nov 28, 2012 at 23:28 — Matthew Dean
– Matthew Dean, Commented Nov 28, 2012 at 23:28

Ricardo Souza · Accepted Answer · 2012-11-28 23:31:26Z

1

You can place this script inside a hidden element on the end of the body (just before </body>) and, after the page has loaded, move it to the desired location with jQuery.

    <div id="hiddenElement">
        <script type="text/javascript" src="[third-party site/file.js]"></script>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#hiddenElement").appendTo("#someOtherElement");
        });
    </script>
</body>

Another solution would be to use jQuery .getScript() to load the script in the desired location as you said and @James McDonnell said.

answered Nov 28, 2012 at 23:31

Ricardo Souza

16.5k6 gold badges40 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James McDonnell · Accepted Answer · 2012-11-28 23:30:31Z

0

$(document).read(function()
{
  $.getScript(/* src */)
});

This will run after the page has loaded.

$.getScript()

answered Nov 28, 2012 at 23:30

James McDonnell

3,7101 gold badge23 silver badges26 bronze badges

2 Comments

Andy T Over a year ago

But if the return of the script is "document.write..." how will I be able to place the values in the location that I want. It seems that using $.getScript() will write the values where it was called from???

James McDonnell Over a year ago

You could just place the <script> tags where you want them in your page. Other then that you're in a pickle.

cssyphus · Accepted Answer · 2012-11-28 23:45:14Z

Perhaps this could be part of your solution. Here is a stand-alone jQuery example where a button is used to trigger a change event on a DIV. This example just shows you how to access the html content of the div and to see how to manipulate/change it. This is not a solution for you but parts of it might be useful when combined with rcdmk's and James' ideas.

<html>
    <head>
        <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#button_test').click(function() {
                    $('.value').html('New stuff').change();
                });
                $('.value').change(function(){
                    $('div').each(function() {
                        alert($(this).html());
                    });
                });
            });
        </script>
    </head>
<body>


<div class="value">Value 1</div>
<div class="value">Value 2</div>
<button id="button_test">Click me</button>

Collectives™ on Stack Overflow

Convert embedded JavaScript into ajax call

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related