We Keep Coding

html - show data from parent to modal in bootstrap

I am having a page and i am using the following code to show in title the surname & name(cname in the code).
html:
<div class="col-xs-4">
<!-- Title -->
<h3 id="cName"> </h3>
</div>
js:
$(document).ready(function() {
getCustomer(global_customer_id);
});
function getCustomer(id) {
$.ajax({
url: "api/customer.php?action=getCustomer",
type: "POST",
data: {
'customer_id': id
},
dataType: 'json',
success: function(result) { //
if (result.success === true) {
$('#cName').html(result.customer.surname + " " + result.customer.name);
}
}
});
}
Until here everything is fine.
On my page, i am having a button which load a modal.
I am trying to show cname in my modal on title too.
My modal title code with no result:
<h3 id="cName"> </h3>
Modal js(works fine for the datatable in modal):
function getCustomerAppointmentWork() {
$('#filter_appointment').modal('show');
setTimeout(function() {
if ($.fn.DataTable.isDataTable('#FilterAppointmentTable')) {
$('#FilterAppointmentTable').DataTable().destroy();
}
$('#FilterAppointmentTable').DataTable({
ajax: 'api/customer.php?action=getCustomerAppointmentWork&customer_id=' + global_customer_id,
processing: true,
serverSide: true,
ordering: false,
dom: '<"DataTableInfo"i><"DataTableFilter"f>rt',
scrollY: 520,
scroller: true,
initComplete: function(settings, json) {
$('.dataTables_scrollBody').css({
'overflow': 'hidden',
'overflow-y': 'auto'
});
},
columnDefs: [
{width: "67px", targets: 0},
{width: "22%", targets: 1},
{width: "6%", targets: 2}
],
});
}, 500);
}
How can i show cname in modal title?

You could use the shown method of the modal and load the data.
html:
<div class="col-xs-4">
<!-- Title -->
<h3 id="cNameModal"> </h3>
</div>
js:
$(document).ready(function() {
getCustomer(global_customer_id);
});
function getCustomer(id) {
$.ajax({
url: "api/customer.php?action=getCustomer",
type: "POST",
data: {
'customer_id': id
},
dataType: 'json',
success: function(result) { //
if (result.success === true) {
$('#cName').html(result.customer.surname + " " + result.customer.name);
$('#cNameModal').html(result.customer.surname + " " + result.customer.name);
}
}
});
}
$( "#filter_appointment" ).on('shown.bs.modal', function(){
getCustomer(global_customer_id);
});

wijgrid object not supported

I have an asp.net project which consists of a master page and content pages. One of my content pages has a table on it called table1. I am trying to configure a grid in JavaScript but receive the error:
JavaScript runtime error: Object doesn't support property or method 'wijgrid'
The line of code referenced by the error is located within the pageLoad function. The exact line looks like this:
$("#table1").wijgrid();
I created a blank web page with similar code that works. Can anyone shed any light on why this is not working?
<asp:Table ID="table1" runat="server">
</asp:Table>
This is my code which attempts to design and populate the grid:
<asp:Table ID="table1" runat="server">
</asp:Table>
$.ajax({
type: "post",
async: false,
url: "CICBatchTransfer.aspx/GetCICs",
data: "{'sNavCode':'" + $('#drpSiteSource').val() + "','sAreaCode':'" + $("#drpAreaSource").val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
cicdata = r.d;
cicdata = jQuery.parseJSON(cicdata)
$("#grdCICs").wijgrid({
showFilter: true,
allowPaging: false,
ensureColumnsPxWidth: true,
scrollMode: "vertical",
data: cicdata,
columnsAutogenerationMode: "none",
columns: [
{ dataKey: "CI_REFNO", headerText: "CI_REFNO", dataType: "number", visible: false },
{ dataKey: "CI_REFERENCE", headerText: "Reference", dataType: "string", width: 115 },
{ dataKey: "CI_DESCRIPTION", headerText: "Description", dataType: "string", width: 370 }
]
});
},
error: function (xhr, status, error) {
alert('GetCICs - ' + xhr.responseText);
}
});​

Jquery.Datatable.js is taking time to render the records

