Call JS function before redirect - javascript

The situation is as follows:
A user on the client side enters some data and presses a command button that initiates an ajax request. Depending on the input data the JSF Bean on the server side redirects to different pages. But in addition the HTML5 features localstorage respectively sessionstorage should be updated on client side, also depending on the results from the bean. For the storage some data entered from the user is necessary, so that the java script for the storage has to be within the original page.
Now, the problem seems to be that after the response the redirect is always done first, before executing the js function and so it is not possible to access the input data from the user on the client side of curse.
I tried things for calling the js function after pressing the command button like "oncomplete" on the client side using callback parameters (redirect takes place earlier) or RequestContext.execute from the server side (but this internally also uses the oncomplete event i think).
One possible solution I could imagine is to use window.onunload on client side and a hidden input formular to get the result of the bean. But isn't there a better solution?

You need to redirect by JS instead of by JSF. Return null from action method so that it returns to the same page and then execute the following script to perform a redirect in JS.
window.location = newURL;

If you use PrimeFaces with JSF then it's possible to make global override of PrimeFaces.ajax.ResponseProcessor.doRedirect in javascript to put any custom code before actual redirect happens:
PrimeFaces.ajax.ResponseProcessor.doRedirect = function(node) {
// <<<< your code is here >>>>
window.location = node.getAttribute('url');
}
Put this code in some js file and include it in all your pages.

Related

insert data into database using javascript in asp.net C# After inserting the data into database,i want to create the alert box

insert data into database using javascript in asp.net C# After inserting the data into database,i want to create the alert box
Try using RegisterStartupScript instead. Also, side note, you have a typo in your alert message box. exits != exists :)
ScriptManager.RegisterStartupScript(this, GetType(), "alertMessage", "alert('employee Already Exists !.')", true);
You can't use register client script inside of a web method, since there is no round trip and page cycle occurring.
Register client script requires that the page was posted to the server, then code behind runs, and then the WHOLE web page travels back to the client, is re-loaded, then displayed, and THEN your injected script runs.
however, since this is a web method, then that means client side js code is calling and running the web method, and thus that means the client side script can launch/display/have/enjoy code to launch/display any dialog box or whatever you want to display in that client side js code. So, have the web method return some "yes text" or whatever you want to display, and write that code in the client side js code to then display the correct message or dialog based on what the web method returns.
So, to "inject" or "register" some js code into the web page? That requires that the web page has been posted to the server, and that means a post-back of the web page will have to occur.
The web method can't update controls on the web page, nor inject js scripts, since the page is STILL sitting on the user's desktop, and never made the trip to the server.
however, as noted, since your js code client side will be calling the webmethod, then it should be a simple matter to have such js code client side display that message based on a return value from the webmethod. In your case, you return "true" as a string if the data was to be inserted, and thus in place of a register script, return a "false" string, and have the calling js code then display some message based on that true or false returned to that calling js code.

How to pass javascript variables to rails variables

How can I pass a javaScript variable into ruby. I want to do something like this but I don't know how to express it.
function save(){
var g = document.getElementById("self").value;
<% #owner.info = g %>
}
Another possible work around is that i would need to be able to extract contents of a text area through rails and not javascript.
Can anyone help me?
What you are attempting to do doesn't make sense with a vanilla rails installation and javascript. Here's a good workflow that accomplishes what you're trying to do along with some details:
1. A page is requested from the server
The ruby code that runs rails and your application is executed on the server. The server receives a request, executes the ruby code, and sends the response as an html document.
2. A user gets the response from the server
The user's browser receives the html and turns it into a pretty web page. It's at this point that any javascript related to your application is executed in the user's browser. The connection with the server has been severed and no further ruby code will be executed until another request is made.
3. The user fills out an ajax form
On the page rendered in step 2, you have a form. Following this guide you can tell this form to submit via ajax. That means instead of requesting a new web page, the browser will send a special request using javascript to the server. The server can save the form values to your database and send a response back to the browser. All the while the user hasn't left the page they are currently viewing.
Alternatively you can skip the ajax and have the user submit the form, but you'll need to redirect them back to the page they were viewing (and probably adding a note the form they submitted was saved).

Call a URL and ignore result

I need a simple way to call a URL to send a command to the system without processing or displaying whatever result is returned. If I use simple HTML calls then the frame the page with the button is on changes to the result returned by my lighting system and my page of buttons goes away. If I use ajax then I run into cross domain issues.
At it's simplest I would just like to have a button process an onclick() and execute a URL (e.g. http://www.mydomain.com/lightingdevice/on) in the background or some simple javascript that runs this same URL while the frame continues to display the page with the button.
Either way you need to use AJAX if you need to do this discretely.
The interface is on the same domain as your application: just use AJAX properly and you're good.
The interface is on some another domain as your application: create an interface on the same domain as your application, using PHP for example. This will let you use AJAX. Then just let PHP handle all the rest.

