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.
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 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 developing a multi-browser extension using the Crossrider framework.
Is there a solution to show an html horizontal menu on the top of each page ?
The menu will embed a JS script which uses some external libraries.
Indeed, I can prepend my html content to the "body" tag but each time the user clicks on a link on the webpage, the whole page is reloaded which makes the horizontal bar disapear and then reappear on the next page when the loading is completed.
I thought of putting the website content into an iframe but some websites (ex: amazon) send a header with the "X-Frame-Options" set to "DENY" or "SAMEORIGIN". This is something which Crossrider cannot modify (at least I didn't find how to do that).
Is there an other way to show a PERMANENT menu on top of each page ?
EDIT :
My toolbar won't contain any link but it will record the mouse position. My problem is that each time the user will click on a website link (ex : to see a product on the amazon website), the toolbar will be reloaded and so the mouse position won't be recorded until the next page has finished its loading.
Page reload is normal behavior when clicking on a link on Amazon sites and hence the toolbar redrawing when the page loads is normal and correct.
Based on the information provided and assuming I have understood what you are trying to acheive, it appears that you are going about this the wrong way. I would first think about why do you need a toolbar at all? For example, if you are only recording the mouse position when a link in the page is clicked, I think it makes more sense to register to mouse click events of the links you are interested in.
I suggest you rethink your approach and take in to consideration the issues you have to handle, such as the page reload and handling the click event before the page reloads.
[Disclosure: I am a Crossrider employee]
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.
The Facebook chat window remains open, unchanged, to refresh the page, or even when we change page. How to reproduce something similar? Tried with frameset, but it did not work.
How to keep a div open a window similar to the internal, even after refreshing the page or clocar on a website link?
Like them, you can try -
The data is shared between facebook pages. Probably HTML5 localStorage? Cookies? I'm not sure.
If you notice, they don't "refresh" the page, they ajax-refresh the content on the page for subsequent loads. (unless you manually navigate to the same page, of course.)
Finally, its all CSS mainly some z-index put to use.
I hope those 3 are enough to get you started.
I don't think the whole page of Facebook is loaded. Every link has it's own 'target'. Most of them fetch a page (I think with simply AJAX) to show, others to just change some partials of the screen. So let's say, you have two divs. One div is the chat-div. Positioning fixed and all, z-index on 100, it will always stay on top. The rest of the page is the other div. Within this div, you can load certain pages with AJAX, without the whole screen to refresh.
As with reloads of the screen: you can easily save (also with AJAX) whether the user closed the chat screen or has it opened. Just create a table in a database called 'chats' or something, then when a chatscreen is opened you put an entry in that table with 'person_1', 'person_2' 'lastmessage' and 'active'. When they close the chat, you can put the 'active'-field to false. Then, whenever someone loads the entire website, you check the table chats for active chats, and shows them when there are any.
I would look into qjuery-qjax: https://github.com/defunkt/jquery-pjax
From their docs:
pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving the appearance of a fast, full page load. But really it's just ajax and pushState.