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.
Related
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()
});
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>
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");
This is a ColdFusion 8 question.
I have a cfm page that has a button that onClick calls the following Javascript function located in the page header:
function confirm_expiration_letters() {
var resultOfConfirm = confirm("Would you like to send expiration and reminder letters?");
if (resultOfConfirm == true) {
document.body.style.cursor = "wait";
window.location="_expiration_letters.cfm";
}
}
On the page that is called, a series of emails are generated, then a PDF report file is generated and displayed using these two lines:
<cfheader name="Content-disposition" value="attachment;filename=#fileName#">
<cfcontent type="application/pdf" file="#docPath#/#fileName#" deletefile="true">
Notice in the JS function that the cursor is changed to "wait". But the program control appears to get lost after the above cfheader call and so I can't find anywhere that I can reset the cursor back to:
document.body.style.cursor = "default";
Do you have ideas on where I can place this to turn off the cursor animation? I tried multiple places and it doesn't work. Once the cfheader and cfcontent calls happen, control of previous window and cursor are lost it appears.
You might try something like this above the cfheader.
<script>
document.body.style.cursor = "default";
</script>
<cfflush/>
The problem is that doing so might (probably will) screw up the cfheaders since cfflush is designed to flush partial results and will include the headers. But it's the only thing I can think of.
If I understand you correctly, you want to have a "wait" cursor whilst the PDF is prepped, and then return to a standard cursor after that.
Don't web browsers do this automatically when you're waiting for a requested document? IE: as soon as you do your window.location, whilst the document is loading, the cursors automatically changes to a "wait", and then once the doc is served, returns to an "auto".
This is what I see (when running code similar to yours). Is this not what you see?
Instead of changing the cursor, display a loading message using HTML/animated gif. When the PDF loads, it will replace the loading screen.
I would suggest having a hidden div containing your loading message, then use JavaScript to make it appear when needed.
Here's some JavaScript. This is how it would be done with jQuery.
function confirm_expiration_letters() {
var resultOfConfirm = confirm("Would you like to send expiration and reminder letters?");
if (resultOfConfirm == true) {
$('#Loading').fadeIn(); //SHOW THE LOADING INDICATOR
$.post('PDFGenerator.cfm', function(returnData){ // AJAX POST, CALLBACK
//RETURN THE FILENAME OR LOCATION OF THE PDF
var FileName = $.trim(returnData); // TRIM THE RETURNED DATA
window.open("path_to_file/" + FileName,"_blank"); // NEW WINDOW
$('#Loading').fadeOut(); // HIDE THE LOADING INDICATOR
});
}
}
I have dynamic page which takes about 8 seconds to load searched data.
Problem is, all browsers remain on old page for those 8 secs & show dynamic page only after it
loads completely.
What I want is preloder image to be shown to the customers until second page gets load.
How can I achieve this?
Thanks
I assume you are loading the second page through AJAX. If so, you'll only be able to display the results after the asynchronous call returns.
However, nothing prevents you from making changes to the page before sending off the AJAX request. The basic structure will be:
var preload = $('<div></div>').text('I am preloading!').insertAfter('somewhere');
$.get(..., function() {
preload.remove();
// insert your real content, received from this AJAX request
});
$('<div id="busy">Loading...</div>')
.ajaxStart(function() {$(this).show();})
.ajaxStop(function() {$(this).hide();})
.appendTo('body');
That's all!
You may want to add some style to #busy tag, but this you can do with CSS.