Jquery Slidetoggle: Why does it reload my page?

Question

I'm having a strange issue with two slideToggles. The #bannerChoice slide works fine, but the #search slide, which should, when open, overlap #bannerChoice, never opens more than partway. Instead, it forces the page to reload.

Here's my code:

function bannerChoice() { $('#bannerChoice').slideToggle(function() { if($('#bannerChoice').is(':visible')) { $('html').css({overflow:"hidden",height:"100%"}); } else { $('html').css({overflow:"auto",height:"2171px"}); } }); } function toggleForm() { $('#search').slideToggle(350); return false; }

and

<div id="bannerChoice"> <div id="bcText">Select a banner graphic:<br/></div> <div id="bcImages"> <form action="#" method="post"> <input type="hidden" name="setBanner" id="setBanner" value=""> <img src="/media/profile/images/bgs/bg1_thumb.png" onClick="setBanner(1,event);"/> <img src="/media/profile/images/bgs/bg2_thumb.png" onClick="setBanner(2,event);"/> <img src="/media/profile/images/bgs/bg3_thumb.png" onClick="setBanner(3,event)" /> <img src="/media/profile/images/bgs/bg4_thumb.png" onClick="setBanner(4,event)" /><br/> <span id="bcBttns"> <input type="submit" value="Submit" class="submit" name="bttnSubmit" /><input type="button" value="Cancel" onClick="bannerChoice()"> </span> </form> </div> <div id="bcBG">&nbsp;</div> </div>

and

<span onClick="toggleForm()"> <a href="" style="display:inline-block; color:#bbb; padding:0 13px; line-height:70px;">link text</a></span> <div style="padding-left:13px; z-index:9004"> <form id="search" method="post" action="#"> <input type="text" name="name" value="Name" style="width:112px"/><br/> <input type="text" name="city" value="City" style="width:112px" /><br/> <input type="text" name="state" value="State" style="width:112px" /><br/> <input type="text" name="zip" value="Zip" style="width:112px" /><br/> <input type="button" class="submit" style="margin:0 13px 0 13px;" value="Search"> </form> </div>

Not to answer your question, but all of these inline event handlers (onClick) are considered a rather archaic approach. I would suggest binding events with JavaScript instead. Since you're already using jQuery, look into .on() in the API docs. — Greg Pettit
– Greg Pettit, Commented Mar 7, 2012 at 17:29
What's with all the inline JavaScript? You're using jQuery which makes inline JS totally unnecessary. — Sparky
– Sparky, Commented Mar 7, 2012 at 17:31

Michael Gaskill · Accepted Answer · 2016-05-20 00:31:48Z

The jQuery is not causing your page to refresh. When you click the link in your span, the page will go to url "", i.e. reloading your current page.

You need to add e.preventDefault() to your script to prevent the link from performing its default action (going to the link):

function toggleForm(e) { e.preventDefault(); $('#search').slideToggle(350); }

And you need to add event to your call:

onclick='toggleForm(event)'

bannerChoice() does not reload the page, because it is on a cancel button, which does not post as part of its default action.

As others have said here, inline Javascript is not a good idea. It makes code unreadable, difficult to debug, and prevents you from reusing code easily. There is no (good) reason to use inline Javascript with jQuery.

jQuery does some sort of magic with "return false" that executes preventDefault(). There are good reasons to use preventDefault() and NOT return false (which also stops propagation), but you only need one or the other here.
BTW, I'm not 100% clear on how you want your code to work, but here is an example of your code without inline javascript or CSS. jsfiddle.net/jtbowden/6H8Kp
@Greg: Yeah, I simply forgot to delete it when I copy-pasted. However, this particular return false is not in a jQuery handler, so there is no magic.
OH, so now "there is no magic"?? Who are you to crush my dreams?? JK.. yeah I made an incorrect blind assumption. Wherps!

Acyra · Accepted Answer · 2014-03-07 14:55:32Z

I had the same issue using

<a href="#" id="toggle-trigger">Edit</a>

Another, more simple option, is not use the href= in link "a" tag, or your input submit, for the purpose of a toggle within a page. Just use something like:

<a id="toggle-trigger" style="cursor: pointer;">Edit</a>

Or in your case a span div that's styled to look like a button.

Community · Accepted Answer · 2017-05-23 11:53:05Z

Is there an easy way to reload css without reloading the page?

Use the innerHtml property that works without a round-trip to the server.

Collectives™ on Stack Overflow

Jquery Slidetoggle: Why does it reload my page?

3 Answers 3

5 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Linked

Related