There is an annoying bug in Firefox where navigation in a dynamically created iframe, which is then removed via Javascript, results in the inability to go back using the Firefox back button (you have to use the drop down and navigate back a further couple of pages).
I am using a form in an iframe which validates and submits data. On form submit/data validation the page in the iframe gets refreshed. This breaks the Firefox back button as above.
I need a solution to try and solve this issue and I've currently tried a few different things without much success:
Storing each iframe page refresh in a session variable (PHP) and then using history.go(-{session var}) in my jQuery code to navigate back. However this only seems to work when navigating back to the page BEFORE the iframe loaded, not the page where the iframe is loaded (in the later, it still breaks the back button)
Hiding the iframe rather than removing it - semi-works but requires multiple back button clicks and brings up the 'do you want to resubmit this data?' message
Reloading the iframe when the user has closed it. No advantage doing this as if you go back you have to still go through all the previous iframe gubbins.
Any suggestions appreciated - but please note: I want to use an iframe, do not really want to use ajax and would love a solution that is cross-browser compatible (ha!).
If you're interested, steps to reproduce this problem:
In Firefox try the iframe example which loads Google on the fancybox
homepage: http://fancybox.net/home
Search for something, i.e. load a new page in the iframe
Close fancybox frame
Try and go back without resorting to the back dropdown list
Incidentally, IE handles this scenario more gracefully than either Chrome or Firefox!
I've given up on this as have tried everything under the sun. Resorting to posting data via jQuery's AJAX methods which won't add a history item.
Related
I'm trying to find a way for PHP to press the "submit" button on a PHP form on a live webpage.
I need to do this as I am unsure as towards what data is send through this form, as it is a post form and the API is closed source.
Is there anyway to send a jQuery like click command to a live webpage through PHP at all?
Nothing needs to be retrieved from this form, only needs to have pressed the button correctly.
EDIT
More context:
Yes, the site is 3rd party (this is why I can't simply look up something on any API documentation), the program is downloading a gallery of images through the in-site gallery archiver. Previously the URL for this gallery's archive was stored on a simple popup window page's source. Now however you must confirm it first the page reloads (after a form submits through POST) onto the same page (archiver.php) and the download starts. This reloaded page contains the URL of the file. Nothing is submitted beyond the users confirmation to the download manually, perhaps something in the back end is sent upon this, I don't know.
EDIT 2
I've fixed this by figuring out what the form submits.
I think it is not possible to click a button on another page with php or jquery.
But you can analyse the form and find out the destination URL and send a own request. If it is GET it should look like this: myhomepage.com?id=1&name=foo&password=hello123
you have to use jQuery or javaScript For pressing submit button on live page dynamically. PHP is server side script and from is client side so its not possible. but if you want to read data from live webpage than you have to use cURL or file_get content
My app currently changes data quite frequently and requires the user to switch back and forth between pages.
I often find that when a page is loaded through AJAX, and then you return to said page either through the backbutton, or by clicking a link...the information isn't always refreshed.
Is there a way to force this refresh?
This is due to the fact that when you link pages through AJAX navigation in Jquery mobile they are automatically loaded into the DOM according to the documentation.
Try adding a data-dom-cache="false" to your "page" as one of the attributes.
I have a strange problem with IE. I have a sequence of forms on my website, and there is a built in navigation system to go to the next and previous pages. The pages submit to themselves, and then use Header(Location: ... ) to proceed to the next page.
The problem is that when I use the built in back button (standard tags) to go to the previous page, the input tags get populated with the old values, but when I refresh the page the values are correct. Similarly, when I use the browser back button the values appear correctly.
Sorry if this is a repost, does anyone know how to solve this problem?
Thanks!
I think it's an issue with IE caching the previous pages; if you can amend the server configuration so that it's passing the No-cache request to the browser, it should fix it.
My web application utilizes page reloads in places where the page structure changes.
For content changes initiated by the user it is all handled by Ajax.
However I'm planning on removing all the page reloads and replacing them with ajax calls that simply update the page using innerHTML for the body and head tags.
To do this I know have to manually call functions that are normally called by the onload event.
When I am done I will have a complete ajax application. My question is, is this standard practice now....I see a lot of applications where you do something and the whole page reloads, where even common elements are reloaded.
For example go to Apple.com and hit on the first button you see "Store"...you will see the whole page reload even the menu bar that does not change is reloaded wasting bandwidth..
Because I don't see other people using complete ajax solutions...I wonder if I am headed down a wrong path.
My question?
Is a complete ajax based web application best practice? (of course file uploads aren't supported, omitting this, is it best practice).
If so why do big sites not do it? I see few sites that actually employ ajax instead of page reloads.
There are a number of reasons not to go fully ajax. A few are:
If the user refreshes the page they'd be sent back to the home page;
if they pressed the back button, they'd go back to the previous site
they visited.
Search engines won't be able to index anything past the home page.
Anyone without javascript enabled or on IE 6 (or it's equivalent) wouldn't be able to use the site.
Lastly, it can be hell to debug a problem -- I went full ajax on a project a while ago and ended up regretting it.
If none of the above are important to your project, and you're looking to do something different, then by all means -- the real question you need to ask is "does the added complexity justify the savings in bandwidth?".
The concept of ajax is reload certain content of the page when you don't need to change all the content.
Your example of apple.com: it isn't a best practice to use ajax in navigation, because the history of browser don't handle this (use the back button of the browser and the navigation will not respond if you use ajax, keep that in mind).
If you have a box with testimonials and want them to change from time to time, so it's a good place to use ajax, avoiding the whole page to reload.
You can also have a static page with all testimonials to let search mecanisms to index that content.
Example of big sites? The search of google. When you type only the box of results is reloaded to view one preview.
So you have to choose when use and when not use ajax.
I have a vertical scrolling website (lots of in-page links). I also have a contact form script I'm working on.
I'm trying to set it up so when someone completes/submits the contact form, it redirects them to #contact_area (on the same page), but calling the header function after is throwing a "Cannot modify header information" error.
Any suggestions on how to redirect after a script is processed from within ?
Thanks!
A header redirect needs to happen before PHP prints any output. If you want to direct the user to an anchor on the current page you have two options:
Submit the form as normal. Your PHP script processes the data and does this before any output: header("Location: /my_same_page#contact_area"); The page will be reloaded but they'll end up in the right spot.
Submit the form data via AJAX and then scroll to the #contact_area anchor.
The second options is probably the cleanest but the first one should be a lot easier for you to implement.
You can work around this using output buffering, few examples here
I am assuming you are posting the form back to the same right?
Maybe submit the contact form to another page for example contactus.php and once its been successful place your header location code into that OR you could use the jquery form plugin (submit() function I have used) which runs in the background and then you could maybe jquery scrollTo() your hashtag.
Go got option 1 and if you have time then play with the jquery version maybe.