I have three drop down lists, one list is populated on page load and doesn't change. The 2nd and 3rd lists may change depending on the selection. This functionality is working fine.
I have tried to add Bootstrap selectpicker to the selectors and I can see it is working - unfortunately the lists are not refreshing based upon the selection. I actually think "behind the scenes" they are as I can see the queries being passed but via the front end nothing happens.
Part of the HTML:
<!-- SelectPicker -->
<link href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css' rel='stylesheet' type='text/css'>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
The first two DDL's are created via php but are
<select id='ddl_first_lookup' onchange='ajaxFirstOnChange(this.value)' value='' class='selectpicker'></option>
<select id='ddl_second_lookup' onchange='ajaxSecondOnChange(this.value)' class='selectpicker'>
<select id="ddl_third_lookup" onchange='ajaxThirdLookup(this.value)' class='selectpicker'></select>
I have the following Javascript:
$(document).ready(function() {
$(".selectpicker").selectpicker();
});
This is the point where I have discovered the problem, I am trying to implement this within the ajax on change functions without success - not even sure if it is correct.
$('.selectpicker').selectpicker('refresh');
I am pretty new to all of this so would like some help.
I found your question after having the same problem. Adding $('.selectpicker').selectpicker('refresh'); exactly after adding items to my list did the job.
So you probably need to find the correct place to put it. Maybe in the success part of your ajax call.
What I understood from my experience with this so far -
If you are adding dynamically options to the dropdown then you must need to call below function just before adding option
$(".selectpicker").selectpicker();
Once you completed adding options then call below function (if you are using ajax to add option then put this function into success part as just answered Athina)
$('.selectpicker').selectpicker('refresh');
If you are facing any weird issue like showing dropdown not data or sometime dropdown not showing properly then definitely you must have made mistake in placing about function and nothing else.
if refresh method doesn't help, try adding some delay.
setTimeout(() => {
jQuery('.selectpicker').selectpicker('refresh');
}, 500);
In my Ajax successCallBack I am trying to manipulate drop down list having id as reasonCode based on dynamicId (value get from server) as below:
$('#reasonCode option[value='+dynamicId+']').prop('selected', true);
but unfortunately this had not worked until I added another line after this as below:
$('#reasonCode').selectpicker('refresh');
Changing selectpicker class name when hidden:
<select name="key" class="selectpicker_oncreate">
When refreshing:
$('.selectpicker_oncreate').selectpicker('refresh');
I've added destroy before refresh, thats solved my issue.
// ... option:selected manipulation
$('.selectpicker').selectpicker('destroy');
$('.selectpicker').selectpicker('refresh');
Related
Newcomer here, I've been learning from this community a lot and finally came to a sort of a small problem.
So right now I have a html dropdown option/selector.
On that selector's ID I have a code that grabs the URL Parameter and assigns the correct option, and it works. If you put in the right url parameter it takes you to the page and preselects the option. I also have a code that shows or hides sections based on the selection, using a mix of IDs and Classes as it's a complicated approach.
<script>
$(function() {
$('#all-content').change(function(){
$('.hide-knowledgecenter').hide();
$('#' + $(this).val()).show();
$('.' + $(this).val()).show();
});
});
</script>
Now the problem is that, using the URL parameter the show/hide script doesn't run based on the preselected option, it just shows the preselected option but it won't run the code.
this is the preselect code. I don't know if it's a hiearchy problem or what but i can't seem to get it to work. Should the preselect code be global to the whole website or only loaded on this specific page? Is there one code that should go first then the second? Or is it something completely else?
<script>
var val = location.href.match(/[?&]all-content=(.*?)(?:$|&)/)[1]; // get params from URL
$('#all-content').val(val); // assign URL param to select field
</script>
Thanks in advance.
Simply added
}).triggerHandler('change');
to the bottom of the filter code and it loaded along with the preloader.
In my program the user first enters some data to filter and the result goes to one dropdown select menu lets call this functionality function_1 . If there is only one result the it goes to make another query, lets call this function_2.
My problem here is when i have 2 or more results i should be able to:
1) check out the different options i get by clicking on the select to display all the options with a scrollbar if needed
2) After he saw the options there he clicks on one of them to activate function_2
The usual answers use the "change" event but, wont work if the user picks first default value because there is no change, he would have to pick an undesired result and go back to the first.
Using the click event on the select makes also unnecessary work because it triggers twice (one when i open the dropdown, other when option is selected)
Main problem here i think is the jquery selector, but im not sure if it can be done just with that.
This is an example of what im trying:
// function_1 in ajax
.done(result){
$.each(result.data,function (){
$('#select_ex').append("<option value...... ></option>");
if (result.count()===1){
$('#select_ex').trigger('change');
}
});
}
$('#select_ex option').change(function(){// tried with change, click or focus
function_2();
}
The html contains
<select name="select_ex" id="select_ex" size="0" ></select>
EDIT:
Not related to the duplicate question mentioned, since i already know why it doesnt select the option, besides it doesnt apply either since it only talks about connectors with ID, which is not even the point here (I could do my thing without IDs). Im asking for funcionality similar to ":selected" but with option->click.
Another workaround i thought of is filling the select with an empty/hidden field and set the selected property it, filtering afterwards and using the regular change event... but then the first item would be blank and doesn't seem very logic to me.
So I came to seek for any fresh ideas.
EDIT2
I added a white option for the multiple result and erased it afterwards by adding this line of code to imvain2 solution (where needed)
$("#select_ex option[value='0']").each(function() {$(this).remove();});
Although fixing your change function so that is is called for the select and not the option is important, your problem is the default selected option itself. As you mentioned, if they want the first option, they have to select something else to trigger the change function.
I would recommend adding a "blank" option as the first option and setting it as selected.
var $select_ex = $("#select_ex");
.done(result){
$select_ex.empty().append("<option value='0'>Select Your Ex Below!</option>");
$.each(result.data,function (){
$select_ex.append("<option value...... ></option>");
});
$select_ex.val("0");
}
$select_ex.change(function_2);
I am using jquery.dataTables.yadcf.js and //cdn.datatables.net/1.10.6/js/jquery.dataTables.js with sAjaxSource
I'm trying to use external filters that triggers several columns to a pre-selected filter at once. So you click a button and there, three columns are picked out so you don't have to go in each drop down.
But the way I'm doing it seems wrong, because I'm seeing two JSON requests instead of one every time they're triggered.
All I have in my script is
function doTrigger(){
yadcf.exFilterColumn(oTable, [[0,"zero"],[1,"one"]]);
$("#yadcf-filter--oTable-" + 1).val("one");
oTable.fnDraw();
}
Your code should look like this: I haveadded third argument true, its undocumented, but needed when calling the exFilterColumn after table finished loading
function doTrigger(){
yadcf.exFilterColumn(oTable, [[0,"zero"],[1,"one"]], true);
}
The rest of your code is not needed at all...
I am trying to the Selectize library so I can have a comboboxes on my form.
So my form has a way to dynamically add more dropdowns (that i want to be comboboxes), so whenever the user adds a new dropdown, I want to apply Selectize combobox to it. So within my function that adds the new dropdown, after I have appended it, I use the following code:
$('select').each(function() {
if (!$(this).is('selectized')) {
$(this).selectize({
create: true,
sortField: 'text'
});
}
});
I thought that this would only apply it to dropdowns that do not already have Selectized combo box applied to it, but something is going wrong. Basically it is applying it to new comboboxes but something strange is going on with the existing ones. It's adding some kind of blank dropdown each time.
I tried to look around but I cannot find an "official" solution for combobox-ifying a newly added select fields. I don't know if it's an issue with how I am applying it, or if it's some kind of weird conflict with twitter bootstrap or jquery-ui or jquery itself (I included all of those in the fiddle)
Anyways, here is a link where you can see this issue in action:
http://jsfiddle.net/Qz7Ar/2/
Does anybody have experience with this or know what's going on here?
edit:
I also made a fork removing jquery-ui and bootstrap, so it's just jquery (required for Selectize) and Serialze, and the issue is still happening:
http://jsfiddle.net/Wxxub/1/
Okay well I figured out how to fix it..
If I add an id attrib to the new element and target by that instead, it works. Here is another fork demonstrating it:
http://jsfiddle.net/Wg7J6/1/
I can't find anywhere in the Selectize doc that it's necessary (I could be blind though!) that the select field must have an id or if it would work without one but i'm just doing it wrong or what, though.
I have a problem with initialization of dynamically filled dropdowns in jQuery.
Basically, I have function fillCityList and it makes AJAX call to fill the cities by the passing country.
Because this is used in Edit form, I have a default City value in id_cityHidden field.
Actually the code below works well.However, because fillCityList takes long time to fill the city list, while default city is selected, the city list may not be ready.
$(document).ready( function() {
fillCityList(1);
$('#city').val($("#id_cityHidden").val());
});
I know there is a solution like "call function at complete stage of AJAX call" but I just need it during initialization.
One solution might be setting a timeout or delay between fillCityList and
$('#city').val($("#id_cityHidden").val()) however, it is not a good solution of course.
What is the best way to do this ?
Thanks
I would suggest you build your ajax to use the 'complete' function, then update the value.
http://api.jquery.com/ajaxComplete/