I have a plugin for a modal dialog box - tyring to hook into the close button clcik event

I have a plugin for a modal dialog box - tyring to hook into the close button clcik event:

The id of the modal dialog's "close" button is "dialog-button".  All attempts so far to intercept a click event on that button have failed.  In other words, the alert( ); message box never pops up.

Here are the URLs for the modaldialog plugin:

http://tautologistics.com/projects/jquery.modaldialog/doc/1.0.0/
and
http://plugins.jquery.com/project/modaldialog



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormJQuery.aspx.cs"
Inherits="Campus_Webstore.WebFormJQuery" %>

<%@ Register Src="UserControls/WaitMessage.ascx" TagName="WaitMessage" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head runat="server">
<title>jQuery Testing</title>
<link href="../../Scripts/css/jquery.modaldialog.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/jquery.modaldialog.js" type="text/javascript"></script>
<script src="../../Scripts/js/__testmodal.js" type="text/javascript"></script>

<script type="text/javascript">

    $('#dialog-button').mousedown(function ()
    {
      //  $('div').css("border", "1px solid blue");
        alert("hide spinner");
       // $('div[id*="waitwrap"]').hide();
    });

    var errormsg = 'There was a problem changing your passowrd:  ' + msg.d;
    $.modaldialog.error(errormsg, {
        title: 'Error!',
        width: 200
    });


</script>


</head>
<body>
<form id="someform" runat="server">
</form>
</body>
</html>

Open in new window

LVL 5
Tom KnowltonWeb developerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
The problem is that the modaldialog only sets itself up when you call to show the dialog the first time so i've done a workaround using css and some javascript.

you can see it working here: http://jsfiddle.net/rjurd/QyTzu/

sample button to trigger the error dialog
<input type='button' id='show' value='show' />

Open in new window


javascript
$(function() {
    var errormsg = 'There was a problem changing your password';
    $.modaldialog.error('', {});
    $.modaldialog.hide();
    $('#dialog-button').bind('click', function() {
        alert('User clicked on "foo."');
    });

    $('#show').click(function() {
        $('#dialog').css('visibility', 'visible');
        $('#dialog-mask').css('visibility', 'visible');
        $.modaldialog.error(errormsg, {
            title: 'Error!',
            width: 200
        });
    });

});

Open in new window


css
#dialog, #dialog-mask {
    visibility: hidden;
}

Open in new window

0
Tom KnowltonWeb developerAuthor Commented:
btw, How were you able to include the modaldialog plugin in jsfiddle?  
0
Tom KnowltonWeb developerAuthor Commented:
I am not sure how to implement your changes above.


Here is the live site:

https://webstore.uconncoop.com/AccountDetails.aspx

Go to this link, then:

1)  login using "mike" for both username and password
2)  Then to to "Account Details" by clicking the link on the left (with an icon that has a pencil and magnifying glss)
3)  Leave the password fields as they are and click on the "Change Password" button.
4)  An error message will pop-up.  Also, notice the 'spinner arrows' in the background saying "please wait..."
5)  When you close the modal dialog...the spinner does not "hide" as it should.


I hope this helps.  Really all I need to know is how to change the JS code below to get the behavior you were able to get.


$(document).ready(function ()
{
    //  alert("show new modal");

    //    $.modaldialog.error('The operation failed again again again.');

    var loc = window.location.href.toUpperCase();

   
    if (loc.indexOf("ACCOUNTDETAILS") != -1)
    {
        $('input[id*="ButtonChangePW"]').click(function ()
        {	
            var datastring = "";

            var customstring = {}; // empty new Array

            $('input[type="password"]').each(function ()
            {
                var str = $(this).attr("ID");
                var last = str.split("_").pop();
                customstring[last] = $(this).val();
            });

            datastring = JSON.stringify(customstring);

            if (datastring != '')
            {
                $.ajax({
                    type: "POST",
                    async: false,
                    url: "WebGlobalMethods.asmx/ChangePassword",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: datastring,
                    success: function (msg)
                    {
                        someresult = msg.d;

                        if (someresult.indexOf("Password changed!") != -1)
                        {

                            $('div[id*="wait"]').hide();
                          
                            $.modaldialog.success('Your password has been changed', {
                                title: 'Success!',
                                width: 200
                            });
                        }
                        else
                        {
				//	alert("there was a problem");
                            $('div[id*="wait"]').hide();
                          
                            var errormsg = 'There was a problem changing your passowrd:  ' + msg.d;
                            $.modaldialog.error(errormsg, {
                                title: 'Error!',
                                width: 200
                            });

                        }
                    },
                    error: function (msg)
                    {
                        alert("Possible web service failure:  " + msg.d);
                    }
                });
            }
        });
    }
});

