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()
});

Can I submit a form using jquery/ajax to a php script that returns a file?

I have a PHP script that is using PHPExcel. It generates an xlsx file for download. However, this takes quite a bit of time depending on the paramters that the users selects. I am wondering if I can submit the paramaters to via ajax, show a "loader" image after submitting it, but once the file is complete, return the file for download.
Here is what I tried, but it didn't work:
$(document).ready(function(e) {
$("#reporting-export-form").submit(function(e) {
$("#loadingImage").show();
var url = "reporting-export-download.php";
$.ajax({
type: "POST",
url: url,
data: $("#reporting-export-form").serialize(),
success: function(data)
{
return data;
$("#loadingImage").hide();
}
});
e.preventDefault();
});
});
UPDATE
So I think the consenhsious is that it cant' be done. So I have another idea that is working 99% and fakes an ajax experience, but with 1 glitch. I put an iframe on the page. I then set the target of my form to be that iframe. When it submits, the page stays on it's current page and when the PHPExcel file finishes it presents the file for download. So then I added this jQuery code to my page:
$("#reporting-export-form").submit(function(e) {
$("#loadingImage").show();
});
And that works great as well. Now I want to hide the loading image once the file is either downloaded or cancelled. So I added this code to the page that outputs the file:
$(document).ready(function(e){
$('#loadingImage', window.parent.document).hide();
});
That doesn't work. If I remove the PHP code that outputs the file, then it does remove the loading image after the iframe loads, but as long as I try to output the php file in the iframe, the javascript doesn't seem to work. Any ideas?

AJAX stop working on loading same site different PHP id

So i have a website that I'm doing for a school project. It's supposed to be like PasteBin. So on the right theres a different div (Uued koodid) that shows newest pastes. On click, they are supposed to show what they include using AJAX to refresh the left div. This only works for 4 times and then stops, but URL is still changing. After refresh it changes again and works again for 4 more times.
In main.js i have
...
$.ajaxSetup({ cache: false });
...
$(".uuedKoodid").click(function () {
$(".left-content").load(document.location.hash.substr(1));
});
...
EDIT:
Also other AJAX functions work. If I log in, I can switch between settings and profile perfectly but still cannot watch new codes

When you replace right menu with new code (from ajax call) you don't attach click event again on .uuedKoodid items so they don't do anything. You need to attach event again or attach it like this:
$(document).on('click', '.uuedKoodid', function () {
$(".left-content").load(document.location.hash.substr(1));
});
Edit:
As you noticed this will cause small problem. onclick event run before browser run standard link action. First you load ajax and then browser changes address. This way you are 1 action behind. Better solution than reading with delay (setTimeout) i think would be to read address directly from link:
$(document).on('click', '.uuedKoodid', function () {
var url = $(this).attr('href');
$(".left-content").load(url.substring(url.indexOf("#")+1));
});

jQuery - Open Links In New Tab form submit

This method basically open a new web page in new window where the Url comes in e.result parameter , Here I want to open the same window in New Tab not in new window.
$("#formMain").attr("action", e.result);
$("#formMain").attr("method", "post");
$("#formMain").attr('target', '_blank');
$("#formMain").submit();
any suggestion will be highly appreciated

Unfortunately, you cannot set this property from JavaScript. It is the browser which decides whether to open the link in a new window or a new tab according to its settings.

Generally speaking, it is unwise to submit a form to a page that the user will see because it can cause multiple submissions (if the user goes forward/back, they reopen the tab, etc). Since you are using jQuery already, use $.post() or $.get() instead. (See http://api.jquery.com/jQuery.post/ and http://api.jquery.com/jQuery.get/). The script located at e.result should simply handle the form submission (save stuff to a DB, probably) and return a result. The user would then see a separate page that is based on that result.
So your code would look something like:
$("#formMain").submit(function() {
return false;
});
function submitForm(url)
$.post(url, $("#formMain").serialize(), function(result) {
window.open('resultPageURL&result='+encodeURIComponent(result), '_blank');
});
}
submitForm(e.result);
Obviously the format of the result is up to you - you could just as easily return a json object or the url of the result page if you wanted, using:
try {
var obj = $.parseJSON(result);
window.open('resultPageURL&'+JSON.stringify(obj), '_blank');
} catch (e) {
alert('Not a valid JSON result');
}
or
window.open(result, '_blank');

I have a same request from my client, client want to open action in new tab we succesfully done that work by adding target= "_blank" to form attribute but we encountered another problem then.. after we submit form it open cart first time but when we click on submit button again it not open cart page again after searching for solution i finally made a solution for me..
Now i made jquery which open action url in new tab on submit button form after a delay of 1 second and this function works like a charm..
here is my click page Page Link
My Code:
jQuery(document).ready(function(){
jQuery('.pagefly-container form').on('submit',function(e){
setTimeout(function () { window.open('https://baaboo.shop/cart','_blank');},1000);});})

jQuery: submit() not working on history:back

I'm using jQuery's submit() method to do some basic form validation before the user is sent to the next page
$(document).ready(function(){
$("form").submit(function() {
// form validation, set errors_detected = true on errors
if(errors_detected)
{
alert("error");
return false;
}
});
});
The problem is that if the user has passed the validation and clicks the Back button in the browser, the jquery code stops working. I'm using Opera.

Because usually when the user hits the back button, the browser shows the cached copy of the page, and doesn't run the $(document).ready() stuff again, AFAIK.
Not sure of the best way around this. Maybe setting a no-cache header?