I have this scenario.
1) Server Side returns a json encoded array having different fields in it along with primary key i.e., id.
2) A kendo treeview is created from that json
3
I want to do this,
1) User browse the tree and select a node.
2) I want to find the primary id of the tree or any other field that is passed from server side to distinguish the selected node.
I hope I deliver the question.
Thanks in advance.
Define your select function as:
select : function (e) {
// Get clicked node
var node = e.node;
// Find it's UID
var uid = $(node).closest("li").data("uid");
// Get the item that has this UID
var item = this.dataSource.getByUid(uid);
}
for find uid you can find it by e.node attribute
select : function (e) {
var uid = e.node.attributes['data-uid'].value;
var dataItem = this.dataSource.getByUid(uid);
alert(dataItem.ProductName);
}
here is another solution:
onSelect: function(e) {
var treeView = e.sender,
dataItem = treeView.dataItem(e.node);
console.log(dataItem.id); // retrieves an ID of selected node
}
Related
I have a quick question for you guys here. I was handed a set of lead generation pages and asked to get them up and running. The forms are great, expect for one small issue... they use the jQuery below to allow users to submit multiple instances of a data set by clicking an "Add another item" button. The problem is that the duplicated items are duplicated EXACTLY. Same name, id, etc. Obviously, this doesn't work when attempting to process the data via PHP, as only the first set is used.
I'm still learning jQuery, so I was hoping that someone could point me in the right direction for how to modify the plugin below to assign each duplicated field an incremental integer on the end of the ID and name assigned. So, the fields in each dataset are Role, Description, Age. Each additional dataset will use the ID & name syntax of fieldname#, where # represents numbers increasing by 1.
Thanks in advance for any advice!
/** https://github.com/ReallyGood/jQuery.duplicate */
$.duplicate = function(){
var body = $('body');
body.off('duplicate');
var templates = {};
var settings = {};
var init = function(){
$('[data-duplicate]').each(function(){
var name = $(this).data('duplicate');
var template = $('<div>').html( $(this).clone(true) ).html();
var options = {};
var min = +$(this).data('duplicate-min');
options.minimum = isNaN(min) ? 1 : min;
options.maximum = +$(this).data('duplicate-max') || Infinity;
options.parent = $(this).parent();
settings[name] = options;
templates[name] = template;
});
body.on('click.duplicate', '[data-duplicate-add]', add);
body.on('click.duplicate', '[data-duplicate-remove]', remove);
};
function add(){
var targetName = $(this).data('duplicate-add');
var selector = $('[data-duplicate=' + targetName + ']');
var target = $(selector).last();
if(!target.length) target = $(settings[targetName].parent);
var newElement = $(templates[targetName]).clone(true);
if($(selector).length >= settings[targetName].maximum) {
$(this).trigger('duplicate.error');
return;
}
target.after(newElement);
$(this).trigger('duplicate.add');
}
function remove(){
var targetName = $(this).data('duplicate-remove');
var selector = '[data-duplicate=' + targetName + ']';
var target = $(this).closest(selector);
if(!target.length) target = $(this).siblings(selector).eq(0);
if(!target.length) target = $(selector).last();
if($(selector).length <= settings[targetName].minimum) {
$(this).trigger('duplicate.error');
return;
}
target.remove();
$(this).trigger('duplicate.remove');
}
$(init);
};
$.duplicate();
Add [] to the end of the NAME attribute of the input field so for example:
<input type ="text" name="name[]"
This way your $POST['name'] will hold an array of strings. For that element. It will be an array with keys that are numbers from 0 to however many items it holds.
I have unique id's in my page and I want to create cookie for all that id's, I don't know how to deal with this, I have defined cookie using jquery, my code looks like this:
<script type="text/javascript>
$.each(event_detail, function(index, element)
{
if(index == "type")
{
var newactivity = element;
var task_id = event_detail.data.bug_id;
var project_id = event_detail.data.project_id;
$.cookie('task_id', task_id );
}
}
</script>
my code is working properly but it is storing only one value in cookie variable but I don't know how can I create a cookie for all the task id's and from this id's I need to set my webpage's values.
I'd like to iterate through a tables columns. Given I have a cell Id, I then want to get the values of the rest of the cells in that column.
The reason for this is, I want to add some validation so that 3 cells in a column, can't all contain the same class.
I'm open to ideas using both jQuery or PHP.
If you require more information, please comment.
In JQuery to get an item's column:
var column = $('#myID').index();
To parse through the table by the nth column:
var columnNth = $('#myID').index() + 1;
var items = [];
$('#tblID tbody tr td:nth-child('+columnNth +')').each( function(){
//add item to array
items.push( $(this).attr('class'); );
});
i want to create array of same id or name using getElementById..
i have a "add button", when the user press this button, its generate a dropdown list(dynamic) which the value is get from mysql..
and its looks like this when the user press 3 times..
i want to create an array of this id, and store it to mysql..
this is my JS code :
var menu_paket_array = document.getElementById('menu_paket').value;
alert(menu_paket_array);
the problem is, when i try to create this array(menu_paket_array), the value in this array is just the first id (Test 1) only..
how can i fix this?
thanks...
Using the same id for more than one element is wrong. Id is to uniquely identify certain element. Using it for more elements defeats its -purpose. If you need that for i.e. CSS styling, then use class instead, which is designed just for such scenarios.
An ID must be unique on a page. You can only use it on one element.
Instead, use a CSS class or element type to iterate (here's a fiddle demonstrating this code):
function alertValues() {
var select, selects = document.getElementsByTagName('select');
var out = "";
for (var i = 0; i < selects.length; i++) {
select = selects[i];
if (select.className && select.className.match(/CLASSNAME_TO_INCLUDE/)) {
out += select.options[select.selectedIndex].value;
}
}
alert(out);
}
A better solution, of course, would be to utilize a dom library like jQuery or mootools, with which you could do something like this:
jQuery(function($) {
vals = [];
$('select.CLASSNAME').each(function() { vals.push($(this).val()); });
alert(vals.join(','));
});
document.getElementsByClassName(names);
Where names is the classname u generate for each one.
Instead of assigning each element with id='menu_paket' (for the reasons #WebnetMobile.com explained) assign class='menu_paket'.
Instead of var menu_paket_array=document.getElementById('menu_paket').value;, do
var temp_array = document.getElementsByClassName('menu_paket');
var menu_paket_array = [];
for(i in temp_array){
menu_paket_array[] = temp_array[i].value;
}
//activate selected row in table
jQuery('.activatebutton').click(function(){
var tb = jQuery(this).attr('title');
//initialize to false as no selected row
var sel = false;
//get each checkbox in a table
var ch = jQuery('#'+tb).find('tbody input[type=checkbox]');
//check if there is/are selected row in table
ch.each(function(){
if(jQuery(this).is(':checked')) {
//set to true if there is/are selected row
sel = true;
jQuery(this).parents('tr').fadeOut(function(){
/*
THIS IS THE LINE THAT IS NOT WORKING BELOW!!!! I want to send VALUE ID to delete.php
*/
jQuery.get('delete.php', { id:this.id });
//remove row when animation is finished
jQuery(this).remove();
});
}
});
It's not clear exactly what attribute you want to send, but it looks like it's the element's id. If so, here's where the correction is:
jQuery.get('delete.php', { id:this.id });
should be
jQuery.get('delete.php', { id:jQuery(this).attr('id') });
So you'll send the id attribute of the element.
If that's still not working, you may have the incorrect path of the delete script...chrome dev tools or firebug would tell you this.