jquery alertbox is getting disabled automatically

Question

I have written the code on ascx script:

<script src="JScripts/jquery.alerts-1.1/jquery.alerts.js" type="text/javascript"></script>

<script>
$(function() {
        $('#ImageButton1').click(function() {
            jAlert('Please enter a valid Suggestion ID.', 'Case Entry');
        });
    });
</script>

and on Code behind:

Page.ClientScript.RegisterStartupScript(this.GetType(), "Window", "callAlert();", true);

the problem is alert box is automatically getting disabled after some time when page load fully

What could be the reason that the alert box is being disable after clicking on OK button and how to call the callAlert function in proper way.

Answer 1

You can try to put the following line before the function

$(document).ready(function() {

This will make it:

$(document).ready(function() {
        $('#ImageButton1').click(function() {
            jAlert('Please enter a valid Suggestion ID.', 'Case Entry');
        });
    });
 });

If you wait till the page is ready, the alert box won't be overwritten (I hope x)).

Also when you check that text box, check if the condition is false, then give the alert.
Is the condition not false? Build in a check to check if the condition is really true. If so? Redirect.

EDIT:

var answer = Confirm: ("This page will now redirect. Are you ready?")
if (answer)
//redirect
else
return

Answer 2

OK, so first it's important to understand that $(function(){... and $(document).ready(function() {... are equivalent, and nothing inside either will execute until the page is fully loaded. In other words, there's no need to use

Page.ClientScript.RegisterStartupScript(this.GetType(), "Window", "callAlert();", true);

That can be removed. Also, I see that you're probably using web forms. Be mindful that the Id attribute that will be rendered is not equal to the Id of the control attribute. In other words, if you have a runat="server" control with an Id of ImageButton1 , using the syntax $('#ImageButton1') in your jQuery won't work.

Taking this into account, I've added an example below that uses selectors based on class attributes.

<script type="text/javascript">
    $(function () {
        $('.ImageButton1').click(function (e) {
            var text = $('.TextBox1').val();
            var redirect = true;

            if (!text) {
                redirect = confirm('Empty...are you sure?');
            }

            if (redirect) {
                window.location.href = 'http://your-redirect-here.com';
            }
        });
    });
</script>

<input class="TextBox1" type="text" />
<input class="ImageButton1" type="button" value="Click" />

That should get you where you want to go. Let me know if you have any questions.

Answer 3

If you are using Master page or pages then you won't get the Client Id of the button as you are declared it should be declared as $('#<%=ImageButton1.ClientID%>') or $('[id$=ImageButton1]') hope it will solve you problem.

$(document).ready(function(){
 $('#<%=ImageButton1.ClientID%>').click(function() {
            alert('Please enter a valid Suggestion ID.', 'Case Entry');
        });

});

Answer 4

var answer = Confirm: ("This page will now redirect. Are you ready?")
if (answer)
{
   //redirect
} else
{
     return false;
 }

Answer 5

Put this after jAlert Box:

return false;

And call the function like this:

return callAlert();