consider that there are two drop down list in a html form.
The first list named "country" has a list of the countries.
The second list is the "cities" which should be dynamically populated when a country is selected.
How i am supposed to implement this dynamically?
which is the easiest and the simplest possible way to implement this
either in javascript or jquery or ajax?
please help with sample codes and ideas so that i will be able to implement it or some external links or tutorials
Using jQuery, use the change event of the first drop down, then update the second, a little like so
$("#country").change(function(){
//do an ajax request, and update #cities
});
You can do this with pure JavaScript.
Implement an onchange attribute in the first select:
<select id="countires" onchange="makeCitiySelect( );"> .. </select
and in the makeCitiySelect( ) function you can read the value of this select with document.getElementsById( "countries" ).value and send create the new select box with the cities of this country.
If the cities of your countries are in a database on the server you have to send an ajax request and get the cities as response..
But for sure, with jQuery you can solve this problem much better
1.- Create the 2 select boxes
2.- Create an onchange js or jquery function on the first select, so every time it gets selected the other select changes
3.- Inside the onchange function make an ajax call to the service which has the corresponding contents for the selected option.
4.- Retrieve the data and rebuild the second select box with the corresponding data.
Apply a onchange event on your country dropdown (http://api.jquery.com/change/)
Send an ajax request to server and get the city list (http://api.jquery.com/jQuery.ajax/)
On success of ajax request, populate the second list "cities". Remember to remove any already populated cities from the cities list.
Store all the cities list which you got from server into an array. When next time the users selects the same country, use data stored in array to display the cities list. This way you don't have to make multiple ajax request for same country.
Related
I am sort of stuck on the implementation.
I am using Windowsforms with Oracle db
I have a page with lot of controls including the DropDownList with subprograms (A,B, C..), a group of CheckBoxes and a yes/no DropDown.
On the top of the page there is a DropDown with a list of subprograms (A, B, C..) as mentioned above.
When A is selected from the DropDown the page should pull the existing data from the database, with the selected CheckBoxes and yes/no option selected
from the databse. Then the user can make any updates by changing or adding a few selections and then hit save button to navigate
to the next subprogram, B and then similar process repeats as above.
I have 2 questions here: 1. I am looking to code the SelectedIndexChange event handler with a functionality to pull the data from the database (I mean user
selections already made for CheckBoxes and DropDown
I have a nextquestion_click event handler: On clicking this after the end of all the subprograms the user should be able to navigate to the nextquestion.
Please provide me examples with sample code. Thanks in advance for the help.
you can use .change() function of jQuery for dropdown. When user will change the index of dropdown then this function will be called. And you can use ajax to pull data from database.
for nextquestion_click event, you can use .click() function of button and on click even you can use ajax to pull the next question from database and display it.
Thanks,
Amit Prajapati
I am new in Grails. I have a drop down box and a button which generates PDF. I am able to generate and download PDF using following tag
<export:formats formats="['excel', 'pdf']" />
But, now I want to select item from drop down and pass that selected item to the export tag like below
<export:formats formats="['excel', 'pdf']" params ="Pass selected item here"/>
I tried a lot but no luck. Does anybody know how to pass selected item value of drop down to the export tag?
In your controller use flash.value = params?.value inside the appropriate method. This will allow you to store the key:value pair for one transaction only.
In the GSP page define the select box value value="${flash?.value}" and give the select box an ID.
Assuming you want to pass the variable into the business logic, in your controller use an if statement to check for the select box value and follow the appropriate logic based on each value.
Flash is a temporary key:value storage mechanism for one request only. For more information on flash check out the documentation.
can anyone please suggest , how to add new option to drop down list (using select tag in html) so that user can enter the new value and on submit it should be appended to the existing list ..i am able to populate it's option list via DB dynamically and it's working properly
i am having 5 drop down mutually exclusive category lists in a single table row and i am providing them some initial options.Now i want that if the list contains user's required option then user can select from existing one ...else it should be able to add a new entry to that list & it should be simultaneously updated in DB on submit.
Follow this steps
As you are populating the drop down from databse . So its better to add the value in database only.
I think your user will be entering the value in a text box. So on submit call a method or servlet which can be used to add the value in the database field from which you are populating the drop down.
After updation make your servlet to return on the same page.
Now you can see your new option in the drop down.
Update on further problem explaination
For your problem do one thing
Give a text box in last option of each dropdown.
Select an event in which after the new value entered by user in that text box an java script function can be triggered line onmouseout.
In that function call get the text value .
Now call your servlet or method or whatever you are using to update the db with value value in the column corresponding to that drop down using Ajax or normally.
Refresh the page.
hiii,
finally it's done.
i used following function as-
function abc()
{
var myoption = document.createElement("option"); //works with both mozilla and IE
myoption.text ="mytext";
myoption.id="mytext";
myoption.name="mytext";
myoption.value ="mytext"; //Probably, the sID stuff
document.getElementById("drop_1").options.add(myoption);
}
& so on within loop.
thanks to all .
I have a pulldown menu generated from a MySQL dataSource.
<g:select onchange="selected()" id="name" name="name" from="${listOfNames()}" noSelection="['':'--']"/>
this populates the menu with one column from my table
Now based on the selection I want to display additional columns from the same table as text on the gsp form.
so user selects Name1 from dropdown. I display underneath the dropdown menu
Name1. age 21. degree yes.
I have an action inside my controller called allDetails that queries all values associate with a name and returns it a string. But I am not sure how to pass it parameters
"${remoteFunction(action:'allDetails', params: \'name=\' params.name')}
What is the best way to do this. run a JavaScript remote function inside selected() or a gsp tag that calls the action somehow? how to then display the returned string? Change the innerHTML?
tried http://www.grails.org/AJAX-Driven+SELECTs+in+GSP
You cannot use remoteFunction or other core Grails tags, because its text is fully generated during page rendering, and you only know the selected name during Javascript executing in onchange.
So use jQuery Ajax call (unless you switched to a different Javascript plugin).
And I suggest that you select not a name, but an id of that person, like in a second g:select example.
I have a list of data coming from the database and displaying in a table, that works exactly how I want.
What I would like to do, is add a DropDownList to the page that "filters" the data in the table, based on the value of the selected item in the DropDonwList.
For example, the DropDown has these values
Assigned To Me
Assigned To Others
and the list of data, has an "assignedTo" field. When the value in the dropdown changes, I would like to update the list of data.
In WebForms, I would use an UpdatePanel and a DropDownList with autoPostBack=True, how can I get the same effect in MVC?
You use JavaScript/jQuery to bind to onchange/onclick event, and there do a postback:
$(function() {
$("#myelement").click(function(){
$("#secondelement").load('<%= Url.Action("Source") %>?selected=' + $(this).val());
});
}
There're jQuery plugins that do similar things, for example http://dev.chayachronicles.com/jquery/cascade/index.html (not the best one, the first I found).
You have a few options. One way is to create a Controller method that manages the process of grabbing your data (say as a IList), and then uses the Json(...) method of the Controller to serialize it and send it back as JsonResult (here's an example: http://weblogs.asp.net/mehfuzh/archive/2009/04/28/using-of-json-result-in-asp-net-mvc-1-0.aspx).
On your front end, you can wire up some javascript on the dropdown list that uses jQuery to make a $.get (http://api.jquery.com/jQuery.get/) passing back an id of sorts to determine your filter criteria.
Then you use the callback function of the $.get(...) call to manipulate your DOM as you see fit to visually depict the new list of data.