We Keep Coding

update ajax on browsers back & refresh button is press

Its my first web application building with jsp , jstl using ajax as to make music player play throughout the site. i have many ajax req in single page . when i click on that its works all fine but when ever i refresh it takes me to blank content page in this code "Djpage.jsp" with out any content as requested in ajax i know as for url it will show but i researched a lot and tried but its not working and when i click button it does not respond only url is changed .
Need help and explanation how do i achieve this -
Show ajax data whenever refresh button is trigger.
Forward and backward button should work and show the ajax content.
Hope you get My problem
Below is on of my ajax req code -
$('li.box').on('click', function(){
$(this).children("form").submit();
var form = $(this).children("form");
var url = 'Djpage.jsp';
var Djname = $(form).children('input[type=hidden][name=inputName]').val();
$.get(url,{inputName:Djname},function(data){
$("#cssSlider").hide();
$("#tabscontainer").hide();
$("#dj_loard").html(data);
$("#dj_loard").show();
var newTitle = $(data).filter('title').text();
document.title = newTitle;
window.history.replaceState({html:"Profilepage.jsp"},null, url);
});
});

You can call functions (to make ajax request) on page load in order to fetch corresponding data of each section.
For e.g.,
$(function(){
// functions to be triggered on page load
abc();
xyz()
});

Add URL parameter on loading the page

I have a page where there is a form which is used to Add / Edit Addresses.
In the right section of the page, there is a saved address Which has Edit link and it gives call to the same page URL with adding a new parameter say "billingID.XXXXX".
After clicking on this link, page is re loaded with the default address data auto filled.
I need this to happen on the first time load. I tried triggering click event on this Edit link on load, but I suppose it is not allowed by jQuery.
What are the other options I have with jQuery / javascript to add this URL parameter on load of page.?

You could try the Javascript History API.
https://developer.mozilla.org/en-US/docs/Web/API/History_API

It depends on what you want to do, I didn't understand you quite clear.
If you need the page to be reloaded and show the page by url, you can get 'href' value by jquery and then call window.location = $('.mylink').attr('href') + '?billingID.XXXXX';.
If you just want to replace url in browser panel, you can use History API as Kahuna suggested. E.g. you can call
window.history.replaceState(null, document.title, window.location.path + '?helloworld=1');
but then you have to update the page contents by yourself, using JS and jQuery.

you can try this:
if(window.location.href == 'requestd page href'){//http://localhost/test/test.php
window.location.href += "?billingID.XXXXX";
}

window.location.replace not working if the same page is reloaded

I'm trying to refresh page on Ajax success.
var lastId = "#" + id;
window.location.replace("/myurl" + lastId);
It is writing the correct URL to my browser but I don't see the changes made. If I refresh (F5) the page, I see the changes correctly because the ajax was correctly sended.
So I think that page won't force refresh if the url is the same.
In this example, I'm already on http://mypage.com/myurl, it is supossed to redirect me to http://mypage.com/myurl#38174 for example, so my browser will focus the DOM element with id="38174".
As I said, if I submit the ajax request, my url changes to http://mypage.com/myurl#38174 and focus id="38174" but I don't see the changes made to that element on my DB, if I hit F5, it focus the same element but with the changes correctly shown.
Why is this hapening?
I've also tried with window.location.href and window.location without success.
If I use window.location.replace('http://stackoverflow.com'); it's sending me to this website correctly...
So I think the problem is when replacing with the same url + some hashtag... maybe?
As I've said, in this case in particular we need to refresh after an AJAX request only if it's a success, yes, it sounds weird and counterproductive but it is needed.

var lastId = "#" + id;
window.location.replace("/myurl" + lastId);
window.location.reload();

Updating a hash from the URL will not trigger a new pageload.
You'll need to listen to the hashchange event in javascript to initiate your ajax call, without the need for your page to refresh. This will give you a better user experience
If you use jQuery, you can use something like:
$(window).on('hashchange',function(){
//Do ajax call here
});

How Can a Remote Form Action URL Be Overridden?

