CODEWITHSUNDEEP
javascriptjquerypreventdefault
thegreatsloth
thegreatsloth

Reputation: 43

Trying to prevent default

This is a project I am working on, a little popup ad for my client's website that will tell users about their summer camps coming up. I just want the ad to show up on load, and then the user can choose to close the ad or click the link to go to the registration page.

I am trying to get this code to work but my problem is that when I click one of the close buttons the ad closes, then the page reloads and the ad is right back where it was. I am trying to figure out where to appropriately place my "prevent default" code but it either works before the ad can even show up the first time, or in the case shown here... not at all.

I realize that I am using both jQuery and JS but I am very new to this and I am piecing together code as I find it.

<script type="text/javascript">
$(".close").click(function(){
$("#summercampad").addClass("hidden");
onload.preventDefault();

});

window.onload = function () {
document.getElementById("summercampad").className =
document.getElementById("summercampad").className.replace
  ( /(?:^|\s)hidden(?!\S)/g , '' )
};

</script>
<div id="summercampad" class="hidden" >
<div id="popupcontainer">
    <div id="closepopup">
        <a href="#" class="close"><img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/closebtn.png?t=1429039040" alt="close"/>     </a>
    </div>
    <div id="pic">
        <img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/popuppic.jpg?t=1429038436" alt="basketball"/>
    </div>
    <div id="popuptext">
        2015 SUMMER CAMPS<br> 
        BOYS &amp; GIRLS • ANY SKILL LEVEL<br>
        <span>SPACE LIMITED - SIGN UP NOW!</span>
    </div>
    <div id="registerbtn" >
        <a href="/camp-registration/">
        <img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/registerbtn.png?t=1429039883"/>
        </a>
    </div>
    <div id="nobtn">
        <a href="#" class="close">
        <img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/nothanksbtn.png?t=1429039884"/>
        </a>
    </div>
</div>

Upvotes: 0

Views: 3018

Answers (5)

codegaze
codegaze

Reputation: 755

I believe this is what you want

$(".close").click(function(e) {
  $("#summercampad").addClass("hidden");
  e.preventDefault();
});

and also you can use 

$('#summercampad').removeClass('hidden');

instead of

document.getElementById("summercampad").className =
document.getElementById("summercampad").className.replace
  ( /(?:^|\s)hidden(?!\S)/g , '' )

http://api.jquery.com/event.preventdefault/

The difference between ‘return false;’ and ‘e.preventDefault();’

Upvotes: 0

chetank
chetank

Reputation: 402

Below code should be able to fix the problem. What you are tring to do is prohibiting on onload. which can be acheived using $(document).ready(). I would suggest it to put the function at the end of the page.

    <script type="text/javascript">
$(document).ready(function(){
    $(".close").click(function(e){
    e.preventDefault();
        $("#summercampad").addClass("hidden");
        return false;
    });
});
   </script>

Upvotes: 0

sebastienbarbier
sebastienbarbier

Reputation: 6832

Just add at the end : return false. It will prevent the action to perform like you want.

<script type="text/javascript">
$(".close").click(function(){
    $("#summercampad").addClass("hidden");
    return false;
});
...

Everything is describe on this other post : return false from jQuery click event

Also

You need first to declare your HTML, then your jQuery. Like you do now, $(".close") return null because HTML has not been parsed by your browser.

The best solution for you is to use $(document).ready()

Your code should be :

<script type="text/javascript">
    $(document).ready(function () {
        $(".close").click(function(){
        $("#summercampad").addClass("hidden");
        return false;
    });
});
...

This way first HTML is loaded then jQuery bind a click event on existing markup ;).

Upvotes: 0

nklein
nklein

Reputation: 79

Looks like you're missing the parameter from the binding function. Try changing this:

$(".close").click(function(){
    $("#summercampad").addClass("hidden");
    onload.preventDefault();
});

to this:

$(".close").click(function(event){
    $("#summercampad").addClass("hidden");
    event.preventDefault();
});

(Source: http://www.w3schools.com/jquery/event_preventdefault.asp)

Upvotes: 1

Mark
Mark

Reputation: 4883

 <script type="text/javascript">
    $(".close").click(function(e){
    e.preventDefault();
        $("#summercampad").addClass("hidden");
        return false;
    });
   </script>

Upvotes: 1

Related Questions