I have List of Object as a response from server in javascript. How i can access object members or how i can loop through the object using jquery.?
This is my current script.
main.addDrodownOptionsforRoom = function (selector, data)
{
var dropdown = $(selector);
if (dropdown !== null)
{
dropdown.html("");
dropdown.append($('<option></option>').val("").html("Select..."));
dropdown.append($('<option></option>').val("All").html("All"));
$.each(data, function (index, val)
{
dropdown.append($('<option></option>').val(val).html(index));
});
$(selector).removeAttr("disabled");
}
};
In "data" i can see the List of objects. Can any body tell me how to access the members in it.
Try this
main.addDrodownOptionsforRoom = function (selector, data)
{
var dropdown = $(selector);
if (dropdown !== null)
{
dropdown.html("");
var html = '';
html += '<option value="">Select...</option>';
html += '<option value="ALL">All</option>';
dropdown.append(html);
var options = '';
$.each(data, function (key, val)
{
options += '<option value="'+key+'">'+val+'</option>';
});
dropdown.append(options);
$(selector).removeAttr("disabled");
}
};
But since I don't know how your object is build up, I can't give you the exact solution.
if something like this:
obj = [name:'a name',number:'555'];
you could do something like:
alert(obj.name); // displays 'a name'
alert(obj.number); // displays '555'
Related
im trying to implement maykinmedia/dual-listbox in my CI application, the plugin is working fine, but when i submit the form, the $_POST variable doesn't contain any value. I can provide the javascript part, but it is the standard init for the plugin, the data are passed by the CI controller. Please help. Below the html part, in this case is missing the name from the select tag, but even adding it, doesn't change the result.
<select id="data" class="kt-dual-listbox" multiple
data-available-title="Source Options"
data-selected-title="Destination Options"
data-add="<i class='flaticon2-next'></i>"
data-remove="<i class='flaticon2-back'></i>"
data-add-all="<i class='flaticon2-fast-next'></i>"
data-remove-all="<i class='flaticon2-fast-back'></i>"
>
<?php foreach ($contents_data_data as $content_data_data){ ?>
<option value="<?= $content_data_data->id ?>"><?= $content_data_data->name ?></option>
<?php } ?>
</select>
Class definition
var KTDualListbox = function () {
// Private functions
var initDualListbox = function () {
// Dual Listbox
var listBoxes = $('.kt-dual-listbox');
listBoxes.each(function(){
var $this = $(this);
var id = '#' + $this.attr('id');
// get titles
var availableTitle = ($this.attr('data-available-title') != null) ? $this.attr('data-available-title') : 'Available options';
var selectedTitle = ($this.attr('data-selected-title') != null) ? $this.attr('data-selected-title') : 'Selected options';
// get button labels
var addLabel = ($this.attr('data-add') != null) ? $this.attr('data-add') : 'Add';
var removeLabel = ($this.attr('data-remove') != null) ? $this.attr('data-remove') : 'Remove';
var addAllLabel = ($this.attr('data-add-all') != null) ? $this.attr('data-add-all') : 'Add All';
var removeAllLabel = ($this.attr('data-remove-all') != null) ? $this.attr('data-remove-all') : 'Remove All';
// get options
var options = [];
$this.children('option').each(function(){
var value = $(this).val();
var label = $(this).text();
var selected = ($(this).is(':selected')) ? true : false;
options.push({ text: label, value: value, selected: selected });
});
// get search option
var search = ($this.attr('data-search') != null) ? $this.attr('data-search') : "";
// clear duplicates
$this.empty();
// init dual listbox
var dualListBox = new DualListbox(id,{
addEvent: function(value) {
console.log(value);
},
removeEvent: function(value) {
console.log(value);
},
availableTitle: availableTitle,
selectedTitle: selectedTitle,
addButtonText: addLabel,
removeButtonText: removeLabel,
addAllButtonText: addAllLabel,
removeAllButtonText: removeAllLabel,
options: options
});
if (search == "false"){
dualListBox.search.classList.add('dual-listbox__search--hidden');
}
});
}
return {
// public functions
init: function() {
initDualListbox();
}
};
}();
commenting this line
$this.empty();
in the javascript file, solve the issue; but then the source options list will show 2 times the same option.
I am unable to get the AutoComplete list to display. My service returns json model: TagID: 1, text:MyText
but the AutoComplete list never displays. My HTML:
<tags-input ng-model="tags" tag-class="{even: $index % 2 == 0, odd: $index % 2 != 0}" on-tag-added="addTag(tags)"> <auto-complete source="loadTags($query)"></auto-complete> </tags-input>
My Controller code:
$scope.loadTags = function ($query) {
var tags;
contractorService.gettags()
.success(function (data) {
tags = data;
return tags.filter(function(tag) {
return tag.text.toLowerCase().indexOf($query.toLowerCase()) != -1
UPDATE
I have discovered that it just does not like the Json returned from Ajax call to MVC Controller.
public async Task<ActionResult> GetMajorTags()
{
majorId = UserInfo.intMajorID;
var tags = await CompanyClient.GetAvailableTags(majorId);
return Json(tags, JsonRequestBehavior.AllowGet);
}
Even bypassing the service and calling the MVC Controller method directly like below:
$scope.loadTags = function (query) {
return $http.get('/SSQV4/SSQV5/Contractor/GetMajorTags');
};
If I make the source static like below:
var auto = [
{ TagID: 4,text: 'Tag4' },
{ TagID: 5, text: 'Tag5' },
{ TagID: 6, text: 'Tag6' }
];
It works, but it will not show what is returned from the MVC Controller even though the data returned is in the EXACT same format.
Any assistance is greatly appreciated!
This code is not correct:
$scope.loadTags = function ($query) {
var tags;
contractorService.gettags()
.success(function (data) {
tags = data;
// return where?
return tags.filter(function(tag) {
return tag.text.toLowerCase().indexOf($query.toLowerCase()) != -1
});
});
}
There is no reason to have a return statement within your success callback. Where would that return to? If you did something like this:
var tags = $scope.loadTags();
console.log(tags); // undefined
... tags would be undefined. The reason is because the return statement is NOT returning from the call to loadTags. It is instead returning from within a promise callback.
This is actually how it's done:
var tags = [];
$scope.loadTags = function () {
contractorService
.gettags()
.success(function (data) {
tags = data;
tags = tags.filter(function(tag) {
return tag.text.toLowerCase().indexOf($query.toLowerCase()) != -1;
});
});
};
Notice how there are no return statements (except for your filter).
This just does not work at all:
$scope.loadTags = function (query) {
return $http.get('/SSQV4/SSQV5/Contractor/GetMajorTags');
};
If you were to do something like this:
var tags = $scope.loadTags();
console.log(tags); // promise object. NO DATA
tags would contain a promise object NOT your data. You would need to do the following to get the actual data:
var tags = [];
$scope.loadTags().success(function(data) {
tags = data;
});
I'm working on cascading the multi-select based on the values of the data-attributes on another.
I have this method which is called inside the onChanged event of the parent. By parent I mean what to filter the child by i.e
Parent = Department Multiselect
Child = Staff Multiselect.
The child element has a data attribute of data-departmentid.
function cascadeMultiselect(control, targetControl, key) {
this.control = control;
this.targetControl = targetControl;
this.key = key;
this.toHide = [];
this.toShow =[];
//Get controls selectedIds
this.selectedIds = function() {
var selected = [];
_.each($(this.control + " option:selected"), function(c) {
selected.push($(c).val());
});
return selected;
};
//Now filter
this.filter = function() {
//Get target control attribute values
_.each($(targetControl + " option"), function(tc) {
//Use the val as an identifier
var val = $(tc).val();
var data = $(tc).attr("data-" + key);
data = data.split(",");
var isMatch = anyMatchInArray(data, this.selectedIds());
if(!isMatch){
$(tc).hide();
}
});
}
this.filter();
$(targetControl).multiselect('rebuild');
}
It's being called like so:
onChange: function() {
cascadeMultiselect('#departmentlist', '#stafflist', "DepartmentID");
}
The problem is I can't hide the elements. The filter works just fine, I've tried:
$(tc).hide(); // tc = targetControl option
I've also tried to refresh instead of rebuild.
Since it seems the only way to do this was to store the values of the multiselect, and then remove / add the relevant values.
I decided to use a rudimentary Cache class:
var Cache = (function () {
this.all = [];
function Cache(control) {
this.control = control;
}
Cache.prototype.getAll = function () {
return this.all;
};
Cache.prototype.setAll = function (all) {
this.all = all;
};
return Cache;
})();
Function now looks like:
function cascadeMultiselect(control, targetControl, key, cache) {
this.control = control;
this.targetControl = targetControl;
this.key = key;
this.toHide = [];
this.toShow =[];
//To reset the multiselect
this.reset = function(){
$(targetControl).html('');
$(targetControl).multiselect('dataprovider', cache.all)
}
//Get controls selectedIds
this.selectedIds = function() {
var selected = [];
_.each($(this.control + " option:selected"), function(c) {
selected.push($(c).val());
});
return selected;
};
//Now filter
this.filter = function() {
//Get target control attribute values
_.each($(targetControl + " option"), function(tc) {
//Use the val as an identifier
var val = $(tc).val();
var data = $(tc).attr("data-" + key);
data = data.split(",");
var isMatch = anyMatchInArray(data, this.selectedIds());
console.log($(tc));
if(!isMatch){
$(tc).remove();
}
});
}
//If nothing selected then reset the multiselect
if(this.selectedIds().length == 0){
this.reset();
return;
}else{
this.filter();
}
$(targetControl).multiselect('rebuild');
}
When I first populate the multiselect with the dataprovider I add the data to the cache:
if(cache != null){
cache.setAll(this.dataToAdd);
}
I have checkbox in Kendo grid. Once i click on Checkbox it always focus the top cell in Kendo Grid. Below is code for Kendo grid that I am binding to checkbox value on checkbox click event in Kendo Grid
$("#contactgrid").on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#contactgrid').data().kendoGrid;
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = $("td", row).index(this);
// grid.tbody.find("tr").eq(rowIndex).foucs(); This doesn't work
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('IsSelected', checked);
});
I can get the row index and cell Index in click event but I was not able to figure out to focus the specific cell.
Thanks!
When you want to edit Grid with checkbox then I would suggest you to use the approach from this code library. No matter it uses the MVC extensions open Views/Home/Index.cshtml and see how the template is defined and the javascript used after initializing the Grid.
Here it is
Column template:
columns.Template(#<text></text>).ClientTemplate("<input type='checkbox' #= IsAdmin ? checked='checked':'' # class='chkbx' />")
.HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width(200);
<script type="text/javascript">
$(function () {
$('#persons').on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#persons').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('IsAdmin', checked);
})
})
function checkAll(ele) {
var state = $(ele).is(':checked');
var grid = $('#persons').data().kendoGrid;
$.each(grid.dataSource.view(), function () {
if (this['IsAdmin'] != state)
this.dirty=true;
this['IsAdmin'] = state;
});
grid.refresh();
}
</script>
I struggled with this. I essential refocused the cell as shown below. There's plenty of room for improvement in the Kendo grid client-side API. Hopefully my helper methods below will help people out.
var $row = getRowForDataItem(this);
var $current = getCurrentCell($row);
var currentCellIndex = $row.find(">td").index($current);
this.set('PriceFromDateTime', resultFromDate);
$row = getRowForDataItem(this);
var grid = getContainingGrid($row);
//select the previously selected cell by it's index(offset) within the td tags
if (currentCellIndex >= 0) {
grid.current($row.find(">td").eq(currentCellIndex));
}
//Kendo grid helpers
function getColumn(grid, columnName) {
return $.grep(grid.columns, function (item) {
return item.field === columnName;
})[0];
}
function getRowForDataItem(dataItem) {
return $("tr[data-uid='" + dataItem.uid + "']");
}
function getCurrentCell($elem) {
return getContainingGrid($elem).current();
}
function getContainingDataItem($elem) {
return getDataItemForRow(getContainingRow($elem));
}
function getContainingCell($elem) {
return $elem.closest("td[role='gridcell']");
}
function getContainingRow($elem) {
return $elem.closest("tr[role='row']");
}
function getContainingGrid($elem) {
return $elem.closest("div[data-role='grid']").data("kendoGrid");
}
function getGridForDataItem(dataItem) {
return getContainingGrid(getRowForDataItem(dataItem));
}
function getDataItemForRow($row, $grid) {
if (!$grid) $grid = getContainingGrid($row);
return $grid.dataItem($row);
}
function getMasterRow($element) {
return $element.closest("tr.k-detail-row").prev();
}
function getChildGridForDataItem(dataItem) {
return getRowForDataItem(dataItem).next().find("div.k-grid").data("kendoGrid");
}
function getMasterRowDataItem($element) {
var $row = getMasterRow($element);
return getDataItemForRow($row);
}
I'm trying to use knockout for a view where I'm uploading documents and showing a list. For this I'm using jquery.form.js in order to upload them using ajax. I've changed that to use knockout and my viewmodel looks like this
var ViewModel = function (groups) {
var self = this;
self.groups = ko.observableArray(ko.utils.arrayMap(groups, function (group) {
return {
planName: ko.observable(group.Key),
documentList: ko.observableArray(ko.utils.arrayMap(group.Values, function (value) {
return {
document: ko.observable(new Document(value))
};
}))
};
}));
var options = {
dataType: 'json',
success: submissionSuccess
};
self.add = function () {
$('#addForm').ajaxSubmit(options);
return false;
};
function submissionSuccess(result) {
alert('success');
}
};
Having one Document function for doing the mapping. I'm stuck when receiving the Json data from the controller. The result is correct, a list of objects in the same format I'm receiving on first load but I don't know how to "refresh" the viewmodel to use this new list.
Don't know if using the ko mapping plugin would make it easier as I have never used it and don't even know if it's applicable for this.
The controller method, in case is relevant, is this (if something else neede let me know althoug won't have access to the code in the next hours)
[HttpPost]
public ActionResult AddDocument(AddDocumentViewModel viewModel)
{
var partyId = Utils.GetSessionPartyId();
if (viewModel.File.ContentLength > Utils.GetKBMaxFileSize * 1024)
ModelState.AddModelError("File", String.Format("The file exceeds the limit of {0} KB", Utils.GetKBMaxFileSize));
if (ModelState.IsValid)
{
_documentsManager.AddDocument(viewModel, partyId);
if (Request.IsAjaxRequest())
{
var vm = _displayBuilder.Build(partyId);
return Json(vm.Documents);
}
return RedirectToAction("Index");
}
var newViewModel = _createBuilder.Rebuild(viewModel, partyId);
return PartialView("_AddDocument", newViewModel);
}
Thanks
EDIT: I came up with this code which seems to work (this function is inside the ViewModel one
function submissionSuccess(result) {
self.groups(ko.utils.arrayMap(result, function (group) {
return {
planName: ko.observable(group.Key),
documentList: ko.utils.arrayMap(group.Values, function (value) {
return {
document: new Document(value)
};
})
};
}));
};
Are you sure the documentList and document need to be observables themselves ?
To update the list you can push to it as you'd do on a regular array.
You could try something like this:
function submissionSuccess(result) {
self.groups.removeAll();
$.each(result, function(index, value) {
var documentList = [];
$.each(value.Values, function(index, value) {
documentList.push(new Document(value));
});
var group = {
planName:value.Key,
documentList: documentList
};
self.groups.push(group);
});
};