Ratchet's push.js form submit reloads page, messes up push.js replacing div
Question
I am developing a web application with ratchet.js (and their push.js) and have a very basic problem. My CSS code positions elements in one page in three columns. The user then can click on a navigation bar button to goto the next page. Once in the next page, the user can search for something. For the search, I handle it via a form and use jquery to detect when a form is submitted. However, when the form is submitted, the page is reloaded and push.js malfunctions. When this happens and the user clicks to go back to the first page, my css does not function properly as it is still surrounded by the second page's content div. My question: is there a way to submit a form without reloading a page (jquery's event.preventDefault() does not work)? If not, can push.js be used and then have the page reload itself once the transition is completed?
Basic Code Examples: Page 1 ----
<body>
<div class="content">
<div class="sliderBackground" id="sliderContainer" style="background: black; height: 40px; width: 100%;">
<div id="left">random left</div>
<div id="center">random center</div>
<div id="right">random Right</div>
</div>
</div>
</body>
Page 2
<body>
<div class="content">
<form id="search">
<input type="search" id="searcher" placeholder="Search" style="width: 95%;">
</form>
</div>
</body>
necessary imports (jquery etc)
<script type="text/javascript">
$("#search").submit(function(event) {
event.preventDefault(); // does not do anything (push.js... reloads page)
});
</script>
to reiterate my problem, the user clicks on a link (not shown in basic code) to use push.js to goto page 2. in page 2, they sure, where the page reloads when it should not (I am using ajax to utilize the search query etc). When the user goes back, the left, center, right css no longe works.
2 answers
solution1
0 2014-07-14 09:20:37
What if you try the following (finish with return false):
<script type="text/javascript">
$("#search").submit(function(event) {
event.preventDefault(); // does not do anything (push.js... reloads page)
// your logic here
return false;
});
</script>
solution2
0 2014-08-20 17:11:06
This is probably a bit late but I think your problem is that script tags on pages loaded by push don't get run.
Ie your code on page 2 isn't being run at all.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.