Link to home
Start Free TrialLog in
Avatar of Tom Knowlton
Tom KnowltonFlag for United States of America

asked on

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

Avatar of Rob
Rob
Flag of Australia image
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

Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

btw, How were you able to include the modaldialog plugin in jsfiddle?  
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

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

Avatar of effx
effx
Flag of United Kingdom of Great Britain and Northern Ireland image
<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>
Avatar of effx
effx
Flag of United Kingdom of Great Britain and Northern Ireland image
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

Avatar of effx
effx
Flag of United Kingdom of Great Britain and Northern Ireland image
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

Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

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?



Avatar of effx
effx
Flag of United Kingdom of Great Britain and Northern Ireland image
can you comment these lines out please:

                            $.modaldialog.error('', {});
                            $.modaldialog.hide();
these are on line 54
Avatar of Rob
Rob
Flag of Australia image
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

Avatar of Rob
Rob
Flag of Australia image
Please do NOT comment out those lines re effx (line 54), I put them in there to initialise the modaldialog
Avatar of effx
effx
Flag of United Kingdom of Great Britain and Northern Ireland image
@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.
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

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

Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

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!!!
Avatar of effx
effx
Flag of United Kingdom of Great Britain and Northern Ireland image
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

Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

It doesn't even show up if I do that.  The ajax call is too fast.
Avatar of effx
effx
Flag of United Kingdom of Great Britain and Northern Ireland image
Can you apply the change on the site please, I will have a look
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

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

Avatar of effx
effx
Flag of United Kingdom of Great Britain and Northern Ireland image
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

Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

I am sorry to report that your changes do not seem to work.


https://webstore.uconncoop.com/AccountDetails.aspx
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

What browser are you in?

I am using Firefox 8.0
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

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...
ASKER CERTIFIED SOLUTION
Avatar of effx
effx
Flag of United Kingdom of Great Britain and Northern Ireland image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

effx:

It works just great now!!!

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


Tom