Make a JQuery function to close a dialog after submit

[Dino]

Hi All,
I'm using struts2.jquery-3.1.0 and I want to close the remote dialog
witch contains a submit button after we click on this button.

I have this for the dialog :

<s:url var="urlObselTypeListConstruct"
action="obselType_list_construct" escapeAmp="false">
<s:param name="transformation.uri" value="transformation.uri" /
>
<s:param name="ruleSelected.uri" value="ruleSelectedUri" />
</s:url>
<sj:dialog
id="addObseltypeTarget%{#ruleStatus.index}"
autoOpen="false"
modal="false"
title="%{getText('add.obselType.target')} : %
{transformation.traceModelTarget.label}"
width="550">
</sj:dialog>
<sj:a id="opentopicdialogAddObseltypeTarget%
{#ruleStatus.index}"
openDialog="addObseltypeTarget%{#ruleStatus.index}"
href="%{urlObselTypeListConstruct}"
cssClass="buttonlink ui-state-default ui-corner-all"
button="true"
buttonIcon="ui-icon-plusthick"
title="%{getText('add.obselType.target')}"
>
</sj:a>

And this in the result of the url "urlObselTypeListConstruct" :

<s:iterator value="transformation.traceModelTarget.obselTypes"
status="obselType">
<s:url var="urlAdd_war_construct" action="add_var_construct"
escapeAmp="false">
<s:param name="obselTypeUri" value="%{uri}" />
<s:param name="obselTypeLabel" value="%{label}" />
<s:param name="transformation.uri" value="transformation.uri" />
<s:param name="ruleSelected.uri" value="ruleSelected.uri" />
</s:url>
<sj:a onCompleteTopics="refreshUpdateRule"
targets="divUpdateRule"
button="true" href="%{urlAdd_war_construct}"
indicator="indicator"
onSuccessTopics="closeDialog"
title="%{label}">
<s:property value="%{label}" />
</sj:a>
<br/>
</s:iterator>


And I want : when I click on the <sj:a ... /> ==> close the dialog
"addObseltypeTarget%{#ruleStatus.index}"


Someone knows how to do that ?

Thanks !

Dino

[Jerome]

You can use the "closeTopics" attribute in sj:dialog

In your case, I guess you just need to add closeTopics="closeDialog"
in your sj:dialog.

Hope this help :)

[jogep]

I agree to Jerome, closeTopics are the best way to do it.

<sj:dialog ... closeTopics="closeThisDialog" ... />

<sj:a ... onCompleteTopics="closeThisDialog" ... >Submit</sj:a>


Johannes
---
web: http://www.jgeppert.com
twitter: http://twitter.com/jogep

[Dino COSMAS]

Hi all !

Super ! Thanks a lot ! It works perectly :)

Johannes, did you take the time to see the bug that I related with TreeNode ?

Thanks for all your work,

Dino

2011/7/5 jogep <joh...@googlemail.com>

--
You received this message because you are subscribed to the Google Groups "struts2-jquery" group.

To view this discussion on the web visit https://groups.google.com/d/msg/struts2-jquery/-/C5-0FK9dBXwJ.

To post to this group, send email to struts2...@googlegroups.com.
To unsubscribe from this group, send email to struts2-jquer...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/struts2-jquery?hl=en.

--
Dino COSMAS

[Dino COSMAS]

BUT !!!!
It' dosen't works when it's a remote dialog like that :

<s:url var="dumm" ... ><s:param ... /></s:url>

<sj:dialog ... closeTopics="closeDialog"/>

<sj:a href="%{dumm}" onSuccessTopics="closeDialog" />

:'(

some idea ? :)

Dino

2011/7/6 Dino COSMAS <din...@gmail.com>

--
Dino COSMAS

[Dino]

Plus :

When it's a local Dialog it's work only once.
But after any function of the dialog work correctly :'(

Could you try to fix that ?
I try to make a sample ...

Thanks,

Dino

[jogep]

A sample would be great, because i use this in some projects and it works fine for me.

[Dino]

Hi all,

Sample :

Take the showcase source 3.1.0.
Remplace the content of the file ajax1.jsp by :

<%@ taglib prefix ="s" uri="/struts-tags" %>
<%@ taglib prefix ="sj" uri="/struts-jquery-tags" %>
Mauris mauris ante, blandit et, ultrices a, suscipit
<s:form id="frmTest" action="dialog-remote" >
<sj:submit targets="main" onSuccessTopics="closeDialog"
value="remoteTest"></sj:submit>
</s:form>


