I've made a mistake and created my website with select dropdown lists and now on mobile every single dropdown is opened like a popup that looks like this monstrosity:
For example I have this dropdown list used to sort items with PHP function so I would like to convert it into regular dropdown list (ul li), but I I'm not sure how to push same PHP functions for sorting.
If I create UL with links, do I put PHP function into href or I leave it as attribute?
Or alternatively can I somehow stop mobile devices from opening as those ugly popups?
This is my dropdown select list made for sorting:
<select name="sort-me" id="sort-me" >
<option value="">Sort by</option>
<option value="0" <?=$sort=='0' ? 'selected' : ''?> sort="sort-price-up">
Sort by price (ascending)
</option>
<option value="1" <?=$sort=='1' ? 'selected' : ''?> sort="sort-price-down">
Sort by price (descending)
</option>
</select>
I have tried converting it like this, but this won't work:
<div class="dropdown-wrap">
<button id="sort-me" name="sort-me" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Sort by
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" value="0" <?=$sort=='0' ? 'selected' : ''?> sort="sort-price-up">Sort by price (ascending)</a>
<a class="dropdown-item" value="1" <?=$sort=='1' ? 'selected' : ''?> sort="sort-price-down">Sort by price (descending)</a>
</div>
</div>
I hope you understand what you mean correctly:
Image
<div class="dropdown-wrap">
<button id="sort-me" name="sort-me" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Sort by
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item <?= $sort == '0' ? 'bi-check-lg' : '' ?>" value="0" sort="sort-price-up">Sort by price (ascending)</a>
<a class="dropdown-item <?= $sort == '0' ? 'bi-check-lg' : '' ?>" value="1" sort="sort-price-down">Sort by price (descending)</a>
</div>
</div>
You can use bootstrap icon and the rest is up to you where and how to use it.
Related
PHP Code:
<td>
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="demolist">
<a class="dropdown-item " id="achieve" value="<?php echo $value['user_login_id'] ?>">Achivements</a>
<a class="dropdown-item" id="skill" value="<?php echo $value['user_login_id'] ?>">Skills</a>
<!--
<a class="dropdown-item">Remove</a>
<a class="dropdown-item">View Applicant</a>
-->
</div>
</div>
</td>
Here I have a dropdown button in each row where each dropdown has a list of achievements / skills. When clicking an achievement or skill I want to pass that row's id to ajax.
How should I send with ajax?
Using this method you can easily get the dropdown value:
Pass the id or class by using the .value method.
var submitForm = function() {
var name = document.querySelector('.name').value;
console.log(name);
}
document.querySelector('.btn').addEventListener('click', submitForm);
<input type="text" placeholder="name" class="name"><button class="btn" value="submit">Submit</button>
I have solution like this code i think you enough smart to understand it but let me know if you cant get it.
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="demolist">
<a class="dropdown-item achivementClass" id="achieve" value="value1">Achivements</a>
<a class="dropdown-item" id="skill" >Skills</a>
<a class="dropdown-item">Remove</a>
<a class="dropdown-item">View Applicant</a>
</div>
This your script code
<script>
$(function() {
$('.achivementClass').click(function(){
id =$(this).attr('value');
console.log(id);
});
});
</script>
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
Im working on my Laravel project, and i wanna make some filter buttons for my data table.
Those buttons look like this : https://i.stack.imgur.com/Swpbw.png
I want to display the selected option in dropdown title. For example, the Author title should be changed to any others name like Admin or User etc... after selecting the option from the dropdown button.
Author Dropdown Button (original) :
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle mr-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Author
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
#foreach($users as $user)
<a class="dropdown-item" href="/posts?user_id={{$user->id}}">
{{ $user->name }}
</a>
#endforeach
</div>
</div>
I found some solutions, they all look like this :
$(".dropdown-menu").on('click', 'a', function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
But the problem is :
The solution above only works if the href (url) from dropdown-menu is fixed (href="#").
In my project, those dropdowns have different href, so the title can only be changed for a short moment after clicked, then back to default after the url changed.
I think we need to catch the url then make some conditions to display the correct title.
For example, my Category filter only have 3 fixed options so i can do it like this.
Category Dropdown Button :
#php
$request = Request::getRequestUri();
#endphp
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle mr-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#switch(true)
#case(strstr($request, 'category_id=1'))
Pc
#break
#case(strstr($request, 'category_id=2'))
Console
#break
#case(strstr($request, 'category_id=3'))
Handheld
#break
#default
Category
#endswitch
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="{{strstr($request, 'category_id=1') ? 'dropdown-item active' : 'dropdown-item'}}" href="/posts?category_id=1">
Pc
</a>
<a class="{{strstr($request, 'category_id=2') ? 'dropdown-item active' : 'dropdown-item'}}" href="/posts?category_id=2">
Console
</a>
<a class="{{strstr($request, 'category_id=3') ? 'dropdown-item active' : 'dropdown-item'}}" href="/posts?category_id=3">
Handheld
</a>
</div>
</div>
Meanwhile, i have a foreach loop in the Author filter, cause the number of users is not fixed. So i cannot use the same code like i did with Category.
I had tried this but it just doesn't work.
Author Dropdown Button (not working) :
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle mr-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#if($request == '/posts' OR strstr($request, 'posts?page='))
Author
#else
#foreach($users as $user)
#if(strstr($request, 'user_id={{$user->id}}'))
{{ $user->name }}
#endif
#endforeach
#endif
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
#foreach($users as $user)
<a class="dropdown-item" href="/posts?user_id={{$user->id}}">
{{ $user->name }}
</a>
#endforeach
</div>
</div>
It cannot display the user name on title when clicked (blank result).
I also tried this one, but not working either.
#foreach($users as $user)
#if($request == "/posts?user_id={{$user->id}}"))
{{ $user->name }}
#endif
#endforeach
Please help guys !
you still can use the JS solution by preventing the redirection of the link
$(".dropdown-menu").on('click', 'a', function(event){
event.preventDefault();
event.stopPropagation();
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
I've found the solution.
The if condition (inside the foreach) is right, but somehow it doesn't work in blade template.
So, just put it in the php section.
Author Dropdown Button (working) :
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle mr-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#if($request == '/posts'
OR strstr($request, 'posts?search=')
OR strstr($request, 'posts?page='))
Author
#else
#foreach($users as $user)
#php
if(strstr($request, 'user_id='.$user->id)){
echo $user->name;
}
#endphp
#endforeach
#endif
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
#foreach($users as $user)
<a class="dropdown-item" href="/posts?user_id={{$user->id}}">
{{ $user->name }}
</a>
#endforeach
</div>
</div>
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 have a bootstrap dropdown which is fill with Jquery function.
But when i submit the form:
<div class="dropdown">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" >
Choose basket
<span class="caret"></span>
</button>
<ul class="dropdown-menu" name="basket" role="menu" id="groupe" aria-labelledby="dropdownMenu1">
</ul>
</div>
</div>
In my action.php $_POST['basket'] is empty.
This form mustn't be sent with ajax, but just with html "form".
Your sample code shows no <form> nor any form elements. Giving a name attribute to a ul doesn't magically make it work as a form element - you'd have to use JavaScript to either fill and submit an invisible form or send the data via AJAX.