I am building an app using Backbone.js and jQuery Mobile. On some pages in my app I have external href links and I'm running into an issue.
When a user clicks and external href link, get taken to the external site and then hits the back button. My app does not load from the proper page where the user originally left the app from.
In fact my entire DOM is reset so it looks like my site gets a complete refresh and doesn't keep any of its former state.
I have been trying to search for a solution but this issue is kind of hard to word out. I hope it makes sense.
Does anyone have any suggestions?
UPDATE
Stupid error on my part.. I had a bad id set on the page and it didn't load the data I had saved in the session for it when a user returns to the page.. Changed the id and all is well. Thanks!
Link
Make you external links open up new tabs.
If you have used one html with multiple pages solution then there's an explanation for this.
rel="external" will cause a full page refresh so last page location will not be remebered. When you return to the last location it will trigger new refresh and the first page will be shown again.
This can be prevented with a multiple html page solution.
Related
I'm a newby working on my first site. I'm using a music player that I would like to have play continuously throughout the site, so I'm researching the consequences of loading the site's various account pages with AJAX (ala Soundcloud or Spotify). I'm curious to know how this will affect the back button.
If the site is completely AJAX, when the user hits the back button to go back to (apparently) a previous account page, the site will be lost to the previous site in the browser's history. However, if Soundcloud's pages are loaded via AJAX, they've modified the back button to accommodate switching to the previously loaded AJAX page.
well, after 5 seconds of google I found HTML5 history.pushState
EDIT. Ended up going with rack_pjak
IOS 8.0+
My app use UIWebview to visit a forum site.
The forum front page contains two tag: default one is 'Recommend', another one is 'Newest'. Using ajax to load post data When user switch to 'Newest' tag, at the same time the page runs the follow codes to save state:
window.history.pushState(null, title, url);
After that if user is interesting with some post, he/she would click link and jump to a new page to view detail of the post. In this page, I use follow code to let user have a way to go back to 'Newest':
history.back(-1);
Now interesting thing happened, go back to 'Newest' tag but post data is old.
After some tests, I found the data is always be the first time loaded after installed the app. This bug will not happen in Safari or Android app.
I believe it should have some relationship with webView cache.But why UIWebview does't use new cache? And how to
solve this problem?
Oh no...nobody meet this problem?
My current solution is:
use js code to auto refresh the page when go back.
I am trying to pass data using a form to a Facebook iFrame page tab but can't seem to figure how to do it.
I have a page tab on my Facebook page with several elements such as links and images directing users to various pages on the main website. This is updated every week, so rather than update the HTML file and upload via FTP everyweek i would like to see if i can create a form to pass the new data to the iframe.
In addition the Facebook page tab cannot be created in PHP as the server is running ASP.NET
I am trying to do this without the use of a database table if possible, using POST or GET would be preferable.
If anyone knows of any tutorials or has any tips i would be very grateful.
Cheers
You can only pass content or interact with iframe content if it's on the same domain as the parent webpage that has the iframe. All browsers have a "same origin policy" that prevent you from being able to do that - sorry :(
I am using $.mobile.changePage() to change move from a login page to a home page. From there, none of the links on the home page work. Those links are all using the standard href link. I tried just using an href="" link for the login button as well and that works but the problem is, once the login button is clicked, I need to do some sort of login process to make sure that they entered in the right stuff and as far as I know, the href just happens immediately and I cannot make it wait or stop all together. I tried using the event.preventDefault() but that would not stop the href from switching the page before the login checking was done. Anyone have any ideas on how to solve my situation? I am pretty new to jQuery Mobile so I dont fully understand every detail about it yet. Also I am working with some legacy code at the moment and that code uses jQuery mobile alpha 4.1.
How are you checking for the data from the login page? If you are only using javascript, you could just add an onClick() handler on the login button, and get the values from the fields with document.getElementByID(). AFTER that you could do $.mobile.changePage().
Or maybe I don't understand what you are trying to do.
I couldn't find an answer to this on the web. I have a site, where I try to avoid hard refreshes as much as possible. It's a sequences of photos, and upon a user click of a central div, a little page (a RoR partial) loads within that div with a new photo in it.
The user keeps clicking, the photo keeps changing, and the URL of the page never changes. The title of the photo does change though. And so I want the web crawlers to see this...
Is there any advantage to having a hard refresh or not in this scenario? Will the Web Crawlers see the title of the photo in the div, and index my home page? Or at least the url of the inner div?
I hope this makes sense! Thanks!
It all depends on what you mean by a hard refresh. If all of the pictures, and their related data (title etc.) are loaded when the page first loads, and the click is just a javascript event that changes the css a bit to display the next picture then that has no negative effect on SEO. If clicking that link makes an ajax request back to your server to retrieve the image, then it will never get picked up by the search engine web crawler, and will not contribute to SEO.
If you aren't sure if this click is an ajax request, or just a css change, you can look at your html source to figure it out. If all your image tags are in your html source then it's not making an ajax request. If you only see one (or zero) then it is making an ajax request.
If the page title would never change, then there's no benefit. But if you're loading a new image, the page title should change for optimal SEO.
There's a workaround, though. Just make it to where you can access the images specifically with a static page and make sure Google spiders it. You can keep the normal page flow as-is using this method.
Edit: I should add that I had a site that got 60% of it's traffic from Google Image searches, so I'd say you'd definitely want them indexed separately.