If I update some parameters in fnServerParams(), they are not taken into account by the DataTables presentation layer, any idea?
E.g. let's assume iDisplayStart=10 and iDisplayEnd=20 are correct values
'fnServerParams': function (aoData) {
// Find i such as aoData[i]['name'] == 'iDisplayStart'
aoData[i]['value'] = 10;
// Find j such as aoData[j]['name'] == 'iDisplayEnd'
aoData[j]['value'] = 20;
},
Then the paging button is still stuck on page 1 while I expect it to show page 2 of my data.
The same for sorting parameters.
Edit: The initialization code is as follows:
var oTable = $('#WEB_TABLE_ID').dataTable(
{'aaSorting': [[0, 'desc']],
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': '../subscription/search_list.php',
'sServerMethod': 'POST',
'sPaginationType': 'full_numbers',
'iDisplayLength': 100, // Default number of rows to display
'oLanguage': {'sSearch': "Search all",
'sLengthMenu': 'Display <select> \
<option value="10">10</option> \
<option value="100">100</option> \
<option value="500">500</option> \
</select> entries',},
'bAutoWidth': false,
'sDom': "<'row'<'span8'l><'top'i>r>t<'row'<'bottom'i><'span8'p>>"
'fnServerParams': function (aoData) {
var sEcho = aoData[0].value;
if ('1' == sEcho) {
var params = <?=json_encode(Session::read(${CTL_DATAID}))?>;
if (! $.isEmptyObject(params)) {
aoData.length = 0; // empty array
$.each(params, function(name, value) {
aoData.push({'name': name, 'value': value});
});
}
}
},
);
I don't have a direct solution to my question, but as it was to save the state of the DataTable, I came accross the bStateSave option that does the job.
Related
Below is a screenshot of my table. My goal is in the effective_start_datetime, I want it to show as status active if there is a value in it, and inactive if it is null when editing. (show current status on edit click)
Model: (getting the SQL data)
$group_edit = HmsBbrGroup::find($group_id);
Table:
<select id="edit_effective_start_datetime" class="form-control w-100 edit_effective_start_datetime">
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
Form: (only status is not showing)
Ajax: (output form content when the edit button is clicked)
$(document).on('click','.edit_group',function (e) {
e.preventDefault();
var g_id = $(this).val();
console.log(g_id);
$('#editGroupModal').modal('show');
$.ajax({
type: "GET",
url: "/clinical/bbr-group-configuration-edit/"+g_id,
success: function (response) {
console.log(response);
if(response.status == 404) {
$('#success_message').html("");
$('#success_message').addClass('alert alert-danger');
$('#success_message').text('response.message');
} else {
$('#edit_group_name').val(response.group_edit.group_name);
$('#edit_group_description').val(response.group_edit.group_description);
$('#edit_group_id').val(response.group_edit.group_id);
$('#edit_effective_start_datetime').val(response.group_edit.effective_start_datetime).change();
$('#edit_group_type_id').val(response.group_edit.group_type_id).change();
}
}
});
});
As you can see from the form, my ajax outputs the contents besides the status here in $('#edit_effective_start_datetime').val(response.group_edit.effective_start_datetime).change(); I am trying to figure out the solution to show the <option> as inactive or active if the datetime is null or not
I tried to add a function but this is not working:
$('#edit_effective_start_datetime').val(getgroupstatus(response.group_edit.edit_effective_start_datetime)).change();
function getgroupstatus(status) {
var g_status = '';
if (status === null) {
g_status = 'inactive'
} else {
g_status = 'active'
}
return g_status;
}
Any help/advice on how to show the status would help alot, thanks.
Use boolean values instead of strings - and your code will be simpler
<select id="edit_effective_start_datetime">
<option value=0>Inactive</option>
<option value=1>Active</option>
<select>
$("#edit_effective_start_datetime").val(response.group_edit.effective_start_datetime === null ? 0 : 1);
You can use prop
var effective_start_datetime=response.group_edit.edit_effective_start_datetime?
'active':
'inactive';
$('#edit_effective_start_datetime option[value='+effective_start_datetime+']').prop("selected",true);
My project is MVC 5, I am using the following to generate a chart with multiple series:
HTML:
<button data-bind="click: addItem">Add</button>
<button data-bind="click: removeItem">Remove</button>
<div data-bind="kendoChart2: { title: { text: 'Graph Sample' },
series: seriesConfig,tooltip: {visible: true,template: '#= series.name #: #= value #'} , seriesDefaults: {
type: 'line',style: 'smooth'}}"> </div>
Javascript
var MainViewModel = function () {
var self = this;
this.Systolic = ko.observableArray([]);
this.Diastolic = ko.observableArray([]);
this.HeartRate= ko.observableArray([]);
$.ajax({
type: "GET",
url: '/Charts/GetChart',
contentType: "application/json; charset=utf-8",
async: false,
cache: false,
dataType: "json",
success: function (result) {
//Diastolic
if (result && result.Systolic.length > 0) {
for (var i = 0; i < result.Systolic.length; i++) {
self.Systolic.push(result.Systolic[i].Systolic);
}
};
....
},
error: function (err) {
alert(err.status + " : " + err.statusText);
}});
this.seriesConfig = ko.observableArray([
{name: "Systolic", data: this.Systolic()},
{name: "Diastolic",data: this.Diastolic()}]);
this.addItem = function() {
this.seriesConfig.push({ name: "Heart Rate", data: this.HeartRate() });
};
this.removeItem = function() {
this.seriesConfig.remove({ name: "Diastolic", data: this.Diastolic() });
};
}.bind(this);
ko.kendo.bindingFactory.createBinding(
{
name: "kendoChart",
bindingName: "kendoChart2",
watch: {
data: function(value) {
ko.kendo.setDataSource(this, value);
},
series: function(value) {
this._sourceSeries = value;
this.refresh();
this.redraw();}
}
});
window.viewModel = new MainViewModel();
ko.applyBindings(window.viewModel);
The chart works great, however can't add or remove series?
Note:
the addItem works, I get the value of the new series:
series: function (value) {
alert(value[2].name);
this.seriesConfig = value;
this.refresh();
this.redraw();
}
I also tried load all series then use the following hide a series:
$("#kendoChart").getKendoChart().options.series[1].visible = false;
$("#kendoChart").getKendoChart().redraw();
Does not work, I think the chart name does not register.
I am not familiar with knockout-kendo, just with knockout in general, so if fixing obvious problem as described below will not work, you might need to refresh bindings. Looking at this example however this is not needed, so most likely you got caught by a simple fact that array's remove performs simple == comparison and it fails to find equal object in the array.
Here is a simplified example (although you might know it already, but just in case):
var a="abc";
var b="abc";
var aa = [1,2,3,"a","b","c"];
var data1 = {name: a, data: aa};
var data2 = {name: b, data: aa};
now, comparison a==b returns true and clearly data slots are the same, however data1==data2 is false. That is because it's a different object.
So in your example in removeItem you create and pass a new object to remove, not the one in the array, so == comparison fails and nothing is removed as that newly created object isn't in your observable array.
I suggest comparing the name only similar to item.age < 18 comparison from knockout.js documentation on observable arrays:
this.seriesConfig.remove( function (item) { return item.name == "Diastolic"; } )
I believe, this should do the trick.
here is a custom select component, it works, but I just can not understand some part of the code,
jsFiddle
Vue.component("myselect", {
props: ['option'],
render: function (createElement) {
var self = this
var items = []
for (var i = 0; i < 16; i++) {
items.push(createElement('option', { attrs: { value: i } }, i))
}
return createElement('select', {
domProps: { value: self.option.value }, // v-bind:value = this binds the default value
on: {
input: function (event) {
console.log(event.target.value)
}
}
}, items)
}
})
this sets the default value of select to option.value, is it <select value='2'>, but the html select tag uses <option selected>, looks like magic to me.
domProps refers to element properties, not attributes.
Think of it as something like this...
document.getElementById('mySelect').value = 'Two'
<select id="mySelect">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
When you set the value property on a select element, it selects the option with the corresponding value (at least in Firefox and Chrome).
I want to sync the notification counter on both sides at a time. The attached image will make you understand easily what i need to do on which I am stuck from quite a few days.
Image:
The Right Side of the notification bell is in Layout:
<div class="header-top">
<h2 style="width:100%">#ViewBag.Heading</h2>
<a class="info sprite" id="lnkInfo"></a>
#{
if(ViewBag.ShowNotification != null && ViewBag.ShowNotification) {
<span class="notifications-icon"><em>#ViewBag.NotificationCount</em></span>
}
}
</div>
The Left Notification Bell is in View.
Code:
<div class="head">
<span class="notifications-icon"><em>#Model.Announcement.Count</em></span>
<h3>Notifications</h3>
</div>
Jquery Ajax Call to Controller Action:
function UpdateNotification(id) {
var json = { "AnnouncementID": id };
$.ajax({
type: 'POST',
url: '#Url.Action("UpdateNotificationData", "Home")',
contentType: 'application/json; charset=utf-8',
data: '{"AnnouncementID":' + id + '}',
dataType: 'json',
cache: false,
success: function (data) {
if (data) {
updatenotificationUI(id);
}
}
})
}
function updatenotificationUI(id) {
var $notificaitonContainer = $(".notifications");
if (id != null) {
var $li = $notificaitonContainer.find("li[id=" + id + "]");
if ($li != null) {
$li.slideUp("slow", function () {
$(this).remove();
var legth = $notificaitonContainer.find("#listing li").length;
if (legth > 0)
$notificaitonContainer.find("em").html(legth);
else
$notificaitonContainer.find("em").html("");
});
}
}
else {
$notificaitonContainer.find("ul").html("");
$notificaitonContainer.find("em").html("");
}
}
Home Controller :
public ActionResult UpdateNotificationData(string AnnouncementID)
{
var announcements = new AnnouncementResponse() { Announcement = new List<Announcement>() };
if (IsUserAuthenticated)
return RedirectToAction("Index", "Account");
announcements = _contentManager.Announcement();
var item = announcements.Announcement.Where(p => p.AnnouncementID == Convert.ToInt32(AnnouncementID)).FirstOrDefault();
announcements.Announcement.Remove(item);
ViewBag.NotificationCount = announcements.Announcement.Count;
return Json(new { success = true });
}
But the Notification Bell in Layout doesnt update with the viewbag value or even when the model is assigned to it.
Please provide a solution for this.
You're only updating one of the two notifications. First you find a containing element:
var $notificaitonContainer = $(".notifications");
The HTML in the question doesn't have any elements which match this, so I can't be more specific. But just based on the naming alone it sounds like you're assuming there's only one such container.
Regardless, you then choose exactly one element to update:
var $li = $notificaitonContainer.find("li[id=" + id + "]");
(This can't be more than one element, since id values need to be unique.)
So... On your page you have two "notification" elements. You're updating one of them. The solution, then, would be to also update the other one. However you identify that elements in the HTML (jQuery has many options for identifying an element or set of elements), your updatenotificationUI function simply needs to update both.
var xhrArgs = {
url: "../Person/GetAll",
handleAs: "json",
preventCache: true,
load: function (data, ioargs) {
var jsonString = dojo.toJson(data)
var dataStore = new dojo.store.Memory({ data:
dojo.fromJson(jsonString) });
var personCmb = dijit.byId('cmbSingers');
if (personCmb == null)
{
var cobox = new dijit.form.ComboBox({ id: "cmbSingers", name: "Name", store: dataStore, searchAttr: "Name" }, "cmbSingers");
cobox.startup();
}
function cmbSingers_OnSelected() {
alert(dijit.byId('cmbSingers').get('value')); **this return the Text, But I want to get Id of Select value**
}
For anyone looking for a solution to this in 2016+...
I ran into the same situation and found a way to get the value of selected options from Dojo ComboBox. Instead of just using .value or .get('value'), use .item.value:
dijit.byId('someComboBox').item.value
.item will return an Object like this for you to use:
Object {id: "1", value: "1", name: "One"}
To elaborate... say you define the options for your ComboBox by using a select like so:
<select dojoType="dijit.form.ComboBox" id="someComboBox" maxlength="30">
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Say you select the "One" option.
Calling dijit.byId('someComboBox').value will return "One",
but calling dijit.byId('someComboBox').item.value will return "1"
Mkay, json is like so?
{ identifier: 'Id', items: [ { Id: '1', name:'foo', age: 12 }, { Id: '2', name:'bar', age: 30 } ] }
And you have dijit.form.ComboBox in variable cobox, your dojo.data.ItemFileReadStore in variable store.
dojo.connect(cobox, "onChange", function() {
var val = this.get("value"),
id = "",
matcher = new RegExp("^" + val + "$");
dojo.some(store._arrayOfAllItems, function(item, idx) {
if(matcher.test(store.getValue(item, "name")) {
id = store.getValue(item, "Id");
return true; // breaks .some loop
}
});
});