I want to show a list of options to the user when he/she clicks on an inputText component. I need to call a bean method by JavaScript using onclick attribute in IceFaces.
<ice:inputText id="inputText1" partialSubmit="true" value="" onclick="" />
How can I achieve this?
As #Neall said, you need to initiate an XMLHttpRequest and return the data to the client. There are many ways to do this and I don't know the framework you are referring to, but in general, you initiate the XMLHttpRequest passing some parameters -if needed- to a web method, for example, and then return the data in JSON format. When you issue the request it usually has a callback function for success and one for error. On the sucess event, you parse the JSON response and do whatever you need to do with it.
Look at here, for example:
http://elegantcode.com/2009/02/21/javascript-arrays-via-jquery-ajax-to-an-aspnet-webmethod/
It looks like you are trying to run server-side code when the user takes some action on the client side. You probably want to initiate an XMLHttpRequest.
The XMLHttpRequest basically just hits a URL, optionally returning some data to the browser. This is what people usually call AJAX. (For Asynchronous Javascript And XML - although people usually use JSON instead of XML.)
Related
I have been working with AJAX, JSON and JSONP for the last few months, and now I am trying to revisit and build my basics. AJAX is Asynchronous JavaScript And XML, assuming that XML is the data format in which the server returns the data. If no data type is specified, it actually comes back as plain text. So if I am ingesting a JSON feed using the XMLHttpRequest object, can I still call it an AJAX call or should I call it an asynchronous JavaScript call??
ex: $.getJSON("data.json", function(data){
console.log(data);
})
Just a random question to make sure that I know what I am talking about, mainly when I talk to developers who are specific about the terms that I use and the context that I use them in.
The term AJAX has come to represent any networking call made from within a page using javascript (other than a websocket), whether the returned data is XML or not. In fact, it's now common to get JSON as the returned data type (a format that wasn't even standard back when the term AJAX was coined).
So ... it works perfectly fine to refer to a call as an AJAX call even though the returned data type is something other than XML.
If all I want to do is submit a form to a PHP processor with POST data and get the result, is there any reason to use the ajax method over the jQuery load method?
Using Ajax requires a bunch of code versus something very simple on one line in jQuery like this:
$("#myDIV").load("myProcessor.php", {field1: target.value});
Hmmm, maybe this only works well with one field? Sorry, just getting back into JS.
$(element).load(...) will automatically insert the server response into the selected element as html (jQuery documentation for .load()). This might result in your server exposing information about the request directly to the user, which is probably not what you're looking to do.
$.ajax() also allows very fine control over what happens during the request. You can accurately intercept exceptions and produce a callback when the request finishes succesfully. These are all reasons to use $.ajax() over $(element).load(...). However, if your only concern is sending the data in the POST header and working with the response, then using $.post with a callback function will probably be the simplest approach. http://api.jquery.com/jQuery.post/
The .load method is is roughly equivalent to $.get(url, data,
success) (src).
The .get method is a shorthand Ajax
function (src).
For a simple ajax call, .load is appropriate. Use .ajax if you want to deal with specials parameters.
PS: If you don't want a fat framework like jQuery, look here : http://microjs.com/#ajax
From jQuery website about load
This method is the simplest way to fetch data from the server. It is
roughly equivalent to $.get(url, data, success) except that it is a
method rather than global function and it has an implicit callback
function. When a successful response is detected (i.e. when textStatus
is "success" or "notmodified"), .load() sets the HTML contents of the
matched element to the returned data.
you can read difference between load ajax on StackOverflow.
But, load is not for submitting a form using post method. Both POST and GET are different methods and works differently, data submitted using GET method will be available in the $_GET array but not in the $_POST.
If i have a website1.com and website2.com, can I send data ( ex: value from input ) from website2.com to website1.com and receive result? with no page refresh or redirect. I'd like to use only javascript & ajax, no PHP or jQuery. If it is possible give me an example how to do it.
I thought about creating an script element ( with javascript) on website2.com with src like : website1.com?data=<value from input>, and when script element loads the src, it will show me an result, but maybe there is a better option to do this.
PS: I will have more separated datas to send.
Note: this is not XSS, just a public project for websites, which will need to update datas every x minutes and to send some data to website1.
Thanks.
Your question is not completely clear, but in general when you have to do cross-site AJAX you have to use JSONP
Since XmlHttpRequest does not work cross-domain, you have to use JSONP. Basically, this is adding a script tag dynamically as you're suggesting to do. Then, the server uses your GET datas, does whatever it wants, and usually "prints" a callback function.
When you call a file using the script tag, it will evaluate everything displayed. This is why, if, on the server side, you're doing :
<?php
echo 'alert(1);';
?>
This will be evaluated as javascript. You can then easily understand how to use a callback function (another GET parameter).
Also, in jQuery, there is an option called 'jsonp' when you call $.ajax (using "callback" as default GET parameter, but can be changed).
You could have some XSS issues but it is possible you could use ajaxgold. It is an pretty easy manner to send pretty much everything over.
Call send to website2
postDataReturnText( 'http://website2.com', 'data=bla', getResult );
Return the result
function getResult( text ) {}
http://www.diigo.com/tools/diigolet
Diigolet essentially allows you to use a bookmarklet to bookmark sites. With the bookmarklet I'm making, I also need to pass the current URL of the site the user is on to my server. Everytime I try this, I get a cross-scripting error.
Does anybody know how to bypass this like the diigolet?
Essentially, they work around the same-origin policy by injecting a script tag with the different-domain URL rather than using an XMLHttpRequest. Note that this is different from a normal JSON request in that the JSON is wrapped in a callback function, for example:
myCallbackFunction(<JSON here>);
(This works because JSON is a subset of JavaScript's object literal notation.)
In their case, they hardcode the name of the callback function as diigolet.callback, but there exists a specification called JSONP that JavaScript libraries such as jQuery support.
Under the JSONP specification, the name of the callback function is passed to the server via a callback=myCallbackFunction parameter in the GET request. Your server-side code needs to handle this appropriately to be able to handle JSONP requests from jQuery.
I'm looking for an easy way to call a bean's method that will take no parameters and return a string in JSF. The thing that I don't really need is that the method returns an action result and then uses the whole JSF life-cycle to do get me to another view. I need to do that from JavaScript so that I can put together some client-side parts of the application and going over the A4J part of RichFaces has brought me nothing so far.
So here's the scenario again in a step-by-step form:
from JS issue a GET on some address
on the server process that GET and return JSON or HTML (basically a string)
once the request is sent back to the client I want to be able to process it further with JS.
Thanks!
Use a4j:jsFunction and the data attribute.
So roughly you want something like:
<button onclick="callBackend();">Go</button>
<a4j:jsFunction name="callBackend" action="#{myBean.someMethod}" data="#{myBean.someString}" oncomplete="handleResponse(data);"/>
<script>
function handleResponse(response) {
alert(response);
}
</script>
Damo: can you explain why it might only work for the first time the method callBackend is executed? I'm experiencing a strange behavior that the first call succeeds and the next calls are just blocked. I see the server-side code being executed but some strange result is being sent back to the browser (something like the _viewstate and those kind of things).