I have a dropdown that loads the data and there is a Add button and when the add button is being triggered it will be disabled. It works in the first load, but when the dropdown is onchange the disabled button will be false or not disabled. So how can I still disable the button when the dropdown is being changed. I have also a input field to store the values of the button that has been clicked. Check http://jsfiddle.net/leonardeveloper/qy9u5/.
Problem is, you are appending a new element every time your <select> is changed. You need to be showing and hiding the same respective table each time. You can use jQuery to create those tables using the <option>s. Like so:
$("#loads option").each(function(){
thisNumber = this.value;
$("#displays").append("<table data-table="+thisNumber+"><tr><td>"+thisNumber+"</td><td>"+thisNumber+"</td><td><button class='materialId' value='"+thisNumber+"'>Add</button></td></tr></table>");
$("#displays table").hide();
});
We append the tables (2 in this case) to #displays, and then hide them. When we change the <select> now, we hide all tables, and show the one we selected, I've used data-table for this but there are many ways to target your specific table.
$(document).on("change","#loads", function(){
$("#displays table").hide();
$("#displays table[data-table="+this.value+"]").show();
});
JSFiddle
Try to bind click event also.
Demo
$(document).on("change click","#loads",...
Related
I've 3 select box with options.
On page reload, I want to have 1st select box with default selected value.
JS Fiddle here: http://jsfiddle.net/cqENs/308/
I did this with following statement and this is working
$("#selone").val("3").change();
I want to consider this as change event on 1st select box and trigger default selection to be changed in 2nd select box but I was unable to get that.
I want to do this automatically, no manual change events.
Can you help me here.
You're changing #selone's value before you attached a change listener to #selone. Move the initial change to the end of your block:
$("#selone").on("change", function() {
$("#seltwo").val("5").change();
});
$("#seltwo").on("change", function() {
$("#selthr").val("4").change();
});
$("#selone").val("3").change();
http://jsfiddle.net/cqENs/309/
So whats going on is that I have a site that I have taken on for my work. I have two select boxes I am tying into. The problem is when you click the second select box and choose an option it uses ajax to load a second box next to it (a hierarchical select box). The code that I am using is simple and changes the value of the second box back to the "select" option state when the first box is changed. But what it is not doing is creating click state (sorry if I am saying that wrong) but in order for ajax to bring in and remove the third select box the second select box option needs to be clicked.
Is there a way for me to re-create a "click" of the select box.
Here is the jquery:
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select').val('select');
});
Here is a sample fiddle. See this Fiddle
I am not entirely sure, what exactly you are looking for but I feel that this should do the trick:
https://jsfiddle.net/vuvckm3u/5/
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select option:first-child').attr('selected', true);
});
I am adding select element dynamically on the change event of another select when I first click on static select then dynamically Select shown on page with all of its options but when I again select different value from static select the dynamic select shown on page but with no options?
Here is my demo page
The solution is to add $('#exerciseList-dialog').remove(); inside the loadExerciseList function.
Basically this line removes the dialog from DOM when you change category.
I hope this helps.
I have a list of radio buttons that I update programmatically based upon a user's selection from a different list. This code properly finds the radio button that matches the selected item and selects it, but it doesn't deselect the previously selected radio button.
$('#major_groups input[type=radio]').each(function(){
if($(this).attr("value") == group_name){
$(this).prop("checked",true).checkboxradio('refresh');
}
});
All of the radio buttons in the major_groups div have the same name, so I thought selecting one would unselect the others. I got it to work by looping through the buttons again and refreshing all of them, but this seems inefficient.
Also, will .prop("checked",true) fire the change event?
What about just triggering a click event on the radio button, something like this:
$('#major_groups input[type=radio]').each(function(){
if($(this).attr("value") == group_name){
$(this).click();
}
});
Your each loop will only call refresh on the radio with specific value, and will not be called on others in the same group. The actual inputs of the group will be automatically unchecked but your plugin won't recognize the ones that are deselected unless you refresh them too.
Try this:
var $radios=$('#major_groups input[type=radio]');
/* first check the appropriate radio*/
var $radioToUpate=$radios.filter(function(){
return this.value=group_name;
}).prop("checked",true);
/* then refresh all radios with same name*/
$radios.filter('[name="'+ $radioToUpate.attr('name') +'"]').checkboxradio('refresh');
A link to the plugin docs might be helpful to see if plugin has methods to handle the property change that might take care of the whole group
So I'm using the pretty nice jQuery plugin, Chosen; http://harvesthq.github.com/chosen/
What I'm doing is actually working with TWO Chosen style dropdowns in an 'either/or' fashion, ie the user needs to select an option from one OR the other.
So when the user selects one of the dropdowns, the other one (via javascript) gets set back to its default disabled value.
Both dropdowns are backed by ONE hidden parameter to actually hold the selected value, no matter which dropdown it came from. This is populated by having listeners on both dropdown's on the .chosen().change() event.
The only problem is, it doesn't appear to fire a "change" event when the user selects one of the first options in either dropdown, I guess as this appears to be the already selected option and is therefore not a "change". But both dropdowns actual first option (ie in the jsp) is a disabled option with the normal "Please select" text.
Is there a way to fire the change event even if the option selected was already selected? Or is there just a "select" event that fires even if there hasn't been a change?
you can use .trigger("change"), or .change() on your jquery object to manually trigger the change event.
This worked for me:
//Get the dynamic id given to your select by Chosen
var selId = $('your_select').attr('id');
//Use that id to remove the dynamically created div (the foe select box Chosen creates)
$('#'+ selId +'_chzn').remove();
//Change the value of your select, trigger the change event, remove the chzn-done class, and restart chosen for that select
$('#'+selId).val('your_new_value').change().removeClass('chzn-done').chosen();
In a nutshell you are hard reseting chosen for your select. There might be an easier way than this, but this worked for me.
I just had the same problem using Select2 plugin (remake of Chosen plugin).
I forgot the line "allowClear: true" when I 've declared the Combobox as a select2 one.
$('#selectLabelMap').select2({
placeholder: "Sélectionner un label",
allowClear: true // <= don't forget "allowClear: true (re-init the comboBox)
}
Trigger the change first time when (DOM) is ready.
jQuery(function ($) {
$('#myselect').trigger("change");
});