CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
Agniva De Sarker
Agniva De Sarker

Reputation: 858

Page reloading after calling jquery function

I have a div which I am checking for a condition at $(document).ready(function ()), then deciding whether to show it or not.

There is a button inside the div which fades out the entire div. The problem is after calling the fadeout() function, the $(document).ready(function ()) gets called again(i.e. the page gets reloaded) and it again satisfies the condition to show the div.

I want to prevent the page from reloading after the fadeout() function gets called.

HTML

<div class="success"><%: ViewData["successResult"] %>
<br /><br />
<span id="closenotification" class="buttons" onclick="fadeoutbox()"><a href="" ><img src="<%= Url.Content("~/Content/Images/door_out.png") %>" alt="" />Close</a></span>
</div>

javascript

function fadeoutbox() {
    $(".success").fadeOut(5000, function () {
        /*$(".success").css("display", "none");
     $("#closenotification").css("display", "none");*/
    });

}

$(function () {
    var successres = '<%= ViewData["successResult"] %>';
    //alert(successres != null);
    if (successres != "") {
        var leftpos = screen.width / 2 - 350;
        var toppos = screen.height / 2 - 125;
        $(".success").css("left", leftpos);
        $(".success").css("top", toppos);
        $(".success").css("display", "block");
        $("#closenotification").css("display", "block");
    }

    if ($(".failure").html() != "") {
        var leftpos = screen.width / 2 - 350;
        var toppos = screen.height / 2 - 125;
        $(".failure").css("left", leftpos);
        $(".failure").css("top", toppos);
        $(".failure").css("display", "block");


    }
});

Upvotes: 0

Views: 1100

Answers (5)

Masoud DaneshPour
Masoud DaneshPour

Reputation: 126

you can do one of these :

  1. Put # for href
  2. return false at the end of the fadeoutbox
  3. use e.preventDefault() like other guys said

Upvotes: 0

Mandeep Pasbola
Mandeep Pasbola

Reputation: 2639

Try this :

$(function () {

var successres = '<%= ViewData["successResult"] %>';
//alert(successres != null);
if (successres != "") {
    var leftpos = screen.width / 2 - 350;
    var toppos = screen.height / 2 - 125;
    $(".success").css("left", leftpos);
    $(".success").css("top", toppos);
    $(".success").css("display", "block");
    $("#closenotification").css("display", "block");

    return;
}

if ($(".failure").html() != "") {
    var leftpos = screen.width / 2 - 350;
    var toppos = screen.height / 2 - 125;
    $(".failure").css("left", leftpos);
    $(".failure").css("top", toppos);
    $(".failure").css("display", "block");

    return;
}

});

Upvotes: 0

bububaba
bububaba

Reputation: 2870

Remove the onclick="fadeoutbox()" part and add this handler:

$('#closenotification').click(function(e) {
    e.preventDefault();
    fadeoutbox();
});

Upvotes: 0

c4urself
c4urself

Reputation: 4287

You've wrapped the image in a a tag. You'll need to use preventDefault to prevent the page from reloading on the click event of the a tag. or remove the a tag altogether.

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

Try to move the onclick event into the link element (nested into the span) and change your function like so

function fadeoutbox(evt) {
    evt.preventDefault();
    $(".success").fadeOut(5000, function () {
       ...
    });
}

Upvotes: 0

Related Questions