remplace the content of the file dialog-remote.jsp :


<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<div id="col1">
<div id="col1_content" class="clearfix">
<ul>
<li><s:url id="urldialog" action="dialog"/><sj:a href="%
{urldialog}" targets="main">Dialog</sj:a></li>
<li><s:url id="urldialogclick" action="dialog-click"/><sj:a
href="%{urldialogclick}" targets="main">Dialog open on Click</sj:a></
li>
<li><s:url id="urldialogremote" action="dialog-remote"/><sj:a
href="%{urldialogremote}" targets="main">Remote Dialog</sj:a></li>
<li><s:url id="urldialogremotelink" action="dialog-remote-link"/
><sj:a href="%{urldialogremotelink}" targets="main">Remote Dialogs</
sj:a></li>
<li><s:url id="urldialogmodal" action="dialog-modal"/><sj:a
href="%{urldialogmodal}" targets="main">Modal Dialog</sj:a></li>
<li><s:url id="urldialogbuttons" action="dialog-buttons"/><sj:a
href="%{urldialogbuttons}" targets="main">Dialog with Buttons</sj:a></
li>
<li><s:url id="urldialogeffect" action="dialog-effect"/><sj:a
href="%{urldialogeffect}" targets="main">Dialog with Effect</sj:a></
li>
<li><s:url id="urldialogtopics" action="dialog-topics"/><sj:a
href="%{urldialogtopics}" targets="main">Dialog with Topics</sj:a></
li>
</ul>
</div>
</div>
<div id="col3">
<div id="col3_content" class="clearfix">
<h2>Remote Dialog</h2>
<p class="text">
A Dialog with remote content.
</p>
<s:url id="ajax" value="/ajax1.action"/>
<sj:dialog autoOpen="false" closeTopics="closeDialog"
id="myremotedialog" href="%{ajax}" title="Close Dialog with remote
content">
<img id="indicator" src="images/indicator.gif"
alt="Loading..."/>
</sj:dialog>
<sj:a openDialog="myremotedialog">openRemoteTest</sj:a>

<sj:dialog autoOpen="false" closeTopics="closeDialog2"
id="myLocaldialog" title="Close Dialog with local content">
<s:form id="frmTest2" action="dialog-remote" >
<sj:submit targets="main" onSuccessTopics="closeDialog2"
value="localTest"></sj:submit>
</s:form>
</sj:dialog>
<sj:a openDialog="myLocaldialog">openLocalTest</sj:a>

</div>

<div class="code ui-widget-content ui-corner-all">
<strong>Code:</strong>
<pre>
&lt;s:url id="ajax" value="/ajax1.action"/&gt;
&lt;sj:dialog id="myremotedialog" href="%{ajax}" title="Dialog
with remote content"&gt;
&lt;img id="indicator" src="images/indicator.gif"
alt="Loading..."/&gt;
&lt;/sj:dialog&gt;
</pre>
</div>
<!-- IE Column Clearing -->
<div id="ie_clearing"> &#160; </div>
</div>


And try with the two new dialog (remote and local).

Thanks !!!

Dino

[Jerome]

I am assuming clicking the submit button in the form ajax1.jsp didn't
close the dialog.

If that's the case, I will check to see the action "dialog-remote"
return success HTTP status code 200 (or other success code, such as
302, etc)

The topics "closeDialog" in onSuccessTopics will only publish if the
response is success.

[jogep]

I just try out your example, I think the main problem is that your
target is "main"
and your dialog is defined in main, which is replaced by your ajax
content.

I guess the DOM is in this case broken. If you place your dialog
outside of the main div
it should work. Following example works fine.

<%@ taglib prefix ="s" uri="/struts-tags" %>
<%@ taglib prefix ="sj" uri="/struts-jquery-tags" %>
Mauris mauris ante, blandit et, ultrices a, suscipit
<s:form id="frmTest" action="dialog-remote" >

<sj:submit targets="myremotedialog" onSuccessTopics="closeDialog"

value="remoteTest"></sj:submit>
</s:form>

Johannes
---
web: http://www.jgeppert.com
twitter: http://twitter.com/jogep

> > </s:form>- Hide quoted text -
>
> - Show quoted text -