Primefaces dataTable JavaScript Callback on row selection with row number - javascript

With RichFaces it is possible to execute a JavaScript function when a single row is selected (via a click on the row) and passing the selected row number as a parameter like this:
<rich:extendedDataTable
rowKeyVar="row"
onRowClick="executeMeOnRowSelection(#{(row})"...>
I need to migrate this to Primefaces. According to this question Primefaces itself does not provide this functionality, but one can use Primefaces Extensions. However, when I try it like this:
<p:dataTable rowIndexVar="row" selectionMode="single">
<pe:javascript event="rowSelect" execute="executeMeOnRowSelection(#{(row})"/>
...it would seem that Primefaces generates a JavaScript callback that does not get the selected row number, but is always called with the first row number (a look at the generated page reveals a hard coded value for the function parameter of the executeMeOnRowSelection).
Edit: To be more precise, the #{row} variable seems to not be evaluated when used directly under the p:dataTable tag. It is correctly resolved when used inside a p:column tag, but both
<pe:javascript event="rowSelect" execute="executeMeOnRowSelection(#{(row})"/>
and, for that matter,
<p:ajax event="rowSelect" oncomplete="alert(#{row});" />
end up with #{row} being replaced with an empty string (both placed as direct children of the p:dataTable tag).
Is there an error in the way I use the pe tag in combination with p:dataTable? Is there an alternative solution?

Related

Saving a value in a hidden_field_tag with Javascript

