How to send parameter via js to a ajax js file

Question

My HTML has this in it:

 <script src="../scripts/jquery-1.8.1.min.js"></script>
 <script src="../scripts/displayTable.js"></script>

The displayTable.js consists of this:

$.ajax({
    url: "https://carcraft.atsbusinessandgames.com/xmls/carcraft_1-10-2Test.xml",
    type: "Get",
    dataType: 'xml',
    success: function (result) {
        $(result).find('Module').each(function() {
             var name = $(this).attr("name");
            var url = $(this).find('url').text();
            var authors = $(this).find('authors').text();
            var version = $(this).find('version').text();
            var date = $(this).find('date').text();
            var description = $(this).find('description').text();
            $("#ModsList").append("<tr>" + "<td>" + "<a href=" + url + ">" + name + "</a>" + "</td>" + "<td>" + authors + "</td>" + "<td>" + version + "</td>" + "<td>" + date + "</td>" + "<td>" + description + "</td>" + "</tr>");
        });
    },
    failure: function() {
    alert("Notify the site owner that the xml file is unreadable.");
    }
});

How would I make it so that I can pass the url as an argument rather than hard-coding it into the js file, this way I can use the same file across many pages on my site?

displayTable.js should define a function that takes the URL as a parameter. Then you call the function. — Barmar
– Barmar, Commented Aug 17, 2016 at 21:42

Barmar · Accepted Answer · 2016-08-17 22:08:29Z

1

Define a function in displayTable.js, then call it after you load the script.

So diaplayTable.js would contain:

function displayTable(url) {
    $.ajax({
        url: url,
        type: "Get",
        dataType: 'xml',
        success: function (result) {
            $(result).find('Module').each(function() {
                 var name = $(this).attr("name");
                var url = $(this).find('url').text();
                var authors = $(this).find('authors').text();
                var version = $(this).find('version').text();
                var date = $(this).find('date').text();
                var description = $(this).find('description').text();
                $("#ModsList").append("<tr>" + "<td>" + "<a href=" + url + ">" + name + "</a>" + "</td>" + "<td>" + authors + "</td>" + "<td>" + version + "</td>" + "<td>" + date + "</td>" + "<td>" + description + "</td>" + "</tr>");
            });
        },
        failure: function() {
            alert("Notify the site owner that the xml file is unreadable.");
        }
    });
}

Then you use it as:

<script src="../scripts/jquery-1.8.1.min.js"></script>
<script src="../scripts/displayTable.js"></script>
<script>
$(document).ready(function() {
    displayTable("https://carcraft.atsbusinessandgames.com/xmls/carcraft_1-10-2Test.xml");
});
</script>

edited Aug 17, 2016 at 22:08

answered Aug 17, 2016 at 21:44

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

6 Comments

carstorm Over a year ago

Nothing is displaying, chrome dev tools console says: VM9266 displayTable.js:20Uncaught SyntaxError: Unexpected end of input Which is the very last line. It's probably something simple, but I am missing it.

carstorm Over a year ago

I added a "}" to close the function, now I'm not getting any errors, but I'm also not getting the table to display.

Barmar Over a year ago

Is #ModsList already in the DOM when you call the function?

Barmar Over a year ago

If the original script works as you've written it, I can't see why my version wouldn't work just as well.

Barmar Over a year ago

Can you provide a link to your page that's not working?

|

bipen · Accepted Answer · 2016-08-17 21:44:43Z

0

Here you go,

function callAjax(url){
    $.ajax({
      url: url,
      type: "Get",
      dataType: 'xml',
      success: function (result) {
        $(result).find('Module').each(function() {
             var name = $(this).attr("name");
            var url = $(this).find('url').text();
            var authors = $(this).find('authors').text();
            var version = $(this).find('version').text();
            var date = $(this).find('date').text();
            var description = $(this).find('description').text();
            $("#ModsList").append("<tr>" + "<td>" + "<a href=" + url + ">" + name + "</a>" + "</td>" + "<td>" + authors + "</td>" + "<td>" + version + "</td>" + "<td>" + date + "</td>" + "<td>" + description + "</td>" + "</tr>");
        });
      },
      failure: function() {
        alert("Notify the site owner that the xml file is unreadable.");
      }
  });
};

Call the function and pass url as parameter where ever you want to call it.

callAjax("https://carcraft.atsbusinessandgames.com/xmls/carcraft_1-10-2Test.xml"); 
callAjax("https://google.com");

answered Aug 17, 2016 at 21:44

bipen

36.6k9 gold badges51 silver badges62 bronze badges

2 Comments

carstorm Over a year ago

Tried the code, although I get no error within the dev console, I also am not having the table display.

carstorm Over a year ago

NVM, discovered mistake, see comment on other answer!

Collectives™ on Stack Overflow

How to send parameter via js to a ajax js file

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related