Pass Variable to Div with AJAX

Question

ORIGINAL POST: Not sure why I am having such a hard time grasping this but I am creating a page that executes a query to list a set of records per a user. I am wanting to create a div that shows the details of a select record from the list. I am attempting to load that record with the following:

    $(document).ready(function(){
    // load index page when the page loads
    $("#form").load("tm-reserves-form.php");
    $("#record").click(function(){
    // load home page on click
        $("#form").load("tm-reserves-form-test.php?ContactID"+$ContactID);
    });
});

Initial form loads but I can not get my .click function to work using the URL parameters.

How can I pass the url parameter from my current query into a div that loads an external page and executes a second query based on that url paramenter (primary id)?

Thanks in advanced for helping me out!

EDIT POST: Found solution, but another issue has arisen.

So I took a crash course this weekend on ajax and I found a working solution here:

    $(document).ready(function(){
    // load index page when the page loads
    $("#form").load("tm-reserves-form.php");
    $("#record").click(function(){
    // load home page on click
        var ContactID = document.getElementById('ContactID').value;
        $("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
        });
    });

So with this example, when the page loads the div form is loaded with a default page. With a click function on the label #record the div #form is than loaded with a parameter of ContactID that is a string value inside of #ContactID. All that seems to work very well (even passes the parameter correctly).

The issue now is that it is only allowing me to pass the first record to my div. Any thoughts on what I need to implement next? I originally thought it was to clear the var but that didn't work either.

Where do you populate `$ContactID`? Where/how specifically is this failing? — David, Oct 07 '15 at 20:58
@David - I am assuming that it fails attempting to load the external page with my URL parameter. Of course, once I remove the paramenter it loads the page just fine. Additionally, $ContactID is stored in a hidden input field with a name and id =ContactID I did try this: 'var ContactID = encodeURIComponent($('#ContactID').val());' — Derek Manson, Oct 07 '15 at 21:04
@DerekManson: Don't assume, debug. What is the AJAX request being made? What is the server's response? Also note Barmar's comment, there appears to be a typo in your code. You're missing the `=` in the query string parameter. — David, Oct 07 '15 at 21:05

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

The original query parameters are not readily available to a running script. So $ContactID is not resolved to an actual value.

See this page on methods for extracting query parameters from the current page: Get query string parameters with jQuery

edited May 23 '17 at 11:52

Community

1
1

answered Oct 07 '15 at 21:03

RoyBass

26
2

score 0 · Accepted Answer · answered Oct 12 '15 at 16:56

 $(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
    var ContactID = document.getElementById('ContactID').value;
    $("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
    });
});

This code solved my initial question, but led to an additional question.

Pass Variable to Div with AJAX

2 Answers2