multiple Bootstrap-select loads very slow - javascript

when i try to put multiple selects on website (more than 20) it slows down jquery execution (with stop/continue alert) - is there a chance to optimize the code to load it faster - it takes minutes to load?
sample code
<td><select class="selectpicker" name="ref[240][sub_class]">
<option value=0 selected="selected" >A</option>
<option value=1>B</option></select></td>
<td><select class="selectpicker" name="ref[265][sub_class]">
<option value=0>A</option>
<option value=1 selected="selected" >B</option></select></td>
javascript at the end of the file:
$(document).ready(function() {
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 1
});
});

I was working with bootstrap select too.
This trick solved my problems about bootstrap-select rendering delays on page loading: it seems that on page load, dom element usually render before selectpicker, this is making the CSS "rescale" which cause an horrible effect.
Usually selectpicker takes 500ms for the first rendering, you can force the rendering after the element definition like following avoiding this delay like follow:
<select class="selectpicker" id="your_select">
<option>...</option>
...
<option>...</option>
</select>
<script>
$("#your_select").selectpicker("render");
</script>
Guess it helps :)

In my case it was also totally OK to simple take the
$('.selectpicker').selectpicker();
out of
$(document).ready(function() ...

For me, forcing rendering immediately after the js loading made the select appear practically instantly instead of waiting for the entire page to load:
<script src="~/assets/js/bootstrap-select.min.js"></script>
<script>
$(".selectpicker").selectpicker();
</script>

For me, was problem with bootstrap conflict.
I use this in CMS Joomla, so loaded from me Bootstrap conflict with another(from CMS).
As I removed duplicate files - all start work good
Regards
OrdaSoft team

Related

How can I successfully implement the .ajaxStart and .ajaxStop funkction with timer in my example below

Say I have the code below and would like to fill a dropdown dynamically like in this with description (the first example calls "Pulls from text files") NOT JSON or MySQL. When I choose for example "beverages" I want to wait to say 2 sec. and see the loading div container. I write, that I want to see this loading div for 2 sec. because I the practice small text files are loading very quickly, so the client doesn't see the loading div, just a flash that takes 1/3 sec. The loading container can be shown longer, for example when the connection is bad, like Wi-Fi on a restaurant. So I have the code below, but I don't know why it doesn't work and how can I declare the rule with the 2 sec.
HTML
<body>
<h1>Pulls from text files</h1>
<select id="text-one">
<option selected value="base">Please Select</option>
<option value="beverages">Beverages</option>
<option value="snacks">Snacks</option>
</select>
<br />
<select id="text-two">
<option>Please choose from above</option>
</select>
</body>
JQuery
$(document).ready(function() {
$("#text-one").change(function() {
$("#text-two").load("textdata/" + $(this).val() + ".txt");
});
ajax
$(document).ready(function() {
$('<div id="loading">Loading...</div>')
.insertBefore('#text-two')
.ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
});
CSS
#loading {display:none;}
So when I Select from the select option "beverages" I want to see the loading div container for 2 sec. or longer, when the connection is bad or when the connection is interrupting (bad Wi-Fi). How can I improve my code above and why it didn't work. Please give me an answer, thanks.

how to choose selected option in select/option in HTML?

I need to display two select lists with the same options (there are many).
I have the index.html:
<body>
<select class="c_select1"></select>
<select class="c_select2"></select>
</body>
and in another html file (options.html) all the options (only the options):
<option value='AED' title='United Arab Emirates Dirham'>AED</option>
<option value='AFN' title='Afghan Afghani'>AFN</option>
<option value='ALL' title='Albanian Lek'>ALL</option>
<option value='AMD' title='Armenian Dram'>AMD</option>
<option value='ANG' title='Netherlands Antillean Guilder'>ANG</option>
...
<option value='AOA' title='Angolan Kwanza'>AOA</option>
<option value='ARS' title='Argentine Peso'>ARS</option>
<option value='AUD' title='Australian Dollar'>AUD</option>
<option value='AWG' title='Aruban Florin'>AWG</option>
<option value='AZN' title='Azerbaijani Manat'>AZN</option>
Then, using jQuery, I load options inside the two select tags with the same instruction with different class selector:
$(".c_select1").load("options.html");
I'd like to display as default selected option two different values (since I need to show a currency converter).
I've tried in 2 different ways, but any of these works fine (I show the code for just one).
<script type="text/javascript">
$(".c_select1").load("options.html");
$(".c_select1 option[value=ARS]").prop("selected", true);
</script>
or
$(".c_select1").val("ARS");
I don't know why, but I think there is a problem with the .load() of jQuery.
The only solutions that work are 2:
set a timer and execute the second jQuery statement after this timer
use 2 different options.html files one for each select tag, but I think it is not so clever.
Is there a better way to do this dynamically?
Try this:
$(".c_select1").load("options.html", function(){
$(".c_select1").val("ARS");
});
Explained:
The .load() jQuery method requires some time to get the contents of options.html (even if its just a few milliseconds). The browser doesn't wait for it before continuing to run the rest of the javascript logic. The function(){ I added to your .load( method call is some javascript logic that runs AFTER the results have returned (aka a "callback").
Use a callback :
$(".c_select1").load("options.html", function() {
$(".c_select1").val("ARS");
});
$(".c_select2").load("options.html", function() {
$(".c_select2").val("ARS");
});
Actually there is a delay of load method that is why selected item is not working. Like #Joulss said use callback method that should work. You can see the here.
$(function(){
$(".c_select1").load("option.html", function() {
$(".c_select1").val("AFN");
});
$(".c_select2").load("option.html", function() {
$(".c_select2").val("ANG");
});
});
Demo

Sort order for ecommerce page using javascript (a/b-test)

Can javascript help me change the default sort order for an ecommerce category page? I'm running an a/b-test, and in the variation1 I'd like to have the sorting option "Newest" as the page default instead of "Most Popular". What kind of Javascript would change the sort order when the page is loaded?
The select ID's are as follows, currently the "Most Popular" is the default:
<select id="all-sort" class="ordering-select " name="sortAllProducts">
<option value="name.asc">Name (asc)</option>
<option value="name.desc">Name (desc(</option>
<option value="discountedPrice.asc">Min Price</option>
<option value="discountedPrice.desc">High Price</option>
<option value="lastStatusChange.desc">Newest</option>
<option value="viewCount.desc" selected="selected">Most Popular</option>
</select>
I tried changing the html-code (selected="selected") from Most popular to the "Newest" option using the the a/b-testing tool (visual website editor), but it didn't work, Most popular was still loaded as default. I think a Javascript is needed to load the code-change in the a/b-testing tool overriding the current default?
I'd really appreciate help, and I'm very sorry if this is an silly question, that has been answered a million times :/
I also tried looking for solutions and found couple of similar questions, but those unfortunately didn't give me the answer. I'm not very tech savy.
Javascript to sort contents of select element
How to show <Select > in sorted order (this was very close, but I didn't get it working).
Thanks!
Try:
$(function(){
$("#all-sort")[0].selectedIndex = 4;
});
Working fiddle: http://jsfiddle.net/fyL2efom/

How to resolve a conflict between bootstrap.js and angularjs for angular lists

This is my html code
<div class="form-group">
<select ng-model="modSelectedState" id="selectState" name="selectState"
ng-options="state as state.full_name for state in states">
<option value="">Select State...</option> </select>
</div><!-- /.form-group -->
It renders as expected until i add this line to my code:
<script type="text/javascript" src="scripts/bootstrap/js/bootstrap.min.js"></script>
At which point all i see when i render the page is the default option ("select state"). When I remove bootstrap.js everything renders as expected - that is I see the list of all states.
This is how I load the code in the controller
$http.get('./data/states.js').success(function (data) {
$scope.states = data.locations;
});
states.js is stored locally.
I have some other angular elements on the page and they all work fine. I also tried to play with the loading order (i.e. load bootstrap before angular and vice versa) but the result is the same - the list renders fine without bootstrap and it doesn't render with bootstrap.
Is there any known conflict between those two libraries when it comes to binding lists? Is there any known workaround?
You need to use controls specially prepared to work with bootstrap and angular... otherwise you will not only get this type of unexpected issues, but you'll get other type of issues based on the fact that you are trying to make your own implementations when there already exist validated ways of working with javascript libraries. Best regards.

jquery select box change on a specific page

I think this should be really easy, but I can't seem to find an answer.
I'm using rails 4 and jquery to identify when one of multiple select boxes is altered on a page, and if so, perform some action.
This is the relevant code in my application.js file:
$('body').on('change', 'select',function(){
*action*
});
The issue I'm having is that this code will pick up a select box change on any page within my application. How do I set things up so that it will only pick up select box changes on a specific page?
Do I do this by creating a new .js file which is specific to my view? If so, how do the file naming conventions work?
there are several ways to do this, but the cleanest seems to be this : add a class to the select you wish to be handled by this function. Let's call this class handlethis. The change your jQuery selector accordingly.
You HTML would look like :
<select name="myselect" id="myselect" class="handlethis">
<option value="1">option 1</option>
<option value="2">option 2</option>
...
</select>
and the JS :
$('body').on('change', 'select.handlethis',function(){
*action*
});
I have an example for you to understand this.I hope it will be helpful to you.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$('select').change(function(){ // when one changes
$('select').val( $(this).val() ) // they all change
})
})
</script>
<style type="text/css">
</style>
<title>HELLO</title>
</head>
<body>
(top of the page)
<select>
<option value="big1">1big1</option>
<option value="big2">2big2</option>
</select>
other content here...
(bottom of the page)
<select>
<option value="big1">big1</option>
<option value="big2">big2</option>
</select>
</body>
</html>
If it is helpful to you then please vote it up.
Provide id for the select box.and use that id for call function
To pick only the select you want, just add an id or a class to the select, your code should look like this :
HTML :
<select id="selector" name="selector">
...
</select>
JS :
$('#selector').change(function() {
*action*
});
The change() function is just a shortcut for on('change').
You can add a new JS file specific to your view, for best practice about it, read this post :
Best way to add page specific javascript in a Rails 3 app?

Categories

Resources