At URL www.here.com/article1.htm, I have Javascript that fills a modal with an HTML login form whose action is www.not-here.com/login.php and authentication works fine, except after completing the login.php action, the browser ends up at www.not-here.com/login.php, rather than remaining at the URL where the modal was activated, www.here.com/article1.htm.
To instruct the browser to remain at www.here.com/article1.htm, I first added id="loginTrigger" in the submit input tag like this:
<input id="loginTrigger" type="submit" name="doLogin" value="Login">
Then, in my Javascript I added a click event handler to override the form's default behavior and remain at the URL detected when the document loaded (modal Javascript is omitted for brevity):
$(document).ready(function(){
hereSecureURL = window.location.protocol;
hereDomain = window.location.hostname;
herePath = window.location.pathname;
hereAnchor = window.location.hash;
hereURL = hereSecureURL + '//' + hereDomain + herePath + hereAnchor;
$('#trigger').click(function(e){
modal.open({content: $form});
});
$('#loginTrigger').click(function(e){
e.preventDefault();
window.location = hereURL;
modal.close();
});
});
How can the browser be instructed to remain at www.here.com/article1.htm and just have the form process and modal close?

When you submit a form action, it's making a POST call to your server. Once validated, your server should then redirect the person to wherever you want them to be.
Some people handle this using a REFERRER param in the POST call, then redirecting to that REFERRER after the user has been authenticated.
so essentially, you should be rendering your form with an action that looks something like this:
<form action="/login.php?REFERRER=/ThePageIwasOn"... >
Your server code would look something like this:
<form action="/login.php?REFERRER=<?php print $_SERVER["HTTP_REFERER"] ?>" ...>
Of course, I don't know what kind of app server you're running, so YMMV.
By the way, this is just one of many ways to do this. If it were me, I'd probably store the value in a session. I don't like exposing values like this. It looks crummy.
Edit: As Sancao mentioned, it's not always a POST request... ok, whatever. Second, he's right, it'll be available in the $_GET variable, since it's a url param, and yes, it probably is better to hide it in an input, especially if you're working on HTTPS.

the problem lies in this part
$('#loginTrigger').click(function(e){
e.preventDefault();
window.location = hereURL;
modal.close();
});
you need to select your submit button by the parentID of the modal itself
then try modal.close(); , if didn't work try modal.toggle();
then you have to check against something in order to reveal information
a cookie or whatever ,
another work around is to send a redirect header from the php after fully authentication to the 1.html page and write down a cookie to tell the browser that everything is fine to not display the modal again

jQuery code not called after window.location.replace( url )

I have a code that after clicking on a link ('#versionPageFromProdLink'), will redirect the page to the index page. The index page has that contains the content. I want to hide this after the page is redirected and show the next div that i have ().
The page is redirected however the jQuery function after the window.location.replace( url ); line is not called.
How will I be able to redirect and call the jQuery after page redirection?
Code:
jQuery( '#versionPageFrmProdLink').click( function(){
window.location.replace( url );
// jQuery code below is not called, <div id="versionMainContent"> is not hidden
jQuery(".versionMainContent").hide("fast", function(){
jQuery( ".versionProductContent" ).show();
});
});

As stated, the location.replace means the code "after" it won't execute. What you will need to do, is append a hash "index.html#divCode" or some such (you could also use a query string in this case) and then detect that onload / on document-ready for the index page, then update the hide/show status there.

This is fundamentally impossible.
Once you navigate to a different page, the previous page, including all of its Javascript, is gone.

You must handle the secondary executation after the redirect in the page you are redirecting to.
Example:
Page 1
jQuery( '#versionPageFrmProdLink').click( function(){
window.location.replace( url );
}
Note during redirection you can pass a query string in the URL to check a condition in the next page.
Page 2
Now that you redirected to the next page. You can place a document.ready function and run what is needed.
$(document).ready(function () {
jQuery(".versionMainContent").hide("fast", function(){
jQuery( ".versionProductContent" ).show();
});

Your design is the problem. Redirecting stops the flow of execution. You can use ajax to make a server call and continue execution.
Or, if you prefer you can perform a redirect and pass a URL parameter like ?hideVersionMainContent=true and perform the hide server side.
There are other ways to accomplish the task, but that should give you a few ideas.

The code after your location.replace operates on the page that you're leaving (if it is ever run at all; changing the location navigates away from the page and may well terminate your code right there).
You'll need to pass the information to display to the new page, and have code on the new page fill in the stats. There are lots of ways to do that:
On the query string
Via web storage (sessionStorage would probably make sense)
Cookies (but don't, it's not what they're for)