I'm trying to put together a script with PHP facebook/webdriver 1.4.1 and selenium 3.5 that will automate the task of giving online orders to our selected transport company (TNT) because they do not provide any rest api to fulfill this function and it is really tedious do it every singel time by hand.
My script works fine except for the Selectboxes, that are jscript generated with a bunch of <ul> and <li>, and I can not select the desired values.
This is an example of the select
<td>
<select id="latestCollectionTime" name="latestCollectionTime" style="display: none;">
<option value="" selected="selected">
selecteer...
</option>
<option value="2230">
22:30
</option>
<option value="2245">
22:45
</option>
<option value="2300">
23:00
</option>
<option value="2315">
23:15
</option>
<option value="2330">
23:30
</option>
<option value="2345">
23:45
</option>
</select>
<span id="latestCollectionTime-dropdown" class="selectboxit-container">
<span id="latestCollectionTimeSelectBoxIt" class="selectboxit dropdown-menu" style="" name="latestCollectionTime" tabindex="0" unselectable="on" role="combobox" aria-autocomplete="list" aria-expanded="false"
aria-owns="latestCollectionTimeSelectBoxItOptions" aria-activedescendant="0" aria-label="" aria-live="assertive">
<i id="latestCollectionTimeSelectBoxItDefaultIcon" class="selectboxit-default-icon selectboxit-option-icon" unselectable="on" style="margin-top: 5.5px;">
</i>
<span id="latestCollectionTimeSelectBoxItText" class="selectboxit-text" unselectable="on" data-val="" style="line-height: 22px; max-width: 88px;">
selecteer...
</span>
<span id="latestCollectionTimeSelectBoxItArrowContainer" class="selectboxit-arrow-container" unselectable="on" style="height: 22px;">
<i id="latestCollectionTimeSelectBoxItArrow" class="selectboxit-arrow caret" unselectable="on" style="margin-top: 7px;">
</i>
</span>
</span>
<ul id="latestCollectionTimeSelectBoxItOptions" class="selectboxit-options" tabindex="-1" role="listbox" aria-hidden="true" style="max-height: 198px; top: auto; display: none;">
<li id="0" data-val="" data-disabled="false" class="selectboxit-option selectboxit-option-first" style="" role="option">
<a class="selectboxit-option-anchor"><i class="selectboxit-option-icon " style="margin-top: 3.5px;"></i>selecteer...</a>
</li>
<li id="1" data-val="2230" data-disabled="false" class="selectboxit-option" style="" role="option">
<a class="selectboxit-option-anchor"><i class="selectboxit-option-icon " style="margin-top: 3.5px;"></i>22:30</a>
</li>
<li id="2" data-val="2245" data-disabled="false" class="selectboxit-option" style="" role="option">
<a class="selectboxit-option-anchor"><i class="selectboxit-option-icon " style="margin-top: 3.5px;"></i>22:45</a>
</li>
<li id="3" data-val="2300" data-disabled="false" class="selectboxit-option" style="" role="option">
<a class="selectboxit-option-anchor"><i class="selectboxit-option-icon " style="margin-top: 3.5px;"></i>23:00</a>
</li>
<li id="4" data-val="2315" data-disabled="false" class="selectboxit-option" style="" role="option">
<a class="selectboxit-option-anchor"><i class="selectboxit-option-icon " style="margin-top: 3.5px;"></i>23:15</a>
</li>
<li id="5" data-val="2330" data-disabled="false" class="selectboxit-option" style="" role="option">
<a class="selectboxit-option-anchor"><i class="selectboxit-option-icon " style="margin-top: 3.5px;"></i>23:30</a>
</li>
<li id="6" data-val="2345" data-disabled="false" class="selectboxit-option selectboxit-option-last" style="" role="option">
<a class="selectboxit-option-anchor"><i class="selectboxit-option-icon " style="margin-top: 3.5px;"></i>23:45</a>
</li>
</ul>
</span>
</td>
The <li> id is automatic generated, and duplicated in other selectboxes in the page, so i can't $driver->findElement(WebDriverBy::id('6'))->click();.
I can't select the normal way.
$driver->findElement( WebDriverBy::id('latestCollectionTime') )
->findElement( WebDriverBy::cssSelector("option[value='11']") )
->click();
because the select is hidden style="display: none; and neither with the xpath.
I would like to be able to directly select a value like data-val="2330" but taking in consideration that are other 3 selectboxes with the same <li> ids and data-val values, but with diferent <span> and <ul> ids .
Can anyone help me with this?
Thanks in advance.
EDIT:
I finish using it like this:
//make the dropdow list visible.
$driver->findElement(WebDriverBy::id('latestCollectionTimeSelectBoxIt'))->click();
// to click in the desired option.
$driver->findElement(WebDriverBy::xPath('//*[#id = "latestCollectionTimeSelectBoxItOptions"]/li[#data-val = "'.$desired_value.'"]'))->click();
Thanks again to #DAN in the answer below for pointing me in the right direction with the xPath sintax.
Firstly, elements with duplicate ids are not valid HTML, and it is up to each browser to determine what they will do with the illegal page elements. As far as I know, most browsers will allow multiple DOM elements with duplicate IDs, but this may change in the future.
Secondly, you can select the element you're interested in via XPath. For example, the XPath (//*[#id = 'someID'])[1] selects the first element with an id of someID.
However, as you mentioned that the <ul> elements have different IDs, you can use XPath such as //ul[#id = 'latestCollectionTimeSelectBoxItOptions']/li[#data-val = '2230'] to select the element.
Finally, you mention that the list items are not clickable because they are hidden, presumably because they're part of a dropdown menu.
In this case, you need to firstly click on the dropdown to open it, then find and click on the appropriate list item.
Hope this helps.
You only have to click on the option you want to choose.
I am using xpath for that because i want to access the option from the given select box.
$optionFromSelectBox = $driver->findElement(
WebDriverBy::xpath(
'//select[#id=\'latestCollectionTimeSelectBoxIt\']//option[2]'
)
);
$optionFromSelectBox->click();
Related
I'm trying to post the implode data of multiple select html to database but it is dynamic.
Result will be like this:
data1|data2|data3 = from multiple select(already get)
how can I achieve this kind of result? It is separated with commas
data1|data2|data3, data1|data2|data3, data1|data2|data3
The separated data inside the commas come from another multiple select.
Here's my code
HTML
<div class="required field">
<label>Subjects:</label>
<select class="ui fluid search dropdown" name="pass_subj[]" multiple="">
<option value="">Subject</option>
<option value="data1">subject1</option>
<option value="data2">subject2</option>
<option value="data3">subject3</option>
<option value="data4">subject4</option>
<option value="data5">subject5</option>
</select>
</div>
<div class="two wide field" style="padding: 23px 0px 0px;">
<button class="passmore ui icon yellow button" type="button">
<i class="plus icon"></i>
</button>
</div>
php
$pass_subj = $_POST['pass_subj'];
$pass_subjs = implode("|", $pass_subj);
I solved my own problem: My current project was using fomantic-ui; on my previous attempt, I used multiple select via select tag, which gives combined array values. To fix this, I used a dropdown via a div tag:
<div class="required field">
<label>Subjects:</label>
<div class="ui multiple selection dropdown clearable">
<input name="pass_subj[]" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Subject</div>
<div class="menu">
<div class="item" data-value="AP">Araling Panlipunan</div>
<div class="item" data-value="ENG">English</div>
<div class="item" data-value="FIL">Filipino</div>
</div>
</div>
</div>
<div class="two wide field" style="padding: 23px 0px 0px;">
<button class="passmore ui icon yellow button" type="button"><i class="plus icon"></i></button>
</div>
My PHP:
$pass_subj = $_POST['pass_subj'];
$pass_subjs = implode('#',$pass_subj);
The result will be:
AP#AP,ENG#AP,ENG,FIL#AP,FIL,MATH,ENG#AP,FIL,ENG,MATH,SCI
im trying to get the value of selected item, my items are dynamically generated
foreach ($result as $value){
?>
<a href="#" class="badge badge-info filteredcat" value="<?php echo $value['id'] ?>">
<?php echo $value['categorie'] ?>
</a>
<?php
}
?>
so after it loads the html looks like this
<a href="#" class="badge badge-info filteredcat" value="5">
Semnalizare rutieră </a>
<a href="#" class="badge badge-info filteredcat" value="4">
Probleme de mediu </a>
<a href="#" class="badge badge-info filteredcat" value="6">
Spații verzi </a>
<a href="#" class="badge badge-info filteredcat" value="7">
Câini comunitari </a>
using jquery i want to get the value of selected item
$('.filteredcat').click(function(){
let categorie = $(this).val();
//$.fn.startLoader();
console.log(categorie);
});
but i cant get the value ... if i use $(this).text() its working ... but not the value
You should be able to grab it with let categorieVal = $(this).attr("value"); since it is one of the elements' attributes. See .attr() | jQuery API Documentation
I have built an HTML email template but my Multiselect values are not displaying in email sent to the user.
the code
<p><strong>Hotels : </strong>{hotels-group}</p>
hotels-group is a multiselect on my form . Although the values are getting posted if I don't use the html template for the emailing purpose
The form looks like -
$form->addOption('hotels-group[]', 'hotel-5', 'hotel-4', 'option 3');
$form->addOption('hotels-group[]', 'hotel-6', 'hotel-6', 'option 3');
$form->addSelect('hotels-group[]', 'Hotels : ', 'class=selectpicker,multiple=multiple, data-max-options=2, data-live-search=true,title=Choose Hotels,data-width=fit,required=required');
Any suggestion how I can solve it?
I have tried changing the value inside curly braces to
<p><strong>Hotels : </strong>{hotels-group[]}</p>
but no effect even tried accessing it as an array ..but no result.
Edit : I forgot to mention , I am using Bootstrap Select plugin .
Edit 2: Generated html code as requested:
<div style="width: 219px;" class="btn-group bootstrap-select show-tick form-control dropup">
<button title="Neelesh Inn, Lake Inn" data-id="hotels-group" type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown"><span class="filter-option pull-left">Neelesh Inn, Lake Inn</span> <span class="caret"></span>
</button>
<div style="min-width: 0px; max-height: 169.517px; overflow: hidden; min-height: 48px;" class="dropdown-menu open">
<div class="bs-searchbox">
<input class="input-block-level form-control" autocomplete="off" type="text">
</div>
<ul style="max-height: 109.517px; overflow-y: auto; min-height: 0px;" class="dropdown-menu inner selectpicker" role="menu">
<li class="selected" data-original-index="0"><a tabindex="0" class="" data-normalized-text="<span class="text">Neelesh Inn</span>"><span class="text">Neelesh Inn</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
</li>
<li class="selected" data-original-index="1"><a tabindex="0" class="" data-normalized-text="<span class="text">Lake Inn</span>"><span class="text">Lake Inn</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
</li>
<li class="" data-original-index="2"><a tabindex="0" class="" data-normalized-text="<span class="text">Royal Rosette</span>"><span class="text">Royal Rosette</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
</li>
</ul>
</div>
</div>
I have a page with a list of Bootstrap collapsion panels. I create these panels dynamically by first querying the database for content, see the code below:
<div class="panel-group" id="accordion">
<?php
$all_emails = "SELECT * FROM sent_emails";
if($result = mysqli_query($link, $all_emails)) {
while($rows = $result->fetch_object()) {
$db = $rows->timestamp;
$timestamp = strtotime($db);
echo '
<div class="panel panel-default m'.date("m", $timestamp).'">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse'.$rows->ai.'">
#'.$rows->ai.' | Sent to: '.$rows->mail_to.' | Subject: '.$rows->mail_subject.' <span class="pull-right">| '.$rows->timestamp.' </span>
</a>
</h4>
</div>
<div id="collapse'.$rows->ai.'" class="panel-collapse collapse">
<div class="panel-body">
'.$rows->mail_message.'
</div>
</div>
</div>
';
}
mysqli_free_result($result);
}
?>
</div>
This works fine and all, but what I want to accomplish next is adding a filter that only show the panels with a certain class in it. As you can see in the code above I create divs with the classes "panel panel-default m('month') which all have a parent div called "panel-group".
WHen I choose a month from the dropdown button as shown below, I take the value/id of the month into jQuery as input for the filter.
<div class="dropdown1">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Select month
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="select1">
<li value="january" id="m1" role="presentation">January</li>
<li value="february" id="m2" role="presentation">February</li>
<li value="march" id="m3" role="presentation">March</li>
<li value="april" id="m4" role="presentation">April</li>
<li value="may" id="m5" role="presentation">May</li>
<li value="june" id="m6" role="presentation">June</li>
<li value="july" id="m7" role="presentation">July</li>
<li value="august" id="m8" role="presentation">August</li>
<li value="september" id="m9" role="presentation">September</li>
<li value="october" id="m10" role="presentation">October</li>
<li value="november" id="m11" role="presentation">November</li>
<li value="december" id="m12" role="presentation">December</li>
</ul>
</div><!--/.dropdown1 -->
So far I have the following jQuery code. Every child div of "panel-group" that doesn't have the class let's say m10 (=October) must be hidden.
<script>
$(function(){
$("#select1").on('click', 'li', function(){
$("#dropdownMenu1").text($(this).text());
$("#dropdownMenu1").val($(this).text());
$(".panel-group").show();
$(".panel-group .panel.panel-default :not(."+this.id+")").hide();
});
});
I have been trying a lot and have searched all over the internet for an answer that satisfies what I need, but no luck so far :(
Hide all, then show the correct one:
$(function(){
$("#select1").on('click', 'li', function(){
$("#dropdownMenu1").text($(this).text());
$("#dropdownMenu1").val($(this).text());
$(".panel-group .panel").hide();
$(".panel-group .panel.panel-default."+this.id).show();
});
});
i am writing two list application where data from one list can be shifted to other list.
i am using DIV like this
<div id="all_users">
<div id="user1" userid="1" class="innertxt"> <img src="images/images.jpg" width="50" height="50"><strong>Test User 01</strong>
<ul>
<li>User ID: 1</li>
<li>Email: user1#nodomain.com</li>
<li style="padding-top:5px;">
<input type="checkbox" id="select1" value="1" class="selectit" />
<label for="select1"> Select it.</label>
</li>
</ul>
</div>
<div id="user2" userid="2" class="innertxt"> <img src="images/images.jpg" width="50" height="50"><strong>Test User 02</strong>
<ul>
<li>User ID: 2</li>
<li>Email: user2#nodomain.com</li>
<li style="padding-top:5px;">
<input type="checkbox" id="select2" value="2" class="selectit" />
<label for="select2"> Select it.</label>
</li>
</ul>
</div>
<div class="float_break"></div>
</div>
for removing data from div i use following script
$("#move_new").click(function() {
$('#all_users .innertxt').each(function() {
$(this).remove();
});
});
now what i need is:
add new data into DIV.
i try following code
$('#all_users').append(new_data_var);
where new_data_var is variable which contain following HTML value
<div class="innertxt" userid="1" id="user1"> <img height="50" width="50" src="images/images.jpg"><strong>Test User 01</strong>
<ul>
<li>User ID: 1</li>
<li>Email: user1#nodomain.com</li>
<li style="padding-top: 5px;">
<input type="checkbox" class="selectit" value="1" id="select1">
<label for="select1"> Select it.</label>
</li>
</ul>
</div>
i want to figure out how can i store above HTML value into new_data_var ?
second if my values are coming from MYSQL & PHP how can i use this in loop to add more values.
Thanks
To store HTML-code to a variable, you could use this:
var new_data_var = $('<div class="innertxt" userid="1" id="user1"> <img height="50" width="50" src="images/images.jpg"><strong>Test User 01</strong><ul><li>User ID: 1</li> <li>Email: user1#nodomain.com</li><li style="padding-top: 5px;"><input type="checkbox" class="selectit" value="1" id="select1"><label for="select1"> Select it.</label></li></ul></div>');
$('#all_users').append(new_data_var);
Try wrapping your code in jquery set call:
$('#all_users').append( $(new_data_var) );
Same as the others suggested really, I recommend using jQuery to build your HTML prior to appending it, this is a minimalist version but you could generate the lot in a similar manner.
var new_data_var = $('div', {'id': 'user1', class: 'innertxt'}).html('
<img height="50" width="50" src="images/images.jpg"><strong>Test User 01</strong>
<ul>
<li>User ID: 1</li>
<li>Email: user1#nodomain.com</li>
<li style="padding-top: 5px;">
<input type="checkbox" class="selectit" value="1" id="select1">
<label for="select1"> Select it.</label>
</li>
</ul>
);