oncomplete method doesn't always executes after action, JSF - javascript

I have the next scenario (simplified) :
My function in my docsMB managed bean:
public void saveAdvance() {
// by default, finalized is false
finalized = getFinalizedByBySlowFunction();
}
A button in my xhtml:
<a4j:commandButton value="SAVE"
action="#{docsMB.saveAdvance}"
oncomplete="verifyDocs();"/>
And my verifyDocs function in the same xhtml:
<script type="text/javascript">
var verifyDocs = function(){
//alert(1);
if( #{docsMB.finalized == true} ){
#{rich:component('mpConfirmar')}.show();
}
}
</script>
This make me a problem.
If I execute my app, "finalized" is always false, but I realized that if I uncomment the alert in the verifyDocs function, it works.
I think the alert gives the "necesary" time to saveAdvance to finalize itself.
What can I do to be sure that the oncomplete method excecutes after the action has finalized?
Or am I doing a mistake in other place?
Thanks a lot
[Edit]
If I refresh the entire page, I get the correct "finalized" value...

The problem was that when I define the javascript function, it became like static, it means, It just execute once and the variable finalized gets the defined values when the page loads.
So, when I clicked the button it retrieve the value predefined, no te value at that moment.
But if I refresh the page, the variable gets the value at the moment of the refresh.
So to solve this, I just put my javascript code directly in the oncomplete method and finally WORKS :D
Maybe a better solution could be to find a way to refresh the javascript code each time the button is clicked, because if I put the javascript code in the oncomplete method, it seems dirty, because of the lot of characters in a line.

Related

Html.ActionLink: popup(custom), then redirect

I want to show popup when person clicks on button(which is already done with Html.ActionLink - older code; popup only shows if session variable equals some value...this part is alredy figured out) and is then redirected or new view is returned(this is done in controller).
I have Html.ActionLink(<button name>, <controller>, <action>) and out of that with help of other answers here I made Html.ActionLink(<button name>, <controller>, <action>, null, new { onlick: 'myPopup();'}) where myPopup() is function that creates qjuery modal popup.
But my issue is that sometimes popup doesn't even show or only for few seconds. I think that it's because javascript is async and controller is faster so it returns before javascript code is executed. Does anyone know how to execute javascript code first and then controller code.
I tried to Html.ActionLink(<button name>, <controller>, <action>, null, new { onlick: 'myPopup();return false;'}) as return false should stop default behavior(redirecting to Controller/Action) and then in jquery code I put ajax redirect to controller when button OK in popup is clicked. But problem is I can't seem to make this work, it may be even wrong way?
Any suggestions how to add this function?
Hi and welcome to SO :)
You would need to handle the redirect within your myPopup() function. Assuming you have a "continue" button within your modal. One way you could do it is -
$('#actionLinkId').click(function (e) {
e.preventDefault();
var link = $(this).attr('href');
$('#continue').attr('href', link);
$('#yourModalId').modal();
});

jQuery losing reference to Form

I've got a form that is submitted via ajax and is then updated by the response.
Before the submit takes place I execute the following code which works the first time but after that on the second submit, the code does not execute.
$(document).ready(function(){
$('.edit_customer').submit(function(event) {
console.log("test");
if(document.getElementById("sameAsBilling").checked == true){
$("#customer_addresses_attributes_1_line_1").val($("#customer_addresses_attributes_0_line_1").val());
$("#customer_addresses_attributes_1_line_2").val($("#customer_addresses_attributes_0_line_2").val());
$("#customer_addresses_attributes_1_city").val($("#customer_addresses_attributes_0_city").val());
$("#customer_addresses_attributes_1_state").val($("#customer_addresses_attributes_0_state").val());
$("#customer_addresses_attributes_1_zip_code").val($("#customer_addresses_attributes_0_zip_code").val());
}
});
});
I've also tried changing the listener to this:
$(document).on("submit", ".edit_customer", function(){ console.log("test");});
This code doesn't execute at all.
One thing to note is I am using Ruby on Rails which uses Rails UJS. I'm not sure why the second line of code isn't solving the issue. Any help is appreciated.
Thanks in advance.
UPDATE:
I have another element in my form that I use to fire JS using the same type of code and it works fine everytime. Here is the code:
$(document).on('click', '#qb-customers-btn', function(){
//code here makes an ajax call and loads in data
});
<span class="input-group-text bg-success text-light" id="qb-customers-btn">Load</span>
Update:
I ended up abandoning this and just used a button click listener, but now I am back with the same exact problem on a different form on a different page. I've tried everything I can think of. The only thing that works at the moment is wrapping the listener in an init function, calling init on document.load and then calling init again after the ajax has erased and reloaded the form on the page.

How to perform a JavaScript function when this specific onclick event is performed?

