This question already has answers here:
How to detect the back button
(2 answers)
Closed 9 years ago.
i am developing one website in which main content is getting load by jquery ajax according to selected menu item.
on selecting any menu item, url get changed according to this pattern:
http://host/domain/index.php?pageid=page
here page refers to the page that i want to load into main content using ajax.
now in this case, i want to reload the previous page if user clicks on back button of browser.
can anyone help me out how could i achieve this?
If you do not change a url, then I'm afraid that is not possible.
Suppose you should better try to use window.history which provides onpopstate event when user clicks back button. But you will need to modify url in browser with history.pushState/history.replaceState functions. Possibly, you can add same url to history, so it will not be changed visually. And then take previous URL from your custom history array. But not sure if popstate will work if you place same url with pushState
But that will work in modern browsers only. To make it work in all browsers, you should better use some history plugin (for example this) which will also handle IE using hashtags
Related
This question already has answers here:
jQuery Ajax POST example with PHP
(17 answers)
Closed 7 years ago.
So, I have a contact form on one page (let's call it send_now.php or example.com/send)
Once the form is filled out and submitted, then an email is sent to a certain user while the page is directed to example.com/it_is_sent page which contains a sent confirmation based on confirmation.php.
I would like to know how to change it so that everything is done on example.com/send/ page without refreshing or redirecting the user to the next page.
Here is what I mean.
So, in /send/ page, an user fills out the form and click send. Then without redirect the user to /confirmation/ page, the confirmation is shown on /send/ page without redirecting the user, so everything happens within the same page.
Is there a way to do that? what is the general concept of doing things like that?
or, can the form be submitted within the same page without refreshing the page?
Thanks!
Take a quick search around the net for "jquery ajax form submit". The term I think you're looking for is Ajax. It is what allows you to have JavaScript send off data to a PHP script without refreshing the page.
You build your form like normal, and attach a jQuery click event to the form or submit button. The jQuery/Ajax function takes the data from the form and sends it over GET or POST to your PHP form.
Whatever your PHP script outputs is received by your jQuery/Ajax function. I like to use json_encode on a PHP Array for the PHP script output. In JavaScript I can then easily work with the results as an array of values.
Depending on what's in the Array or output depends on how your JavaScript should react. Output could be as simple as a 0 or 1, true or false, or a json Array or values like I usually do. I'll usually include at least error=true/false.
You could have the PHP script output be displayed in a Div once the Ajax success function fires.
You could also use jQuery load() to load another page into a Div upon success. The possibilities are endless when you combine it all.
You can easily find code samples for this all over StackOverflow and tutorials on the rest of the Internet. You're looking for "jQuery Ajax Form Submit to PHP", maybe even with MySQL?
This technique makes buttons that make instant changes possible. Once you're done with this project, look into websockets if you really want to see how instant the web can be.
This question already has answers here:
How do you disable browser autocomplete on web form field / input tags?
(101 answers)
Closed 9 years ago.
total Web Dev noob here, but I've been working on a website that involves logging in- The user puts his/her username and password. That's all fine and dandy, but the way that cookies work here can be a bit of a pain-Everytime I enter something in the text box, log in, and then go back to the log in page, whenever i want to type something in the login text box, there is a drop down menu for usernames and it can be really annoying- is there a way to prevent this in the actual code?
Your problem is not within the cookie but with the browsers autocomplete feature.
If you want to disable it you should look to this answer: How do you disable browser Autocomplete on web form field / input tag?
The dropdown menu you are referring to is due to your browser, not the cookies your website may or may not be using. You can usually find the option to delete saved form history somewhere in your browser options near where you would clear your history.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Modify the URL without reloading the page
Updating address bar with new URL without hash or reloading the page
my site is completely based on Ajax requests and simple navigation within the site is done from only one single page. This means when users click the menu items it doesn't load another page rather it loads the content inside an HTML element. But when a user wants to link a page to their friend it will always be the same because http://mysite.com/mymainpage.php will always be the same regardless of what ajax pulls up. How can I modify the users header? For instance when they click on "games" can jquery/js/php/html change the current URL address bar on the browser? so that it becomes http://mysite.com/mymainpage.php?games=true. Then the user can just copy the sites url from the address bar and it will lead to the correct section for ajax to load up.
You can use hashes:
http://mysite.com/mymainpage.php
http://mysite.com/mymainpage.php#games
(That's what gmail does: https://mail.google.com/mail/#inbox, https://mail.google.com/mail/#sent)
You can read the hash using
window.location.hash /* gives "#games" */
or
window.location.hash.substring(1) /* gives "games" */
And you can change it using
window.location.hash="#games"
or
window.location.hash="games"
(it seems it works but better use the first option)
Then, each time user clicks a link, change the hash and load the new page like you do now.
And when the user enters to your page, check if there is a hash in the URL and load that page.
You could also add a hashchange event listener. See https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/hashchange
Edit:
No, you can't have two hashes ( http://mysite.com/mymainpage.php#games#fashion )
So if an user goes to http://mysite.com/mymainpage.php?games=true, you should redirect him to http://mysite.com/mymainpage.php#games.
And then you can change it to http://mysite.com/mymainpage.php#fashion without reloading.
I would like to ask for how to redirect to previous page (ajax paging).
Example,
Let's say currently I am in page 5, then I click on one record, after I edit it, I would like to go back to that page 5 not page 1.
The problem is my paging is using ajax,
http://domain/photo/#5
I try to use $_SERVER[http_referer], but I only get http://domain/photo , I not able to get # and the value.
What is the best way to redirect back to the previous paging. My last choice is using $_SESSION. Hope I can get better answer here.
Thx.
Like Lauri says, you need to manage this at the client-side using Javascript. Basically you need to implement some sort of client-side browser history. Just look at how Facebook loads in photos, but still lets you use the back button.
There are various libraries available to help you:
JS History Frameworks
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.