Only 48 hours left in the trailboss' kickstarter!

New rewards and stretch goals. CLICK HERE!



  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Primefaces modal dialog inside datagrid doesn't show up  RSS feed

 
Partheban Udayakumar
Ranch Hand
Posts: 499
AngularJS Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

I am new to JSF and primefaces. I tried using datagrid from primefaces example and implemented it. When i run the program, I get the following error in Chrome console. I opened it in Firefox using firebug but no error has been registered in firebug console.

Exception:

Uncaught TypeError: Cannot call method 'show' of undefined


I tried printing out values at the back when they are being fetched. The values are printed. Here is my xhtml in sscce(I hope)




I dont have an idea why this error occurs. Help me out
 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I think that the dialog has to be inside the form, not the other way around.

And don't forget that nested forms don't work, so the form for the dialog must not overlap the form for the page (or vice versa.)
 
Partheban Udayakumar
Ranch Hand
Posts: 499
AngularJS Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Tim,

I tried that too same result. Here is the code:

 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Now you appear to have both the page and the dialog in the same form.

Recommended is to have form/dialog followed by form/page contents (IE constraints) all within the same h:body.

Aside from form problems, though, I note that you're doing a "PF('testDialog').show()". I'm pretty sure that the object should be referenced by its ID, not by its "var" value.

In other words: PF('testDlg').show()
 
Partheban Udayakumar
Ranch Hand
Posts: 499
AngularJS Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Tim,

Thanks for the reply. I changed whatever you have mentioned still the dialog doesn't popup. Here is the modified code:

 
Jason Jia
Greenhorn
Posts: 10
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
1. Just want to point out the PF('objectName') is PrimeFaces specification while objectName should refer from widgetVar. So in this case should be PF('testDialog').show()

2. Try this:

(1) remove oncomplete="PF('testDlg').show()" from p:commandLink
(2) in actionListener, call javascripts to popup, e.g.

public void onLinkClick() {

...... // add additional code below

RequestContext context = RequestContext.getCurrentInstance();
//execute javascript oncomplete
context.execute("PF('testDialog').show();");

....


 
Partheban Udayakumar
Ranch Hand
Posts: 499
AngularJS Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Jason Jia,

1) I actually had it as PF('testDialog').show(), you can see my previous posts. In Tim's post you could see that he had asked me to try it the other way. So I changed it.

2) I tried that too but still no results.



 
Jason Jia
Greenhorn
Posts: 10
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I didn't notice there are 2 forms. Why? Change to one form should work.
 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Jason Jia wrote:I didn't notice there are 2 forms. Why? Change to one form should work.


No. The dialog is a form independent of the page. Otherwise submitting data on the dialog would also submit all the data on the page.
 
Partheban Udayakumar
Ranch Hand
Posts: 499
AngularJS Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Jason Jia,

Tim Holloway wrote:No. The dialog is a form independent of the page. Otherwise submitting data on the dialog would also submit all the data on the page.


The statement is very true. It won't affect you when you are handling small components but when you are trying to handle a bunch of components in the same page, you can see the effect.
 
Jason Jia
Greenhorn
Posts: 10
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Isn't the showcase what you want? http://www.primefaces.org/showcase/ui/data/dataGrid.xhtml

If so, please follow the show case exactly.

If cannot figure out why not working? send me or post all the source files (.xhtml, .java as samples in the showcase)

Important phase in show case is :

<p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail">
<h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{car}" target="#{dataGridView.selectedCar}" />
</p:commandLink>

Where update clause will update the partial form which is the dialog ( you see the dialog is in the same form).
f:setPropertyActionListener will trigger the actionlistener to update dataGridView for dialog

In most case, P:dialog is small portion of the form. If you want a seperate form, then use dialog framework.

Thanks
Jason
 
Partheban Udayakumar
Ranch Hand
Posts: 499
AngularJS Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Jason, Tim

I finally figured out the problem.

<script type="text/javascript" src="assets/js/jquery.min.js" />


When I removed this script, the dialog box is pops up but when I click on the next item it doesn't popup. Any ideas?
 
Jason Jia
Greenhorn
Posts: 10
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
PrimeFaces is based on Jquery and will automatic load Jquery. Normally shouldn't load it by yourself.

See BalusC's explain here: PrimeFaces and Jquery
 
Tim Holloway
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
One thing that you should note when using JSF extensions with jQuery is that the version of jQuery that they are pulling may not be a very recent version.

That can be especially troublesome since jQuery had quite a few significant changes in basic functions in earlier days.

Usually you can reconcile jQuery versions, but does require a little tweaking to the setup to pull in the newer jQuery.
 
Partheban Udayakumar
Ranch Hand
Posts: 499
AngularJS Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Jason & Tim,

So that is why when I add few jquery files in my projects, errors are thrown. Thanks for the help guys.
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!