I have a web page consisting of a dropdown menu. What i want is the contents of other dropdown menus present in the page must change according to what has been selected in the first dropdown box. For example if a dropdown consists of Degree as its element. If i select Degree element then another dropdown must show only degree courses. This must happen automatically without clicking any button. How can i achieve this?
I would make this a comment, but I do not have commenting abilities. You are going to want to use $.post with jquery and ajax to accomplish this: http://api.jquery.com/jQuery.post/ . Ajax with JQuery is not difficult to do.
You will want to use the onchange event of the first drop down to use a jquery ajax $.post call to post to the server, passing the selection from the drop down as a parameter. The page that it post's to should us GET to get the selected attribute from the drop down, and then retrieve ( from the database or where ever) the options that go into the second drop down, based on the parameter. The code should be written out to the page. The jquery ajax call has a way to get the response and let you define a custom function to be run once the post returns. The return should be what you had written out to the page, and then you can just update the second drop down list with the returned data inside this function.
I hope this helps!
Related
is there any way I can do something like in my example below but with normal hyperlinks ? I can't use drop down menu.
//edit: I have a web page and a script, on web page now i have drop down menu where user choose some values and submit them, script then do the work.
I just need to sent 3 values to script. (user must choose this values)
Hope its clearly now
this is part of code on my page:
<form action='script/script.py' method='post'>
<select name = 'menu0'>
<option value='x'>X</option>
<option value='y'>Y</option>
//
And also is there any easy way to remember what user set in dropdown menu ?
First, you can't use POST method in hyperlink, if your server code support GET method then you can create separate links for multiple options
x data
y data
....
.....
Other solution: This should also helpful you, as above create multiple links, you can hidden your form and submit form from <a> tag onclick event
With Hyperlink you can use GET method which is more easy to embed in the link like this :
X
Y
So make this work, you will be needing to change your script.py code, that make use of GET function instead of POST.
And easy way to remember what user set in dropdown menu is to store the input you GET via your script to a session variable when script.py gets executed. You can then use that session variable in whole scope of your application i.e. any other python scripts. Refer Session variables for this.
AI have an expanding box, which contains some information, what I want to do and not sure if it is possible is that when somebody clicks on the link (shown below)
View Job Description
it passes a variable to Ajax and then have that update a mysql table to say the job description has been viewed.
Now I know the link above is just a link which triggers some javascript to expand the box and so just after some advice on how I can achieve this?.
I have other code which passes variables to ajax but through a form, and so I am not sure if this is possible.
Try this one using Jquery:
after the clicking the link the ajax request will be sent to the specified url.
ulr i.e. where your script will excute.
store all result in variable and print at the end of page.
Usins variable "data" you can get that result.
$(".expandLink").click(function(){
$.post("url",function(data,status){
$(div).html(data);
}
});
I need to manipulate my Mysql data on:
I populate Mysql DB content on HTML table and every row have "EDIT" and "DELETE" buttons...(HTML "a" tags buttons)
When I click on "Edit" button a pure CSS3 Modal Popup is open, where I need to Edit a record on the row,
If I click on "Delete" button a pure CSS3 Modal Popup is open for delete record confirmation if the answer is "YES" proceed to delete the Record if the answer is "NO" should back to the parent page...
Populate a list of selected records is working. CSS3 Modal Popup is working...
The question is how can I send arguments to the Modal Popup to manipulate the data?
Could someone help with this.
Thanks.
The ways I would do this in no particular order:
Separate modals for every item on the table. Could be cumbersome, and is definitely not efficient, but would get the job done without using Javascript.
Javascript - Have a data-id and data-table attribute in the button. When clicked, populate the modal with Javascript via AJAX.
Javascript - Store table data in JSON array. Use above attributes to access specific elements of the JSON table object.
Javascript - Store the JSON object directly in the data attribute if possible and load up the modal when clicked.
Have a hidden <div> with all the content, and when the button is clicked, transfer the HTML to the modal.
Really there are many other ways to get it done. Pick one that looks easy, efficient, and safe, and give it a go. Post back here when you get stuck and we will be glad to help you.
I'm trying to figure out how to bind a javascript event to a select element in GWT, however the select element isn't being built in GWT, but comes from HTML that I'm scraping from another site (a report site from a different department). First, a bit more detail:
I'm using GWT and on load, I make an ajax call to get some HTML which includes, among other things, a report that I want to put on my page. I'm able to get the HTML and parse out the div that I'm interested in. That's easy to display on my page.
Here's where I get stuck: On the portion of the page I'm using, there's a select element which I can easily locate (it has an id), but would like to capture event if my user changes that value (I want to capture changes to the select box so I can make another ajax call to replace the report, binding to the select on that page, and starting the whole process again).
So, I'm not sure how, once I get the HTML from a remote site, how to bind an event handler to an input on that fragment, and then insert the fragment into my target div. Any advice or pointers would be greatly appreciated!
How about this:
Element domSelect = DOM.getElementById("selectId");
ListBox listBox = ListBox.wrap(domSelect);
listBox.addChangeHandler(new ChangeHandler() {
void onChange(ChangeEvent event) {
// Some stuff, like checking the selected element
// via listBox.getSelectedIndex(), etc.
}
});
You should get the general idea - wrap the <select> element in a ListBox. From there, it's just a matter of adding a ChangeHandler via the addChangeHandler method.
HTML form has some text boxes and a drop down box.
Drop down has huge values, and takes lot of time to fetch from database.
So I want to load the page first and while the user fills the form (text boxes) I want to load the drop down box (without his knowledge :-) ).
But without any event trigger, how do I make call to database again ?
I am using JSF with RichFaces, Servlet.
The following code is not working
<h:selectOneMenu value="#{obj.selectedValue}">
<f:selectItems value="#{obj.allValues}" />
<a4j:support selfRendered="true" action="#{bean.action}"/>
</h:selectOneMenu>
Thanks,
+1 for using Ajax - but if you have a very large number of values,t hen you might want to consider using an auto completion dropdown - where the the user starts typing what they need and after they have typed a few characters, you kick off your ajax reqeuest and just load those requests that match.
have a look at "google suggest" if you want to see this in action
-Ace
As already mentioned you can use AJAX to load the dropdown items asynchronously, but I would suggest redesigning the form so that the huge dropdown is not required. Perhaps let the user search for the correct value on a previous or subsequent screen? Long dropdowns are not easy to use as they require lots of scrolling and it can be hard to find the correct value on a large list.
At the bottom of your page put the following:
<a4j:jsFunction name="yourJsFunction" action="#{bean.fetchSelectItems}"
reRender="yourDropdown" />
window.onload = yourJsFunction();
You will have to use AJAX. When the page loads display a empty select box. Then write some JavaScript that will call some URL on your server that will return the options for the select box. And when you get that just populate the select box with those values.
Be advised that your form will be useless to those without JavaScript.