I have a search form that, once submitted loads the results of the search query on a new page. When you press submit, however, it takes about 10 seconds or so before the next page is rendered, so I'm showing a loading box (via ExtJS) while the user waits for the next page to load.
The problem is in IE9, the border, which uses background images, isn't showing up on the loading box.
I've done some digging around, and I've concluded that for some reason IE9 will not load any of the images specified in the CSS after the form has been submitted (and the next page has begun to load).
If I use the following code to set a timeout of 200 milliseconds before the form is submitted, everything loads fine.
function() {
Ext.MessageBox.wait('Searching for tenants eligible for rent increase...', 'Searching');
setTimeout(function() { document.getElementById('rental_increase_form').submit(); }, 200);
return false;
}
So here's my questions:
Can anyone else confirm that IE9 does not load CSS images on the current page after the next page request has begun? Is this a bug or intended functionality? Can anyone suggest a solution that doesn't involve setting a timeout before submitting a form? That solution seems a little hackish.
Don't have IE here to confirm, but can you just pre-load these images on start of the first page? E.g. make a set of hidden elements that have these background images set in their CSS. That way, you'll have the images loaded and when you show the loading box. Don't know if that is the only issue, though, but you can try to see if it works.
Related
I have a problem. I bind click events to my "a" tags which hides the contents of the page and shows a loading spinner (until the new page has loaded).
The problem of this approach is that when you click the back button of the browser, the browser recovers the last state of the previous page, where you can only see the loading spinner.
It isn't the same for every browser, but for example on an iPad with the latest Safari this is a problem.
An example of how my code looks like is this:
$("a").click(function() {
showLoadingSpinner(".container", "loading new page...");
// hides the div with the container class and
// shows the loading spinner with the text "loading new page..."
});
Maybe I have to somehow replace all of these requests with some kind of ajax request where I can hide the loading spinner after the request has been completed?
Edit:
I am using ASP.net to build the website (no PHP). It's a really complicated and big application with lots of different types of ajax requests everywhere on the page.
Edit 2:
Just to clarify, I'm talking about "a" tags with "href" attributes.
I'm working on a site that provides web access to to legacy data.
The basic flow is for the user to select a query form from a menu, fill out the form, and submit it. The server generates the appropriate HTML and returns it to the browser. So far, so good.
Some reports can take some time to generate. For those reports I display a "processing" indicator when the form is submitted. This indicator is a normally hidden <div> containing an animated icon.
The problem comes when a user uses the browser's Back button to return to the query form. When the browser re-displays the page with the query form, the processing indicator is still visible. The only way to get rid of it seems to be to refresh the page at that point.
Is there any way to hide it after the Back?
You could set a JavaScript event to automatically remove the indicator after the page loads. That way, the indicator won't display unless the script later tells the indicator to show. In order to avoid never displaying the indicator, you could place the code that displays the indicator after the event that automatically hides it, both occurring on the page loading.
I finally have a solution for this that is working well enough in this application.
Some browsers, like Firefox, fire a document.focus event when the page is re-displayed. Others, like Safari, fire a window.popstate event instead.
I now hook both of these events and it works as expected 99.9% of the time.
As far as I could find, you should be able to use pageshow window event:
The pageshow event is sent to a Window when the browser displays the window's document due to navigation.
This includes:
Initially loading the page
Navigating to the page from another page in the same window or tab
Restoring a frozen page on mobile OSes
Returning to the page using the browser's forward or back buttons
<!DOCTYPE html>
<script>
window.addEventListener("load", console.log);
window.addEventListener("pageshow", console.log);
</script>
<p><a href="https://html.spec.whatwg.org/multipage/">Navigate
away</a> (then come "Back")</p>
See also:
Can I use "pageshow"?
The question looks weird, but I would like the explain with every details to make it clear.
I have a web page that I'm working on it. When you click the 'Show' button , It gets some data records from database and show them in the same page but in the different form. (it hides existing form and shows another form)
When I browse my page on Chrome: (version 28.0.15)
I go to my page. Then click 'show' button. After I click the button,
it shows lttle animation which turns around itself next to the browser tab which means 'loading'
Here is the screenshot for Chrome:
Then it keeps showing that 'loading animation' until proper form is completely loaded.
Then it shows the proper form on the page and stops the 'loading' animation.
When I do same thing on firefox(version 22.0) , everything is same as chrome. Works normal.
Here is the screen shot:
It shows 'Connecting' label until proper form is completely loaded.
Then it shows the proper form on the page and stops showing 'Connecting' label on tab.
HOWEVER;
When I do same thing on Internet Explorer (version 10)
It shows 'waiting/loading' label for couple seconds.
Here is the screen shot:
After couple seconds, it is just shown as the page has been loaded. After a minute or minute and a half, it loads the data records and show the proper form.
This makes the user think that button is not working and keep clicking button. Actually its working. Getting results takes around a minute from database, but since Internet Explorer 10 does NOT show that it is still loading, then user thinks its not working.
After detail information ( I hope its clear enough) , my question is:
Is there anything that I can do for this issue? or Can I set this 'loading/waiting' label's time?
Thanks for your time!
I believe what you are looking for is piecon, this plugin shows your favicon as a progress pie chart.
I'm using the colorbox plugin for modal popups. It's working nicely, but there's a main thing about it that seems wrong.
I have a form that pops up, and on submitting (or clicking a link) in the form, this might open another "colorbox" modal. It works smoothly, but there's one thing that bothers me.
As it is, colorbox seems to wait until it receives the response (via ajax) and then shows a "loading.gif" and starts to change size.
To me it makes more sense to have the "loading.gif" show as soon as they are opening a new colorbox modal. (and not just the image, I just mean that whatever happens when you open a new colorbox) It doesn't have to resize (obviously) but it's just annoying because some of my colorbox modals use webservices that are slow, so you might submit a form and nothing happens for literally 1 or 2 seconds. It'd be nice if it just would look like it was loading the next one for that time.
Ideas on how to do this?
It looks like the loading graphic is being shown onLoad, and the script tries to figure out the content type before this point. So if you have a slow web service, it may take time to realize the content type, thus not showing the loading.gif.
I did a quick test, and displaying the gif onOpen seems to work:
$(".myClass").colorbox({
onOpen:function(){
// taken from colorbox.css
$('#cboxLoadingGraphic').show();
},
onComplete:function(){
$('#cboxLoadingGraphic').hide();
}
});
I am making a greasemonkey script and i would like a link to go forward and modify the current html and allow the user to click back to go to the original page.
How might i do this? using jquery + greasemonkey + javascript. Targeting firefox mostly.
-edit- http://jsfiddle.net/ seems to do it. If you write random html in the html section, hit run, change the html and hit run again. You'll be able to click back/forward to see the output change (however the html input box stays the same). I am using firefox to view this. Thats the effect i want.
it appears the magic is done on line 91. Is this submitting a form in a frame (perhaps the results frame?) and that is causing the movement in history?
88 run: function(e) {
89 e.stop();
90 Layout.updateFromMirror();
91 document.id(this.options.formId).submit();
92 this.fireEvent('run');
93 },
I don't know if that is possible at all because it is the browser itself that takes care of the navigation history. A new history item is added only when you visit a new page.
If I am not wrong you would like the user to turn on/off the changes you make to the page without enabling/disabling greasemonkey and reloading the page.
The only solution I see for this is to take care of it yourself. Save any changes you make to the page so that you can restore it and add some UI to the page to make the user turn on or off your changes.
EDIT 1:
It seems that jsfiddle.net loads a new page to do that. Using firebug you can see it is not doing any AJAX request to run the code, it is just loading a new page (maybe the same page, with different parameters, but nevertheless it is loading a page.)
EDIT 2:
Yes, maybe it is loading the page in a frame. As you can see from the HTML:
<iframe name='result' frameBorder='0'></iframe>
But this does not change your situation. If you want your logic to be in your greasemonkey script you can't load a new page. Otherwise you should upload a web page somewhere and make it load in an iframe passing it the HTML you want to modify: this is definitely not what you want to do.
It sounds like you want to use a history manager. You could either track the changes you make and undo them when the user goes back, or possibly call a page refreshing function.