I have a form in rails app with a field for choosing a city and saving it's id.
= select_tag 'building[city_id]',
options_for_select(cities.map{|c| [c.name, c.id]}),
onchange: "myFunction();", include_blank: "Choose city"
I want to save a city name in a hidden_field_tag as soon as the user chooses something from a select tag. How do I implement this with Javascript?
I'm very new to Javascript, please don't judge hard.
I suggest doing as little JS as possible. So:
Start by adding the hidden field (with a null value) in your Rails view.
Now you'll need to add Javascript to your pages (you may already have a file at app/assets/javascripts/application.js which is included with all your pages; including JS with your Rails templates is its own question). You'll need two functions, and jQuery will make life a lot easier:
A function which checks the value of the select tag, and updates the value of the hidden tag with the value from the select tag.
A function which runs at page load time which attaches an event listener to the select tag; this will listen for the "change" event on the "select" tag and call our first function when it sees it.
These will look something like this (N.B. this code will almost certainly not work for you without changes):
function setHiddenValue() {
// Get the value from the select tag
var selectValue = $('select#building_city_id').val();
// Set the hidden tag's value to the select tag value we got in the last line
$('input[type=hidden]#city_name').val(selectValue);
}
I'm guessing at the selectors for getting the elements, but Rails is putting IDs on them which you can use.
$(document).ready(function () {
$('select#building_city_id').on('change', setHiddenValue());
}
Obviously this is rough and will not work immediately on being pasted in. You'll want to be sure the selectors match what Rails is putting in your HTML, you'll want to be sure the scripts are getting included in your page and the event listener is being set, you'll need to check that jQuery is present, and you'll want to be sure the setHiddenValue function gets the correct value to put in the hidden form tag. But this is how I'd start out on what you're trying to do; the rest is details which are particular to your page.

Display bean value from javascript

How can I get the value of my bean to display from my javascript file?
My bean - dBean.strIssueDate
In the $(document).ready(function() of my jsp, I set the following:
$('#content').data("strIssueDate", "<c:out value="${dBean.strIssueDate}"/>");
My problem is that the date is updated (and it's correctly updated in the database), but I would like to call the value from the javascript file.
The update begins with a checkbox on another jsp page, which updates the data value via a java file, and then triggers the function in the javascript file, which is where my alert is called.
My (incorrect) code in the javascript file (which is not between tags, but just a file consisting of only js:
alert("${dBean.strIssueDate}");
which shows on the alert as ${dBean.strIssueDate}
I've tried removing the double quotes, substituting for single quotes, swapping the $ for a #, but nothing seems to work.
Looks like you are using JQuery and have already set the date on the #content so what about this.
alert($("#content").data("strIssueDate"));

Javascript to enable, disable drop down menu in JSP file having Java code only, no HTML directly

Let me introduce the design.
Each field in a JSP is made by a Map.
The label name, the input type (drop down or other), the input values, the default values, etc are added to the Map, say Map nameAttributes.
There is another class, GeneralWriter writer, to which I do not have access, which takes the values from Map, parses them and writes the proper HTML code.
After writing the Map, writer.writeSelectBox(nameAttributes); is called.
Now, the requirement is:
There is a drop-down menu, depending upon its selected value, some other drop-down menus are disabled (shown in UI, but not modifiable) or enabled.
Since, I am not writing HTML code for the added field, I can not write the function call events to do my job.
I have observed that a JS function is called on onMouseOut event from the fields, as seen in "View Source".
So I thought I might write my code there to check the field value and impact other drop-down menus.
But if I write alert in the JS function (just to check), it won't alert me, means the function is not called and I can not write the enable/disbale code.
Is there any way to achieve the job. The enabling and disabling should depend on what user selects in one of the drop downs.
Sample code:
<%
Map nameAttr = new HashMap();
nameAttr.put(GeneralConst.INPUT_MESSAGE, Const.MSG_FIELD_NAME);
//.....
writer.writeAllSelectBox(nameAttr);
%>
Urgent help needed, thanks.
In View Source of the JSP page, its clear that for some fields onChange and onMouseOut events etc. were added, and in the GeneralWriter class, those things were being written out to the out stream as follows
out.println("<td nowrap><select name=" + strName);
out.println(" style=\"width:" + strWidth + "px\"");
out.println(" onChange ="+onChange);
So, I added my own method there rather than using existing code and introduced the onChange event. The "onChange" variable that you see (the right one) is of java.lang.String type and this had to be passed from the JSP itself, as to what behavior I want or which particular function to call for a particular JSP.
Now I added the following in JSP
<body>
<script>
window.onload = setModeForPara2('MEMBERTYPE','MEMBERSTATE','CKSTATUS') ;
function resetevent(uri){
setModeForPara2('MEMBERTYPE','MEMBERSTATE','CKSTATUS') ;
}
</script>
</body>
where the parameters are the names of the drop down menus, and setModeForPara2() is a JS function to disable/enable as my requirement was stated in original post. It checks if MEMBERTYPE is 0, then render disabled state and gray color to MEMBERSTATE and CKSTATUS drop-down menus, else enable them and remove gray color.
The resetevent(uri) is also a JS function called when the Reset button is clicked to render the disabled state to the State and Status fields.
So that way, setModeForPara2() function is called whenever:
1. the page is loaded,
2. the value of first drop-down (MEMBERTYPE) is changed, and
3. the Reset button is clicked.
Resolved.

Interactive report Oracle apex passing string attribute to JavaScript variable

I have an interactive report in Oracle Apex 4.1. I need to pass a column value to an apex item when i click a link button on that interactive report.
I have searched on Google and found a solution :
onclick="$s('P4_PAGEITEM', #COLUMN_NAME#); return false;"
But it seems it's only working for numbers. When I try passing a string value it always returns wrong number format.
Also, can I access an interactive report column value from JavaScript?
#COLUMN_NAME# is a substitution string. It will literally put the value of the column for that row in the string.
When the value is a number, it will generate
onclick="$s('P4_PAGEITEM', 9875); return false;"
Now, if the value would be a string
onclick="$s('P4_PAGEITEM', ALLEN); return false;"
To deal with this, alter your link with adding quotes around #COLUMN_NAME#
onclick="$s('P4_PAGEITEM', '#COLUMN_NAME#'); return false;"
Also, can I access an interactive report column value from JavaScript?
All HTML on the page you see is accessible from javascript/jQuery and only requires you to use the correct selector. You do need to understand HTML and the DOM though.
A good start is always using a browser with the correct tools which will allow you to inspect elements, html, dom, javascript, css,... An example is the Firebug plugin for Firefox.
Targeting values in a report requires you to know its markup which you can find by inspecting the generated page html. Keep in mind that page and region templates can make a difference depending on the theme you are using.
If you are stuck on this, post a new question about it and provide html and an explanation of what you are trying to get at.
This question is an example of targetting values in a table: How to select a row element value from Oracle APEX 4 Classic Report (row element from a table tags)
have you tried using quotes arround your column value ? :
onclick="$s('P4_PAGEITEM', '#COLUMN_NAME#'); return false;"
It works for me.

a4j:param not invoking my javascript pointed to by value attribute

I am open to a different way to do this, but what I have seems like it should work from the documentation for RichFaces4 and JSF2.
The user flow is like this:
1) There is a 'Check Out' document link implemented with h:outputLink
2) The user clicks it and gets prompted with a dialog to enter check out comments implemented with rich:popupPanel
3) The user enters comments and clicks 'Continue' Button on the rich:popupPanel implemented with h:link (tried h:commandLink and a4j:commandLink also)
4) A new window pops up with the contents set to the h:link outcome attribute
In my broken case, everything works except when I pass a parameter from h:link
with a4j:param, whose value attribute does not resolve the javascript it points to correctly.
<h:outputLink id="promptForCommentsLink"
onclick="#{rich:component('commentsDlg')}.show();return false;"
value="#"> Check Out </h:outputLink>
<rich:popupPanel id="commentsDlg" modal="true">
<h:inputTextarea id="commentsId"/>
<h:link id="continueLink"
outcome="editorPage" <!-- editor for making changes to document -->
target="_blank" <!-- open in it;s own indow -->
value="Continue Check Out"
onclick="#{rich:component('commentsDlg')}.hide();">
<!-- these params get assignd to backing bean properties -->
<a4j:param name="dataId"
value="#{ithRow.id}" assignTo="#{myController.dataId}"/>
<a4j:param name="checkedOut"
value="true" assignTo="#{myController.checkedOut}"/>
<!-- this one is broken. assigns chars 'document.getElementById('..
to #{myController.checkOutComment} -->
<a4j:param name="checkOutComment"
assignTo="#{myController.checkOutComment}"
noEscape="true"
value="document.getElementById('myForm:dataTable:0:commentsId').value"
/>
</h:link>
</rich:popupPanel>
I was thinking maybe
document.getElementById('myForm:dataTable:0:commentsId').value
didn't point to what I typed into the textarea, but by putting another button on the dlg and pointing it's onclick to the same element id, it did indeed alert me with what it typed.
When I stop on the server side view scoped myController.setCheckOutComment(String s) method, it gets passed the string "document.getElementById('myForm:dataTable:0:commentsId').value"
According to RF4 documentation:
The a4j:param tag can be used with non-Ajax components in addition to Ajax components. This includes components which are working through the GET request, such as the h:link
and
Variables from JavaScript functions can be used for the value attribute. In such an implementation, the noEscape attribute should be set to true. Using noEscape="true", the value attribute can contain any JavaScript expression or JavaScript function invocation, and the result will be sent to the server as the value attribute.
Since I seem to be playing by the jsf/rf4 rules, I thought this would be okay.
One thing to note, if I use a4j:commandLink instead of h:link, it does indeed
send the result of javascript evaluated, however, that breaks the opening in its own window
and a few other issues.
Any thoughts on what might be happening, or even a better way to do this?
You could use a a4j:jsFunction with the parameters you need. Then call that function from the onclick in the h:link tag like setParams(#{ithRow.id}, true). Problem remain that you can't pass the value as a parameter to the javascript function. You could though use 'execute' to save the value of the inputArea to a backing bean and let the backend handle the value.
So yes, I would do it differently. I think you could handle the two other params at the backend and I would use 'execute' to store the value of the inputArea.
MAG,
Milo van der Zee

Categories