将动态变量传递给jquery语句

Question

so I am trying to post and link to a dynamic URL and am using a jquery redirect to do so. I know this is probably not the best way, and I personally hate being redirected, but it works. Regardless, I am having trouble passing the dynamic url, which is generated based on database values for whichever marker is clicked on, into the jquery post form. Right now, it brings in the last value in the name and id of the last marker in my database, which makes sense to me, but is certainly not what I want to happen.

Here is my javascript code:

downloadUrl("phpsqlajax_genxml1.php", function (data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
    var id = markers[i].getAttribute("id");
    var name = markers[i].getAttribute("name");
    var description1 = markers[i].getAttribute("description");
    var type = markers[i].getAttribute("type");
    var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
    var url = "markerpages.php?name=" + name + "&id=" + id;
    var html = "<b>" + name + "</b> <br/>" + description1;
    var contentString = '<div id="content">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<h1 id="firstHeading" class="firstHeading">' + name + '</h1>' +
            '<div id="bodyContent">' +
            '<p>' + description1 + '</p>' + 
            '<p><a href="#" id="markerpages-link">link to dynamic PHP page</a>' +
            '</p>' +
            '</div>' +
            '</div>';  

Here is my jquery code:

$(document).on("click", "a", "markerpages-link", function () {
        var form = $('<form action="' + url + '" method="post">' +
                '<input type="hidden" name="api_url" value="' + url + '" />' +
                '<input type="text" name="description2" value="' + description1 + '" />' +
                '</form>');
        $('body').append(form);  // This line is not necessary, maybe for IE
        $(form).submit();
    });

Thank you for any and all help. It is greatly appreciated.

Answer 1

The for loop in your javascript code is going to leave the url variable set to the last marker in the markers array, as you've noted. You seem to have cut off the last part of your for loop so I'm not sure what else you're doing with the variables you set, but I assume you're somehow adding them to the DOM.

The best thing to do would be to set some values as attributes in the DOM elements themselves, and have an event handler for the click to look for those values and do the appropriate POST submission accordingly.

Here is an example...

When you add your DOM elements, assign its href attribute to be the url for that marker.

Then your event handler can be something like:

$('a.markerpages-link').click(function(el){
    var form = $('<form action="' + el.attr('href') + '" method="post">' +
        '<input type="hidden" name="api_url" value="' + url + '" />' +
        '<input type="text" name="description2" value="' + description1 + '" />' +
        '</form>');
    $('body').append(form);  // This line is not necessary, maybe for IE
    $(form).submit();
    return false; // so that the link is not followed as it normally would
});