Passing a Variable into jQuery AJAX

Question

I'm stuck in a rut. I hope some one can help.

Basically, I am building an AJAX mobile web app with jQuery. I am able to parse a specific XML file just fine, but I want the option to parse other XML files based on the link they were clicked on and load them on the fly into the same DIV or UL.

So:

click on Link1, loads XML1
click on Link2, loads XML2

I would like to be able to do this all client side, so no PHP (or is that a bad idea?). This the jquery code I've been using:

$(document).ready(function() {          

        $("a.load_ajax").click(loadAjax());

        function loadAjax() {
            var fileID = get('?lineID=');

            var dataID = "xml/" + fileID + ".xml"

            $.ajax({
                type: "GET",
                url: dataID,
                dataType: "xml",
                success: parseXml
            });

            function parseXml(xml) {
                $(xml).find("train").each(function() {
                    $("ul#ajax-output").append('<li>' + $(this).find("time").text() + '</li>');
                });
            }
        }           

});

Its just not working at all. I have been passing the variable using GET in the url. So the link in the HTML goes to /?lineID=SBD_to_Union and it should load the XML file called SBD_to_Union.xml

Making sense to anyone? I'd appreciate some help.

Hrm? If there's no server-side code, why would query parameters affect anything? — Matchu
– Matchu, Commented May 27, 2010 at 0:13

tvanfosson · Accepted Answer · 2010-05-27 00:38:05Z

What you seem to be struggling with is obtaining the line from the url in the anchor. Use $(this) to get the href attribute of the clicked link. You could then use a regex, if the url is as described, to remove all but the line id to use in constructing the link for the XML. I presume that the XML is server side and relative to the current url. If not, then you'll need to adjust the path. I've taken the liberty to compress things a bit by putting the functions inline. Edit: and the click handler should return false to prevent the link from actually performing its default action.

$(function() {          

    $("a.load_ajax").click( function() {
        var fileID = $(this).attr('href').replace(/.*?lineID=/,'');

        var dataID = "xml/" + fileID + ".xml"

        $.ajax({
            type: "GET",
            url: dataID,
            dataType: "xml",
            success:  function(xml) {
                $(xml).find("train").each(function() {
                    $("ul#ajax-output").append('<li>' + $(this).find("time").text() + '</li>');
                });
            }
        });
        return false;
    });          
});

Gabriele Petrioli · Accepted Answer · 2010-05-27 00:27:04Z

1

Have you checked if the get function returns the correct data ?

add an alert(fileID); right after the get(..); line..

But why don't you create the urls to point directly to the xml files instead of parsing and creating urls on the fly ?

just make the link in the html to point to xml/SBD_to_Union.xml

answered May 27, 2010 at 0:27

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

4 Comments

tvanfosson Over a year ago

If javascript is turned off, the URL might load a different page with the correct data. That was my assumption anyway.

Scott Over a year ago

Because I want to be able to use other XML files later on with the project, not just this one.

tvanfosson Over a year ago

@Scott - I think he's suggesting that the link href be an XML path that can be used directly.

Gabriele Petrioli Over a year ago

@scott, i just used your example.. i mean that instead of making each link point to ?lineID=somexmlforthislink make it link directly to xml/somexmlforthislink.xml

bobsoap · Accepted Answer · 2010-05-27 00:32:42Z

On first glance, I think your ajax() syntax is a little off.

Are you using query strings for a particular reason? If no, I'd try giving the HTML links the absolute URL to the XML file you are trying to fetch:

<a href="xml/file123.xml"></a>

Then try this:

$("a.load_ajax").click(function(e) {
 e.preventDefault();
 var url = $(this).attr('href');

            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'xml',
                success: function(response) {
                    $(response).find('train').each(function() {
                        $('ul#ajax-output').append('<li>' + $(this).find('time').text() + '</li>');
                }
            });

        });

I haven't tested this, but it should do what you want.

CRice · Accepted Answer · 2010-05-27 00:26:05Z

0

<a href="#" id="link1" class="load_ajax">Link1</a>
<a href="#" id="link2" class="load_ajax">Link2</a>

You can do things depending on the id of the href (or another of its attributes or its href value).

$(function() {
    $("a.load_ajax").click(loadAjax); 
});

function loadAjax()
{
  if ($(this).attr("id") == "link1")
  {
    alert("link1"); //load xml1
  }
  else
  {
    alert("link2"); //load xml2
  };
}

answered May 27, 2010 at 0:26

CRice

12.6k7 gold badges60 silver badges91 bronze badges

6 Comments

Gabriele Petrioli Over a year ago

... and if you have 50 links ?

CRice Over a year ago

there aren't 50 links, only 2 in this example so why write a 50 links solution?

CRice Over a year ago

True, well I was just trying to give Scott some ideas. The rejex answer would be scalable in any case.

Anurag Over a year ago

@Gaby @bobsoap @CRice, Before my computer dies out, this is a link to how real men solve the aforementioned problem of scalability - jsfiddle.net/eF8GC

CRice Over a year ago

:) you have far too much spare time.

|

Collectives™ on Stack Overflow

Passing a Variable into jQuery AJAX

4 Answers 4

Comments

4 Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related