jQuery / Ajax: How to call function on targeted page after redirect

Question

I am new to Ajax and programming in general and hope someone can help me with this.

I am using the following on a login page. This is used to register new users and will automatically forward them to an index page if their registration was successfully.

So far everything works as intended. How can I call a jQuery function on the targeted index page from this or after that ? What I am trying to do is to show the user an alert telling them they were automatically logged in after the successful registration - so this alert should only show up on the index page if someone gets redirected there from the login page .

I could extend the below link to pass a variable (eg " &origin=login ") and then use PHP to deal with that on the index page but that seems to be a large workaround and I was wondering if this could be achieved easier using Ajax.

I did some research and found some references to Ajax but no clear guideline for that.
Can someone help me with this ?

My Ajax (in jQuery):

case 'registration successful':     
    $.ajax({        
        type: "post",   
        url: "ajax.php",
        cache: "false",
        data: {
            node: 'loginUser',
            email: email,
            pass: pass
        },
        success: function(data){
            // redirect to index page
            window.location.href = baseURL + '/index.php?lang=' + selectedLang;
            // after the redirect I would like to show an alert on the targeted index page
        }
    });
    break;

Many thanks in advance, Mike

Answer 1

If I understood your problem correctly you can make use of localStorage to display alert after redirecting as one below:

$.ajax({        
        type: "post",   
        url: "ajax.php",
        cache: "false",
        data: {
            node: 'loginUser',
            email: email,
            pass: pass
        },
        success: function(data){
            //set a localStorage item
            localStorage.setItem('showAlert','true');
            // redirect to index page
            window.location.href = baseURL + '/index.php?lang=' + selectedLang;
            // after the redirect I would like to show an alert on the targeted index page
        }
});

and in your index page write below code in script tag or in any loaded js file:

$(document).ready(function(){
    var showalert=localStorage.getItem('showAlert');
    if(showalert==='true')
    {
          //show the alert
          localStorage.setItem('showAlert','false'); //set its value back to false;
    }
});

A bit explanation about localStorage

• It stores data with no expiration date.
• Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

---

UPDATE

For your current requirement sessionStorage might suit well as you want to store the data only when the user logs it and want to clear it when he logs out. The usage is similar to localStorage , instead of localStorage.getItem or localStorage.setItem you can use sessionStorage.setItem or sessionStorage.getItem

So what is this sessionStorage

The sessionStorage object exists as a property of the window object in supporting browsers (currently Firefox 3+, Safari 4+, and Internet Explorer 8+). You can place data onto the sessionStorage object and that data persists for as long as that window (or tab) is open. Even if you navigate away from the page that stored the data and then navigate back, the data saved to sessionStorage is still available. Any data stored in sessionStorage is tied to the protocol, hostname, and port of the page that saved the information and only pages sharing the same protocol, hostname, and port can access that data later.

You can read more about sessionStorage here

Answer 2

you can read the query string in JS (you dont have to use PHP for that).

i have used this function before:

function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}

using localStorage may result it problems in older browsers. if you have to avoid using the query string i suggest that you will use a cookie.

this should show you how

Answer 3

        you can use query string as well for this purpose
        case 'registration successful':     
            $.ajax({        
                type: "post",   
                url: "ajax.php",
                cache: "false",
                data: {
                    node: 'loginUser',
                    email: email,
                    pass: pass
                },
                success: function(data){
                    // redirect to index page
                    window.location.href = baseURL + '/index.php?lang=' + selectedLang+'&msg=true';
                    // after the redirect I would like to show an alert on the targeted index page
                }
            });
            break;
    ---------------------
On index page get value from url
$(document).ready(function(){
    var msg=window.location.toString().Split('msg')[1];
    if(msg)
    {
          alert("Welcome....");
    }
});