I have a pretty simple JSF form on my hand like so:
<h:inputText id="number" value="#{bean.value}"
styleClass="integer" onkeyup="update()" />
I have a jQuery selector as well like this:
jQuery(document)
.ready(
jQuery(".integer")
.keydown(
function(event) {
//do your stuf
});
Now, this function is getting triggered pretty well, until I update the container around this input. It is a ui:repeat by the way. The update() method only refreshes a label. After the update the function is never triggered until I reload the page. This jquery included from a file in the head part, but is is still there after the update, function is not triggered however? How can I make it work again after update?
As others have already answered: When you update the container the event handler is not attached anymore and your need to reattach it.
However, another option to this is using jquery`s on() method.
So use something like this (untested though):
jQuery(document)
.ready(
$(document).on("keydown", '.integer', function (event) {
//do your stuf
}));
This isn't work after you update because the element isn't bound event anymore, so you should create a Javascript's function to solve this issue:
<script type="text/javascript">
function test(){
jQuery(".integer")
.keydown(
function(event) {
//do your stuf
});
};
jQuery(document)
.ready(test();
);
</script>
Component update your target component should call this test() function, like:
<p:commandButton oncomplete="test();" update=":COMPONENT_ID_HERE" ..../>
Related
My application is managing software, and for user convenience, I want to allow them to open multiple tabs for changing parameters of more than one record at a time. But after finishing whatever they doing, the tabs stays open, and I got some complains about that. So basically my question is:
If there's any way to close browser tab that sends a request to method in my backing bean? for example:
JSF page:
<h:commandButton value="Public score"
action="#{assignmentBean.publicSelected()}">
</h:commandButton>
Bean method:
public void publicSelected() {
application.setAssignmentStatus(done);
dataAccess.mergeEntity(application);
}
is there any way to add something after merging command and close browser tab that activated method? Thanks for help
FULL CODE FOR SOLUTION I'm bad with mixing JS and JSF, so for any of you that are also bad at this I post full code solution using Tiago Vieira Dos Santos hint.
Now my button code looks like:
<h:commandButton value="Public score"
action="#{myBean.doThings}">
<f:ajax execute="#this" onevent="pop"/>
</h:commandButton>
plus on bottom of page I added code as follows:
<script type="text/javascript">
function pop(data){
if(data.status == "success"){
window.close();
}
}
</script>
now after method does what has to be done the window closes.
I think you can be use the javascript command Window.close() then you can put it on oncomplete tag or call in you managed bean using the FacesContext.
See more in this How to close current tab in a browser window?
Using an OutputLink and Javascript
<h:outputLink onclick="window.open('popup.faces', 'popupWindowName', 'dependent=yes, menubar=no, toolbar=no'); return false;" value="#">
<h:outputText value="open popup" />
</h:outputLink>
With this solution we got control over the appearance of the new browser window. And since there is no postback, there is no validation at all. This is the easiest way to open a new browser window when no model update is needed and no action has to be executed.
In order to implement a proper action handling we need to move the decision whether to open a new window to the action listener.
<h:commandLink actionListener="#{bean.openPopupClicked}" value="open popup" />
public void openPopupClicked(ActionEvent event) {
// code to open a new browser window goes here
}
Since we can apply JQuery to any JSF rendered components, as in the following question
JSF to JQuery Component Integration
After having tried that, it did work I can successfully integrate JQuery into JSF, but the problem is that whenever I re-render the h:dataTable for instance, JQuery stops working,
-I'm using RichFaces and the a4j, by the way-.
For example, I have a data table as follows
<h:dataTable id="someDataTable" value="#{backingBean.someDataModel}" var="item" styleClass="table">
<h:column>
<h:outputText value="#{item.text}"/>
</h:column>
</h:dataTable>
and I have a button that when clicked re-renders the dataTable, and repopulate it with new data.
<a4j:commandButton value="Click" reRender="someDataTable"/>
and not to forget I have this script in the page
<script>
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery('.table').dataTable({
"bSort": false});
});
</script>
Now when the page is first loaded, sorting works fine, but whenever I click the button to re-render the table, the table is successfully populated with the new data from the backing bean, but the sorting doesn't work anymore.
From what I guess, I think this might has something to do with the
jQuery(document).ready()
which applies the
jQuery.('.table').dataTable();
only when the document is ready, so I was wondering if there's some events in jQuery that I can attach to the dataTable re-render event, as I'm no guru at JQuery or JS.
Just re-execute the script when the ajax request has completed.
First refactor your script into a reuseable function.
<script>
jQuery.noConflict();
jQuery(document).ready(function() {
initDataTable();
});
function initDataTable() {
jQuery('.table').dataTable({
"bSort": false
});
}
</script>
Then invoke the same function in oncomplete of <a4j:commandButton>.
<a4j:commandButton ... oncomplete="initDataTable()" />
I have the following jQuery code:
<script type="text/javascript" charset="utf-8">
$(function() {
initConfirmbinding();
$('#dialog').dialog({
autoOpen: false,
width: 'auto',
modal: true,
buttons: {
"Delete": function() {
$(this).dialog("close");
alert("You pressed OK!");
return true;
},
"Cancel": function() {
$(this).dialog("close");
return false;
}
}
});
function initConfirmbinding(){
// Dialog Link
$('.confirm').click(function(){
return $('#dialog').dialog('open'); // Here it doesn't stops for the return value!!
});
}
</script>
And this other code:
...
<c:foreach ...>
<h:commandLink styleClass="confirm" action="#{myBean.delete}">
<img src="/resources/images/delete-bw.png"/>
</h:commandLink>
<c/:foreach>
...
<!-- ui-dialog -->
<div id="dialog" title="Question" style="display: none;">
This item will be deleted, confirm?
</div>
I need to make the call to myBean.delete after the user confirms the dialog, but it just continues and makes the call with the dialog still open. How can I make the dialog to return a synchronized value? So the commandLink can know whether to execute the action or not.
I know it can use callbacks, but callbacks is not an option since the commandLink is waiting for the result to decide to execute the action, and if I use callbacks I will need to make a direct call to the commandLink.click which would make an infinite loop.
Even thought, thinking again there could be a way to use callbacks but how could I send to the dialog which callback to call when it's done.
There is no way to make the execution of code stop and wait. The only thing you can do is to make a modal dialog by blocking out the page under the dialog so the user has to select something before continuing.
The way I see it, your problem can be solved if you expose the #{myBean.delete} method of bean as a javascript function and call it accordingly in jQueryUI dialog's Delete and Cancel handlers.
If you can use the RichFaces library, refer to a4j:jsFunction
But in this case the delete button click has to be pure ajax call. i.e. you can have the dialog invoked in the onclick and no action specified.
Otherwise there's no way you can stop the postback from happening.
In Form.onSubmit can I add a SimpleAttributeModifier to that form? Actually I have a situation where the onSubmit method of the form look like this:
#Override
public void onSubmit() {
//some code
if (some_condition) {
//here I want to show Javascript confirm box or wicket modal window
//but I can not get any AjaxRequestTarget here to show that modal
add(new SimpleAttributeModifier("onSubmit", "return confirm('confirm msg')"));
}
//some code
}
It is not working. Is there any way to achieve this? Thank you.
What you're trying will definitely not work, as the onSubmit() method is not called in time. It is a server-side method called when the form is submitted. In order to show a confirm dialogue, you want some javascript executed on the client before the form is sent back from the client to the server.
You need the attachment of javascript to happen when the html is rendered, so that it's there to be called when the user clicks the submit button.
It can of course be done. I don't have my own code for it handy, but I think this example should get you pointed in the right direction.
lets say i have the following html element on my host page:
<input type="text" onfocus="this.value = ''" id="textField"/>
In gwt i wrap this into an TextBox Widget like this:
final TextBox myTextBox = TextBox.wrap(DOM.getElementById("textField"));
If i now want to add a focus handler what will happen?
myTextBox.addFocusHandler(new FocusHandler() {
public void onFocus(final FocusEvent event) {
// do something
}
});
What i want to achieve is that first the javascript which was defined on the host page should be executed and after that my focus handler should be executed. But what actually is happening is that the javascript from the hostpage is not being executed and only the code within onFocus is executed. Is this behavoir normal? I would expect that add means actually add and not override. Is there a way to work arround this? Or do i maybe have any flaws which induce this behavoir. Any help is appreceated.
kuku