CODEWITHSUNDEEP
javascript
Kᴀτᴢ
Kᴀτᴢ

Reputation: 2176

Start loading div by clicking on a specific button

I'm using this javascript to show a hidden div for a loading message when I'm calculating in background:

 <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }
        $('form').live("submit", function () { 
            ShowProgress();  
        });  
    </script>

As I understand the script is always running if a submit is fired

$('form').live("submit", function () { 
            ShowProgress();  
        });

How must I change the code to run only for a specific button is clicked? I tried loading it when the button is clicked (commented out the $('form').live("submit",...) 

protected void btn_start_Click(object sender, EventArgs e)
    {
        string script = "<script type=\"text/javascript\"> ShowProgress(); </script>";
        ClientScript.RegisterClientScriptBlock(this.GetType(), "myscript", script);
    }

The loading div is showing but never stopping. What have I to change? Thanks

Update Forgot the code in if (!IsPostBack):

 string script = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });";
 ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);

Upvotes: 3

Views: 1458

Answers (2)

cbender
cbender

Reputation: 2251

$("#buttonId").click(function(){
  ShowProgress();
});

This method will run anytime the specific button is clicked (you obviously need to replace the buttonId in my code with the actual id of the button you made).

Upvotes: 2

rll
rll

Reputation: 5587

As the documentation describes here, the live method will apply to all events of the type submit. As suggested by other replies, you need to select just one element and use the onclick event, or check if the target of the event is your particular button.

I would go with the former, but depends on the behaviour you want.

Upvotes: 1

Related Questions