Webpage UI not updating on refresh after form submission

Question

I am creating a web app in which login can be done from any page. To achieve this I used a modal for login form. On successful login, I want the user to stay on the same page. This is my login verification script.

$.ajax({
    dataType: "json",
    type: "POST",
    data: {
        login: true,
        email: cleanScripts($('#username').val()),
        password: cleanScripts($('#password').val())
    },
    url: "plugins/validator.php",
    success: function () {
        location.reload();
    },
    error: function () {
        $('.error').show();
    }
});

On the header template (where I have the login button) I check whether user is logged in and update the html code as given below

if (!isset($_SESSION['userIdMain']))
   echo '<li>
            <a href="#" onclick="showLoginForm();">
              <i class="dashicons dashicons-lock"></i>
              <span>LOGIN/SIGN UP</span>
            </a>
        </li>';
else echo '<span>Hi, ' . $_SESSION["userName"] . '</span>';

Header template is included in the page using

<?php include 'templates/header.php' ?>

Ideally, on successful login, the page should refresh and instead of LOGIN/SIGNUP button, it should show the name of logged in user. But the UI is not updating. Even after successful login, the page shows LOGIN/SIGNUP button.

When I navigated to another pages, it is working as expected. The UI is not updating for the page from where login is performed. Any idea why this is happening?

Thanks

Yes. When I navigate to another page, its working perfectly. Say, I logged in from contact page. On refresh, the contact page is not getting updated. When I go to FAQ page, its working and UI is getting updated. — Kalesh Kaladharan, Sep 02 '17 at 09:47
Okay so the validator is functioning, but the page is not refreshing. Can you confirm the `success() {}` is executing? Maybe put a console log in to check it — Darren H, Sep 02 '17 at 09:56
I just realised you stated the page is refreshing, my mistake. Maybe it is being returned from the browser's cache. Try reloading the page with a random get parameter appended to the url to force a proper reload from server — Darren H, Sep 02 '17 at 09:58
Even I think its about the cache. But how am I supposed to make it work without any parameters. I've seen many websites do this properly without any additional parameters — Kalesh Kaladharan, Sep 02 '17 at 10:09

Bin Liu · Answer 1 · 2017-09-02T09:48:02.180

0

It seems the code below after Ajax success didn't work.

success: function () {
    location.reload();
},

How about Trying the code below

success: function () {
    window.location.href=window.location.href;
},

if the one above doesn't work either, would you please tell the browser used when this problem appeared?

edited Sep 02 '17 at 09:48

answered Sep 02 '17 at 09:45

Bin Liu

21
5

Ajax code is working and the page is getting refreshed. I am using chrome latest version – Kalesh Kaladharan Sep 02 '17 at 09:47
@KaleshKaladharan By the way ,have you tried [window.location.href=window.location.href;]? Did this give some help? – Bin Liu Sep 03 '17 at 07:21

Bin Liu · Answer 2 · 2017-09-03T08:21:21.010

0

Perhaps the code below is cached by the chrome caching system which thinking the php has never been changed and didn't make a php request.

success: function () {
    location.reload();
},

Try the code below, it will get the server resources without considering whether the resource has ever been changed.

success: function () {
    location.reload(true);
},

Hope this will give you some help.

force-a-reload-of-page-in-chrome-using-javascript-no-cache

according the article above, the result is below:

On IE and FF I found that the following code worked fine;

window.location.reload(true);

However it does not work on Chrome or Safari.

So it seems there are two solutions like below.

Using IE or FireFox instead

Trying the code hinted forom the linked article above

success: function () {
     $.ajax({
         url: window.location.href,
         headers: {
             "Pragma": "no-cache",
             "Expires": -1,
             "Cache-Control": "no-cache"
         }
     }).done(function () {
         window.location.reload(true);
     });
},

edited Sep 03 '17 at 08:21

answered Sep 02 '17 at 10:25

Bin Liu

21
5

This didn't help – Kalesh Kaladharan Sep 02 '17 at 10:54
How about making a confirmation on the settings about catch in the Web Server – Bin Liu Sep 02 '17 at 11:00
Can you please elaborate? I didn't understand. Sorry I am a newbie with php and webpage stuff – Kalesh Kaladharan Sep 02 '17 at 11:24
Then would tell the web server used during this problem? I guess it was apache, wasn't it ?(It is common to use apache+php in webpage development) – Bin Liu Sep 03 '17 at 02:03
@KaleshKaladharan I've edited the answer of this, please check if it may give some help to you. – Bin Liu Sep 03 '17 at 08:22

score 0 · Accepted Answer · answered Sep 05 '17 at 08:52

The issue was related to session_start();. session_start() has to be called on each page. My templates file had session_start() at the top, so it was successfully writing to $_SESSION variable.

This is how it looked.

Main file

<?php
//Header contains login forms

include_once 'templates/header.php';

// All the other codes

$var = $_SESSION['loginData'];

include_once 'templates/footer.php';
?>

Header File

<?php

session_start();

$_SESSION['loginData']=$_POST['loginId'];
?>

Even if session_start() was called from the header file, it won't be available for use in the main file. session_start() has to be called on each file that need access to $_SESSION.

Webpage UI not updating on refresh after form submission

3 Answers3