You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by drf <da...@gmail.com> on 2010/10/24 21:32:29 UTC
WiQuery Dialog when used with Ajax
The WiQuery home page gives a simple example of opening a jQuery dialog,
where the content already resides in the page.
I wonder if anyone can provide code which shows how to use WiQuery to open a
JQuery dialog with dynamic content, presumably using Ajax. For instance, you
want to show an error message, but the error message cannot be known when
the page is built. From what I have seen on the forum, people have tried to
do this without success - but there must be a way.
Any code/links/help is really appreciated!
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/WiQuery-Dialog-when-used-with-Ajax-tp3009441p3009441.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: WiQuery Dialog when used with Ajax
Posted by drf <da...@gmail.com>.
I'd like to make the question a little more specific: the dialog box has to
the truly modal - nothing else in the browser can be accessed, ideally the
rest of the window will be slightly grayed to indicate that only the modal
window is enabled. Trying some of the examples on the web brings up a dialog
window - but it is not modal.
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/WiQuery-Dialog-when-used-with-Ajax-tp3009441p3009495.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: WiQuery Dialog when used with Ajax
Posted by Ernesto Reinaldo Barreiro <re...@gmail.com>.
David,
It is very difficult for me to tell what is happening without actually
seen your code. If you build a simplified quick-start I might find
some time and have a look at it.
Regards,
Ernesto
On Wed, Oct 27, 2010 at 4:58 PM, drf <da...@gmail.com> wrote:
>
> Ernesto
>
> Thanks for your help - storing the flag in the session idea works fine, I
> was doing this initially but then changed track when encountering backbutton
> issues. Now that I know how to handle the backbutton correctly, this is a
> better solution.
>
> In terms of the Dialog, I have the following issue: To the WiQuery Dialog is
> added a panel with two buttons, ok and close - both close the dialog, works
> fine. To test this, in the onclick event of menu items on the page I open
> the dialog as in your code - great. The problem is, if I then start a wizard
> (and use Ajax to place it on a panel on the page (actually, panel), in which
> the menu link is on), when the dialog is opened, the buttons will not have
> any effect. The dialog will remain open until clicking on the close icon in
> the top right corner. However, if I do a complete refresh on the page (which
> I do to change language), when the dialog is brought up again, the buttons
> will work.
>
> Something wierd is happening, apparantly when I use Ajax to change the page
> on which the Dialog is added. I know of course it hard to say much without
> seeing the code, but as someone with a lot more experience of Wicket and
> Ajax, are you able to give any pointers as to how to go about debugging this
> kind of issue?
>
> I should add that doing exactly the same thing works fine when using the
> standard Wicket ModalWindow.
> Again, thanks a lot!
>
> David
>
>
> --
> View this message in context: http://apache-wicket.1842946.n4.nabble.com/WiQuery-Dialog-when-used-with-Ajax-tp3009441p3015645.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: WiQuery Dialog when used with Ajax
Posted by drf <da...@gmail.com>.
Ernesto
Thanks for your help - storing the flag in the session idea works fine, I
was doing this initially but then changed track when encountering backbutton
issues. Now that I know how to handle the backbutton correctly, this is a
better solution.
In terms of the Dialog, I have the following issue: To the WiQuery Dialog is
added a panel with two buttons, ok and close - both close the dialog, works
fine. To test this, in the onclick event of menu items on the page I open
the dialog as in your code - great. The problem is, if I then start a wizard
(and use Ajax to place it on a panel on the page (actually, panel), in which
the menu link is on), when the dialog is opened, the buttons will not have
any effect. The dialog will remain open until clicking on the close icon in
the top right corner. However, if I do a complete refresh on the page (which
I do to change language), when the dialog is brought up again, the buttons
will work.
Something wierd is happening, apparantly when I use Ajax to change the page
on which the Dialog is added. I know of course it hard to say much without
seeing the code, but as someone with a lot more experience of Wicket and
Ajax, are you able to give any pointers as to how to go about debugging this
kind of issue?
I should add that doing exactly the same thing works fine when using the
standard Wicket ModalWindow.
Again, thanks a lot!
David
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/WiQuery-Dialog-when-used-with-Ajax-tp3009441p3015645.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: WiQuery Dialog when used with Ajax
Posted by Ernesto Reinaldo Barreiro <re...@gmail.com>.
David?
Answers inlined
>
> Is it possible with WiQuery to add jQuery code which is to be run before the
> dialog opens, and to use the return value from this code to determine
> whether or not the dialog opens at all? I have such code working already
> with plain javascript, it runs when an AjaxLink is clicked. I would like to
> get this working with WiQuery so as to use the look and feel of the dialog.
> The alternative presumably is to extend one of the jQuery dialog plugins.
>
Why not keep this state on the page or panel at server side? and then
use AJAX round trip to check that condition. You could
still use your decorator (I guess) with Dialog (ask you link is still
an AJAX link after all).
> Running the javascript first enables me to bring up a confirmation dialog if
> a link is clicked when a wizard is in progress. The wizard creates a hidden
> field in a panel, and the javascript can check for the existence and style
> of this field to determine if the user is in the middle of a wizard. This is
> better than storing a flag in the session, as the back-button could cause
> the Wicket session and the page dispalyed to get out of synch.
>
Not quite following you here. If wizard is in progress why not have a
flag on server side and again use AJAX to get back to the server and
do logic you need whatever you need there. You don't need to store
things in the directly session to have state .
Ernesto
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: WiQuery Dialog when used with Ajax
Posted by drf <da...@gmail.com>.
Ernesto , thank you very much, this is great. It should not be too difficult
to change the content (in your example, a Label) to a Panel with buttons for
ok, cancel etc.
Is it possible with WiQuery to add jQuery code which is to be run before the
dialog opens, and to use the return value from this code to determine
whether or not the dialog opens at all? I have such code working already
with plain javascript, it runs when an AjaxLink is clicked. I would like to
get this working with WiQuery so as to use the look and feel of the dialog.
The alternative presumably is to extend one of the jQuery dialog plugins.
Running the javascript first enables me to bring up a confirmation dialog if
a link is clicked when a wizard is in progress. The wizard creates a hidden
field in a panel, and the javascript can check for the existence and style
of this field to determine if the user is in the middle of a wizard. This is
better than storing a flag in the session, as the back-button could cause
the Wicket session and the page dispalyed to get out of synch.
Here is the code I have now:
@Override
protected IAjaxCallDecorator getAjaxCallDecorator() {
return new AjaxPreprocessingCallDecorator(super.getAjaxCallDecorator()) {
private static final long serialVersionUID = 1L;
@Override
public CharSequence preDecorateScript(CharSequence script) {
String leaveWizardConfirmationMessage = new ResourceModel
(WIZARD_CANCEL_CONFIRMATION_MESSAGE_TEXT_RESOURCE).getObject();
String javascript = "if
(document.getElementById('"+WIZARD_CANCEL_CONFIRMATION_HIDDEN_FIELD_NAME+"')
"+
"&&
document.getElementById('"+WIZARD_CANCEL_CONFIRMATION_HIDDEN_FIELD_NAME+"').style.display!='none')"+
" {if (!confirm('"+leaveWizardConfirmationMessage+"')) return false;}";
return javascript + script;
}
};
}
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/WiQuery-Dialog-when-used-with-Ajax-tp3009441p3009910.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: WiQuery Dialog when used with Ajax
Posted by Ernesto Reinaldo Barreiro <re...@gmail.com>.
you can see the example in action here
http://wiquery-plugins-demo.appspot.com/demo/?wicket:bookmarkablePage=:com.wiquery.plugins.demo.DialogPage
Just added it a moment ago;-)
Ernesto
On Sun, Oct 24, 2010 at 10:40 PM, Ernesto Reinaldo Barreiro
<re...@gmail.com> wrote:
> The code below does what you ask: a link and any time the link is
> clicked a modal dialog is opened and the contents of the dialog are
> update via AJAX.
>
> import org.apache.wicket.ajax.AjaxRequestTarget;
> import org.apache.wicket.ajax.markup.html.AjaxLink;
> import org.apache.wicket.markup.html.basic.Label;
> import org.apache.wicket.markup.html.panel.Panel;
> import org.apache.wicket.model.AbstractReadOnlyModel;
> import org.odlabs.wiquery.ui.dialog.Dialog;
>
> /**
> * @author Ernesto Reinaldo Barreiro
> *
> */
> public class DialogPanel extends Panel {
>
> private static final long serialVersionUID = 1L;
>
> private int counter = 0;
>
> private Dialog dialog;
> private Label content;
> /**
> * @param id
> */
> public DialogPanel(String id) {
> super(id);
> AjaxLink<Void> openDialog = new AjaxLink<Void>("openDialog") {
>
> private static final long serialVersionUID = 1L;
>
> @Override
> public void onClick(AjaxRequestTarget target) {
> counter++;
> target.addComponent(content);
> dialog.open(target);
> }
> };
>
> add(openDialog);
>
> dialog = new Dialog("dialog");
> dialog.setModal(true);
> dialog.setAutoOpen(false);
> add(dialog);
>
> add(dialog);
>
> content = new Label("content", new AbstractReadOnlyModel<String>() {
>
> private static final long serialVersionUID = 1L;
>
> @Override
> public String getObject() {
> return "I have been openned " + counter + " times via AJAX!";
> }
> });
> content.setOutputMarkupId(true);
> dialog.add(content);
> }
>
> }
>
> ------------DialogPanel.html--------------
>
> <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
> <body>
> <wicket:panel>
> <div style="width: 100%; padding-top: 20px;">
> <a wicket:id="openDialog">Click me to open dialog</a>
> <div wicket:id="dialog" title="Dialog">
> <div wicket:id="content"></div>
> </div>
> </div>
> </wicket:panel>
> </body>
> </html>
>
> There is a wiQuery google group were you can ask such question as well.
>
> Ernesto
>
>
> On Sun, Oct 24, 2010 at 9:32 PM, drf <da...@gmail.com> wrote:
>>
>> The WiQuery home page gives a simple example of opening a jQuery dialog,
>> where the content already resides in the page.
>>
>> I wonder if anyone can provide code which shows how to use WiQuery to open a
>> JQuery dialog with dynamic content, presumably using Ajax. For instance, you
>> want to show an error message, but the error message cannot be known when
>> the page is built. From what I have seen on the forum, people have tried to
>> do this without success - but there must be a way.
>>
>> Any code/links/help is really appreciated!
>>
>>
>> --
>> View this message in context: http://apache-wicket.1842946.n4.nabble.com/WiQuery-Dialog-when-used-with-Ajax-tp3009441p3009441.html
>> Sent from the Users forum mailing list archive at Nabble.com.
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: WiQuery Dialog when used with Ajax
Posted by guydog28 <gr...@guydo.com>.
Ernesto,
In the below snippet, sometimes it is not possible to ONLY include the
content of the modal dialog in the ajax target. There are times where a
parent of the dialog may be added to another AjaxRequestTarget (for some
reason other than just updating the dialog window - maybe to update a list
view that launches the modal). In this case, the Dialog is destroyed as is
no longer displayed. Is there anything that can be done to resolve this so
we don't have to work around the normal "if you add the parent to the
target, the child will be updated" approach? Adding the parent in this case
destroys the child.
Ernesto Reinaldo Barreiro-4 wrote:
>
>
> target.addComponent(content);
> dialog.open(target);
>
>
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/WiQuery-Dialog-when-used-with-Ajax-tp3009441p3061879.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: WiQuery Dialog when used with Ajax
Posted by Ernesto Reinaldo Barreiro <re...@gmail.com>.
The code below does what you ask: a link and any time the link is
clicked a modal dialog is opened and the contents of the dialog are
update via AJAX.
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.AjaxLink;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.AbstractReadOnlyModel;
import org.odlabs.wiquery.ui.dialog.Dialog;
/**
* @author Ernesto Reinaldo Barreiro
*
*/
public class DialogPanel extends Panel {
private static final long serialVersionUID = 1L;
private int counter = 0;
private Dialog dialog;
private Label content;
/**
* @param id
*/
public DialogPanel(String id) {
super(id);
AjaxLink<Void> openDialog = new AjaxLink<Void>("openDialog") {
private static final long serialVersionUID = 1L;
@Override
public void onClick(AjaxRequestTarget target) {
counter++;
target.addComponent(content);
dialog.open(target);
}
};
add(openDialog);
dialog = new Dialog("dialog");
dialog.setModal(true);
dialog.setAutoOpen(false);
add(dialog);
add(dialog);
content = new Label("content", new AbstractReadOnlyModel<String>() {
private static final long serialVersionUID = 1L;
@Override
public String getObject() {
return "I have been openned " + counter + " times via AJAX!";
}
});
content.setOutputMarkupId(true);
dialog.add(content);
}
}
------------DialogPanel.html--------------
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<body>
<wicket:panel>
<div style="width: 100%; padding-top: 20px;">
<a wicket:id="openDialog">Click me to open dialog</a>
<div wicket:id="dialog" title="Dialog">
<div wicket:id="content"></div>
</div>
</div>
</wicket:panel>
</body>
</html>
There is a wiQuery google group were you can ask such question as well.
Ernesto
On Sun, Oct 24, 2010 at 9:32 PM, drf <da...@gmail.com> wrote:
>
> The WiQuery home page gives a simple example of opening a jQuery dialog,
> where the content already resides in the page.
>
> I wonder if anyone can provide code which shows how to use WiQuery to open a
> JQuery dialog with dynamic content, presumably using Ajax. For instance, you
> want to show an error message, but the error message cannot be known when
> the page is built. From what I have seen on the forum, people have tried to
> do this without success - but there must be a way.
>
> Any code/links/help is really appreciated!
>
>
> --
> View this message in context: http://apache-wicket.1842946.n4.nabble.com/WiQuery-Dialog-when-used-with-Ajax-tp3009441p3009441.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org