You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@struts.apache.org by RogerV <ro...@googlemail.com> on 2011/01/10 09:48:32 UTC
JQuery Plugin Modal Dialog help needed
Hi
I've been experimenting with the JQuery sjg:grid tag and I've got to the
stage where I can display a list of user entities and, using a custom
formatter, add two links to each row to allow for the edit and deletion of
individual entities. This is working well.
I'm now trying to add a sj:dialog tag into the mix, so that when the delete
link is clicked, I can display a modal "confirmation" dialog and either
continue with the delete or cancel the operation. What is happening now is
that when a "delete" link is clicked, the dialog is displayed but continues
directly to my delete-user action without waiting for the user to respond to
the dialog. I suspect I'm tripping over what happens with the jquery tags at
"render" time on the server and execution time on the client. I'd be very
grateful if someone could show me how to implement a "confirmation" dialog
correctly as javascript/jquery is not a strong point of mine. I've attached
my code so far below.
Regards
<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<sj:head jqueryui="true" jquerytheme="redmond" />
<script type="text/javascript">
function formatEditLink(cellvalue, options, rowObject) {
return " start-edit-user?userId=" Edit ";
}
function formatDeleteLink(cellvalue, options, rowObject) {
return " delete-user?userId=" Delete ";
}
function doDelete() {
$('#confirm_delete').dialog('open');
}
function continueButton() {
$('#confirm_delete').dialog('close');
return true;
}
function cancelButton() {
$('#confirm_delete').dialog('close');
return false;
}
</script>
</head>
<body>
<h2>List Users</h2>
<div id="gridContainer">
<s:url id="remoteurl" action="load-user-table"/>
<sjg:grid
id="gridtable"
caption="Users"
dataType="json"
href="%{remoteurl}"
pager="true"
gridModel="users"
rowList="10,15,20"
rowNum="15"
rownumbers="false"
editinline="false"
>
<sjg:gridColumn name="username" index="username" title="User Name"
sortable="true" key="true"/>
<sjg:gridColumn name="serial" index="serial" title="Serial#"
formatter="integer" sortable="true"/>
<sjg:gridColumn name="email" index="email" title="E-Mail"
sortable="false"/>
<sjg:gridColumn name="edit" title="" formatter="formatEditLink"
sortable="false"/>
<sjg:gridColumn name="delete" title="" formatter="formatDeleteLink"
sortable="false"/>
</sjg:grid>
</div>
<sj:dialog id="confirm_delete"
title="Confirm Delete"
autoOpen="false"
modal="true"
width="400"
buttons="{
'Yes':function() {continueButton();},
'No':function() {cancelButton();}
}"
>
<h5>Do you really want to delete this user. This cannot be reversed</h5>
</sj:dialog>
</body>
</html>
--
View this message in context: http://old.nabble.com/JQuery-Plugin-Modal-Dialog-help-needed-tp30631960p30631960.html
Sent from the Struts - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: JQuery Plugin Modal Dialog help needed
Posted by Dave Newton <da...@gmail.com>.
Without knowing how the delete link renders or how how it's handled in
JavaScript it's difficult to help. Doesn't seem like a Struts issue
yet, though. If it's just a simple link with an onclick it'll still
follow the link unless the onclick handler itself returns false or the
event isn't allowed to bubble up.
Dave
On Monday, January 10, 2011, RogerV <ro...@googlemail.com> wrote:
>
>
>
> Dave Newton-6 wrote:
>>
>> Seems more a JavaScript question... Does the click handler eventually
>> return
>> false so the browser won't actually follow the link?
>>
>
> The doDelete() function is my on-click handler which opens the dialog
> created by the <sj:dialog> tag. I was assuming (probably erroneously) that
> the true/false would come from the button handlers (continueButton() and
> cancelButton()) defined on the <sj:dialog> tag - but I never get a chance to
> click either button on the dialog, it displays correctly but doesn't block
> until a button is pressed, it proceeds directly into my delete action.
>
> Regards
>
> function doDelete() {
> $('#confirm_delete').dialog('open');
> }
>
> function continueButton() {
> $('#confirm_delete').dialog('close');
> return true;
> }
>
> function cancelButton() {
> $('#confirm_delete').dialog('close');
> return false;
> }
> --
> View this message in context: http://old.nabble.com/JQuery-Plugin-Modal-Dialog-help-needed-tp30631960p30633455.html
> Sent from the Struts - User mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: JQuery Plugin Modal Dialog help needed
Posted by RogerV <ro...@googlemail.com>.
Dave Newton-6 wrote:
>
> Seems more a JavaScript question... Does the click handler eventually
> return
> false so the browser won't actually follow the link?
>
The doDelete() function is my on-click handler which opens the dialog
created by the <sj:dialog> tag. I was assuming (probably erroneously) that
the true/false would come from the button handlers (continueButton() and
cancelButton()) defined on the <sj:dialog> tag - but I never get a chance to
click either button on the dialog, it displays correctly but doesn't block
until a button is pressed, it proceeds directly into my delete action.
Regards
function doDelete() {
$('#confirm_delete').dialog('open');
}
function continueButton() {
$('#confirm_delete').dialog('close');
return true;
}
function cancelButton() {
$('#confirm_delete').dialog('close');
return false;
}
--
View this message in context: http://old.nabble.com/JQuery-Plugin-Modal-Dialog-help-needed-tp30631960p30633455.html
Sent from the Struts - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: JQuery Plugin Modal Dialog help needed
Posted by Dave Newton <da...@gmail.com>.
Seems more a JavaScript question... Does the click handler eventually return
false so the browser won't actually follow the link?
Dave
On Jan 10, 2011 3:49 AM, "RogerV" <ro...@googlemail.com> wrote:
>
> Hi
>
> I've been experimenting with the JQuery sjg:grid tag and I've got to the
> stage where I can display a list of user entities and, using a custom
> formatter, add two links to each row to allow for the edit and deletion of
> individual entities. This is working well.
>
> I'm now trying to add a sj:dialog tag into the mix, so that when the
delete
> link is clicked, I can display a modal "confirmation" dialog and either
> continue with the delete or cancel the operation. What is happening now is
> that when a "delete" link is clicked, the dialog is displayed but
continues
> directly to my delete-user action without waiting for the user to respond
to
> the dialog. I suspect I'm tripping over what happens with the jquery tags
at
> "render" time on the server and execution time on the client. I'd be very
> grateful if someone could show me how to implement a "confirmation" dialog
> correctly as javascript/jquery is not a strong point of mine. I've
attached
> my code so far below.
>
> Regards
>
> <?xml version="1.0" encoding="ISO-8859-1" ?>
> <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
> pageEncoding="ISO-8859-1"%>
> <%@ taglib prefix="s" uri="/struts-tags" %>
> <%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
> <%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html>
> <head>
> <sj:head jqueryui="true" jquerytheme="redmond" />
> <script type="text/javascript">
>
> function formatEditLink(cellvalue, options, rowObject) {
> return " start-edit-user?userId=" Edit ";
> }
> function formatDeleteLink(cellvalue, options, rowObject) {
> return " delete-user?userId=" Delete ";
> }
>
> function doDelete() {
> $('#confirm_delete').dialog('open');
> }
>
> function continueButton() {
> $('#confirm_delete').dialog('close');
> return true;
> }
>
> function cancelButton() {
> $('#confirm_delete').dialog('close');
> return false;
> }
> </script>
>
> </head>
> <body>
> <h2>List Users</h2>
> <div id="gridContainer">
> <s:url id="remoteurl" action="load-user-table"/>
>
> <sjg:grid
> id="gridtable"
> caption="Users"
> dataType="json"
> href="%{remoteurl}"
> pager="true"
> gridModel="users"
> rowList="10,15,20"
> rowNum="15"
> rownumbers="false"
> editinline="false"
> >
> <sjg:gridColumn name="username" index="username" title="User Name"
> sortable="true" key="true"/>
> <sjg:gridColumn name="serial" index="serial" title="Serial#"
> formatter="integer" sortable="true"/>
> <sjg:gridColumn name="email" index="email" title="E-Mail"
> sortable="false"/>
> <sjg:gridColumn name="edit" title="" formatter="formatEditLink"
> sortable="false"/>
> <sjg:gridColumn name="delete" title="" formatter="formatDeleteLink"
> sortable="false"/>
> </sjg:grid>
> </div>
> <sj:dialog id="confirm_delete"
> title="Confirm Delete"
> autoOpen="false"
> modal="true"
> width="400"
> buttons="{
> 'Yes':function() {continueButton();},
> 'No':function() {cancelButton();}
> }"
>>
> <h5>Do you really want to delete this user. This cannot be reversed</h5>
> </sj:dialog>
> </body>
> </html>
> --
> View this message in context:
http://old.nabble.com/JQuery-Plugin-Modal-Dialog-help-needed-tp30631960p30631960.html
> Sent from the Struts - User mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>