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>
Related
I would like to submit my form without reloading the page after pressing the submit button.But everything I have tried doesn't worked.Can you give me some help with ajax code please?
My view:
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="border-bottom: none;padding: 0px 0px;right: 15px;top: 10px;position:relative">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<section>
<div class="wizard col-md-6" >
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul style="border:none !important" class="nav nav-tabs" role="tablist" style="margin: 0px auto">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="icon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="icon-note"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="icon-check"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form" action="/career_report" method="post">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
#if(Sentinel::check())
<input type="hidden" name="user_id" value="{{ Sentinel::check()->id }}">
<input type="hidden" name="username" value="{{ Sentinel::check()->username }}">
#endif
<input type="hidden" name="subject" value="{{url()->current()}}">
<input type="hidden" name="user_id_posted" value="{{ $event->user->id }}">
<input type="hidden" name="username_posted" value="{{ $event->user->username }}">
<input type="hidden" name="career_solution_id" value="{{ $event->id}} ">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3 style="text-align: center">Why are you reporting this content :</h3>
<ul style="list-style: none">
<li>
<input type="radio" id="box-9" name="why_reporting" value="Spam">
<label for="box-9">Spam</label>
<div class="check"></div>
<small id="box-9-s" style="display: none">I consider this content irrelevant and annoying.</small>
</li>
<li>
<input type="radio" id="box-10" name="why_reporting" value="Fake Profile">
<label for="box-10">Fake Profile</label>
<div class="check"><div class="inside"></div></div>
<small id="box-10-s" style="display: none">This content was posted by way of a profile that clearly doesn't represent a real person.
</small>
</li>
<li>
<input type="radio" id="box-11" name="why_reporting" value="Advertising">
<label for="box-11">Advertising</label>
<div class="check"><div class="inside"></div></div>
<small id="box-11-s" style="display: none">This content is or contains advertising.
</small>
</li>
<li>
<input type="radio" id="box-12" name="why_reporting" value="Untrustworthy source">
<label for="box-12">Untrustworthy source</label>
<div class="check"><div class="inside"></div></div>
<small id="box-12-s" style="display: none">This content is from an untrustworthy source and contains unverifiable statements.
</small>
</li>
<li>
<input type="radio" id="box-13" name="why_reporting" value="Defamatory">
<label for="box-13">Defamatory</label>
<div class="check"><div class="inside"></div></div>
<small id="box-13-s" style="display: none">The reported content is insulting or defamatory to me or other people.
</small>
</li>
<li>
<input type="radio" id="box-14" name="why_reporting" value="Violence or pornography">
<label for="box-14">Violence or pornography</label>
<div class="check"><div class="inside"></div></div>
<small id="box-14-s" style="display: none">This content contains violence or pornography.
</small>
</li>
<li>
<input type="radio" id="box-15" name="why_reporting" value="Violates IP rights">
<label for="box-15">Violates IP rights</label>
<div class="check"><div class="inside"></div></div>
<small id="box-15-s" style="display: none">This content includes third-party content (e.g. an image) posted under their own name.
</small>
</li>
<li>
<input type="radio" id="box-16" name="why_reporting" value="Promotes structural distribution measures">
<label for="box-16">Promotes structural distribution measures</label>
<div class="check"><div class="inside"></div></div>
<small id="box-16-s" style="display: none">This content promotes a chain distribution system, multilevel selling or pyramid sales.
</small>
</li>
<li >
<input type="radio" id="box-17" name="why_reporting" value="Other">
<label for="box-17" id="other">Other</label>
<div class="check"><div class="inside"></div></div>
<div class="form-group" id="mydiv" style="display: none">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Please let us know why you're reporting this content:
" style="resize: none" name="why_reporting_message"></textarea>
</div>
</li>
</ul>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></li>
<li><button style="background-color: #18ba9b;border-color: white" type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Why would you like to report this?</h3>
<div class="form-group">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5" style="resize: none" placeholder="
Please let us know why you're reporting this content:" name="additional_message"></textarea>
</div>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></li>
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button style="background-color: #18ba9b;border-color: white" type="submit" class="btn btn-primary btn-info-full next-step" id="save">Submit your report</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h2 class="title-box-v2" style="font-size: 17px !important;line-height: 35px">We'll look into this as soon as possible. Thanks for helping us improve the quality of content on Workstickers.</h2>
<p style="text-align: center">You have successfully completed all steps.Flagged content and users are reviewed by Workstickers staff 24 hours a day, seven days a week to determine whether they violate Community Guidelines. Accounts are penalized for Community Guidelines violations, and serious or repeated violations can lead to account termination.
</p>
<div style="text-align: center;margin-top: 50px">If you've changed your mind - Cancel report</div>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END MY MODAL -->
<script>
$(document).on("click",".save",function(){
e.preventDefault(); //Prevent page from submiting
$(document).on("click", ".save", function() {
$.ajax({
type: "post",
url: 'career_report',
data: $(".why_reporting").serialize(),
success: function(store) {
},
error: function() {
}
});
});
});
</script>
My route
Route::post('career_report', 'CareerSolutionController#careerReport');
My controller
public function careerReport(requ $request)
{
$report = \App\Reports::create([
'user_id' => $request['user_id'],
'username' => $request['username'],
'user_id_posted' => $request['user_id_posted'],
'username_posted' => $request['username_posted'],
'career_solution_id' =>$request['career_solution_id'],
'subject' =>$request['subject'],
'why_reporting' =>$request['why_reporting'],
'why_reporting_message' =>$request['why_reporting_message'],
'additional_message' =>$request['additional_message'],
]);
if($report != ""){
flash('Career solution report submited', 'success');
}else{
flash('Career solution report', 'warning');
}
return Redirect::back();
}
What I have tried:
I tried to adapt this to my code, but without success. Trying to submit my laravel form without the page refreshing
you can use Jquery Ajax .
$('#yourFormId').submit(function(e){
e.preventDefault();
var data = $(this).serialize();
$.ajax({
method:'POST',
url:'your process file URL',
data:data,
success: function (result) {
// do something with result
}
});
});
in this example i have used $.Ajax method
when you use e.preventDefault(); your form will not be submitted . so you can manually submit it in Javascript . in the submit event , you use Ajax and it sends your form data to your process file and then returns the result . without refreshing page or redirecting .
Here is the update of my question:
I am having a filter tab from the database but and doing a loop to show the filters tab.
PROBLEM
But the problem is when we click on tabs it should show a dropdown from where I can choose what we want to filter. but its only showing first filter and other are not working.
EDIT
my view file
<form id="tabForms" action="{{route('o')}}" method="GET">
<div class="col-xs-12 col-sm-8 col-md-6 filter-bootstrap" style="padding:0px;margin-bottom:20px;">
<div class="input-group input-group-lg">
<div class="input-group-btn">
<button type="button" class="btn btn-warning dropdown-toggle"
data-toggle="dropdown" aria-expanded="false"
style="background:#FFF;color:#575962;border:solid 1px #e7ecf1;box-shadow: none;font-weight: 300;
font-size: 15px;text-transform: capitalize;padding: 5px 12px;height: 35px;border-radius:3px 0px 0px 3px;">Add Search Field
</button>
<ul class="dropdown-menu productFilter" id="filters">
<li id="Payment Status" onclick="productFilter(this.id)" >Payment Status</li>
<li id="Shipping Status" onclick="productFilter(this.id)" >Shipping Status</li>
<li id="Order Total" onclick="productFilter(this.id)" >Order Total</li>
<li id="Item Weight" onclick="productFilter(this.id)" >Item Weight</li>
<li id="Shipping class Name" onclick="productFilter(this.id)" >Shipping class Name</li>
<li id="Shipping Country" onclick="productFilter(this.id)" >Shipping Country</li>
<li id="Refund Status" onclick="productFilter(this.id)" >Refund Status</li>
<li id="Shipping class Name" onclick="productFilter(this.id)" >Shipping class Name</li>
<li id="Warehouse Location" onclick="productFilter(this.id)" >Warehouse Location</li>
<li id="Shipment Status Date" onclick="productFilter(this.id)" >Shipment Status Date</li>
<li id="Payment status" onclick="productFilter(this.id)" >Payment status</li>
</ul>
<input type="hidden" class="form-control" name="productFilterType" value="" id="productFilterType"/>
</div>
<!-- /btn-group -->
<!--show text on input -->
<div class="filter-top">
#php
use App\Filter;
$userId = Auth::id();
$filters = Filter::where('user_id',$userId)->get();
foreach($filters as $getfilter)
{
$filter_name = $getfilter->filter_name;
$filter_id = $getfilter->id;
#endphp
<label id="inputTagFilterId" class=filter-id{{$filter_id}} style="color:#666;margin:7px;"> {{$filter_name}} <span class="close-tab"><a style="border-left: dotted 1px #666;color: #666;"> X </a></span></label>
#php }
#endphp
</div>
<div id="filterpop">
<div class='tb-dropdown tb-fieldfilter-popup tb-fieldfilter-selectfieldfiltereditor-popup tb-fieldfilter-selectfieldfiltereditor-popup-large' style='display: block; min-width: 261px; z-index: 1001; opacity: 1; left: 513.609px; top: 195.75px;' data-turbodropdown-popup='' data-positioned='bottomleft'>
<div class='tb-fieldfilter-popup-fields'>
<select class='tb-select tb-fieldfilter-selectfieldfiltereditor-operators' data-turbofieldfilter-selectfieldfiltereditor-operator-field=''>
<option value='equals'>Equals</option>
<option value='notEquals'>Not Equals</option>
<option value='in'>In List</option>
<option value='notIn'>Not In List</option>
</select>
<span class='tb-fieldfilter-popup-errors' data-turbofieldfilter-selectfieldfiltereditor-operator-errors=''></span>
<span class='tb-fieldfilter-selectfieldfiltereditor-values' data-turbofieldfilter-selectfieldfiltereditor-value-fields=''>
<div class='tb-fieldfilter-selectfieldfiltereditor-selector tb-inlineselect tb-inlineselect-multiple' data-turbofieldfilter-selectfieldfiltereditor-selector=''>
<div class='tb-inlineselect-messages' data-turboinlineselect-messages=''>
</div>
<div class='tb-inlineselect-searchbox tb-text-field tb-text-field-with-feedback tb-searchbox' data-turboinlineselect-searchbox=''>
<input type='text' class='tb-input' autocomplete='off' data-turbosearchbox-input='' placeholder='Search...'>
<i class='tb-text-field-feedback' data-turbosearchbox-state-indicator=''></i>
</div>
<div class='tb-inlineselect-selected-items' data-turboinlineselect-selected-items=''>
<div class='tb-inlineselect-selected-items-header' data-turboinlineselect-selected-items-header=''>
<span class='tb-inlineselect-selected-items-title' data-turboinlineselect-selected-items-title=''>Selected:</span>
</div>
<div class='tb-inlineselect-selected-items-viewport' data-turboinlineselect-selected-items-viewport='' style='height: 150px;'>
<div class='tb-inlineselect-selected-items-list' data-turboinlineselect-selected-items-list=''>
<div data-turbolistview-item-key='0' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Unshipped</div>
</div>
</div>
</div>
</div>
<div class='tb-inlineselect-search-results' data-turboinlineselect-search-results='' style=''>
<div class='tb-inlineselect-search-results-header' data-turboinlineselect-search-results-header=''>
<span class='tb-inlineselect-search-results-title' data-turboinlineselect-search-results-title=''>Search Results:</span>
<span class='tb-inlineselect-select-all' data-turboinlineselect-select-all='' data-turboinlineselect-action='selectAll'>Select All</span>
<span class='tb-inlineselect-unselect-all' data-turboinlineselect-unselect-all='' data-turboinlineselect-action='unselectAll'>Clear</span>
</div>
<div class='tb-inlineselect-search-results-viewport' data-turboinlineselect-search-results-viewport='' style='height: 150px;'>
<div class='tb-inlineselect-search-results-list' data-turboinlineselect-search-results-list=''>
<div data-turbolistview-item-key='0' class='tb-listview-item tb-inlineselect-selected-item'>
<div class='tb-inlineselect-item'>Unshipped</div>
</div>
<div data-turbolistview-item-key='1' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Shipped</div>
</div>
<div data-turbolistview-item-key='2' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Partially Shipped</div>
</div>
<div data-turbolistview-item-key='4' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Pending Shipment</div>
</div>
<div data-turbolistview-item-key='8' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Canceled</div>
</div>
<div data-turbolistview-item-key='16' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Third Party Managed</div>
</div>
</div>
<div class='tb-inlineselect-search-results-truncated' data-turboinlineselect-search-results-truncated=''>
</div>
</div>
</div>
</div>
<span class='tb-fieldfilter-popup-errors' data-turbofieldfilter-selectfieldfiltereditor-value-errors=''>
</span>
</span>
</div>
<div class='tb-fieldfilter-popup-buttons'>
<button class='tb-btn' data-turbofieldfilter-selectfieldfiltereditor-update=''>Update</button>
<a href='#' class='tb-btn-link' data-turbofieldfilter-selectfieldfiltereditor-cancel=''>Cancel</a>
</div>
</div>
</div>
</div>
</div>
</div>
Controller file
public function index(request $request)
{
$productFilterType = $request->input('productFilterType');
return view('pages.order',array(
'productFilterType' =>$productFilterType,
));
}
jquery
function productFilter(value) {
alert(value);
jQuery("#productFilterType").val(value);
jQuery("#tabForms").submit();
}
$(document).on('click','#inputTagFilterId',function(){
var label = $('#inputTagFilterId');
var filterid = label.attr('class');
alert(filterid);
$("."+filterid).click(function(){
$("#filterpop").show();
});
});
Been working on this a bit and somewhat dificult with my limited skills. I created the area so far but adding the contact form is proving to be a huge challenge for me.
This is the area so far:
The grey area is where I would like the contact form to go, something like this:
What I would like the contact form to achive:
Add the (Ask a Question)
Person using contact form has to input Name,email, and telephone before contact agent button allows to be sent.
Info box to default message: I'm interested in the Post address but they can always override by typing in their own message.
Contact message will be sent to whatever the above email address is populated (right now it's mine up there joe#teamambrose.realtor
below the Contact Agent button show: By sending a request you agree to our Privacy Policy.
Here is where I am so far on the code:
<!--======= Agent Info =========-->
<section class="info-property agents-info">
<h5 class="tittle-head"><?php esc_html_e('agent details', 'realtor');?></h5>
<div class="inner">
<!--======= AGENT DETAILS =========-->
<div class="row">
<div class="col-sm-3">
<?php echo wp_get_attachment_image(_sh_get_attachment_id_from_src(sh_set($meta1, 'agent_img')), '270x288');?>
</div>
<div class="col-sm-9">
<?php $term_list = wp_get_post_terms(get_the_id(), 'property_agent', array("fields" => "names")); ?>
<h5><?php echo implode( ', ', (array)$term_list );?></h5>
<!--======= SOCIAL ICONS =========-->
<ul class="social_icons">
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<!--<li class="googleplus"><i class="fa fa-google-plus"></i></li>-->
<!--<li class="linkedin"><i class="fa fa-linkedin"></i></li>-->
<li class="instagram"><i class="fa fa-instagram"></i></li>
</ul>
<p><?php $description = $agents_term[0]->description; echo $description;?></p>
<!--======= AGENT INFOR =========-->
<ul class="agent-info">
<li>
<p><i class="fa fa-phone"></i> <?php echo sh_set($meta1, 'phone');?> </p>
</li>
<li>
<p><i class="fa fa-envelope-o"></i><span style='font-size:11px'><?php echo sh_set($meta1, 'email');?></span></p>
</li>
<li>
<p><i class="fa fa-home"></i> <?php printf( esc_html__('Listed %s Properties', 'realtor'), sh_set(sh_set($agents_term, 0 ) , 'count' ) );?> </p>
</li>
</ul>
</div>
</div>
<div class="overlay">
<div class="container">
<h1><?php echo balanceTags($title);?></h1>
<div class="pull-left"><?php echo balanceTags($title);?> </div>
<h5>
<div style="text-align: center;">
<?php echo 'Learn More: ' . get_the_title();?> </div>
</h5>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div style="height: 400px; width: 300px; background-color: #f8f8f8; border: 1px solid #dddddd;">
</div>
</div>
<div class="col-sm-8">
<div style="max-height: 400px; overflow: hidden; max-width: 610px; padding-left: 43px;">
<?php the_post_thumbnail('337x271', array('class' => 'img-responsive', 'style' => 'transform: translate(0%, -10%)'));?>
</div>
</div>
</div>
</section>
Any help on this will be awesome!
Figured it out on my own. Had to wrap all the echo commands from tutorial in php
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();
I am looking to scrape the HTML response for a Google SERP using Simple HTML Dom I need it split into Google Ads, Google Local Listings and normal SERPS the html is below;
Local SERP
<div style="padding-bottom:8px">
<div class="vsc vscl" data-extra="ludocid=14796923074808088664&lumarker=A" sig="zoG">
<div data-ved="0CDkQkgowAA">
<div data-ved="0CDoQkQowAA"> </div>
</div>
<!--m-->
<div class="g" style="padding-top:2px;line-height:18px">
<div style="width:318px;float:left">
<h3 class="r" style="line-height:normal"><a class="l" href="http://www.beaucare.co.uk/" onmousedown="return rwt(this,'','','','1','AFQjCNH2k6BS0xRb2CTmI-lrSbmEXI1F6Q','','0CDsQoAIwAA','','',event)">Beaucare <em>Dry Cleaners</em></a></h3>
<span><cite class="_Ed">www.beaucare.co.uk</cite></span><br>
<div style="display:inline-block;margin-right:5px"><span style="margin-right:5px" class="rtng">3.8</span><span class="star star-s"><span style="width:56px"></span></span></div>
<span style="white-space:nowrap">6 Google reviews</span></div>
<div style="margin-left:26px;width:22px;float:left"><span style="height:38px;padding:0;width:22px"><a class="l" style="border:none;display:block;overflow:hidden;height:30px;width:16px" href="https://maps.google.co.uk/maps?pws=1&num=100&igu=1&ip=0.0.0.0&safe=images&gl=uk&gll=53.41058,-2.97794&gws_rd=ssl&um=1&ie=UTF-8&q=dry+cleaners+twickenham&fb=1&hq=dry+cleaners&hnear=0x48760c93b240c7c3:0xe4a25f60c77e7ed1,Twickenham,+Greater+London&cid=14796923074808088664&sa=X&ei=4731U6_DFurV0QWM1IHoBw&ved=0CD8QrwswAA"><span class="lumi0 lupin" style="display:block;background:url(/images/mappins_grey.png) no-repeat;background-position:0 -35px;background-size:;height:30px;width:16px"></span></a></span></div>
<div style="width:146px;float:left;color:#808080;line-height:18px"><span>146 Heath Rd</span><br>
<span>Twickenham</span><br>
<nobr><span>020 8891 5797</span></nobr></div>
<!--n--></div>
</div>
</div>
Paid SERP
<li class="ads-ad" data-hveid="34">
<h3><a style="display:none" href="http://www.google.co.uk/aclk?sa=L&ai=C-QrY4731U4TTGYm4jAb3q4HwCsWV_qMF9can5boBtI6yLggAEAEoAlD06tiLAWC7vq6D0ArIAQGpAvwJat3my7s-qgQmT9CoSc8LXNEiEfFMf0izXjjIVgr6InoeWMZFZsdEobDCsi4h-PKAB72KqSaQBwGoB6a-Gw&sig=AOD64_2ShDv4EEWhKvQJU3p6FF4V1mqfyg&rct=j&q=&ved=0CCMQ0Qw&adurl=http://ducanerichmond.co.uk/" id="s0p1"></a><b>Dry Cleaning</b> Services - We <b>Dry Clean</b> all types of material‎</h3>
<div class="ads-visurl"><span class="ads-badge">Ad</span><cite>www.ducanerichmond.co.uk/</cite>‎
<div class="action-menu ab_ctl"><a class="_Su ab_button" href="#" id="am-b-1398152331" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="ab.tdd;keydown:ab.hbke;keypress:ab.mskpe" data-ved="0CCQQ7B0"><span class="mn-dwn-arw"></span></a>
<div class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:ab.hdke;mouseover:ab.hdhne;mouseout:ab.hdhue" data-ved="0CCUQqR8">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem" data-type="why_this_ad">
<div class="action-menu-button" role="menuitem" tabindex="-1" jsaction="am.itemclk" data-ved="0CCYQgRM">Why this ad?</div>
</li>
</ul>
</div>
</div>
<span class="_ME">020 8332 1111</span></div>
<div class="ads-creative">Leather,Suede,Fur,Silk,& Upholstery</div>
<div class="_Fbb">
<div class="_WE"><span class="_YE"></span></div>
<div class="_WE">Westminster House, Kew Road, Richmond, Surrey‎</div>
</div>
</li>
Standard SERP
<li class="g"><!--m-->
<div class="rc" data-hveid="87">
<h3 class="r">Kings <em>Dry Cleaners</em>, <em>Twickenham</em> | Dry Cleaners - Yell</h3>
<div class="s">
<div>
<div class="f kv _UD" style="white-space:nowrap"><cite class="_Ed">www.yell.com/biz/kings-<b>dry</b>-<b>cleaners</b>-<b>twickenham</b>-4477896/</cite>
<div class="action-menu ab_ctl"><a class="_Su ab_button" href="#" id="am-b4" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="ab.tdd;keydown:ab.hbke;keypress:ab.mskpe" data-ved="0CFkQ7B0wBA"><span class="mn-dwn-arw"></span></a>
<div class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:ab.hdke;mouseover:ab.hdhne;mouseout:ab.hdhue" data-ved="0CFoQqR8wBA">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:fKpsx3qZnjcJ:www.yell.com/biz/kings-dry-cleaners-twickenham-4477896/+&cd=5&hl=en&ct=clnk&gl=uk" onmousedown="return rwt(this,'','','','5','AFQjCNF_iMCDBEJfF9L_3mW57Z3Tqp0-xg','','0CFsQIDAE','','',event)">Cached</a></li>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="/search?pws=1&igu=1&gl=GB&gll=53.41058,-2.97794&near=liverpool&q=related:www.yell.com/biz/kings-dry-cleaners-twickenham-4477896/+dry+cleaners+twickenham&tbo=1&sa=X&ei=4731U6_DFurV0QWM1IHoBw&ved=0CFwQHzAE">Similar</a></li>
</ul>
</div>
</div>
</div>
<div class="f slp"><span class="csb" style="display:inline-block;position:relative;top:1px;background:url(/images/nav_logo195.png) no-repeat -100px -260px;height:13px;width:65px"><span class="csb" style="background:url(/images/nav_logo195.png) no-repeat -100px -275px;height:13px;width:39px"></span></span> Rating: 3 - ‎2 votes</div>
<span class="st"><span class="f">22 Jul 2014 - </span>Find Kings <em>Dry Cleaners</em> in <em>Twickenham</em> on Yell. Get reviews, opening hours and directions .</span></div>
</div>
</div>
<!--n--></li>
I have tried using the following code
foreach($html->find('li .g') as $e) {
echo $e->innertext . '<br><br>';
}
But this does not show any results, I have also searched for ->find('h3 .r') but I still get no result.