Open in new window

0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

effxCommented:
<script type="text/javascript">


    var errormsg = 'There was a problem changing your passowrd:  ' + msg.d;
    $.modaldialog.error(errormsg, {
        title: 'Error!',
        width: 200
    });

    $('#dialog-button').click(function ()
    {
      //  $('div').css("border", "1px solid blue");
        alert("hide spinner");
       // $('div[id*="waitwrap"]').hide();
return false;
    });

</script>
0
effxCommented:
Sorry didn't read the full post:
<script type="text/javascript">


    var errormsg = 'There was a problem changing your passowrd:  ' + msg.d;
    $.modaldialog.error(errormsg, {
        title: 'Error!',
        width: 200
    });

    $('#dialog-close').click(function ()
    {
      //  $('div').css("border", "1px solid blue");
        alert("hide spinner");
       // $('div[id*="waitwrap"]').hide();
return false;
    });

</script>

Open in new window

0
effxCommented:
I have tested this, and it worsk:

http://screencast.com/t/tEppqrKzhw

In file "__attempt_change_password_via_webservice.js" on line 60 add:
$('#dialog-close').click(function ()
    {
      //  $('div').css("border", "1px solid blue");
        alert("hide spinner");
       // $('div[id*="waitwrap"]').hide();
    });

Open in new window

0
Tom KnowltonWeb developerAuthor Commented:
My apologies, but I guess I am still doing something wrong:

https://webstore.uconncoop.com/AccountDetails.aspx

Go to this link, then:

1)  login using "mike" for both username and password
2)  Then to to "Account Details" by clicking the link on the left (with an icon that has a pencil and magnifying glss)
3)  Leave the password fields as they are and click on the "Change Password" button.
4)  An error message will pop-up.  Also, notice the 'spinner arrows' in the background saying "please wait..."


Now the dialog does not even appear at all...perhaps it is getting closed right after it opens?



0
effxCommented:
can you comment these lines out please:

                            $.modaldialog.error('', {});
                            $.modaldialog.hide();
these are on line 54
0
RobOwner (Aidellio)Commented:
jsFiddle has the ability to include external css and js (on the left)

remember you have to wrap your code for when the page loads otherwise jquery doesn't know the dom elements exist


<script type="text/javascript">

$(function() {

    var errormsg = 'There was a problem changing your passowrd:  ' + msg.d;
    $.modaldialog.error(errormsg, {
        title: 'Error!',
        width: 200
    });

    $('#dialog-close').click(function ()
    {
      //  $('div').css("border", "1px solid blue");
        alert("hide spinner");
       // $('div[id*="waitwrap"]').hide();
return false;
    });
});

</script>

Open in new window

0
RobOwner (Aidellio)Commented:
Please do NOT comment out those lines re effx (line 54), I put them in there to initialise the modaldialog
0
effxCommented:
@tagit, you don't not need to initialise the modaldilog twice, this a bad way of coding. If you cannot modify things with one initilisation command then I assume this is slightly outside of your skillset.
0
Tom KnowltonWeb developerAuthor Commented:
I did a lot of monkeying around and now the behavior is the dialog shows then goes away then shows and goes away for good.

Here is the link again (just follow the directions above):

https://webstore.uconncoop.com/AccountDetails.aspx

Here is the current jquery:

