Reload page into another page after AJAX call

Question

See: AJAX query isn't functioning when passed a string for my previous question - that was resolved and this is a follow-up to another thing that is now confusing me.

My initial page loads, there's a drop-down menu, the user selects a name and that name is sent over to another page to load it inside of a DIV on the main page. This all works. There's an update button:

<form id="updateChanges" method="POST" action="update.php">
<input class="button" name="update"<?= $LineID ?>" type="submit" id="update" value="UPDATE">

and when it's clicked, it launches the JavaScript file to do the AJAX call without refreshing the entire page.

$(function() {

    // Get the form.
    var form = $('#updateChanges');

    // Set up an event listener for the contact form.
    form.submit(function(event) {

        // Stop the browser from submitting the form.
        event.preventDefault();

        // Serialize the form data.
        var formData = form.serialize();

        // Submit the form using AJAX.
        $.ajax({
            type: 'POST',
            url: form.attr('action'),
            data: formData,
            success: function() {
                console.log("success!");
            }
        });
    });
});

This works too.

What's confusing me now is how to get the "final page" to refresh and show the updates that the person has made to the database. I've tried a variety of things but everything is causing a full page refresh, which I can't have.


|_______________________________|
|          ajaxtest.php         |
|                               |
|   _______#DIV____________     |
|   |    getuser.php       |    |
|   |                      |    |
|   |                      |    |
|   |______________________|    |
|_______________________________|

I need something inside of the success function that allows me to say "refresh getuser.php?q=John%Done inside of this DIV on ajaxtest.php" but nothing I've tried works.

I can't do something like this...

success: function () {
setTimeout("window.location = 'getuser.php'",100);

because the original string that I passed is not in this JavaScript file, and that only solves half my problem. If I just set the code to getuser.php?q=John%Doe it works, but it loads THAT as the main page, not as a page inside the DIV on the primary page.

I'm lost as to how to solve this....

Maybe http://api.jquery.com/load/ can help you load ajax request content inside your `div`. — dreyescat, Oct 31 '14 at 16:15
My idea was to create a function that would fire whenever #updateChanges was activated. I don't see anything about a document ready function in my code? — lordterrin, Oct 31 '14 at 16:20
//I don't see anything about a document ready function// `$(function)` is a shortcut for `$(document).ready(function)`. Also it turned out I was reading your code wrong because of the indentation [I fixed it]. — amphetamachine, Oct 31 '14 at 16:22

score 0 · Answer 1 · answered Oct 31 '14 at 16:16

0

I would look into PHP includes. It sounds like you do not want to visit that page so simply use an include inside your php file that you ajax accesses. That way you can use whatever logic you need to in the php page.

After the success do a JQuery call to whatever div you want to change.

answered Oct 31 '14 at 16:16

Eric Anderson

358
2
4
15

Interesting - let me read up on this. I'm not familiar with the include statement. Thank you for your guidance! – lordterrin Oct 31 '14 at 16:22

Larry Lane · Answer 2 · 2014-10-31T16:30:03.273

0

If you have another php page with a script that will just read the database table with a select statement you could then put a JQuery get function withing your success function.

So on success you could do something like this.

success:function(){

$.Get("readDatabase.php",function(results){


   //replace the html of the page with results
   //change the selector id to the id of the div on the
   //page you want to update
   $("#results").html(results);


}

});

edited Oct 31 '14 at 16:30

answered Oct 31 '14 at 16:24

Larry Lane

2,141
1
12
18

`$("#results` <- missing a `"` here. – amphetamachine Oct 31 '14 at 16:26
But how do I incorporate the currently-selected name from the original database into this? When the user selects "John Doe" as the user, the page `getuser.php?q=John%Doe` loads, then in getuser.php I have `$q = $_GET['q'];` and `$sqlPM= "SELECT * FROM report WHERE PMName = '".$q."' and REGNSB <> 0.000 ORDER BY TrackNumber ASC Limit $LimitStart,$LimitItems";` Even if I use your code, I'm not sure how to pass that original string into the file. – lordterrin Oct 31 '14 at 16:36
Where is the original string coming from the html form or the php page that has the MySQL query? In your success:function() part add a variable such as data to it like success:fuction(data) then you can call the result of the ajax post within your success function. – Larry Lane Oct 31 '14 at 16:40
it's just coming from the URL. The DIV on ajaxtest.php that getuser.php loads into: `$("#txtHint").load( "getuser.php?q="+encodeURIComponent(str));` Then, on getuser.php, we have the `$q = $_GET['q'];`. So on getuser.php we have $q defined as a string, but I'm not sure how to pass that over to the JavaScript file. – lordterrin Oct 31 '14 at 16:45
There seem to be several posts about this very issue here on StackOverflow, like . I'll read over these and see if I can figure it out. – lordterrin Oct 31 '14 at 16:47
So I settled on using a cookie, as I understood this. I've passed the variable from my getuser.php page into my Javascript file, but I don't understand your answer. The logic of it makes sense - .Get getuser.php?q=John%Done, then add that into a function called results. Then, put that into a DIV named #txtHint on the page ajaxtest.php. I can't figure out the syntax though... – lordterrin Oct 31 '14 at 17:34

Reload page into another page after AJAX call

2 Answers2