Currently working on a project which uses Bootsfaces. I have a bootsfaces datatable in which i need to open a dialog box upon row selection. Please advice how to proceed.
Below is the code
<b:dataTable onclick="$('viewBKDDialog').show()"
update=":ViewBKDForm"
value="#{bookingAdminController.itemsBookDet}"
var="car" ajax="true" select="true" responsive="true" >
</b:dataTable>
and i m using
<ui:include src="ViewBookingDetails_all.xhtml"/>
as the dialog box.
Currently, I don't have the complete solution, but let's analyze your code. That's interesting enough.
First of all, you want to open a modal dialog based on the selected row. (Actually, the "modal dialog" bit is an educated guess). However, you added the onclick handler to the entire table. JSF doesn't make the rows explicit, so you have to add the onclick handler to the cells of the table. For the sake of simplicity, let's assume you've assigned the onclick handler to a button within the table.
Second, there's a bug in every BootsFaces version <= 0.9.1 that prevents you from detecting which row has been selected. So you have to use a version >= 0.9.2. At the time of writing, that's the developer snapshot BootsFaces-0.9.2-SNAPSHOT. See issue 369 on how to get it and issue 486 on the row-select bug I've recently solved.
Third, you should take in mind that the JavaScript code of the onclick handler is executed before the AJAX request. I can only guess, but I assume that you want to update the content of the modal dialog based on the row selection. I also assume that the content is defined by an AJAX request. If both assumptions are true, you've got a problem. The onclick handler is executed before the AJAX call. So I suggest you use the oncomplete JavaScript callback handler that's offered by some BootsFaces components, such as b:commandButton.
Like I've said before, that's not a complete solution, but I hope it helps nonetheless.
Related
We've been using Primefaces (v 3.5) and Primefaces Extensions (v 0.7.0) in our project and it's been great, cheers for the developers and community!
The inputNumber component takes care of pretty much all of our needs when dealing with decimal fields.
The one thing that isn't working is when the user paste a value into the field using the mouse right button then paste option.
When that happens, it seems these values aren't processed, since when I submit the form they are cleared, no matter it's a valid or unvalid value.
The user can even paste a text into the pe:inputNumber. The control c + control v works as expected, no problem at all.
The code we are using is like this:
<pe:inputNumber id="AmtInTxt" value="#{myController.amtField}" symbol="$ "/>
Any ideas of how can we make the context menu paste works like the control c + control v?
Community Post
Was this ever solved? For future viewers - this looks like an issue with not posting the data to the bean when using the mouse. Try putting an ajax event handler in your input field.
<pe:inputNumber ...>
<p:ajax event="blur"/>
</pe:inputNumber>
I've encountered same problem. At first I thought it happens only when using browser's autocomplete feature. From this post I've learned that it is strictly connected with just changing value via mouse. I am using <p:ajax event="blur" process="#this" /> and it doesn't change anything. More specifically, the value is empty within the InputNumberRenderer.getConvertedValue method and since then it passes null value to setter/listener.
EDIT: Also tried putting onstart="$(event.target).keypress()" within the ajax to simulate user's keypress. Sadly doesn't work.
Thank you for taking the time to read my question. I have searched the PrimeFaces forums for "calendar" and did not see a similar question. I have also scoured stack-overflow as well as the API docs and have not seen anyone attempting this (or at the very least, nobody has an issue with it.)
High Level
As an FYI: I am running Jsf 2.1.2 and PrimeFaces 5.0 with OmniFaces 1.6 on Jboss 7.11 GA.
I am trying to use an inplace component to get the functionality of an in-line date edit using a calendar component as a date picker and I am having conflicts with blur events.
I need to be able to select a date by either using the mouse or typing a date and hitting enter, leaving the newly selected date as the inplace label. For this, I hook into the calendar's ajax dateSelect event to call inplace.save() (which will also hide everything) and then hook into inplace's save event and use a listener to do my data-saving, no problems their.
Issue
While choosing a date, I need to be able to click somewhere else on the page and also save the calendar and inplace values. For this, I've been trying to use the calendar's ajax blur event and calling inplace.save().
The problem is that the blur event is called twice when clicking on one of the month-paging arrows. It hides the calendar and inplace edit as expected, but I am unable to pick any month beyond the one displayed by default. It could just be how the month paging works, but I'm not sure.
... dataTable var="currentObject"...
<p:inplace widgetVar="inplace">
<p:calendar>
<p:ajax event="dateSelect" oncomplete="PF('inplace').save()"/>
<p:ajax event="blur" oncomplete="PF('inplace').save()"/>
</p:calendar>
<p:ajax event="save" listener="#{myBean.save(currentObject)}" />
</p:inplace>
Has anyone here ever done this before? Is there any [clean] way for me to get me to the 'click away from the date picker to save it' functionality without negatively affecting the usability of the calendar itself?
Any input is greatly appreciated, Thanks!
EDIT:
It has been fairly rough using inplace for a data intensive purpose. The idea was nice on paper but difficult to implement properly and cover all the edge cases. A few things I did not like about using inplace were:
Inability to tab through data entry fields
Caused problems with validation and resetInput
Doesn't degrade gracefully when javascript isn't available
Mysterious to the user when a save occurs
We decided to not pursue this functionality in the end. However, the closest solution was the one given in the answer (to use change instead of blur), which still had its own set of 'funky' behaviors.
-Boboman
If i get it right, you have two cases: you choose a value by the calender-picker, or you type it in.
The first one is handled by the dateSelect-event, for the second one you can add a change-event, so the value is saved, as the focus goes out of the calendar-text-field.
Try:
<p:calendar>
<p:ajax event="change" oncomplete="PF('inplace').save()"/>
<p:ajax event="dateSelect" oncomplete="PF('inplace').save()"/>
</p:calendar>
By clicking a commandLink, I call an event on actionListener and after that, my dataGrid updates via AJAX then, onComplete, I call a javascript. It works fine on the first time but when I click the commandLink again, it does nothing.
Here's my code:
<p:commandLink id="addCompBtn" value="Add Computer" actionListener="#{coltsysLab.addComputer}" update=":organizeForm:availableComputers :organizeForm:labStat" oncomplete="getPos();"/>
My Javascript just positions each computer in a specific fixed location.
I am not sure what getPos() does; however, let's assume that it does not release event binding to the input DOM.
Try updating the commandLink as well:
<p:commandLink id="addCompBtn" value="Add Computer" actionListener="#{coltsysLab.addComputer}" update="#this,availableComputers,labStat" oncomplete="getPos();"/>
You should try removing oncomplete="getPos();" from your button and test again. If the button works fine beyond the 1st time then the problem must come from your JavaScript function. If that's the case, you should use the Developer Tools on any browser to investigate the issue. For example, on Chrome browser, right-click anywhere on the page then click Inspect Element, the Console section might help.
I ran into a very interesting issue. Here is my scenario:
My Goal
Use a SelectManyCheckbox with a nested tooltip.
Use SelectManyCheckbox onHide event to fire an Ajax (ActionListener) call
and update the
SelectManyCheckbox label and nested tooltip text.
My Approach
Use a remoteCommand and tie it to the SelectManyCheckbox onHide event
XHTML
<p:selectCheckboxMenu id="sourceFilter"
onHide="sourceFilterCommand();"
value="#{viewRevenueBean.sourceSelectManyMenu.selectedValues}"
label="#{viewRevenueBean.sourceSelectManyMenu.label}"
filter="true" filterMatchMode="contains"
validator="#{viewRevenueBean.sourceSelectManyMenu.validate}"
widgetVar="srcFilterDropDown">
<f:selectItems id="sourceItems"
value="#{viewRevenueBean.sourceSelectManyMenu.availableItems}"
var="source" itemLabel="#{source.label}" itemValue="#{source.value}" />
<f:convertNumber type="number" />
<p:tooltip id="srcToolTip"
for="sourceFilter"
value="#{viewRevenueBean.sourceSelectManyMenu.tooltipText}"
showEffect="fade"
hideEffect="fade"/>
<p:remoteCommand name="sourceFilterCommand" update="sourceFilter"
actionListener=#{viewRevenueBean.sourceSelectManyMenu.defaultEventHandler}"/>
</p:selectCheckboxMenu>
My Results
Ajax (Action Listener) gets fired and SelectManyCheckbox label and nested tooltip are updated (expected behavior).
In Firebug, I noticed that each onHide event Ajax call is multiplying the preceding number of server side requests by two (unexpected behavior).
e.g
1st onHide event = 1 Request
2nd onHide event = 2 Requests
3rd onHide event = 4 Requests
4th onHide event = 8 Requests
5th onHide event = 16 Requests
etc.....
This is obviously not desired and leads to a big slow down after just
a couple onHide events.
Experiments I tried
I created a p:command button which accomplished the desired Ajax call and correct element updates (without the multiplied request
issue) . I then proceeded to steal it's Ajax JavaScript call via
Firebug and placed it in my own JavaScript function, which I then
used as my onHide callback. Again, I experience the same unwanted
result, the label and tooltip are updated, but the requests start to
multiply.
I tried placing the remoteCommand in different locations
(outside the menu, inside it's own form etc). It doesn't make a
difference. The problem is still encountered.
I tried simplifying the SelectManyCheckbox scenario (remove
tooltip, coverter, tweak various attributes etc) to eliminate other
possibilities. No difference.
I tried a p:ajax instead of p:remoteCommand using onchange.
The Ajax requests work fine but obviously it's not what I am after.
I need to trigger it onHide.
Instead of a SelectCheckboxMenu , i tried using a
SelectManyCheckbox (no label) with onchange and keeping everything
else the same. The remoteCommand works fine, the Ajax call gets
called once and everything is nice and dandy. [/list] [list] * I
tried the PrimeFaces 3.5-SNAPSHOT as well. No difference. Issue is
still manifested.
Haven't found any clues on the forum or the net thus far in regards
to this issue. Does this sound like a bug or programmer clumsiness
:roll: ? Of course any insight and/or suggestions are highly
appreciated.
I have run into similar problems when using p:remoteCommand. I can't say for sure that the root cause is the same in your case, but maybe this can help somewhat.
In my case the problem was caused by multiplied registering of jquery bindings; the p:remoteCommand seem not to use $(somesource).off("some_event").on("some_event", some_function). That means - as far as I have understood - that if you update the component containing the p:remoteCommand, it's action will be registered over and over again, each time it's being updated. That in turn will mean that if you call on the name of the p:remoteCommand, it will fire the same amount of times as it's been registered.
You said you'd tried to move it outside and still got the same problem, so maybe it's not this problem after all. In my case I tested this assumption using a p:commandLink instead and had that call the backing bean. The goal for me was to make sure that any previous registration of a binding was removed, so through registering the binding like mentioned above:
$(somesource).off("some_event").on("some_event", some_function), and let some_function click the link, you can at least check if it solves the problem.
I'm using Primefaces 3.3.1 with Tomcat 7.0.22.0.
I have p:dataTable which has p:inputText in it. The id of that p:dataTable is "houseTabID:tabView:form0:table". This is copy-pasted from HTML source. And I let dialog (which is outside of the form dataTable resides) open by button in p:dataTable, and p:commandButton in that dialog updates the dataTable.
p:commandButton looks like this;
<p:commandButton ajax="true" action="#{myBean.setInputText()}"
value="OK"
update="#{myBean.getUpdateTarget(0)}"/>
myBean.getUpdateTarget(0) retruns proper string to point target component.
I can successfully update whole dataTable by specifying "houseTabID:tabView:form0:table" (meaning myBean.getUpdateTarget(0) returns that string). But I have many lines in the table so updating whole table takes longer to finish, and scroll position is reset which is really irritating. That makes me want to update only one row in the table, not whole.
So I first returned "houseTabID:tabView:form0:table:inputBox" to update p:inputText that I want to update. In p:dataTable I have something looks like this;
<p:column headerText="Value"
width="300" style="height:16px; font-size:9pt;">
<p:inputText id="inputBox" value="#{myItem.value}"
style="width:95%; height:11px; font-size:9pt;">
<f:ajax execute="#this" event="blur" />
</p:inputText>
</p:column>
Result: no update, no error log. I know "houseTabID:tabView:form0:table:inputBox" won't work since it does not specify row in table. So by using rowIndexVar, I tried with "houseTabID:tabView:form0:table:0:inputBox" with making :0: part from rowIndexVar. The string is copy-pasted from HTML source. But unfortunatelly, I got exception.
javax.faces.FacesException: Cannot find component with identifier ":houseTabID:tabView:form0:table:0:inputBox" referenced from "houseTabID:j_idt181:j_idt186".
Why? There is obviously "houseTabID:tabView:form0:table:0:inputBox", I see it on HTML source, and I can update whole talbe with "houseTabID:tabView:form0:table" but throw exception with "houseTabID:tabView:form0:table:0:inputBox"? It does not make sense to me. Also, then, why it won't throw any exception or spill out error log with "houseTabID:tabView:form0:table:inputBox"? I verified HTML source of that p:commandButton;
onclick="PrimeFaces.ab({source:'houseTabID:j_idt190:j_idt195',update:'houseTabID:tabView:form0:table:inputBox',
I desparately want to update just one row instead of whole p:dataTable. Please help me.
I found a solution. According to this conversation,
position = JQuery(".ui-datatable-scrollable-body").scrollTop();
JQuery(".ui-datatable-scrollable-body").scrollTop(position);
can do the trick. It seems this is the only way to get and set vertical scroll position of p:dataTable. I saved position before opening dialog, and set position after updating p:dataTable from dialog. It worked and this is what I wanted to do.
But above method has serious issue. That code scans given class ".ui-datatable-scrollable-body" from top and perform at the first found one. So it works only for one p:dataTable. Fortunately I could come up with 2nd solution.
<script type="text/javascript">
$ = jQuery;
var scrollPos;
function saveScrollPos()
{
scrollPos = $("#houseTabID\\:tabView\\:form0\\:table_data").parents(".ui-datatable-scrollable-body").scrollTop();
}
function getScrollPos()
{
$("#houseTabID\\:tabView\\:form0\\:table_data").parents(".ui-datatable-scrollable-body").scrollTop(scrollPos);
}
</script>
FireBug in FireFox helped me find out there is componnet id which "_data" is appedded by Primefaces. Please see my question, my data table's id is "table" and someone created "table_data". And I could point it with escaped syntax shown above and function parents() leads to that spot. It is working fine in my applictaion.
I really thank stier01 who posted his solution which is the only one I could find over the net. And I really feel sad that Primefaces p:dataTable does not support such a basic thing. I know many of us wanted to keep scroll position of p:dataTable when updating it. I hope it will be improved in near future.
I am teetering on the edge of what I know here but I suspect that it may be happening because of the timing of the page construction. When the DOM tree is built, your table rows do not yet exist so your button outside of the table cannot find the reference to the row (because it does not yet exist). After the tree is built and the data is filled in, the row is then there. That is why after the page renders you can look up the column id, but not reference it from outside of the table. I am not sure of a solution. Maybe you can put a remote command in the datatable tags to update it. Maybe can do something in JS.