$(document).ready(function ()
{   

    var loc = window.location.href.toUpperCase();

   
    if (loc.indexOf("ACCOUNTDETAILS") != -1)
    {       

        $('input[id*="ButtonChangePW"]').bind('click', function ()
        {
            var datastring = "";

            var customstring = {}; // empty new Array

            $('input[type="password"]').each(function ()
            {
                var str = $(this).attr("ID");
                var last = str.split("_").pop();
                customstring[last] = $(this).val();
            });

            datastring = JSON.stringify(customstring);

            if (datastring != '')
            {
                $.ajax({
                    type: "POST",
                    async: false,
                    url: "WebGlobalMethods.asmx/ChangePassword",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: datastring,
                    success: function (msg)
                    {
                        someresult = msg.d;

                        if (someresult.indexOf("Password changed!") != -1)
                        {

                         //   $('div[id*="wait"]').hide();

                            $('#dialog').css('visibility', 'visible');
                            $('#dialog-mask').css('visibility', 'visible');
                            $.modaldialog.success('Your password has been changed', {
                                title: 'Success!',
                                width: 200
                            });
                        }
                        else
                        {
                         //   $('div[id*="wait"]').hide();

                            $.modaldialog.error('', {});
                            $.modaldialog.hide();
                            var errormsg = 'There was a problem changing your passowrd:  ' + msg.d;
                            $.modaldialog.error(errormsg, {
                                title: 'Error!',
                                width: 200
                            });

                            $('#dialog-close').click(function ()
                            {
                                //  $('div').css("border", "1px solid blue");
                                alert("hide spinner");
                                // $('div[id*="waitwrap"]').hide();
                            });

                        }
                    },
                    error: function (msg)
                    {
                        alert("Possible web service failure:  " + msg.d);
                    }
                });
            }
        });
    }
});

Open in new window

0
Tom KnowltonWeb developerAuthor Commented:
UPDATE:

In the jQuery I just posted, I commented out lines 54 and 55:

// $.modaldialog.error('', {});
// $.modaldialog.hide();


This stabilized the behavior a bit more....


Now the only thing I need is for the spinng arrows (and message) to HIDE when I click the CLOSE button on the error message dialog....



We're close!!!
0
effxCommented:
Easy, on line 62 of the file we are working with, get rid of the alert and replace with:
$("#specialthrobberstylingdiv").hide();

Open in new window

0
Tom KnowltonWeb developerAuthor Commented:
It doesn't even show up if I do that.  The ajax call is too fast.
0
effxCommented:
Can you apply the change on the site please, I will have a look
0
Tom KnowltonWeb developerAuthor Commented:
Sure thing.  I hope I put it in the right spot!

It's up there now:

https://webstore.uconncoop.com/AccountDetails.aspx

$(document).ready(function ()
{
    var loc = window.location.href.toUpperCase();


    if (loc.indexOf("ACCOUNTDETAILS") != -1)
    {

        $('input[id*="ButtonChangePW"]').bind('click', function ()
        {
            var datastring = "";

            var customstring = {}; // empty new Array

            $('input[type="password"]').each(function ()
            {
                var str = $(this).attr("ID");
                var last = str.split("_").pop();
                customstring[last] = $(this).val();
            });

            datastring = JSON.stringify(customstring);

            if (datastring != '')
            {
                $.ajax({
                    type: "POST",
                    async: false,
                    url: "WebGlobalMethods.asmx/ChangePassword",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: datastring,
                    success: function (msg)
                    {
                        someresult = msg.d;

                        if (someresult.indexOf("Password changed!") != -1)
                        {

                            //   $('div[id*="wait"]').hide();

                          //  $('#dialog').css('visibility', 'visible');
                          //  $('#dialog-mask').css('visibility', 'visible');
                            $.modaldialog.success('Your password has been changed', {
                                title: 'Success!',
                                width: 200
                            });
                        }
                        else
                        {
                            //   $('div[id*="wait"]').hide();

                            // $.modaldialog.error('', {});
                            // $.modaldialog.hide();
                            var errormsg = 'There was a problem changing your passowrd:  ' + msg.d;
                            $.modaldialog.error(errormsg, {
                                title: 'Error!',
                                width: 200
                            });


                        }

                        $("#specialthrobberstylingdiv").hide();

                    },
                    error: function (msg)
                    {
                        alert("Possible web service failure:  " + msg.d);
                    }
                });
            }
        });
    }



   
});

Open in new window