I have a MVC application and I am fetching 5000 records from the database and returns in the JSOn format format in the action and rendering a Jquery.DataTable.js version 1.9.0 grid. The application is returning the data with no delay but it is taking time to render in the grid. Below is the code
$.ajax({
url: "http://locationhost/Mycontroller/myacton", type: "Get", contentType: "application/json; charset=utf-8",
data: { 'param': param1, 'param2': param2, },
dataType: "json",
success: function (data) {
$('#DisableDiv').html("");
var items = '';
var rows = '';
$('#divGrid').DataTable().fnClearTable();
$('#divGrid').DataTable().fnDestroy();
if (data.length > 0) {
$.each(data, function (i, item) {
rows = "<tr>........records......</tr>"
$('#divGrid tbody').append(rows);
});
table = $('#divGrid').DataTable({
"aoColumnDefs": [
{
'bSortable': false,
'aTargets': [0, 8],
}],
"aoColumns": [{ "bSortable": false }, null, null, null, null, null, { "sType": "currency" }, null, { "bSortable": false }],
"bPaginate": true,
"bInfo": true,
"bFilter": false,
"bLengthChange": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 10
});
table.fnSort([[7, 'desc']]);
}
else {
$('#DisableDiv').html("No data available.");
$("#btnDownload").attr("href", "#");
}
}
},
error: function (data) {
$('#DisableDiv').html("");
}
});

