I have a PHP page which fetches data from a MYSQL database and generates HTML content based on rows returned from the database.

I am adding a new row in database on click of a button using AJAX, Jquery and PHP. After adding the new row, I am using window.location.reload(true); to reload the page. But the HTML elements corresponding to new row are not shown when I click the button. However, if I manually refresh the page using F5, the newly added content is shown.

Anyone knows why this could happen?

Below is the function which I call on click of a button. The page increaseCount.php updates database to increase the count of actors. But the HTML elements corresponding to new count are not shown until I refresh the page using F5.

        function increaseCountOfNewActor(characterName) {
            var actorName = document.getElementById("txt_actor_"+characterName).value;
            var actorImage = document.getElementById("img_actor_"+characterName).src;
            $.ajax( {
                url: "increaseCount.php",
                method: "POST",
                data: {
                    name: actorName,
                    image: actorImage,
                    character: characterName
                },
                success: function( data ) {
                    alert("Vote received");
                }
            } );
            window.location.reload(true);
        }

I have a PHP page which fetches data from a MYSQL database and generates HTML content based on rows returned from the database.

I am adding a new row in database on click of a button using AJAX, Jquery and PHP. After adding the new row, I am using window.location.reload(true); to reload the page. But the HTML elements corresponding to new row are not shown when I click the button. However, if I manually refresh the page using F5, the newly added content is shown.

Anyone knows why this could happen?

Below is the function which I call on click of a button. The page increaseCount.php updates database to increase the count of actors. But the HTML elements corresponding to new count are not shown until I refresh the page using F5.

        function increaseCountOfNewActor(characterName) {
            var actorName = document.getElementById("txt_actor_"+characterName).value;
            var actorImage = document.getElementById("img_actor_"+characterName).src;
            $.ajax( {
                url: "increaseCount.php",
                method: "POST",
                data: {
                    name: actorName,
                    image: actorImage,
                    character: characterName
                },
                success: function( data ) {
                    alert("Vote received");
                }
            } );
            window.location.reload(true);
        }

• javascript
• php
• mysql
• ajax

Share Improve this question Follow edited Mar 26, 2017 at 1:12 Tushar Garud asked Mar 26, 2017 at 1:00 Tushar GarudTushar Garud 3311 silver badge55 bronze badges 6

• pare apples with apples, not apples with oranges ... window.location.reload(true); is equivalent to ctrl+f5 - updating a page content using window.location.reload seems to me a very unusual way of doing it - show some code – Jaromanda X Commented Mar 26, 2017 at 1:03
• Could you show some code? – ArSeN Commented Mar 26, 2017 at 1:03
• I have added some code. But this may not help much. – Tushar Garud Commented Mar 26, 2017 at 1:15
• Can you try location.reload();? @TusharGarud – LFlare Commented Mar 26, 2017 at 1:16
• Tried. Also tried location.reload in many other ways, but did not work. – Tushar Garud Commented Mar 26, 2017 at 1:19

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

The problem is that you are mixing ajax with a plete page reload.

The $.ajax call by default is asynchronous (the first a from ajax...). Therefore it sends a request to increasepostcount.php and then immediatelly reloads the page - not waiting for increasepostcount.php to process the request. By the time you manually refresh the page, increasepostcount.php will have pleted the processing of the ajax call, therefore its result are reflected on the page.

If you use ajax, you should not use page reloading. Use javascript to update that part of the page where these records are displayed based on the results returned by the ajax call.

You need to be sure that the ajax call has done to do what you want, in your case "window.location.reload(true);" is running before the ajax response, due to asynchronous munication between Client and Server to avoid "freezing" on the screen and an unresponsive user experience. You have to put your refresh code on Success ajax response or on done :

   function increaseCountOfNewActor(characterName) {
        var actorName = document.getElementById("txt_actor_"+characterName).value;
        var actorImage = document.getElementById("img_actor_"+characterName).src;
        $.ajax( {
            url: "increaseCount.php",
            method: "POST",
            data: {
                name: actorName,
                image: actorImage,
                character: characterName
            },
            success: function( data ) {
                alert("Vote received");
                // to do here
               //window.location.reload(true);
            }
        } ).done(function () {
   // or to do here
    window.location.reload(true);
});
    }

in your page increaseCount.php consider adding a header at the end.

For example:

if(isset($_POST['name'] && 
   isset($_POST["image"] &&
   isset($_POST["character"]) {
       /* do your stuff here */
       header("Location: /thePageYouWantToRefresh.php");
       exit;
   }