I want to get value of a select2 from a datatable and store it into variable.Actually I have appended three rows using for loop and so there are three select2 in three rows.I want get values from that three select2 and store it into variables.
I have tried many ways to get the values from that select2.When I m appending one row then the value is get from that select2 and stored in a variables.
I have used
var mno_id = $("#mno_idselected :selected").val();
The above code is working for getting the value from one select2 when I m appending one row.
But When I m appending more than one row,I m unable to get the value from a particular select2.
You need to instantiate select2 after dataTables is initialised. You can do that in the drawCallback callback.
Do not use id's to reference the select2's. I guess you will have a lot of select2's on multiple pages, so give them a dummy class like dt-select2 so you can initialise all visible select2's in one call. But by all mean preserve the id's for reference in event handlers.
$('#example').DataTable({
...
drawCallback: function() {
$('.dt-select2').select2();
}
})
demo -> http://jsfiddle.net/u91javfy/
See this example include a select option on a header to filter the data: http://jsfiddle.net/73zawd5b/5/#&togetherjs=fgu5BihnA7
$('#example').DataTable({
initComplete: function() {
this.api().columns('.fName').every(function() {
var column = this;
var select = $('<select class="f"><option value="">First Name</option></select>')
.appendTo($(column.header()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
this.api().columns('.lName').every(function() {
var column = this;
var select = $('<select class="f"><option value="">Last Name</option></select>')
.appendTo($(column.header()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
})
$(document).ready(function($) {
$('.f').select2();
});
Related
I have a table with a date column (Start date).
The sort is good when I click on the column thanks to the datetime-moment plugin.
BUT, on the dropdown list, the dates are not sorted properly.
This is the test case : http://live.datatables.net/cejizato/4/edit?html,css,js,console,output
I don't know how to sort these values.
I found this code if it's helping ?
column.data().unique().sort( function (a,b) {
return moment(a, "DD/MM/YYYY").unix() - moment(b, "DD/MM/YYYY").unix();
} )
Just use the code you have found inside the code sort() function.
initComplete: function ()
{
this.api().columns().every( function () {
var column = this;
var select = $('<select class="select" data-placeholder=" " multiple data-no-colonne="' + noColonne + '"> </select>')
.appendTo( $(column.footer()).empty() );
column.data().unique().sort(function (a,b) {
return moment(a, "DD/MM/YYYY").unix() - moment(b, "DD/MM/YYYY").unix();
}).each(function (d, j) {
select.append( '<option value="'+d+'" data-no-colonne="' + noColonne + '" data-actions-box="true">'+d+'</option>' );
});
noColonne++;
});
}
This is my JSON file:
{
"AL2": {
"3810": "AL2GR1",
"3814": "AL2GR2",
"3815": "AL2GR3",
},
"AN3": {
"3818": "AN3GR1",
"3819": "AN3GR2"
},
"CME": {
"2405": "CME"
}
I need to populate two select boxes. The first one let choose between first level values (AL2,AN3,CME) and the second one between the deep level ones (AL2GR#,AN3GR#,CME).
My infile Javascript is :
var jsonData = {"AL2": {"3810": "AL2GR1","3814": "AL2GR2","3815": "AL2GR3"},"AN3": {"3818": "AN3GR1","3819": "AN3GR2"},"CME": {"2405": "CME"}};
$(window).load(function(){
$.each(jsonData,function(key, value) {
$('#ue').append('<option value=' + key + '>' + key + '</option>');
});
});
function grfromue(element,jsonData) {
var ue = $("#ue option:selected").text();
alert(ue);
$.each(jsonData[ue],function(key, value) {
$('#gr').append('<option value=' + key + '>' + value + '</option>');
});
};
And HTML :
<select id="ue" onChange="grfromue(this,jsonData);">
</select>
<select id="gr">
</select>
The second select box isn't changing, what am I doing wrong ?
Below snippet of code might be helpful to you
var json = {
"AL2": {
"3810": "AL2GR1",
"3814": "AL2GR2",
"3815": "AL2GR3",
},
"AN3": {
"3818": "AN3GR1",
"3819": "AN3GR2"
},
"CME": {
"2405": "CME"
}
};
to get each value in first level
$.each( json, function( key, value ) {
console.log( key );
});
to get second level values based on your first input
input = 'AL2';
$.each( json[input], function( key, value ) {
console.log( key + ' : ' + value );
});
Hope this helps you.
You can use a nested JQuery each method to iterate over the objects and the nested objects within them. You can extend it for as many nested objects as you like.
jQuery.each(obj, function(i, val) {
console.log("Object: " + i);
jQuery.each(val, function(j, value) {
console.log('It has ' + j + ' with value ' + value);
});
});
If you want to populate the second select box based on the value of the first, you can use array notation to fetch contents of the object. Something like this:
jQuery("#selec-id").change(function(){
$("#second-select-id").html("");
jQuery.each(obj[$(this).val()], function(key, value) {
$("#second-select-id").append("<option value='"+key+"'>"+value+"</option>");
});
});
The first block of code is a working example of what I want the variable select to do. the var Select is there to be a td in the variable tr. the variable tr is used 2 times in this code. once to to append the tr when the table has html and another time when it doesn't have any html. the reason is because if doesn't have html it should append the header and the row with the select element and the rest of the data that's supposed to be on the row and if does have html it should only append the row to prevent repetition of the header. so I would like a nice clean variable named tr that will be append every time the users invokes it. jsfidle if you click on the drop down you could select the item and the new row will appear.
$('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
var thehtml = '<strong>Item:</strong> ' + suggestion.value + ' <br> <strong>price:</strong> ' + suggestion.data + "<br>" + suggestion.divs;
var tableheader = ($("<thead>")
.append($("<tr>")
.append($("<th>Item</th><th>Qty</th><th>Price</th>")))
)
var select = " <select class = 'select'><option value='volvo>Volvo</option> <option value='saab'>Saab</option> <option value='mercedes'>Mercedes</option> <option value='audi'>Audi</option> </select>"
var tr = "<tr><td>"+ suggestion.value + "</td><td>" +select +"</td></tr>"
if($(".table").html().length <= 0)
{
$('.table').append($("<table>")).append(tableheader).append(tr);
}else{
if($(".table").html().length > 0){
$(".table").append(tr)
}
}
The thing is I want the select element to be made up dynamically so i tried something and I cant figure out why it wont work. It's not recieving the variable. Am i implementing the varable wrong with the $.each?
$('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
var thehtml = '<strong>Item:</strong> ' + suggestion.value + ' <br> <strong>price:</strong> ' + suggestion.data + "<br>" + suggestion.divs;
var tableheader = ($("<thead>")
.append($("<tr>")
.append($("<th>Item</th><th>Qty</th><th>Price</th>")))
)
var selectValues = { "3": "2", "2": "1" , "1": "..."};
var select = $.each(selectValues, function(key, value){
$('.select').append($('<option>', {value: value}).text(value));
// <option value='volvo>Volvo</option>
});
var tr = "<tr><td>"+ suggestion.value + "</td><td><select class ='select'>" + select + "</select></td></tr>";
if($(".table").html().length <= 0)
{
$('.table').append($("<table>")).append(tableheader).append(tr);
}else{
if($(".table").html().length > 0){
$(".table").append(tr)
}
}
},
maxHeight:100,
width:600
});
thanks for your help
Why use object if you use only value?
if you realy don't need key juste create an array :
var selectValues = ["2", "1", "..."];
var value;
var select = selectValues.forEach(function(value){
$('.select').append($('<option>', {value: value}).text(value));
// <option value='volvo>Volvo</option>
});
// or if you want more compatibility
for (var i = 0, len = selectValue.length; i < len; i++) {
value = selectValue[i];
$('.select').append($('<option>', {value: value}).text(value));
});
Edit:
i make some mistake sorry.
first forEach will return nothing so it's can't work.
I test with your fidle. try this (replace by old for loop if you don't want to use map).
var select = selectValues.map(function(value){
return "<option value=" + value + ">" + value + "</option>";
// <option value='volvo>Volvo</option>
}).join('');
first you do not have to append from $('.select') because this dom not exist at this moment
and you can't concate an array in a string like this.
I have a kendo treeview having a node with {id, value}. and I want to get selected node's id and value when I click on a button.
How can I get it? Is there any inbuilt functions there to get it?
Here is my sample code:
$("mytree").kendoTreeView({
dataSource: mydata,
dataTextField: "Name",
dataValueField: "Id",
});
Use the .select() method. Be sure to look at the other methods available as well.
var tv = $('.mytree').data('kendoTreeView'),
selected = tv.select(),
item = tv.dataItem(selected);
if (item) {
alert('Selected item: ' + item.Name + ' : ' + item.Id + ' (uid: ' + item.uid + ')');
} else {
alert('Nothing selected');
}
Fiddle here
**
var tv = $("#treeview-right").data("kendoTreeView");
var selectedNode = tv.select();
var item = tv.dataItem(e.node);
item.text will give you the text of the selected node.
**
I disagree with the selected answer because depending on what you actually DO, you can be 1 step behind the actually selected value.
If you had some simple delete function then this type of code works fine
var treeview = $("#treeview").data("kendoTreeView");
var selectedNode = treeview.select(),
item = treeview.dataItem(selectedNode);
However, once you start playing with the treeview more you will end up regretting that as I have.
Best practice is to tie to the event handler
e.g.
var treeview = $("#treeview").kendoTreeView({
expanded: true,
select: onSelect,
....
}).data("kendoTreeView");
select function
function onSelect(e) {
var treeview = $("#treeview").data("kendoTreeView");
var item = treeview.dataItem(e.node);
if (item) {
console.log('Selected item: ' + item.whatever + ' | Id = ' + item.Id + ' | Type = ' + item.Type);
var someVariable = item.whatever;
} else{
console.log('nothing selected');
}
I cannot figure out for the life of me why this will not work. I am trying to pull the value of a textfield that was created with a loop from a json file.
In this code, at the very bottom I just do a simple click(function() {alert()} just to see if I can pull a value and its returning undefined. But if I remove '#name' and put in 'input' it captures it, but only for the first of several input fields.
Any help is really appreciated
JSON
{
"Controls": [{
"Button":[{ "Name":"Button", "x": "1","y": "2","width": "3","height": "4","Transition":"" }],
"Image":[{"x": "5","y": "6","width": "7","height": "8"}],
"TextField":[{"x": "9","y": "10","width": "11","height": "12","Rows":""}]
}]
}
The Code(there is soome getJSON stuff above this)
//Slide In Attributes Panel Based on Selected Object
$(document).on('click', '#code li', function () {
var index = $('#code li').index(this);
var selected = $(this).text();
switch (selected) {
case selected:
$('#options').hide();
hidePanels();
$('#temp').remove();
$('#objectAttributes').show("slide", 200);
break;
//If it does work show what variable is being used
default:
alert(selected);
break;
}
//Shows Selected LI Index
$('#codeIndex').text("That was div index #" + index);
//Pull list of Attributes for selected Object
$.getJSON('controls.json', function (data) {
//Build Attributes List
var attributeList = '<div id="temp">';
//Target based on selected object
var target = selected;
attributeList += '<div>' + target + '<div>';
$.each(data.Controls[0][target][0], function (kk, vv) {
attributeList += '<div style="float:right">' + kk + ':' + '<input type="text" id='+ kk + '>' + '</input>' + '</div>';
});
attributeList += '</div></div>';
attributeList += '</div>';
$('#objectAttributes').append(attributeList);
$('#temp').append('<div id="editIndex">'+"Modifying index" + " " +index+'</div>');
$(document).on('click', '#saveAttributes', function () {
var $x = $('#name').val();
alert($x);
})
});
});
Ok, so after a little hacking around with a jsfiddle the answer turned out to be a lot simpler than I first thought. Ever since HTML 4.01 class names and IDs have been case sensitive (reference), which means that your selector $('#name') wasn't matching the JSON Name.
So a simple change, such as in this simplified jsfiddle seems to work as desired. Hopefully this helps!