I am not so into JavaScript and I have the following problem.
Into a JSP page I have some "links" like this:
<tr onmouseout="Javascript: this.style.background='#EAEFFF'; this.style.color='#003399';" onmouseover="Javascript: this.style.background='#003399'; this.style.color='#FFFFFF'; this.style.cursor='hand';" style="background-color: #EAEFFF;" onclick="Javascript: document.location.href='edi.do?serv=4.1';">
<td>
<!--A HREF="edi.do?serv=4.1" class="linkBlue" onMouseOver="self.status='Comunicazioni'; return true"-->
Comunicazioni
</td>
</tr>
As you can see in the previous code snippet the link is not yet implemented by a classic a href but, in its place, it is done by JavaScript using this expression:
onclick="Javascript: document.location.href='edi.do?serv=4.1';"
So, correct me if I am saying wrong assertion, I think that (when the user click on the tr) by the Javascript: it perform the following JavaScript operation that open the link. Is it the correct interpretation?
It works but my problem is that, before doing it, I have to perform a specific loadingPopUp() JavaScript function defined into the
<script type="text/javascript">...</script>
section of my page. So my problem is: how can I perform the loadingPopUp() function before the Javascript: document.location.href='edi.do?serv=4.1'; on theonclick event?
change onclick event to:
onclick="changeLocationTo('edi.do?serv=4.1')"
create a new js function:
function changeLocationTo(newLocation)
{
loadingPopUp();
// you may add an timeout here or to handle a popup action like closing it
document.location.href = newLocation;
}
Yes, Your assertion is absolutely right. But I think if you call your function before changing url then it would not be correct approach because second function will be executed immediately after your loadingpopup function and will redirect user to different page, so I think your purpose of opening popup will not be fulfilled.
So try this
Way 1: if you want to load your popup and immediately redirect user
function fnOpenNewLink(){
loadingPopUp();
document.location.href='edi.do?serv=4.1';
}
Way 2: if you want to load your popup and then redirect user according to your requirement.
function fnOpenNewLink(){
loadingPopUp(function(){
document.location.href='edi.do?serv=4.1';
});
}
function loadingPopUp(callback){
//your stuff
//when everything is done, just call the callback
callback();
}

GWT PopupPanel not showing at the right time

I have a function which is called on a click of a button and it takes a long time to create and append to the DOM some elements so I would like to display a PopupPanel with a "loading" icon while the function finished what it has to do. Please note that my function does not make a call to the server, it only creates some elements in the UI which take a long time to compute, so I don't have an onSuccess() event or a callback function to work with.
So I have my PopupPanel:
pp = new PopupPanel();
pp.setTitle("loading....");
pp.setGlassEnabled(true);
Then on the click handler I have the following code:
public void onClick(ClickEvent event) {
pp.show();
functionWhichTakesaLongTimeToExecute();
pp.hide();
}
Since JavaScript is single-threaded I was expecting that the PopUp will appear, then functionWhichTakesaLongTimeToExecute() executes and then the PopUp to be hidden but what happens is that functionWhichTakesaLongTimeToExecute() executes first, taking a long time to append the elements to the DOM, and only after it has finished doing its job is the PopUp shown and then hidden.
It is as if like the code was:
functionWhichTakesaLongTimeToExecute();
pp.show();
pp.hide();
What bothers me even more is that if I add a Window.alert("test") after pp.show() this will break the flow until the OK button in the alert is pressd and this causes the PopUp to appear before the alert and before functionWhichTakesaLongTimeToExecute() is called.
So the following code works as expected:
pp.show();
Window.alert("test");
functionWhichTakesaLongTimeToExecute();
pp.hide();
Can somebody please explain to me why the PopUp is not displayed before the functionWhichTakesaLongTimeToExecute() is called but instead it "waits" for functionWhichTakesaLongTimeToExecute() to execute and only after that it gets to be displayed and why adding a Window.alert("test") causes it to be displayed properly?
PS: I have tested the code in both IE8 and Chrome and the behavior is the same.
This is how you can do it:
pp.show();
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
functionWhichTakesaLongTimeToExecute();
pp.hide();
}
});
I explain it here: GWT: Timer and Scheduler Classes
I have had some issues while using setGlassEnabled as well. Can you check by removing the setGlassEnabled(true) line from your code and see if it works?
Also one more thing that I happened to note is that, you have not added any widgets to your PopupPanel. In the source code for PopupPanel it is mentioned that you mustattach a child widget to your PopupPanel object before show is called.
http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/client/ui/PopupPanel.java
Do try both of these and let me know if either of it works.

JS and JQuery: Get the new href only after changing it

I have a below anchor as below
<a onclick="return getFile('/log/sample.log');" href="/log/sample.log" target="_blank"> sample.log </a>
Because at my server, the log directory in href may be not correct. So the function "getFile" would change the href to the correct one after asking the server.
The first click always failed since the link was not correct, then after AJAX process in getFile was finished and the correct href was given, the clicks later on was ok.
The problem is how I forcefully let html wait ever at the first click until the href is changed, then do the query on the server.
Thanks in advance.
I guess my current way could be not in the correct direction by using "onclick" to implement the idea.
You want something like this
$(function() {
//assume you tagged all anchors you want to do this for with class=adjustlink
$('a.adjustlink').click(function(e) {
var thisAnchor = $(this); //save reference for later use
//this will either be true (see below) or undefined (falsy)
if(thisAnchor.data('myapp.linkHasBeenTested')) {
return; //continue on
}
// Stop the link from being navigated (the default for this event)
e.preventDefault();
//I'm assuming this is fetched as text but could just as well be JSON or anything else
$.get('/LinkAdjustment/', thisAnchor.attr('href')).done(function(result) {
thisAnchor.attr('href', result); //set the href
thisAnchor.data('myapp.linkHasBeenTested', true);
thisAnchor.trigger('click');
});
});
});
As an interesting side-note. You might be attempting to do something similar to the way REST is intended to be done. You might consider, first fetching a resource that will tell you up-front what the correct links are.
I would recomend setting the href to # initially. And in your getFile, set the href to the correct value and then programatically click the 'a' on success of your ajax
You will need to find the element to do this. It can either be done by setting an id and then using document.getElementById(), or would be easier to do do this using Jquery selectors, and it even has a .click() you can call after.
If you want persist with this flow make your ajax call synchronous, it will forcibly wait.
But this flow is not suggested, I would have rather updated these hrefs on page load or would have set a default url to my server page, which would then redirect to right log file

Categories

Resources