Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2011-10-25
25
Medium Priority
?
549 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:Tom Knowlton
  • 12
  • 10
  • 3
25 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 37028961
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
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 37031270
btw, How were you able to include the modaldialog plugin in jsfiddle?  
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 37032569
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Expert Comment

by:effx
ID: 37034080
<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
 
LVL 10

Expert Comment

by:effx
ID: 37034162
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
 
LVL 10

Expert Comment

by:effx
ID: 37034214
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
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 37034521
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
 
LVL 10

Expert Comment

by:effx
ID: 37034604
can you comment these lines out please:

                            $.modaldialog.error('', {});
                            $.modaldialog.hide();
these are on line 54
0
 
LVL 43

Expert Comment

by:Rob
ID: 37035391
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
 
LVL 43

Expert Comment

by:Rob
ID: 37035393
Please do NOT comment out those lines re effx (line 54), I put them in there to initialise the modaldialog
0
 
LVL 10

Expert Comment

by:effx
ID: 37036782
@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
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 37038723
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
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 37038771
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
 
LVL 10

Expert Comment

by:effx
ID: 37039293
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
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 37040445
It doesn't even show up if I do that.  The ajax call is too fast.
0
 
LVL 10

Expert Comment

by:effx
ID: 37040489
Can you apply the change on the site please, I will have a look
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 37040744
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
 
LVL 10

Expert Comment

by:effx
ID: 37041075
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
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 37041125
I am sorry to report that your changes do not seem to work.


https://webstore.uconncoop.com/AccountDetails.aspx
0
 
LVL 10

Expert Comment

by:effx
ID: 37041210
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 37041238
What browser are you in?

I am using Firefox 8.0
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 37041261
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 37041269
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
 
LVL 10

Accepted Solution

by:
effx earned 2000 total points
ID: 37041399
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
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 37041486
effx:

It works just great now!!!

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


Tom
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question