Tom Knowlton
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
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>
ASKER
btw, How were you able to include the modaldialog plugin in jsfiddle?
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.
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);
}
});
}
});
}
});
<script type="text/javascript">
var errormsg = 'There was a problem changing your passowrd: ' + msg.d;
$.modaldialog.error(errorm sg, {
title: 'Error!',
width: 200
});
$('#dialog-button').click( function ()
{
// $('div').css("border", "1px solid blue");
alert("hide spinner");
// $('div[id*="waitwrap"]').h ide();
return false;
});
</script>
var errormsg = 'There was a problem changing your passowrd: ' + msg.d;
$.modaldialog.error(errorm
title: 'Error!',
width: 200
});
$('#dialog-button').click(
{
// $('div').css("border", "1px solid blue");
alert("hide spinner");
// $('div[id*="waitwrap"]').h
return false;
});
</script>
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>
I have tested this, and it worsk:
http://screencast.com/t/tEppqrKzhw
In file "__attempt_change_password _via_webse rvice.js" on line 60 add:
http://screencast.com/t/tEppqrKzhw
In file "__attempt_change_password
$('#dialog-close').click(function ()
{
// $('div').css("border", "1px solid blue");
alert("hide spinner");
// $('div[id*="waitwrap"]').hide();
});
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?
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?
can you comment these lines out please:
$.modaldialog.error('', {});
$.modaldialog.hide();
these are on line 54
$.modaldialog.error('', {});
$.modaldialog.hide();
these are on line 54
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
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>
Please do NOT comment out those lines re effx (line 54), I put them in there to initialise the modaldialog
@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.
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:
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);
}
});
}
});
}
});
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!!!
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!!!
Easy, on line 62 of the file we are working with, get rid of the alert and replace with:
$("#specialthrobberstylingdiv").hide();
ASKER
It doesn't even show up if I do that. The ajax call is too fast.
Can you apply the change on the site please, I will have a look
ASKER
Sure thing. I hope I put it in the right spot!
It's up there now:
https://webstore.uconncoop.com/AccountDetails.aspx
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);
}
});
}
});
}
});
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);
}
});
}
});
}
});
ASKER
I am sorry to report that your changes do not seem to work.
https://webstore.uconncoop.com/AccountDetails.aspx
https://webstore.uconncoop.com/AccountDetails.aspx
ASKER
What browser are you in?
I am using Firefox 8.0
I am using Firefox 8.0
ASKER
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...
I wish I knew why it does not work in Firefox...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
effx:
It works just great now!!!
Thank you for the time and effort. And thanks for being patient.
Tom
It works just great now!!!
Thank you for the time and effort. And thanks for being patient.
Tom
you can see it working here: http://jsfiddle.net/rjurd/QyTzu/
sample button to trigger the error dialog
Open in new window
javascript
Open in new window
css
Open in new window