I got this problem with a wordpress plugin I’m working on. I tried using this on a local html page, and it works properly. Now, when I tried on a server with wordpress, I can see that it initializes, but after some miliseconds it gets replaced by the vanilla select menu. I don’t know what could be causing this. What do you fellas think?
edit: I'd also like to add that the way I see select2 works is that, once the document is ready, it injects its own select element into the document. This seems to happen in my page, but after the page has finished loading the element is gone.
The first menu is how it’s looking with select2. That’s fine. The second menu on the picture is how it ends up looking - a normal select element.
https://i.imgur.com/W2ALH8T.png And this is how the script looks like. Nothing complicated, just need to see it run properly first.
This snippet shows that the code is working properly, however i cannot seem to replicate what is happening on the site.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.country-switcher').select2();
});
</script>
<span class="widgettitle">SHIP TO:</span>
<div class="wc-price-based-country wc-price-based-country-refresh-area refreshed" data-area="widget" data-id="39ddbdcf9476789f65bca6d5b7cda228" data-options="{"instance":{"other_countries_text":"Other countries","title":"SHIP TO:","remove_other_countries":"1"},"id":"wcpbc_country_selector"}">
<select class="wcpbc-country-switcher country-switcher">
<option value="AX">Åland Islands</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU" selected="selected">Australia</option>
</select>
</div>
Any help on this issue would be greatly appreciated. Thanks, y’all!
Related
I have the following sample code.
<select data-placeholder="Choose a country..." multiple class="chosen-select">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.css" />
<script>
$(document).ready(function () {
$(".chosen-select").chosen();
});
</script>
Which results in the following picture. Any insights into why this wouldn't be working? I've tried it in Chrome and IE, for reference. The console says 'chosen is not a function'.
Update:
Got it. If you're using Asp.net make sure your scripts are being loaded correctly. The top answer here will help:
jquery Chosen plugin in Asp.net MVC 4 does not show in the view
I'm trying to make a table with multiple dropdowns, which all have the same values but different ID's which should retain values even after refreshing or closing and opening the page again.
It has to run on a local computer without php or any server sided scripting and without any addons, so standard browser configuration.
I've searched a lot on google and found:
local storage for multiple select option dropdowns
which helps with keeping the data, but as soon as I close the browser and load it again. The values are gone.
Can somebody help me figure this out?
Thanks in advance.
example of the code as requested:
<select name="1" id="1" class="test">
<option value="-">-</option>
<option value="Mike">Mike</option>
<option value="Steven">Steven</option>
<option value="Sacha">Sacha</option>
<option value="Wilfried">Wilfried</option>
<option value="Kevin">Kevin</option>
<option value="Stefan">Stefan</option>
<option value="Koen">Koen</option>
<option value="Wasil">Wasil</option>
</select>
<select name="2" id="2" class="test">
<option value="-">-</option>
<option value="Mike">Mike</option>
<option value="Steven">Steven</option>
<option value="Sacha">Sacha</option>
<option value="Wilfried">Wilfried</option>
<option value="Kevin">Kevin</option>
<option value="Stefan">Stefan</option>
<option value="Koen">Koen</option>
<option value="Wasil">Wasil</option>
</select>
this is the js file.
$('.test').change(function() {
localStorage.setItem(this.id, this.value);
}).val(function() {
return localStorage.getItem(this.id)
});
Good that you added some code :) I've tested exactly your code and it worked. Check this Fiddle:
https://jsfiddle.net/96hrybu2/
Your problem might be that you are not binding the elements correctly.
Try to change your code to this:
$(document).ready(function(){
$('.test').change(function() {
localStorage.setItem(this.id, this.value);
}).val(function() {
return localStorage.getItem(this.id)
});
});
What seems to be happening is that he tries to bind those elements faster then they are rendered in the DOM.
Either that or your browser doesnt support localStorage.
Let me know if it helped.
Also check your console for some kind of errors and don't forget to add the jQuery library but I guess you know that :P
Cheers.
I'm trying to use this selectpicker for form selects and options, but can't get it to work.
I've added the following scripts and css as specified:
<script type="text/javascript">
$('.selectpicker').selectpicker({
});
</script>
<script src="/js/Bootstrap/Select/bootstrap-select.js"></script>
html for the 1st greyed out select in the search bar:
<select class="selectpicker" id="searchType" name="searchtype" onchange="this.form.submit()">
<option value="All">All</option>
<option value="Businesses">Businesses</option>
<option value="Events">Events</option>
<option value="News">News</option>
<option value="Lifestyle">Lifestyle</option>
</select>
Any ideas appreciated.
Please be sure that you included all the required files or You may have to rearrange the code like :
<script src="/js/Bootstrap/Select/bootstrap-select.js"></script>
<script type="text/javascript">
$('.selectpicker').selectpicker({
});
</script>
You need to include the js first then call the the plugin. Check this fiddle, its working for me : http://jsfiddle.net/tejashsoni111/RUAS4/
.selectpicker() is a function defined under bootstrap-select lib and not in core bootstrap library,hence you need to include that library as well
//silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js
//silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css
HTML:
<select class="selectpicker" id="searchType" name="searchtype" onchange="this.form.submit()">
<option value="All">All</option>
<option value="Businesses">Businesses</option>
<option value="Events">Events</option>
<option value="News">News</option>
<option value="Lifestyle">Lifestyle</option>
</select>
JQUERY CODE:
$('.selectpicker').selectpicker();
Here is a Live Demo of select picker function :
http://jsfiddle.net/dreamweiver/2a9xp/13/
Happy Coding :)
In case anyone using Rails is experiencing a similar problem - the issue was arising from the existence of the precompiled assets for the AWS deployment that were lingering in my local environment.
Deleting YourRailsApp/public/assets solved the issue for me.
I have a drop down list that when selected seems to revert to the default text, while the drop down works well and does what it is suppose to on the post back it as I said goes back to the default (sort by). I hope you awesome people could help me understand how I might be able to use Jquery to maintain the selected after a post back.
Here is the current code.
<select class="sorter" onchange="location=this.options[[this.selectedIndex]].value" style="float:right;margin-right:8px;">
<option value="">Sort by</option>
<option value="?orderby=0">Code</option>
<option value="?orderby=1">Title A-Z</option>
<option value="?orderby=2">Title Z-A</option>
<option value="?orderby=3">Manufacturer</option>
<option value="?orderby=4">Lowest price</option>
<option value="?orderby=5">Highest price</option>
<option value="?orderby=6">Lowest Quantity</option>
<option value="?orderby=7">Highest Quantity</option>
</select>
I have an issue with jquery autocomplete feature in a .aspx (web forms) page which has master page as a parent.
In a normal aspx page I am able to render the dropdown as I want with autocomplete feature, but when I am doing the same thing in a child page under master page only normal dropdown appears.
So this is what I have.
This one looks ok when is rendered and it works ok (normal aspx page without master page):
<select name="select" runat="server" id="select2" class="nostyle" style="width:100%;" placeholder="Select state">
<option></option>`
</select>
This one, as part of child page within master page doesn't work the same:
<select name="select2" runat="server" id="select2" class="nostyle" style="width:100%;" placeholder="Select state">
<option></option>
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</select>
The JS for the autocomplete can be found at this link: http://jsfiddle.net/laziale/JjVHU/
My question is why the dropdown autocomplete feature is working on the page without master page, and the one with master page is not working although all the js files are connected correctly.
Thanks in advance, Laziale