Server-side processing is best because when you render a large no of data set records client side
it makes it slow if you want to see please follow below links in that case
http://datatables.net/usage/server-side
example (http://datatables.net/release-datatables/examples/data_sources/server_side.html).

How to get object value in jquery

I am using a croppie jquery plugin.All things going good.After resizing an image ,I am not able to get the dataurl from the promise object .Please help me in this.
Here is the screenshot of the data that I am getting on the click of button.
http://prntscr.com/awi9co
The Code is below
var basic = $('#divLoadLogo').croppie({
viewport: {
width: 150,
height: 50
},
enableOrientation: true
});
basic.croppie('bind', {
url: Url,
points: [77, 469, 280, 739],
});
$("#SaveResizeImage").click(function() {
var CanvasData = basic.croppie('result', 'canvas'); //This contains the promise object
$.ajax({
type: 'POST',
url: '/User/SaveResizedCanvasImage',
data: '{ "imageData" : "' + CanvasData + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function(data) {
if (data.success) {
alert('image is resized');
}
}
});
});

try with:
var basic = $('#divLoadLogo').croppie({
viewport: {
width: 150,
height: 50
},
enableOrientation: true
});
basic.croppie('bind', {
url: Url,
points: [77, 469, 280, 739],
});
$("#SaveResizeImage").click(function() {
basic.croppie('result', 'canvas').then(function(CanvasData){
$.ajax({
type: 'POST',
url: '/User/SaveResizedCanvasImage',
data: '{ "imageData" : "' + CanvasData + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function(data) {
if (data.success) {
alert('image is resized');
}
}
});
});
});

Change x-editable type on ajax request with datatables.net

Trying to change the .editable type form Text to Select2 when there is more than 1 option returned from server but when I try to change the type from Text to Select2 it still stays as Text
I have wrapped the editable JS in a function to be called on success, i can see the data attributes being changed but the editable doesn't.
I have tried to use the datatables update functuin to re-render the row but the rowCallback function isn't called even if i just pass in two or all params i.e.
oTable.fnUpdate(aData,nRow);
oTable.fnUpdate(aData,nRow,undefined,false,false);
I have tried to remove the event listener for editable $('td', nRow).eq(3).off() but that just removes the cell for some reason which is really strange.
function updateModifierCell(nRow,aData){
$('td' , nRow).eq(3)
.attr('title',aData.modifierString || '<i><small>No value</small></i>')
.attr('data-pk',aData.id)
.attr('data-name',aData.modifierID > 0 ? 'modifier_id' : 'modifier_name')
.attr('data-sname','modifier')
.attr('data-value',aData.modifierID)
.attr('data-type',aData.modifierID > 0 ? 'select' : 'text')
.editable({
mode: 'inline',
display: function(value){
if(aData.modifierID == null || aData.modifierID > 0){
return '';
}else{
return value;
}
},
ajaxOptions: {
type: "put",
dataType: "json",
success: function(data){
aData = setImportData(data);
//oTable.fnUpdate(aData,nRow,undefined,false,false);
updateModifierCell(nRow,aData);
},
error: function(){
log('Error sending import update.')
}
},
url: aData.url + '/' + aData.id
});
}
//Datatables init for reference
oTable = $target.find('#tableImport').dataTable({
"bDestroy": true,
"bRetrieve": true,
"fnRowCallback": function( nRow, aData, iDataIndex ) {
if(aData.status == null){
for(var colIndex = 0, colLength = nRow.cells.length; colIndex < colLength; colIndex++){
switch(colIndex){
//Spreadsheet Value
case 0:
//$('td' , nRow).addClass('focused');
break;
//Name
case 1:
$('td' , nRow).eq(colIndex)
.attr('title',aData.productString)
.attr('data-pk',aData.id)
.attr('data-name',aData.productOptions.length == 0 ? 'product_name' : 'product_id')
.attr('data-sname','product')
.attr('data-value',aData.productOptions.length == 0 ? aData.productString : aData.productID)
.attr('data-type', aData.productOptions.length == 0 ? 'text' : 'select2')
.editable({
mode: 'inline',
source: aData.productOptions,
ajaxOptions: {
type: "put",
dataType: "json",
display: function(value){
return value
},
success: function(data){
//aData.category = findObjectWith(data.product_matches,'id',data.product_id).product_category_desc;
aData = setImportData(data);
oTable.fnUpdate(aData,nRow,undefined,false,false);
},
error: function(){
log('Error sending import update.')
}
},
url: aData.url + '/' + aData.id
});
break;
//Modifier
case 3:
updateModifierCell(nRow,aData);
break;
//Price
case 4:
$('td' , nRow).eq(colIndex)
.attr('title','Edit Price')
.attr('data-pk',aData.id)
.attr('data-name','price')
.attr('data-type','text')
.editable({
mode: 'inline',
ajaxOptions: {
type: "put",
dataType: "json",
success: function(data){
aData = setImportData(data);
oTable.fnUpdate(aData,nRow,undefined,false,true);
},
error: function(){
log('Error sending import update.')
}
},
url: aData.url + '/' + aData.id
});
break;
//EPOS
case 5:
$('td' , nRow).eq(colIndex)
.attr('title','Edit EPOS ID')
.attr('data-pk',aData.id)
.attr('data-name','epos_id')
.attr('data-type','text')
.editable({
mode: 'inline',
ajaxOptions: {
type: "put",
dataType: "json",
success: function(data){
aData = setImportData(data);
oTable.fnUpdate(aData,nRow,undefined,false,true);
},
error: function(){
log('Error sending import update.')
}
},
url: aData.url + '/' + aData.id
});
break;
//Prep Time
case 6:
$('td' , nRow).eq(colIndex)
.attr('title','Edit Preperation Time')
.attr('data-pk',aData.id)
.attr('data-name','preparation_time')
.attr('data-type','text')
.editable({
mode: 'inline',
ajaxOptions: {
type: "put",
dataType: "json",
success: function(data){
aData = setImportData(data);
oTable.fnUpdate(aData,nRow,undefined,false,true);
},
error: function(){
log('Error sending import update.')
}
},
url: aData.url + '/' + aData.id
});
break;
}
}
// Set Tooltip for Title and Desc
$('.col-tooltip',nRow).each( function(){
$(this).tooltip({
delay: 0,
track: true,
fade: 250,
html: true,
content: function(){
return '<div class="text-center"><small>Spreadsheet Value</small><br/>' + $(this).attr('title') + '</div>';
}
});
});
},
"fnDrawCallback": function(){
},
"aaData": data,
"aoColumns": [
{ "mData": "spreadsheet" ,"sTitle":"Original Value" ,sClass: "center focused" ,sWidth: "80px" ,bSortable: true },
{ "mData": "product" ,"sTitle":"Product Name" ,sClass: "left col-tooltip" ,sWidth: "80px" ,bSortable: true },
{ "mData": "category" ,"sTitle":"Category" ,sClass: "center" ,sWidth: "80px" ,bSortable: true },
{ "mData": "modifier" ,"sTitle":"Modifier" ,sClass: "center col-tooltip" ,sWidth: "80px" ,bSortable: true },
{ "mData": "price" ,"sTitle":"Price" ,sClass: "center" ,sWidth: "20px" ,bSortable: true },
{ "mData": "epos" ,"sTitle":"EPOS" ,sClass: "center" ,sWidth: "20px" ,bSortable: true },
{ "mData": "preparation_time" ,"sTitle":"Prep Time" ,sClass: "center" ,sWidth: "20px" ,bSortable: true },
{ "mData": "buttons" ,"sTitle":"" ,sClass: "center" ,sWidth: "20px" ,bSortable: false }],
"aaSorting": [[ 0, 'asc' ]],
"bDeferRender": true,
"bProcessing": true,
"sPaginationType": "bootstrap",
"bSortable": true,
"bSort": true,
"sDom": 'Rfrp t<"pull-left"i><"pull-right"l>'
});