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, Mar 07 '12 at 17:29
What's with all the inline JavaScript? You're using jQuery which makes inline JS totally unnecessary. — Sparky, Mar 07 '12 at 17:31

score 11 · Accepted Answer · edited May 20 '16 at 00:31

11

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.

edited May 20 '16 at 00:31

Michael Gaskill

7,913
10
38
43

answered Mar 07 '12 at 17:34

Jeff B

29,943
7
61
90

Doh! Thanks. I put that there for css and forgot about it. – zzxjoanw Mar 07 '12 at 17:36
1

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. – Greg Pettit Mar 07 '12 at 17:51
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. http://jsfiddle.net/jtbowden/6H8Kp/ – Jeff B Mar 07 '12 at 18:08
@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. – Jeff B Mar 07 '12 at 18:12
OH, so now "there is no magic"?? Who are you to crush my dreams?? JK.. yeah I made an incorrect blind assumption. Wherps! – Greg Pettit Mar 07 '12 at 18:23

score 1 · Answer 2 · answered Mar 07 '14 at 14:55

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.

score 0 · Answer 3 · edited May 23 '17 at 11:53

0

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.

edited May 23 '17 at 11:53

Community

1
1

answered Mar 07 '12 at 17:30

Har

4,864
2
19
22

Jquery Slidetoggle: Why does it reload my page?

3 Answers3