populate textfield on selecting dropdown struts2 - javascript

I have a text <s:select> in my jsp page .
Now what i have to do is when someone selects a value from this dropdown ,
i need to call my action class to get some value based on dropdown selection.
Now this value (which i got from my actionclass) should be shown in the <s:textfield> below this dropdown .
Please help !!

Well all you have to use the power of Ajax.You have multiple options to do this.
User simple Javascript.
User any javascript frameowrk like jquery,DOJO etc
Bind you code with on-click/change even of the Select tag and send a simple request to the S2 action.you can either use Stream result to send data back from the S2 action or better (in my opinion) send back JSON data from your action class and user Jquery build in functionality to parse the JSON data at JSP
user S2 JSON plugin to send and receive JSON data from Action and JSP to make life more easy.
Please follow this tutorial to know how to use JQuery with JSON and struts2
using-struts-2-json-and-jquery
Update
You need to do something like this in your JSP code for Ajax and JQuery
var selectedState = document.getElementById("selectboxid");
var statedata = selectedState.options[selectedState.selectedIndex].value;
var formInput='state='+statedata;
$.getJSON('search/dropDownRenderer',formInput,function(data) {
}

Related

Dropdown based on another dropdown in jsp Struts

I'm very new to Ajax. Currently I'm working on a new project. For that project one of the requirements is, populating a second dropdown based on the input from the first dropdown. I'm using Struts to do that. I don't want the page to be refreshed, so I need to use Ajax for calling the second dropdown content in the backend and populate in the second dropdown. I don't know how to write code for that.
What should be included (jars,tags) in my struts project?
What entries should come in my JSP (I am using <html:select>)?
What will come in JavaScript?
What will come in action class (in action class I can fetch the list values from the DB based on the selection from the first dropdown)?
Instead of ajax, I used struts only to acheive this. I have assigned all variables to form to keep values when submitting form.
The answer to this question would probably a thesis ;)
I will just guide you in here.
1]Use a javascript framework like jquery. It will help you make ajax calls to your controller URL
Check an easy tutorial on http://www.tutorialspoint.com/jquery/jquery-ajax.htm
2] For the controllers lets have two urls mapped:
urapp/poplateDropdown1 to controller which return values/list target at ur first drop down
urapp/poplateDropdown2 to a another controller(or method within same controller) which responds to a GET request and receives a parameter say name SEL_VALUE for the selected value.
3] onchange events.
Have an onchange or similar best suited even on your first dropdoww.
In your event call a js function; like <select onchange=callDropDown2Controller(this.value) >
in your callDropDown2Controller() method:
//pseudo implementation
callDropDown2Controller(var selectedValue){
// now generate an AJAX get request using jquery with the following url
urlToCall = '/urapp/poplateDropdown2?SEL_VALUE=' + selectedValue
}
The rest buddy u need to do some homework and research.

Trying to give value to Java variable in JSP after checkbox's value

