I haven't been able to find anything specific to this case. Im trying to change the displayed html object based on the selection from a drop down menu.
So far I have:
<div class="card-body"></div>
<object id="dategraph" data="assets/img/date_manual_interventions_prefix.html"></object>
<select id="DateGraphList">
<option value="assets/img/date_manual_interventions_prefix.html">
Date Graph - Manual Interventions per 1000Mb - SL
</option>
<option value="assets/img/date_manual_interventions_prefix_v.html">
Date Graph - Manual Interventions per 1000Mb - DL
</option>
<option value="assets/img/date_manual_interventions_prefix_full.html">
Date Graph - Manual Interventions per 1000Mb - FN
</option>
</select>
With the js script for this being:
function setCar() {
var obj = document.getElementById("dategraph");
obj.data = this.value;
return false;
}
document.getElementById("DateGraphList").onchange = setCar;
Could some one point out where i'm going wrong?
Thanks in advance!
Try setting the data attribute of the <object> by using Element.setAttribute.
data
The address of the resource as a valid URL. At least one of data and type must be defined.
Note: Don't forget to set the content type as stated above.
<object
id="dategraph"
type="text/html"
data="assets/img/date_manual_interventions_prefix.html">
</object>
function setCar(e) {
const obj = document.querySelector('#dategraph');
obj.setAttribute('data', e.target.value);
}
document.querySelector('#DateGraphList').addEventListener('change', setCar);
Related
I am a python selenium webdriver newbee.
I am stuck at a dropdown that has an "onchange" parameter in the html.
This is how the inspect window looks:
I am trying to first key in the date to the box called "Start"
Then move on to the dropdown for the "Schools" (School1, School2 etc).
Once I choose the school, the adjacent dropdown (School Levels) will refresh/update/populate with the school levels (middle, high, elem etc) for that school. There is an "onchange=" for this element.
Then move on to the School Levels dropdown to choose the level. There is an "onchange=" for this element, too
And then move on the the grade level dropdown.
I am stuck at the first dropdown.After I enter the start date, it does move on the dropdown and clicks on it and all three schools get visible but the driver does not select the school and does not move on to the adjacent school level dropdown.
As far as I understand from what I have found online, it most probably has to do with the onchange javascript event but couldn't figure out how to fire the event.
Please help.
Thank you in advance.
This is the html block for the start date box:
<div class="inline-block" ><input name="Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$DatePickerStartDate" type="text" size="9" id="Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_DatePickerStartDate" spellcheck="false" style="BACKGROUND:#ff9999;display:inline;" /><input type="image" name="Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$DatePickerStartDate_IB" id="Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_DatePickerStartDate_IB" src="Images/Mindex/WebControls/DatePicker/calendar.jpg" onclick="PopupCal('Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_DatePickerStartDate', 'Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_DatePickerStartDate',false,false); return false;" style="border-width:0px;display:inline;vertical-align:middle;" /></div></nobr>
And this is the html block for the two adjacent dropdowns:
<select name="Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$BuildingDropDown" onchange="javascript:setTimeout('__doPostBack(\'Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$BuildingDropDown\',\'\')', 0)" id="Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_BuildingDropDown">
<option selected="selected" value="3">School1</option>
<option value="4">School2</option>
<option value="5">School3</option>
</select>
<select name="Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$BuildingSchoolLevelDropDown" onchange="javascript:setTimeout('__doPostBack(\'Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$BuildingSchoolLevelDropDown\',\'\')', 0)" id="Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_BuildingSchoolLevelDropDown">
<option selected="selected" value="4">K-8</option>
<option value="5">High School</option>
<option value="6">Summer School</option>
<option value="7">Middle School</option>
<option value="8">Elementary</option>
</select></nobr>
And this is my code:
print("Clicking on student selector icon")
driver.find_element_by_xpath("/html/body/form/div[4]/div[1]/div/div[2]/div/table/tbody/tr/td/table[2]/tbody/tr["+str(r)+"]/td[1]/input").click()
time.sleep(2)
tab_student = driver.find_element_by_id("Template1_Control0_TabHeaderDetails_MenuTabs1_MenuTabStudent")#we can move this to the start of the script
tab_student.click()
time.sleep(3)
icon_add_enrollment = driver.find_element_by_id("Template1_Control0_BottomPanel_IconButtonAdd")#we can move this to the start of the script
icon_add_enrollment.click()
time.sleep(3)
input_startdate = driver.find_element_by_id("Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_DatePickerStartDate")
input_startdate.send_keys("4/21/2010")
time.sleep(2)
print("Start Date entered")
dropdown_school = driver.find_element_by_id("Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_BuildingDropDown")
dropdown_school.select_by_visible_text("School1")
time.sleep(5)
print("School picked")
time.sleep(6)
dropdown_level = driver.find_element_by_id("Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_BuildingSchoolLevelDropDown")
dropdown_level.select_by_visible_text("Elementary")
#or maybe I can use this? actions.move_to_element(dropdown_building).click().perform()
time.sleep(2)
print("Building picked")
time.sleep(6)
dropdown_grade = driver.find_element_by_id("Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_GradeDropDown")
actions.move_to_element(dropdown_grade).click().perform()
time.sleep(2)
dropdown_grade.select_by_visible_text("1").click()
print("Grade picked")
time.sleep(2)
dropdown_ethnicity = driver.find_element_by_id("Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_ddlEthnicity")
actions.move_to_element(dropdown_ethnicity).click().perform()
time.sleep(2)
dropdown_ethnicity.select_by_visible_text("White").click()
print("Ethnicity picked")
time.sleep(2)
icon_save_enrollment = driver.find_element_by_id("Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_IconButtonAdd")#we can move this to the start of the script
icon_save_enrollment.click()
time.sleep(4)
print("Enrollment added.. Moving on to enrolling the next child")
I also tried move_to_element().click(perform() but still not working.
The onchange javascripts in the html is not showing correctly for some reason so I am attaching them below:
//for school dropdown:
javascript:setTimeout('__doPostBack(\'Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$BuildingDropDown\',\'\')', 0)
//for school levels dropdown:
javascript:setTimeout('__doPostBack(\'Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$BuildingSchoolLevelDropDown\',\'\')', 0)
Thank you again.
As far as I understand, this is your exact problem:
After I enter the start date, it does move on the dropdown and clicks on it and all three schools get visible but the driver does not select the school and does not move on to the adjacent school level dropdown.
Which means the error occurs when selecting the dropdowns or <select> inputs once the date is properly detected by the onchange.
Ive found this to work on similar cases:
schoolSelector = Select(driver.find_element_by_xpath('//select[#name="Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$BuildingSchoolLevelDropDown"]'))
schoolOptions = schoolSelector.options
then if you want to iterate through each school you may use schoolOptions to get each one with:
for school in range(0,len(schoolOptions)):
schoolSelector.select_by_index(school)
Edit:
Had not noticed you posted all of your code, I think selecting by index and via XPATH is usually more precise. Give it a shot.
I'm planning to add multiple select field into my project but the problem is I want to capture one more integer value along with every selected value,Can anyone suggest me best way of selecting the value along with multiple select. My multiple select dropdown look like this.. and thanks in advance
<div class=" multiselectdd "><multiselect ng-model="vm.inventory.SiteId" options="site.value as site.label for site in vm.sites" data-header-key="header"data-divider-key="divider" scroll-after-rows="5"filter-after-rows="0">
</div>
I don't get it properly but if you want to select more than one object in your select list you can:
Javascript Side
$scope.SelectedChanged = function (yourModel) {
if (yourModel.length > 1) {
$scope.newModel = yourModel[1];
}
};
HTML Side
<select name="yourElementName" multiple ng-model="yourModel" ng-change="SelectedChanged(yourModel)">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Tree</option>
<option value="3">Four</option>
</select>
and call your model to test
<span>{{yourModel}} - Second Value: {{newModel}} </span>
When you select multiple element lets say " One and Two " you will see like:
Output
["0","1"] - Second Value: 1
I am working on a real estate website and require dropdown fields for minimum bedrooms, bathroom etcs using a simple html code:
<select class="facetwp-dropdown" id="id_beds_min" name="beds_min">
<option disabled selected value>Beds</option>
<option value="1">1+</option>
<option value="2">2+</option>
<option value="3">3+</option>
<option value="4">4+</option>
</select>
I know that the fields need conditions - ie that it cannot be less than 1, or 2 etc. But not quite sure on the coding.
I'm using a plugin called FacetWP to assist with the search fields.
Any assistance?
I would completely remove the options you want to disable:
Within the html code (in this code where <option value="1">1+</option> is), call a function in brackets: {this.renderNumberOfBedOptions(minNumberOfBedOptions, maxNumberOfBedOptions)}
Then, above the html code inside the javascript code:
renderNumberOfBedOptions{minNumberOfBedOptions, maxNumberOfBedOptions) {
let options;
for (let i = minNumberOfBedOptions; i < maxNumberOfBedOptions; i++) {
options += <option value=i>i+</option>
}
return options;
Your html should be somthing like this:
<select class="facetwp-dropdown" id="id_beds_min" name="beds_min">
<option disabled selected value>Beds</option>
<?php
for($i=$minbeds; $i<=maxbeds; $i++)
{
echo "<option value=".$i.">".$i."+</option>";
}
?>
</select>
What you do next in the server side is query with something like this:
$bedrooms_min = $_POST["beds_min"];
query = "select* from houses where bedrooms >=".$bedrooms_min
and consider using mysqli prepared statements.
if your html template contains no php code you can convert the loop to JavaScript after querying the minimum and maximum number of rooms from the back end but WordPress templates can contain php code anyway.
I'm new here in this Forum so this is my first question.
If I do something wrong just say it.
But now my Question: I've got a multiple select in a html file which values I save in a Database. When the site is loaded again I would like to select the select options that were selected before automaticly. For this I need something like this:
<select multiple id="a">
<option>tomato</option>
</select>
<select multiple id="b">
<option>apple</option>
</select>
<select multiple id="c">
<option>orange</option>
</select>
<select multiple id="d">
<option>cake</option>
</select>
<script>
var ids = ["a", "b", "c", "d"];
for(i=0, i < 4, i++){
var id = ids[i];
id.options[0].selected = true;
}
</script>
This is what I tried (on the web page the selects have more then one option). I've done also research in the internet, but I was not able to find good results.
The problem is the dynamic variable it's interpreted like it's a id of an html object by the compiler but it should be interpreted like a variable. I only need the right syntax.
But I couldn't get it to work because there is an error whit the dyanamic variable. How can I do this right, that it works?
So I done a lot o research again and now I done it this way:
document.getElementById(id).options[0].selected = true;
I wanted to added javascript variable inside html code.
Here is my code:
<select id="currentrun" name="currentrun" >
<option value=""><script>selectedrun</script></option>
</select>
and my js function
var currentrun="";
var selectedrun="";
function setCurrentRun()
{
currentrun = document.getElementById("runlist");
selectedrun = currentrun.options[currentrun.selectedIndex].value;
}
But this doesn't work.
Can anyone help me to do this.
Thanks in advance.
You don't have to run the script like that.
The value of the currentrun can be retrieved as:
document.getElementById('currentrun').value
And for completeness, if you want to trigger a JavaScript function call each time the selection is modified, do this:
<select onchange="my_function();">
<option>...</option>
</select>
It seems like you are trying to set the text of the option element with javascript. Here is one way you can do it using the id of the element to get it and then set the text property of the element to your javascript variable:
<select id="currentrun" name="currentrun" >
<option id="currentoption" value=""></option>
</select>
<script>
document.getElementById("currentoption").text = selectedrun;
</script>
Be sure to put any necessary javascript that declares and sets the selectedrun variable before the above script.