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.
Related
I need to debug Javascript to check which function is called on a specific behavior.
To be more specific, when we click inside an iframe, all the page or at least the iframe is reloaded, so loaded 2 times.
For example, if you take a look at this page:
https://artetcadres.fr/art-et-images/#collection/hopper/
and click on the artist "Klimt", the main page activate a javascript function, display this image on the entire page and reload the iframe content.
I tried with the Chrome Devtools but can't figure out which function is called display the image "Loading..." and reload the iframe.
It's reloaded maybe because the url is dynamically updated. The anchor #collection/hopper/ will become #collection/klimt/.
This strange behavior appeared after an wordpress upgrade.
I am very experienced with jquery, but jquery mobile is very new to me. I am developing an app using cordova and jquery mobile.
So i have a multi page setup in the html, with navigation bars that switch the pages. All works great there, however, i need to load the page content via ajax when the page is changed.
I am managing to do this with a post request to an external web server that generates the content, then caches it inside a local database via the app. I am currently doing this with the "pagebeforeshow" event.
The problem is, when the user clicks the menu item, jquery mobile has already switched the page before the ajax call in "pagebeforeshow" is fired, which means we see a blank page delay while the content is requested.
So my question is: Is there a way to either prevent jquery mobile from switching the page automatically on menu click so that i can catch the event, grab the content and then manually display the page with changePage() or is there an event i can hook into that fires well before the transition takes place?
So the idea is they click the menu item, a full screen loader shows (which works) , load the content and then display the page, not display the page then load the content....
Make sense?
The way I'd go about it would be to not use pagebeforeshow and instead have the page initally covered by a splash screen.
Then when the splash screen is loaded and displayed (image onLoad or similar) start the AJAX call, which once finished, fades out the splash screen and shows the actual content.
I have a small Phonegap app and on a button click I have it refresh the page via:
window.location.reload();
It loads pretty fast. However, although fast, you can see a flash of some elements being loaded before others. I would like to do some sort of load screen during this time, which I think will be a nice touch.
What might be the best way for me to do this? It wouldn't be at application start, but somehow tied into the button that calls for the page to be refreshed.
BTW, I am not using Jquery Mobile or Zepto .
Thanks
I'm not too privy on phonegap but I believe it is just normal HTML, CSS and JS no? So then why not just have an AJAX request that grabs your data, so the page itself is not actually refreshed but the data within the container. Then just have a div prepended to the body on the refresh call that contains your loader information (spinning gif, loading, etc). Then disappears on the ajax callback.
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.
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.