Reload url in javascript with ajax

Question

I'm trying to refresh an affiliate URL which is inside a piece of JavaScript with AJAX, but I can't get it to work.

Here's the code:

<script type="text/javascript">
    (function() {
        var mdWidgetUrl = "https://herecomestheurl";
        var s = document.createElement("script"), 
            s1 = document.getElementsByTagName("script")[0];
        s.type = "text/javascript";
        s.async = true;
        s.src = mdWidgetUrl;
        s1.parentNode.insertBefore(s, s1);
    })();
    function fetchdata(){
        $.ajax({
            url: 's.src',
            type: 'post',
            success: function(data){
                // Perform operation on return value
                alert(data);
            },
            complete:function(data){
                setTimeout(fetchdata,10000);
            }
        });
    }        
    $(document).ready(function(){
        setTimeout(fetchdata,10000);
    });                
</script>

What I'm trying to do is to AJAX reload the URL, which is known as "mdWidgetUrl", every 10 seconds without refreshing the whole page. This code doesn't work, because I don't know how to tag the s.src within the AJAX function.

Answer 1

Let's have a look to the different settings of your AJAX call:

url:

When you try:

url: 's.src',

you are not passing the content of the src property of the s object; you are literally passing the string "s.src". But even if you do:

url: s.src,

it won't work because s is out of scope. s was declared inside an IIFE ( (function() {... ) and it lives just inside it. You can not access it from outside.

Instead, after you create your s script, you can give it an id. Like this:

var s = document.createElement("script");
s.id = "mdWidgetScript";

Then, you can easily retrieve the value of the src attribute from the ajax call:

$.ajax({
  url: $("#mdWidgetScript").attr('src'),

Note that using an id is not mandatory. You could find the script like you found s1, selecting the first element with a <script> tag:

url: document.getElementsByTagName("script")[0].getAttribute("src");
// or with jQuery
url: $("script:eq(0)").attr('src');

I just find using an id a cleaner and more bulletproof way.

type:

It is an alias for method. You are retrieving data from the server, not sending to. Switch POST to GET (or leave this setting out, since GET is the default). Read this question about the differences.

dataType:

You should set the dataType accordingly (check this question). If the URL points to a script, use dataType: "script",. Actually, you could use $.getScript() which is a shorthand method for this kind of AJAX call.

---

If after properly tuning your settings you still have troubles:

• Check for errors in the console.
• Ensure the data being send is well-formed
• Read this other questions:
  • Why does jQuery insist my plain text is not “well-formed”?
  • jQuery.ajax success callback function not executed