You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Peter Munro <sp...@gmail.com> on 2010/10/12 20:25:40 UTC

[wiquery] How to open a modal dialog from a Link?

Hi,

I'm using wiQuery and have a demo application with a Button that opens a
modal dialog successfully, but I'd like to use Links instead of Buttons, so
I'm replacing this:
<button wicket:id="open-dialog">Open dialog</button>
with an anchor/Link:
<a href="#" wicket:id="open-dialog">Open dialog</a>

and in my Java code, replacing this:
Button button = new Button("open-dialog");
with this:
Link link = new Link("open-dialog") {
    public void onClick() {
        System.out.println("clicked");
    }
};

When I run it and click the link, the Dialog appears for half a second or
so, then the page refreshes itself as a result of the <a> tag's HTTP
request/response.

I'd like for the dialog to appear locally WITHOUT any HTTP request/response.
And further (ideally), if Javascript is disabled, then have the onClick()
method invoked as normal.

Any ideas how I can do this?

Many thanks,
Peter

Re: [wiquery] How to open a modal dialog from a Link?

Posted by Peter Munro <sp...@gmail.com>.
That works beautifully. Thanks Ernesto.

I also made a small mod to remove the 'href' on the client side so that it
just opens the dialog and doesn't follow the link:

        JsQuery linkQuery = new JsQuery(link);
        linkQuery.$().chain("attr", "'href'", "'#'");
        link.add(new HeaderContributor(linkQuery));

Thanks again,
Peter

On Tue, Oct 12, 2010 at 8:27 PM, Ernesto Reinaldo Barreiro <
reiern70@gmail.com> wrote:

> Use JavaScript to do that on the client side? See method
>
> /**Method to open the dialog
>         * @return the associated JsStatement
>         */
>        public JsStatement open() {
>                return new JsQuery(this).$().chain("dialog", "'open'");
>        }
>
> on Dialog class which generates the needed JavaScript. I haven't tried this
> but
>
> <a wicket:id="link" onclick="">Open Dialog</a>
>
> -------
>
> WebMarkupContainer link =  new WebMarkupContainer("link");
>                link.add(new AttributeModifier("onclick", new
> AbstractReadOnlyModel<String>() {
>
>                        @Override
>                        public String getObject() {
>                                return new
> JsQuery(dialog).$().chain("dialog",
> "'open'").render().toString();
>                        }
>                }));
>
> might work.
>
> Ernesto
>
>
>
> On Tue, Oct 12, 2010 at 8:25 PM, Peter Munro <sp...@gmail.com> wrote:
> > Hi,
> >
> > I'm using wiQuery and have a demo application with a Button that opens a
> > modal dialog successfully, but I'd like to use Links instead of Buttons,
> so
> > I'm replacing this:
> > <button wicket:id="open-dialog">Open dialog</button>
> > with an anchor/Link:
> > <a href="#" wicket:id="open-dialog">Open dialog</a>
> >
> > and in my Java code, replacing this:
> > Button button = new Button("open-dialog");
> > with this:
> > Link link = new Link("open-dialog") {
> >    public void onClick() {
> >        System.out.println("clicked");
> >    }
> > };
> >
> > When I run it and click the link, the Dialog appears for half a second or
> > so, then the page refreshes itself as a result of the <a> tag's HTTP
> > request/response.
> >
> > I'd like for the dialog to appear locally WITHOUT any HTTP
> request/response.
> > And further (ideally), if Javascript is disabled, then have the onClick()
> > method invoked as normal.
> >
> > Any ideas how I can do this?
> >
> > Many thanks,
> > Peter
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

Re: [wiquery] How to open a modal dialog from a Link?

Posted by Ernesto Reinaldo Barreiro <re...@gmail.com>.
Use JavaScript to do that on the client side? See method

/**Method to open the dialog
	 * @return the associated JsStatement
	 */
	public JsStatement open() {
		return new JsQuery(this).$().chain("dialog", "'open'");
	}

on Dialog class which generates the needed JavaScript. I haven't tried this but

<a wicket:id="link" onclick="">Open Dialog</a>

-------

WebMarkupContainer link =  new WebMarkupContainer("link");
		link.add(new AttributeModifier("onclick", new
AbstractReadOnlyModel<String>() {
			
			@Override
			public String getObject() {				
				return new JsQuery(dialog).$().chain("dialog",
"'open'").render().toString();
			}
		}));

might work.

Ernesto



On Tue, Oct 12, 2010 at 8:25 PM, Peter Munro <sp...@gmail.com> wrote:
> Hi,
>
> I'm using wiQuery and have a demo application with a Button that opens a
> modal dialog successfully, but I'd like to use Links instead of Buttons, so
> I'm replacing this:
> <button wicket:id="open-dialog">Open dialog</button>
> with an anchor/Link:
> <a href="#" wicket:id="open-dialog">Open dialog</a>
>
> and in my Java code, replacing this:
> Button button = new Button("open-dialog");
> with this:
> Link link = new Link("open-dialog") {
>    public void onClick() {
>        System.out.println("clicked");
>    }
> };
>
> When I run it and click the link, the Dialog appears for half a second or
> so, then the page refreshes itself as a result of the <a> tag's HTTP
> request/response.
>
> I'd like for the dialog to appear locally WITHOUT any HTTP request/response.
> And further (ideally), if Javascript is disabled, then have the onClick()
> method invoked as normal.
>
> Any ideas how I can do this?
>
> Many thanks,
> Peter
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org