BrunetteCP Posted August 25, 2015 Share Posted August 25, 2015 Hi, I have a main page that contains a menu and a "div" named "div1". when I click my menu (ie: Menu 1 or Menu 2) I want to load my page into my div.So this is the result i want to have:- Click on the menu "Menu 1" = load the page "Menu1.html" in my div named "div1" in my page and fill a form.- Click on the menu "Menu 2" = load the page "Menu2.html" in my div named "div1" in my page and I fill another form this work fine . my problem is: when i make transition from menu2 to menu1 i lose all my data in the form i had filled. My question : how to do to prevent losing my form`s data.Thank you! My CODE: -------------- <!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script>function Myload(ref) {$(document).ready(function(){$("a").click(function(){$("#div1").load(ref);});});}</script></head><body><div class="divCenter" id="div1"><h2> This Text</h2></div><a href="#" onClick="Myload('Menu1.html')" > Menu 1 </a> <br><a href="#" onClick="Myload('Menu2.html')" > Menu 2 </a></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 25, 2015 Share Posted August 25, 2015 It reloads the page because your links are just acting as normal links, you're not telling it to cancel the default link behavior that would load another page.But pay attention to what you're telling it to do. When you click one of those links it runs the Myload function. Myload attaches a load handler to the document, to execute when the page loads. The problem with that is by the time they click on the link the page has already loaded, so attaching a new load handler after that happens will never get executed. Then your load handler has code to attach a click handler to the links. You already have a click handler though, that's what Myload is. So right now when you click on one of those links you add a new load handler to the page which would add a new click handler to the links. You're mixing things. If you put that load handler code inline instead of in a function then that code would execute when the page loads and add the click handler, and you can get rid of the onClick attributes and the Myload function. Inside the click handler you can cancel the event so that it won't do the default click behavior. You should use the href attribute to specify the page to load and inside the click handler get the href value for the element that was clicked so you know which page to load. If Javascript is disabled then the links will still work normally. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now