I am developing a musical store. In that application in makepayment.jsp I have four links for user choice and based on user choice I want change the options in my dropdown. How can I do that?
Look at the onChange event of the input component, and JavaScript.
get the combobox object by id or name in the javascript.
<select id="myCombo" name="myCombo">
</select>
var opt = document.createElement("option");
opt.text="something"
opt.value="something"
document.getElementById("myCombo").options.add(opt);
also you can assign id to options.
Related
I want to click on Store Pickup Available checkbox on following page
http://www.target.com/c/pants-shorts-baby-toddler-boys-clothing/-/N-59yk1#navigation=true&viewType=medium&sortBy=newest&isleaf=true&navigationPath=59yk1&parentCategoryId=9976007&facetedValue=/-/N-59yk1&RatingFacet=0&categoryId=139007
And the particular HTML part has
<input type="checkbox" name="facetId" id="in store, onlineCheckbox3"
value="10058540" omniture="Store Pickup Eligible">
I tried many thing By.id() , By.cssSelector() and xpath also.
Can someone try and tell me the working code ... in-between I will continue trying.
The problem is the checkbox you want to click is hidden initially. You can click it with something like this:
driver.findElement(By.xpath("//a[contains(text(),'in store, online')]")).click();
driver.findElement(By.xpath("//span[contains(text(),'Store Pickup Eligible')]/../../input")).click();
This will expand the element "in store, online", then click the checkbox labelled "Store Pickup Eligible".
It will select By.id which you need to write
<input type="checkbox" name="facetId" id="facetId"
value="10058540" omniture="Store Pickup Eligible">
You can find this checkbox by CSS using: [id*='onlineCheckbox3']. As Richard stated, you must click the category to show the element first. Find this by: [id=dimensions]>ul>li:nth-child(9) a. Sometimes clicking an a doesn't work (depending on the html structure), and you must click an element inside the anchor, swap that out for span and it should work. I prefer all CSS selectors when locating elements, but you can use whichever method you prefer.
My html page is divided in two and contains sidebar and content, in sidebar I have two dropdown boxes, one for school year and another for student name in respective school year selected in 1st dropdown and next is submit button. When I click on submit button it will redirect to next page and next page also looks same but in content page it shows selected student profile, in side bar the same two dropdowns will be there. The problem I am facing here is, first I will select school year and name. Its fine, when it goes to next page the dropdowns will be at initial stage but I want the selected year and name to be displayed on dropdown box, how can I do this?
Some one suggested me to keep the values selected in session after it goes to next page set the value of the dropdown.
Here is my code for dropdown,
<select style='width: 200px;'
id="combo_zone11" name="alfa1">
<c:forEach var="grade" items="${gradeInfo}">
<option id='syear' value="" selected="selected">
<option value=${grade.getDropDownId()}>${grade.getDropDownName()}</option>
</c:forEach>
</select>
How can I keep selected value in next page dropdown. please help me in this.
You could do this in many ways.
Since you're working in java, you can set the selected values to a hidden field, and while redirecting to next page you can set the values to request object.
Or if the target browsers support HTML5 localStorage, you can make use of it - on dropdown change, save the selected option to local storage using javascript. in the second pages load event, get the values from local storage and set the drop downs respectively.
Something like -
//Script in page1
window.onload = function(){
var dd = document.getElementById('combo_zone11');
dd.addEventListener('change',function(){
localStorage.setItem('ddValue', this.value)
});
}
//Script in page2
window.onload = function(){
var ddValue= localStorage.getItem('ddValue');
var dd= document.getElementById('combo_zone11');
for(var i = 0;i < dd.options.length;i++){
if(dd.options[i].value == ddValue ){
dd.options[i].selected = true;
break;
}
}
}
You can also make use of cookies, sessionStorage, queryStrings etc each method has it's own advantages and disadvantages...
Use select=selected by passing the id
like
<option value="${GroupLi.partyClassificationTypeId if_exists}" selected="selected"> ${GroupLi.description?if_exists}</option>
GroupLi is the list name used to iterate
as:
<#list Group as GroupLi>
I have two dropdowns in html. Both dropdowns are getting data mysql first dropdown is "hostgroup" having value like "windows,linux" and second dropdown is "host" having value like"office,home,sidearea,localhost"
Basically I want to do it so when I select "linux" is hostgroup combobox it will filter "host" dropdown box and show only localhost in "host" dropdown and when I select "windows" in hostgroup dropdown it will filter it and remove localhost from host dropdown
My code for filling dropdown in html is,
html.append("<select id='hosts' name='hosts' style='width: 180px' onchange=\"document.forms['form1'].submit();\">>");
//if(rs != null)
//{
while(rshostgroup.next())
{
html.append("<option value='"+rshostgroup.getString(2)+"'>"+rshostgroup.getString(1)+"</option>");
//html.append("<option value='web'>web</option>");
}
//}
html.append("<select>");
html.append("</td>");
html.append("</tr>");
html.append("<tr>");
html.append("<td>");
html.append("Host");
html.append("</td>");
html.append("<td>");
html.append("<select id='hosts' name='hosts' style='width: 180px' onchange=\"document.forms['form1'].submit();\">>");
//if(rs != null)
//{
while(rshost.next())
{
html.append("<option value='"+rshost.getString(2)+"'>"+rshost.getString(1)+"</option>");
//html.append("<option value='web'>web</option>");
}
//}
html.append("<select>");
Please dont get confuse that what html.append is and what is option value comming from
Actually I am using string builder appending my string builder html in .java(class) file and calling class html appended method in jsp. It is working fine and the option value of drop down is filling from ResultSet rs and rshost having data from mysql.
Firstly using java to build HTML element is a terribly bad idea.
Use JSTL to loop through the dropdown options instead of using Java to spit out HTML code.
Secondly the problem you mention has nothing to do with Java and everything to do with JavaScript.
Well, not entirely true as you might have to make an AJAX request to server get values to populate your secondary dropdown box.
What you need to do is attach a onChange listener for the primary dropdown so that when it changes your javascript code either makes a AJAX call to server to get values for your secondary dropdown box, or use hardcoded values held in some javascript variables.
You will have to loop through the secondary dropdown to remove all previous values and add new dropdown options to it or alternately you can remove the secondary dropdown box entirely and recreate it with the new values based on the selection of the primary dropdown box.
There's already more than enough articles in the internet so use your fiend Google to find the ones that suits your needs closely.
I have a register form in which i want when the user selects an item from a first Select to create dynamically a second select with items from the database which are compatible with first selection.
For example i have 2 select Lists the first with Lessons and the second with professors.When i select from the first Select a lesson the Second Select Lists must have only professors of this lesson.
I am using jsp,java and i want to avoid ajax is this possible?
Thank you!
Yes it's possible.
However without AJAX, you would have to load all of the data with the page. That means storing the list of professors associated with each lesson in either a Javascript array or in a hidden HTML element from which you can retrieve the data later on.
You may avoid ajax by using one of those solutions:
Load all the professors of all the lessons when displaying the form, and store them in some JavaScript structure. When the selection of lesson changes, get the associated professors from this JavaScript structure. This might mean loading too much data at once, though
When the lessons selection changes, submit the form and redisplay it with the select box of professors populated.
Both of the solutions need JavaScript, and I really don't see what you gain by not using AJAX, though.
You might avoid JavaSCript completely with the second solution, but the user would have to click a submit button to load the second form.
Yes it is possible,
create two select boxes with the professor and lessons list and hide them by default. So attach event "onchange" on your first select box, when professors are selected show list with professors, when Lessons are selected show list with Lessons and hide Professors. e.g.
<select id="cbOne" onchange="show(this);">
<option value="0">Select</option>
<option value="1">Professors</option>
<option value="2">Lessons</option>
</select>
<select id="cbLessons" style="display: none;">
... your list
</select>
<select id="cbProfessors" style="display: none;">
... your list
</select>
This is method for JavaScript show
<script language="javascript">
function show(el)
{
var professors = document.getElementById('cbProfessors');
var lesssons = document.getElementById('cbLessons');
if(el.value == "0")
{
professors.style.display = 'none';
lessons.style.display = 'none';
}
else if(el.value == "1")
{
professors.style.display = '';
lessons.style.display = 'none';
}
else if(el.value == "2")
{
professors.style.display = 'none';
lessons.style.display = '';
}
}
</script>
I hope that this will help you.
Here is my what I have
<div id=A></div>
<div id=B></div>
<input type="button" value="ChangeA" onClick="createTableA();">
<input type="button" value="ChangeB" onClick="createTableB();">
So in my jsp file, I use javascript and jQuery to manipulate the content of those two div dynamically. For example, if I click on changeA, the function createTableA() will dynamically manipulate <div id=A></div> and append a table to it. So my question is if I click on changeA, then click changeB, how can I manipulate the history so that if I click the back button, I go back to the content of Table A
I've been using the jQuery History plugin for just this sort of thing and it's been working pretty well for me.
Each "page" is referenced by a hash in your URL. That way "changing pages" doesn't refresh the page, but does store the page state in history and allow for bookmarking.
EDIT
I'll expand on the example given in the link to apply more for your situation.
function loadTable(hash)
{
if(hash == "ChangeA")
createTableA();
if(hash == "ChangeB")
createTableB();
}
$(document).ready(function() {
$.history.init(loadTable);
$("input[id^='Change']").click(function(){
$.history.load(this.attr('value'));
return false;
});
});
What the above code does is sets an event handler on all input tags whose id begins with 'Change' so that when those buttons are clicked, loadTable is called. If you change your buttons to look like this:
<input type="button" id="ChangeA" value="ChangeA">
<input type="button" id="ChangeB" value="ChangeB">
clicking button A will put this http://www.example.com/yourpage.html#ChangeA in the address bar and load table A, also adding that table change to the browser history.
The native 'location' object has a 'hash' property that you could use for navigation in AJAX/JS applications.
You could use History plugin or Address plugin.
Address plugin gives more flexibility and recommended for more complex apps.
You should check out Ben Alman's Back Button and Query Library Great api for mucking with the browser history and has some great examples to get you started.
YUI also has a browser history manager: YUI3: http://developer.yahoo.com/yui/3/history/ or YUI 2: http://developer.yahoo.com/yui/history/