I am creating a web interface in jsp. I have a java String variable (let's call it 'a') and some radio buttons, and I am trying to get the value of the checked one on click (without submiting the form) and give it's value to the variable.
I made a research on weather this can be done using only jsp and I could not find anything. So I assumed that I have to do this using Javascript. I am new in Javascript(so please excuse me if my question is stupid), but I wrote the following code.
HTML:
`<input type="radio" name="phase" value="value1" class="checkboxes" id="design_phase" onclick="getRadioValue(this.id)" />Value1
<input type="radio" name="phase" value="value2" class="checkboxes" id="development_phase" onclick="getRadioValue(this.id)" checked/>Value2`
Javascript:
`function getRadioValue(id) {
var radioBtn = document.getElementById(id);
if(radioBtn.value=="value1"){
alert(radioBtn.value);
<%a="value1";
System.out.println("value1!");%>
}
else{
alert(radioBtn.value);
<%a="value2";
System.out.println("value2!");%>
}
}`
When I run this, both System.out contents are printed just when I load the page, before I even choose a checkbox. I have put the alert functions in order to make sure that javascript reads the values correctly, and it does indeed! So the problem seems to be with using js together with jsp.
Does anyone know what I am doing wrong, and how can this be done correctly?
Thanks in advance!
You should use AJAX (if you dont want to submit the form).
This is the methodology:
As soon as the user selects a radio button, an AJAX call is triggered that sends a request to a servlet. The servlet recuperates the option selected from the radio buttons (from the request object) and using this value it generates a response containing the values you want to display in the select (perhaps the values are stored in an array) and then sends the response to the client. The response is received and the values to be displayed in the select are recuperated and dynamically added to the DOM.
Have a look at this link for an explanation of how to do it: How to use Servlets and Ajax?
also here is a very simple example: Return JSON from one JSP to another?

parse into database from javascript form

I have a webpage with form which is processed with javascript code. There is a form with button with javascript onClick() method.
Here is the webpage (czech declensions)
On input I have a list of names in mysql database. I need to put a single name form list into a form, click on button to invoke onClick() method and on output I want to have name with declension (field 5. vokativ in form) - insert it into database table. This action in cycle for each name from a list form database.
Please, any suggestions how can be this done?
I would recommend ajax to do this trick..
With jQuery it could be done pretty easy if I understand you right.
It could look like this:
$.ajax({
url: "validate.php?info=something&otherinfo=somethingelse"
}).done(function() {
alert('done');
});
You could get all the informations by doing this:
var something = $('input[name=something]').val();
Then make the PHP page handle the informations.
Hope this helps.

Get elements of a query-set with a jquery get function. Django

In my django app I would like to display a text when a user clicks on a button, without refreshing the page. When the user clicks again, I would like an other text to be displayed, still without refreshing the page.
The informations (texts) I wan't to display are in a query set, named "information".
So I would like to know how to accomplish that.
Here is the way I try to do it:
I create a view where I store my query set:
def get_information (request):
information= Information.objects.filter(object1__id= X)
Then I create a jquery get function (in the template of the page where the user clicks) in order to get informations on this list:
function get_info(){
$.get('/mysite/get_information', {'information':information}, function(data) {
$('.information').html(data);
});
};
And then I render it in my template with a submit button and a onclick="get_info".
But I don't know how to make the request get a different information at each request, in order that the user does not get the same information twice.
Thank you a lot for your help.
Take a look in to Django Pagination. You could create the Paginator object in your view and then you can display message from the queryset based on the request from the client side. Let me know in case of any issues.

Need sample JavaScript to query MySQL and display result upon combo box update

I have a combo box that will be loaded with a list of choices. When the user selects a choice, I need a JavaScript to simply run a query of MySql (obviously based on the user choice in the combo box) which will return a simple, discrete value that then needs to be displayed on the page next to the combo box.
The query is nothing more than SELECT foo FROM tblexample WHERE id = blah (where blah is the combo box value). The value will be a simple number. If the user chooses a new value, then it should just re-query and display the result.
I'm open to reading the whole table in upon page load into an array or something too. I work in PHP but I don't know Javascript; I was only hoping for a sample code bit; I can read and extrapolate most of the time.
I just didn't want to put a submit button in a form and force the user to do that each time they look at a new combo box choice. I wanted a more seamless, quick display for them.
JavaScript is a client-side language. It will not run MySQL queries (safely, at least). Use PHP to dynamically create the HTML and JavaScript for the combo box.
PHP has an entire section of their documentation reserved for MySQL.
I think you are actually looking for a reference in Ajax programming using PHP on the backend and javascript on the front end.
My recommendation would be to look at using one of the excellent Javascript development frameworks. Great candidates would be JQuery or Prototype. They both give you solid libraries to simplify programming in javascript.
Rather than working with sample code, you'll probably get a lot further by developing javascript expertise. Ajax is complicated, and you'll need to at least get basic skills together before you can start to integrate javascript and PHP.
Here's a good query to get started- I'd recommend beginning with JQuery if you have to pick one.
http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=ajax+php+jquery+tutorial
Once you get started on jQuery as Tim mentioned you could do this,
The select box,
<form name="formName" action="" method="">
<select name="selName">
<option value={uniqueId}>Option 1</option>
</select>
</form>
<p class="displayMsg">No message to display.... yet</p>
The javascript and jQuery in a script tag of the head tag,
$(document).ready(function() {
$('select[name=selName]').change(function() {
function processData(data, success) {
...do something with the query results echoed into var data...such as
$('p.displayMsg').txt(data); // which will update the text node of the p tag class displayMsg
} // end function processData
var formData = $('form[name=formName]').serialize(); // this will encode the variables from the form to pass into post headers. You can access in your ajax called script with $_POST['selName']
$.post('phpAjaxProcessScript.php',formData,processDataClose); // sends data to script and when it's done it calls function processData
}); // end select change event function call
}); // end document ready event function call

Categories

Resources