0
effxCommented:
Your code is wrong, please use:
$(document).ready(function ()
{
    var loc = window.location.href.toUpperCase();


    if (loc.indexOf("ACCOUNTDETAILS") != -1)
    {

        $('input[id*="ButtonChangePW"]').bind('click', function ()
        {
            var datastring = "";

            var customstring = {}; // empty new Array

            $('input[type="password"]').each(function ()
            {
                var str = $(this).attr("ID");
                var last = str.split("_").pop();
                customstring[last] = $(this).val();
            });

            datastring = JSON.stringify(customstring);

            if (datastring != '')
            {
                $.ajax({
                    type: "POST",
                    async: false,
                    url: "WebGlobalMethods.asmx/ChangePassword",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: datastring,
                    success: function (msg)
                    {
                        someresult = msg.d;

                        if (someresult.indexOf("Password changed!") != -1)
                        {

                            //   $('div[id*="wait"]').hide();

                          //  $('#dialog').css('visibility', 'visible');
                          //  $('#dialog-mask').css('visibility', 'visible');
                            $.modaldialog.success('Your password has been changed', {
                                title: 'Success!',
                                width: 200
                            });
                        }
                        else
                        {
                            //   $('div[id*="wait"]').hide();

                            // $.modaldialog.error('', {});
                            // $.modaldialog.hide();
                            var errormsg = 'There was a problem changing your passowrd:  ' + msg.d;
                            $.modaldialog.error(errormsg, {
                                title: 'Error!',
                                width: 200
                            });
                            
                            $('#dialog-close').click(function (){
		                        $("#specialthrobberstylingdiv").hide();
                            });



                        }


                    },
                    error: function (msg)
                    {
                        alert("Possible web service failure:  " + msg.d);
                    }
                });
            }
        });
    }



   
});

Open in new window

0
Tom KnowltonWeb developerAuthor Commented:
I am sorry to report that your changes do not seem to work.


https://webstore.uconncoop.com/AccountDetails.aspx
0
effxCommented:
0
Tom KnowltonWeb developerAuthor Commented:
What browser are you in?

I am using Firefox 8.0
0
Tom KnowltonWeb developerAuthor Commented:
0
Tom KnowltonWeb developerAuthor Commented:
Just to let you know....the screen cast that you recorded   IS    the behavior I am wanting.

I wish I knew why it does not work in Firefox...
0
effxCommented:
Ah I see the problem, this is because I only attached the function to the cross in the top right:
$(document).ready(function ()
{
    var loc = window.location.href.toUpperCase();


    if (loc.indexOf("ACCOUNTDETAILS") != -1)
    {

        $('input[id*="ButtonChangePW"]').bind('click', function ()
        {
            var datastring = "";

            var customstring = {}; // empty new Array

            $('input[type="password"]').each(function ()
            {
                var str = $(this).attr("ID");
                var last = str.split("_").pop();
                customstring[last] = $(this).val();
            });

            datastring = JSON.stringify(customstring);

            if (datastring != '')
            {
                $.ajax({
                    type: "POST",
                    async: false,
                    url: "WebGlobalMethods.asmx/ChangePassword",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: datastring,
                    success: function (msg)
                    {
                        someresult = msg.d;

                        if (someresult.indexOf("Password changed!") != -1)
                        {

                            //   $('div[id*="wait"]').hide();

                          //  $('#dialog').css('visibility', 'visible');
                          //  $('#dialog-mask').css('visibility', 'visible');
                            $.modaldialog.success('Your password has been changed', {
                                title: 'Success!',
                                width: 200
                            });
                        }
                        else
                        {
                            //   $('div[id*="wait"]').hide();

                            // $.modaldialog.error('', {});
                            // $.modaldialog.hide();
                            var errormsg = 'There was a problem changing your passowrd:  ' + msg.d;
                            $.modaldialog.error(errormsg, {
                                title: 'Error!',
                                width: 200
                            });
                            
                            $('#dialog-close, #dialog-button').click(function (){
		                        $("#specialthrobberstylingdiv").hide();
                            });



                        }


                    },
                    error: function (msg)
                    {
                        alert("Possible web service failure:  " + msg.d);
                    }
                });
            }
        });
    }



   
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tom KnowltonWeb developerAuthor Commented:
effx:

It works just great now!!!

Thank you for the time and effort.  And thanks for being patient.


Tom
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.