How do you make a link perform an action without reloading a page?

The clearest example of this I could think of is the Reddit Upvote/downvote buttons how when you click the button, the value for upvotes is updated, the upvote button lights up, and the page DOES NOT reload, you just stay exactly where you are on the page.
I am trying to make a feature similar to this and I can totally figure out how to do it with reloading, but I want it to not reload so the user experience isn't disrupted.
Is it possible to do this with php? or would I need to use javascript or something?
The action I would need it to perform would be a basic update query in the database.
This would be done with an Ajax call to your php script. Ajax is designed for these asynchronous updates and/or reloads.
Another way you can do this is with HTML5 WebSockets. You could have the client send a trigger to the server when the user clicks the upvote, and then the server could update and push back the data. It would, however, be a bit overfill for this.
If what you want to do is to contact a server to either send it some state or to retrieve some state from the server (or both), then you would use AJAX with javascript in order to contact the server without reloading the page. You can then also use javascript to update the state of your page after the operation. That is generally what the Reddit page you refer to is doing.
Conceptually, you'd set up your page like this:
Put the link on the page.
With javascript install an event handler so you are notified of a click on the link.
When the link is clicked, your event handler will be called.
Prevent the default behavior of the link so the browser doesn't navigate to a new page.
Then, in the event handler, send your data to the server using AJAX. You will obviously need a URL on your server and server process that can accept and process the data for you and return a value if you need to.
If you need the response from the server, then set up a callback function for when the AJAX call completes (this will be some indeterminate time in the future).
Then, if you need to change the current page in any way (like show one more upvote), then you can modify the current page with javascript to show that new state.
Ajax is easier to use with a library (like jQuery) that contains some ajax support code, but you can certainly implement it in plain javascript too.
Here's one example of ajax with plain javscript. You can find many other examples with Google.
This MDN tutorial on AJAX seems pretty helpful too to show you how it works.
You could use JavaScript to do this. Here's a quick sample:
Vote Up
Simple solution in JavaScript:
var el = document.getElementById("upvoteBtn");
el.addEventListener("click", onVoteClick);
function onVoteClick(e) {
e.preventDefault();
// do something
}
Here's a fiddle.
NOTE: I see you'd be updating the database. In that case, you would have to use AJAX in the onVoteClick function (or use XMLHttpRequest) for this. JavaScript is a client-side programming language and will not be able to communicate to the server without the use of AJAX or XMLHttpRequest. Using the jQuery library, you should be able to write AJAX pretty easy.
It's called AJAX.
With AJAX you can send a request in the background.
The easiest way is to use the jquery libary for this.
You can also output some data as JSON back to the script if you want to take some other actions depending on the result from that query.
A good tutorial is this one.
It also explains how this requests (called: XMLHttpRequest) work.
You need to use Javascript's XMLHttpRequest
You can use AJAX...
It allows you to use JavaScript (client side) to call server side functions. Here's a good example.

passing arguments to python function by javascript

Since mostly a backend guy, I am not sure how can I achieve the following since it
requires some interaction with the browser.
So, I have a the following things so far.
A communication protocol where server is in python and client is in javascript code.
Ultimately, I want my data to reach to that javascript code.
Now, this data is being captured from browser.
As a practice.. what I am trying to do is.. have two radio buttons on my browser and a submit button
*radio A
*radio B
* Submit
Now, when the user presses submit, I somehow want to create a query "user submitted: A (or B)" and this query i am able to capture on python script.
I am at lost on how to do this.
My guess is that "submit" invokes a python script.
But what if my python server is always on .. how do i parse that response from the click of browser to this python server?
This is the way it usually works:
Client (browser) visits webpage and initiates request to server
Server (in your case, Python) handles request and writes HTML response, including the radio-button form
Client fills out form and hits Submit, triggering another request to the server
Server handles the second request and writes another response (e.g. "Purchase successful", "message posted", etc.).
Note that the second request is a brand-new request. You may want some way of linking the first request to the second one unless the second request is anonymous. Some frameworks will do that for you, but if you are making the server from the ground up you'll want some kind of session mechanism to keep track of state.
To get the client to make the second request, the simplest is to add appropriate action and method attributes to the form element in your HTML. action specifies the URL to access for the form request, and method is either GET or POST. (More advanced usage, e.g. on this site, typically uses AJAX to make the submissions instead).

Categories