update ajax on browsers back & refresh button is press - javascript

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

Related

How to use information from the URL to click on specific button?

I'm working on a group project for a class, and we have a webpage that is split into different tabs, so it is only one webpage, but appears to be different pages using Jquery so the page doesn't have to reload when switching between tabs. The problem I am having is that one of the tabs has a form to get information from the user, then after the user clicks the submit button, the info is sent to the database using php, causing the page to reload. Then depending on if the information was successfully sent to the database, there will be either "success" or "invalid" appended to the end of the URL. If the user submits this form, we want them to automatically come back to this tab on the reload, and I have tried doing this by using a script like this:
<script>
document.getElementById("baseTab").click();
window.onload = function() {
var theurl = document.location.href;
if (theurl.includes("success") || theurl.includes("invalid") {
document.getElementById("infoTab").click();
}
};
</script>
The baseTab is the tab we want to load whenever someone first loads the webpage, unless they have just submitted the form on the infoTab page. This code structure works on a simple test webpage I run on my computer, but when I try to push it to our project repository, it will only do the "baseTab".click, and not click the "infoTab" button even if theurl includes "success" or "invalid". I tried doing it without the window.onload(), but that doesn't work either. Also, if I do
if (theurl.includes("success") || theurl.includes("invalid") {
document.getElementById("infoTab").click();
}
else {
document.getElementById("baseTab").click();
}
then neither of the buttons get clicked. If their is an easier way to do this or you see where I am going wrong, any help would be appreciated. Thanks!

Loading screen while Servlet loads

I have this JSP where I select certain parameters and hit "submit" button, after clicking "submit" I am calling a JavaScript function as below
<body>
<input type=button class="button" id = "submit" value="Evaluate"
onclick="JavaScript:return evaluateFunction()">
</body>
and in the evaluateFunction() I am collecting all the parameters and call a new Servlet in new popup window as below:
<script>
function evaluateFunction(){
var win = window.open('ConfirmEvaluate?parameters,'mywindow','width=600,height=500,titlebar=no')
}
</script>
Now the issue is ConfirmEvaluate servlet takes some time to get the data from database(around 15-20 secs based on size of input) and displays the data in the forwarded JSP(say userdata.jsp)
Now I want to display a loading gif or screen in that 15-20 seconds while the Servlet loads the data from database.
How can I proceed, any help would be appreciated.
I have already gone through some similar questions in SO but none of them is having a specific answer.
You have to use AJAX. Servlet requests like the one in your example are synchronous. Which means it will wait until the processing finishes then do the next activity.
With an AJAX request you can send the request and then do something else without having to wait for it to finish processing, because it is asynchronous.
The way i would approach this is in the following way:
You get the user details in ConfirmEvaluate, and redirect the user to userdata, then once the user is on the page do the AJAX request to fetch the information that takes a long time to process. When the request is made you can show a loading icon but when you get a response from the AJAX request, you can hide this loading icon. Check out this brilliant post on how to make AJAX requests with servlets
I had to implement something like this recently, here is some example code:
<script>
//when page loads, the ajax request starts
$(document).ready(function() {
$(this).scrollTop(0);
getposts(username);
});
//ajax request that will show and hide the loader depending on response
var getposts = function (username) {
var params = {
user: username
};
$.get("../GetUserFeed",$.param(params),function(responseXml) {
$("#user-feed").append($(responseXml).find("feed").html()); // Parse XML, find <data> element and append its HTML to HTML DOM element with ID "somediv".
$('#logo-loader').hide();
if(isBlank(responseXml)){
$('#logo-loader-completed').show();
$('#logo-loader-image').hide();
}
});
};
</script>

Calling other page through jquery

Okay let's say I have a page that inserts data into database
page1.php
//INSERT CODE
//HTML FORM
Whenever I access page1.php, url at the top seems like this
www.abc.com/page1.php
if I am at the home page of website and url seems to be
www.abc.com/home
At the same page I can call other page's div through jquery ajax call but the url seems not to change. Even if i call any other page url won't change at all...
What I am looking for is that a solution that when I call the page1.php to the same page that is home.php url changes like this
www.abc.com/home?view=page1
or
www.abc.com/home/page1
and also do I have to write page1.php functionality of DATABASE INSERT in home.php?
So you can't change the URL without redirecting. What you can do though is to change the hash. This will not redirect, but it will show the value in URL.
// AJAX CALL
// GET NAME OF PAGE YOU CALLED
// SET IT TO "var toHash"
// Whenever AJAX call finishes make a callback function with this code.
document.location.hash = toHash;
// or you can something like this for each time it changes at all.
window.onhashchange = function(){
var doThis = document.location.hash;
if (doThis=="#thisLink")
doSomething();
}
You can change your URL by
var myNewUrl = 'www.abc.com/home?view=page1';
window.history.replaceState('', '', myNewUrl);
jQuery is not required. window.location.replace() will simulate an HTTP redirect.
window.location.replace("http://google.com");

showing "processing" while process request is working

I just wrote a IhttpHandler in ashx page and I´m making a call from a javascript function like this:
function obtenerFichero(id) {
document.getElementById('<%= proces.ClientID %>').style.visibility = "visible";
window.location.href = '../HELPDESK/DescargaFichero.ashx?ID=' + id;
}
Everything is fine but the request takes a very long time to complete and I would like to show a div with a "Processing" message, and hide it once the request is complete
Thanks!
What you want is impossible. What can be done instead is loading the page in an invisible iframe. When loading is complete, we can set the html of the 'main' page to that of the iframe. Till then, we can show a 'loading' animation.

Loading dynamically generated jQuery page after page reload

I have a search script written in jQuery. To submit a query a user presses enter and then a URL for the results page is created which is something like #search/QUERY/. However, when you either reload the page, click a result which goes to a different page or return back from a previous page the search results are no longer there. Why could this be?
My jQuery code is:
$(document).ready(function(){
$("#search").keyup(function(e){
if(e.keyCode==13){
var search=$(this).val();
var query=encodeURIComponent(search);
var yt_url='search.php?q='+query;
window.location.hash='search/'+query+'/';
document.title=$(this).val()+" - My Search Script";
$.ajax({
type:"GET",
url:yt_url,
dataType:"html",
success:function(response){
$("#result").html(response);
}
});
}
});
});
When a user reloads the javascript, all variables and functions are reinitialized. JavaScript does not pass variables from page to page. You either need a server side solution, or use JavaScript storage. The later may not work in all browsers.
This is because you are loading the search results dynamically with an AJAX call. If the page gets reloaded, that information gets lost.
A possible solution would be to store the search query and/or results in the user session. Then you will be able to automatically add the content on page reloads.

Categories