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.
Related
I'm using java+jsp/servlet+jquery making my webapp.
I have a button <button id = "1">My button</button> on my page, that should do 2 actions at the same time : Servlet call and some jquery script action like this:
<script>
$(document).ready(function(){
$("#1").click(function(){
alert("Mouse click!");
});
});
</script>
How can I do this 2 things at the same time?
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
}
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" ..../>
Let's say I have an input button.
<input type="button" value="click here />
Then there's other HTML and Java codes.
.
.
.
.
.
Then there's a div tag.
<div>
</div>
and inside this div I want to execute these codes, but Only when I click on that button.
<% `int i = 0;
while(i<3) {
%> <div> I love you </div>
<% i++;} %>`
Java code is executed on the server. Events like clicks happen on the user's browser. So a click cannot call java code directly.
You need to:
either code the filling of the div in pure javascript,
or make an ajax call when the button is clicked, to retrieve the
content of the div from the server.
Probably Onclick event you can set the value of a hidden parameter and in div check for parameter value in script-let using if else but again java code will be executed on server and hence it will be new request to same Action otherwise use Ajax to populate data in div from sever.
you need to use ajax and servlet to acheive this.
servlet would send the code in response.
The success part of ajax would add the returned string to the div.
You would need to assign an id to div.
The ajax syntax would be
$.ajax({
url:"../servletname",
type:"POST",
data:{},
success:function(response){
$("#divid").html(response);
}
});
You need to call the servlet in the jsp using onClick function.
I have a AjaxPagingNavigator. Basically on a certain condition, the list which the AjaxPagingNavigator pages is reloaded. When this happens I only want to render the navigator when the list contains more than 1 page.
So does anyone know where I can attach a handler so that I can check for a visibility condition in my AjaxPagingNavigator and enable/disable visibility so that when the navigator is updated via. ajax it is either visible or not?
Markup:
<div wicket:id="mainWrap">
<div wicket:id="navigator"/>
<div wicket:id="listWrap">
<div wicket:id="list><!-- here be content --></div>
</div>
</div>
So I have an ajax event which refreshes "mainWrap" which refreshes the "navigator" along with the "list" and wrappings.
this is the event that triggers the whole thing.
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
List foo = null; // do work to get list
model.setFound(found); // update the model (thus updating "list")
target.addComponent(mainWrap);
}
Edit: I know I can write
navigator.setVisibility(list.getPageCount() > 1);
after creating the navigator and after updating the model, but I was hoping to encapsulate that in a subclass of AjaxPagingNavigator.
Be careful with doing expensive computations in an overridden isVisible method, as Wicket will call isVisible multiple times per request—not counting any calls you might inadvertently do.
Typically the best way to go about this is to override onConfigure and set the visibility flag manually.
#Override
void onConfigure() {
super.onConfigure();
setVisible(isVisible() && someExpensiveToCalculateCondition);
}
onConfigure is called just once during request processing, and called for all components, including those that are invisible (while onBeforeRender is only called for visible components).
It's been a while since I touched Wicket, but if memory serves:
Can you not override the isVisible() method of your "navigator" object, such that it only displays under the condition you desire?
e.g. something like
.addComponent(new AjaxPagingNavigator(...) {
#Override public boolean isVisible() {
return model.getFound().size() > 25;
}
});