In this fiddle each check box is having id and its obtained from the json.There is a drop down also corresponding to each row
now suppose I have selected 1st and last row
then checkboxes values are 1 and 3
when the check box is selected then only the drop down menu will be enabled.
Now from the 1st row ,I have selected the text from the drop down menu and from the last row I have selected option and after that when I click save then it should return me 1:text,3,option so that I will pass it to server and do the necessary processing.The way I did gives me only 1,2
console.log($(".cd:checked").map(function () {return this.value;}).get().join(","));
Based on my understanding of the question, here is a solution. Let me know if it solves the problem.
FIDDLE
$('#addNew tr').each(function(index,element){
if($(this).find('.cd').prop('checked')){
key=$(this).find('.cd').val();
value=$(this).find('.QSelect').val();
newObject.push(key + ":" + value);
}
});
With the Good, Average & Poor checkbox selections. FIDDLE
$('#addNew tr').each(function(index,element){
if($(this).find('.cd').prop('checked')){
key=$(this).find('.cd').val();
value=$(this).find('.QSelect').val();
var options=[];
$(this).find('.checkbox-inline input').each(function(i,e){
if($(this).prop('checked')){
options.push($(this).parents('label').text());
}
});
newObject.push(key + ":" + value + ":" + options.join(','));
}
});
Related
I have a Listbox that I need refreshed after a user selects an option in DropdownList.
Image is self explanatory. If one selects Department -> load list of departmetns in Listbox, if one selects Vat Rate refresh/load list of vat rates into the listbox below. (Default department list is loaded on page load). I am currently attempting this with trigger("chosen:updated") and having no luck refreshing listbox. Here is my code for that functionality.
$(function () {
$("#SelectFilter").change(function () {
if (document.getElementById('SelectFilter').value == 1) //dropdownlist
{
//empty listbox
$('#SelectItems').empty();
//append new list to listbox
$.each(data.Departments, function (index, element) {
$('#SelectItems').append('<option value="' + element.Value + '">'
+ element.Text + '</option>');
});
//refresh
$('#SelectItems').trigger("chosen:updated");
}
if (document.getElementById('SelectFilter').value == 2)
{
$('#SelectItems').empty();
$.each(data.VatRates, function (index, element) {
$('#SelectItems').append('<option value="' + element.Value + '">'
+ element.Text + '</option>');
});
$('#SelectItems').trigger("chosen:updated");
}
});
});
Recognising the selected value from the dropdownlist isnt an issue, that works fine. Listbox is currently not getting updated/refresh with new selection. And I cannot figure out were I am going wrong with this.
Try to put all your code for creating the list into a function, and then bind an event on chosing one of the selected items to call this function which generates a new list instead of using .trigger(). If you provide the HTML part as well, I'll post example code soon.
It's not clear to me if you have a problem with recognizing the selected value, or with populating the secondary select tag, or with the initial loading of the data. So I am providing an example of the three steps.
First, to detect the selected value, you need to provide a .change() handler and extract the selected value with .val(). Something similar to this:
$("#SelectFilter").change( function() {
var v = $(this).val();
if (v=="value1") {
} else if (v=="value2") {
} else {
}
});
then each of the changes detected has to refresh the contents of the secondary select tag, something as simple as this...
$("#SelectItems").empty();
['first item','second item','troisième'].forEach( (v,i) =>
$("#SelectItems").append($("<option>").val("item"+i).text(v))
);
}
And finally triggering the initial load should be as simple as triggering a change event
$("#SelectFilter").change();
I have put all the steps together in this fiddle https://jsfiddle.net/mud9u8yL/6/
In my grid, when the "Add" button on grid toolbar is clicked, a new empty row will be added into grid. Also, all rows will be changed to edit mode.
My problem is that there is an automatic focus on row when it is changed to edit mode. I change the mode of row from the top of grid to the bottom. So the grid always focus to the row on the bottom when the change finishes. But the new empty row is at the top of grid. So user cannot see the new empty in case of there are many rows in grid.
Here is my function to change row to edit mode:
function Grid_EditMode(event, grid) {
var g;
if (grid !== null && grid !== undefined) {
g = grid;
} else {
g = $(this);
}
HideFilterRow(g);
var ids = g.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
g.editRow(cl);
}
g.jqGrid('resetSelection');
$('input[id*=Date]').datepicker();
$('input[id*=Date]').dateEntry({ spinnerImage: '' });
//change button status
$('#pager' + g.attr('id') + " [id*='btnGridAdd']").removeClass('pagerBtn');
$('#pager' + g.attr('id') + " [id*='btnGridEdit']").removeClass('pagerBtn');
$('#pager' + g.attr('id') + " [id*='btnGridDelete']").removeClass('pagerBtn');
$('#pager' + g.attr('id') + " [id*='btnGridReset']").removeClass('pagerBtn');
$('#pager' + g.attr('id') + " [id*='btnGridEdit']").addClass('pagerBtn');
}
Is there any way to disable the focus when changing the row to edit mode?
Note that this problem only occurs on IE, not on chrome. I'm using the jqGrid 4.5.2
jqGrid 4.5.2 is very old version. It was published 2.5 years ago. editRow supports focusField parameter starting with version 4.7. If could be Boolean or Number (column index) in jqGrid 4.7. Free jqGrid allows the usage of String (column name) and, starting with 4.10.0, Event or DOM element as the value of focusField parameter (see the answer and this one).
In your case one can use focusField: true option of editRow. You need just change g.editRow(cl); to g.editRow(cl, {focusField: false}); if you would use jqGrid 4.7 or higher. I would recommend you to use the latest version (4.10.0) of free jqGrid. If you can't upgrade to newer version of jqGrid then you can set the focus to another editing field manually after the last call of editRow. You can add the following code after the loop where you call editRow
$("#" + ids[0])
.find("input,textarea,select,button,object,*[tabindex]")
.filter(":input:visible:not(:disabled)")
.first()
.focus();
$("#" + ids[0]) get the first row (<tr>), then one find all child elements which can have focus, filter for visible and not disabled elements and finally set the focus on the first from the elements.
I am working on an filter option for a results page.
I have something thats working fine with one filter but when other filters are clicked its goes wrong. The problem is that when you filter a color and a size it will show the color rows and the size rows even if colored filter doenst have that size.
This is the filter javascript:
<script>
$(document).ready(function() {
$("input:checkbox").on('click', function () {
var showAll = true;
$('.resuts_show_hide').hide();
$('input[type=checkbox]:checked').each(function () {
showAll = false;
$("[data-row-" + $(this).data('type') + "=" + $(this).val() + "]").parent().show();
});
if(showAll){
$('.resuts_show_hide').show();
}
});
});
</script>
So i thought lets do this:
$("[data-row-" + $(this).data('type') + "=" + $(this).val() + "]**:visible**").parent().show();
But that's no option because it will alway hide all rows when a checkbox is clicked but and then shows the matching one. Works fine when one checkgox filter is activated, but when the second filter is activated he should only filter thru the visible ones, but with this javascript thats no option.
Any one has a solution for this so multi filtering is also possible?
Created a fiddle: http://jsfiddle.net/m9jrn5bq/.
I have two multiple select2 boxes, Box1 options are populated dynamically,when i select any option from this select box, it should get added to the new Box2. This scenario is working as required. Problem i am facing is. When i remove any selected item from the Box1, i am able to remove it from Box2. But if that item is selected in Box2 it still remains.
Ex: A,B,C are selected values in Box 1, Box2 gets populated with A,B,C. If i select B,c in Box 2 and if i remove B from Box1. My Box2 items will now be AC. But B,C will still remain selected in Box2.
Can anyone help me in solving this tricky problem.
$("#Box1").on("change", function() {
var box1List = $('#Box1').val();
$('#Box2').empty();
for (var key in box1List) {
var valueField = box1List[key];
var textField = $("#Box1 > option[value='"+valueField+"']").text();
$("#Box2").append($('<option>', {value: valueField, text: textField}));
}
});
$("#Box1").on("select2-removed", function(e) {
console.log("removed val=" + e.val + " choice=" + e.choice.text);
$('#Box2 option[value="'+e.val+'"]').remove();
});
After you alter the child <option> elements of a Select2 <select> element, you should call .change() on it to get it to update its display.
$('#Box2').change();
But in your case, you probably also want to restore the value of the Select2 after you remove and re-add the options.
$("#Box1").on("change", function() {
var val = $('#Box2').select2('val');
$('#Box2').empty();
$.each($('#Box1').select2('data'), function(i, item) {
$("#Box2").append($('<option>', {value: item.id, text: item.text}));
});
$('#Box2').select2('val', val);
});
When you use .select2('val', val) to set the value, you do not need to call .change().
jsfiddle
I have referenced from the post of Pierre de LESPINAY
Glideh. And I tried to apply to my project.
new_data = $.grep($('#my_input').select2('data'), function (value) {
return value['id'] != id_to_remove;
});
$('#my_input').select2('data', new_data);
It worked fine.
I have a set of number input fields, labeled small & medium.., and a set of div's with the label small and medium. In my actually project there will be more sizes than just small and medium. When you add a number to the small number input field a text input insertsAfter the div labeled small. When you subtract a number from the small number input field, the text input field that was recently added is removed.
If the small number field is 0, I want
<div class="name-number-field-container" data-size="Small">
to be hidden, if the small number field is greater than 0 I want the
<div class="name-number-field-container" data-size="Small">
to show. Same goes for medium.
http://jsfiddle.net/7PhJZ/63/
the hidden and shown is correct, but they are not associated to their proper size and product. all class="name-number-field-container" show
i tried this:
$('.product-quantity').on('change', function(){
var select = $(".name-number-field-container").closest('[id^="product"]').find('[data-size="' + this.name + '"]')
if($(this).val()>=1){
$(select).show();
} else {
$(select).hide();
}
});
Is this what you meant?
http://jsfiddle.net/9kXLC/4/
Replace your show/hide code with this:
$('.product-quantity').on('change', function () {
var select = ".name-number-field-container[data-size=" + $(this).attr('name') + ']'
if ($(this).val() >= 1) {
$(this).parents('div[id^=product-]').find(select).show();
} else {
$(this).parents('div[id^=product-]').find(select).hide();
}
});
http://jsfiddle.net/fenderistic/Q4bFB/
Basically you have a custom name for each product-quantity that correlates to a specific name-number-field-container's data-size. I had to add the data-output-id attribute to distinguish between the different divs. So you use that information to hide or show the correlating divs.
$('.product-quantity').on('change', function () {
if ($(this).val() >= 1) {
$(".name-number-field-container[data-size='" + $(this).attr("name") + "'][data-output-id='" + $(this).attr("data-product-id") + "']").show();
} else {
$(".name-number-field-container[data-size='" + $(this).attr("name") + "'][data-output-id='" + $(this).attr("data-product-id") + "']").hide();
}
});
I just added a class to your fiddle that explicitly set the width for the .name-field input class like this: .name-field {width:50px;} and got the results you were looking for.