I am developing an app which displays many information from a web-service query, the data-table fills the information correctly and it displays the style correctly too, but when I try to see the information in a mobile device the Data-table is looking very bad.
I am using $.Ajax method to fill the information.
JavaScript:
$.ajax({
type: 'POST',
url: '/enrollment.asmx/Searcher',
data: JSON.stringify(JsonObj),
contentType: "application/json; utf-8",
dataType: "json",
success: function (data) {
$("#loadingDiv").hide();//Show Loader
var html = " <table id=\"db\" class=\"table-hover dt-responsive nowrap table table-bordered\"><thead><tr><th data-priority='1'>Selection</th><th>City</th><th>Zip</th><th>Address</th><th>State</th><th>ESIID</th><th>Utility</th></tr></thead><tbody>";
for (var i = 0; i < data.d.length; i++) {
html = html + "<tr name='userinformation' onclick=\"rowSelected('" + data.d[i].SEnrollCity + data.d[i].SEnrollZip + data.d[i].SEnrollStreet + "');\" id='" + data.d[i].SEnrollCity + data.d[i].SEnrollZip + data.d[i].SEnrollStreet + "'><td><input type='radio' name='userinformation' value='#'></td></td><td id='" + data.d[i].SEnrollCity + data.d[i].SEnrollZip + data.d[i].SEnrollStreet + "/SEnrollCity'>" + data.d[i].SEnrollCity + "</td><td id='" + data.d[i].SEnrollCity + data.d[i].SEnrollZip + data.d[i].SEnrollStreet + "/SEnrollZip'>" + data.d[i].SEnrollZip + "</td><td id='" + data.d[i].SEnrollCity + data.d[i].SEnrollZip + data.d[i].SEnrollStreet + "/SEnrollStreet'>" + data.d[i].SEnrollStreet + "</td><td id='" + data.d[i].SEnrollCity + data.d[i].SEnrollZip + data.d[i].SEnrollStreet + "/SState'>" + data.d[i].SState + "</td><td id='" + data.d[i].SEnrollCity + data.d[i].SEnrollZip + data.d[i].SEnrollStreet + "/SEsiid'>" + data.d[i].SEsiid + "</td><td id='" + data.d[i].SEnrollCity + data.d[i].SEnrollZip + data.d[i].SEnrollStreet + "/SUtility'>" + data.d[i].SUtility + "</td></tr>";
_vDistributionServiceProviderID = data.d[i].SDistributionServiceProviderID;
_vStateCode = data.d[i].SStateCode;
}
console.log("Dis: " + _vDistributionServiceProviderID);
html = html + "</tbody></table>";
$("#dbResultTable").html(html);//We have the Append here
$("#lblCheck").show();
if ($('#db thead').length > 0) {
var table = $("#db").DataTable();
$(table).remove();
var table = $("#db").DataTable();
table.draw();
}
else {
var table = $("#db").DataTable();
table.draw();
}
$("#submit").show();
$("#lblSelection").show();
$("#lblSelectionInfo").show();
if (data.d.SError == "" || data.d.SError == null) {
//Write an error
}
else {
alert("Error 1");
$("#divResult").html(data.d.SError);
alert(JSON.stringify(data.d.SError));
}
},
error: function (e) {
//alert("Error 2");
alert("The error is: " + JSON.stringify(e));
$("#divResult").html(data.d.SError);
alert(JSON.stringify(data.d.SError));
}
});
Initialize the Data-table.
var table = $("#db").DataTable({
responsive: true,
columnDefs: [
{ responsivePriority: 1, targets: 0 },
{ responsivePriority: 2, targets: -1 }
]
});
Unfortunately in the responsive device it look awful. Could somebody please help me this issue?
Thanks in advance.
Your initial stage of data table
var table = $("#db").DataTable({
responsive: true,
columnDefs: [
{ responsivePriority: 1, targets: 0 },
{ responsivePriority: 2, targets: -1 }
]
});
Get the data using ajax:
$.ajax({
type: 'POST',
url: '/enrollment.asmx/Searcher',
data: JSON.stringify(JsonObj),
success:function(data){
var json=JSON.parse(data);
table.fnClearTable();
table.fnAddData(json);
}
});
Related
I just created ajax response but i dont know how to give input fields here.. im new bie to Ajax, can you suggest any way please..
$.ajax({
type: "GET",
url: 'get/' + vouchno,
// cache: false,
success: function(data) {
alert(data);
alert(JSON.stringify(data));
$('#vochDate').val(data.strvouchdt);
$('#cashbill').val(data.billtype);
$('#cashref').val(data.refno);
$('#cashAc').val(data.acctname);
$('#refdate').val(data.refdt);
$('#payacc_code').val(data.acctcode);
$('#cashAc').val(data.acctname);
$('#cashAc').val(data.acctname);
for (var i = 0; i < data.cashpayments.length; i++) {
$("#tab_logic ").append('<tr><td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].debit + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' + '</tr>');
}
},
failure: function(data) {
alert(data.responseText);
},
error: function(data) {
alert(data.responseText);
}
});
Completely a guess, you want text-fields in row columns with values prefilled in it:
$("#tab_logic").append(`<tr><td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].debit}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td></tr>`);
If you are talking about binding the data into input form from the response:
function populate(data) {
for (var i in data) {
if (typeof (data[i]) === 'object') {
//populate(data[i]);
} else {
$(
"input[type='text'][name='" + i + "']," +
" input[type='hidden'][name='" + i + "'], " +
"input[type='checkbox'][name='" + i + "'], " +
"select[name='" + i + "'], textarea[name='" + i + "']"
)
.val(data[i]);
$("input[type='radio'][name='" + i + "'][value='" + data[i] + "']").prop('checked', true);
if ($("input[name='" + i + "']").hasClass('datepicker')) {
$("input[name='" + i + "']").val($.datepicker.formatDate("dd-M-yy", new Date(data[i])));
}
if ($("input[name='" + i + "']").hasClass('financialValueFormat')) {
var formatedAmount = financialValFormat(data[i]);
$("input[name='" + i + "']").val(formatedAmount);
}
}
}
$('form').find('input[type="checkbox"]').each(
function () {
if ($(this).siblings('input[type="hidden"]').val() == "true" ||
$(this).siblings('input[type="hidden"]').val() == 1) {
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
}
}
);
}
You can define this function some where in your project which is available globally and then just call populate(response.data)
Please ignore the functions financialValFormat. This function is just used to format the value for money fields.
I have a dropdown list which is getting Accountoff data from database through ajax. Now I am selecting data from modal and giving the val to the dropdown list and triggering it change method manually. But its not working.
This is the code where I am giving the selected data from modal to dropdown list.
AccountOf = function (value) {
var lblBrandCode = $(value).closest('tr').find("#hdnCusCode").val();
var lblCusDesc = $(value).closest('tr').find('#lblCusDesc').val();
$("#AccountOfModal").modal("hide");
$("#ddlACof").val(lblBrandCode);
//document.getElementById("ddlACof").value = lblBrandCode;
$("#ddlACof").change();
}
here is the the code that invoke the above method.
$.ajax({
dataType: "json",
async: true,
type: 'GET',
url: '#Url.Content("~/BookingOrder/Select_CustomerDetailModal")',
success: function (data) {
if (data.Success == true) {
var item = JSON.parse(data.Response)
$("#AccountOfTable tbody tr").remove()
if (item.length > 0) {
$.each(item, function (value, item) {
var temp = '<tr id="DelChkListRow1' + (rowCount++) + '" data-tr-count="' + (dataCount++) + '" onclick="AccountOf(this)">' +
'<td>' + SNo++ + '</td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblCusCode" >' + item.CusCode + '</label><input type="hidden" id="hdnCusCode" value="' + item.CusCode + '"/></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblCusDesc">' + item.CusDesc + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblNIC">' + item.NIC + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblAddress">' + item.Address1 + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblPhone">' + item.Phone1 + '</label></td>' +
'</tr>';
$("#AccountOfTable tbody").append(temp);
});
}
}
},
complete: function () {
},
});
$( "#ddlACof" ).trigger( "change" );
I'm trying to filter table which is append using java script with cake php frame work .
and the following code is for adding this tables when i have click on add new magazine ,, but the problem is that , It's add double rows which has been added before . So i need to filter the added rows to delete the duplicated row.
/// function to show magazines data table
$('#add_researches_button').click(function () {
$("input[name='bstock_researchs_id[]']:checked").each(function (i) {
val[i] = $(this).val();
});
$.ajax({
type: "POST",
url: '../BstockIn/getResearchesIds/' + val,
dataType: "json",
success: function (data) {
$('#researches').css('display', 'block');
var res = $.parseJSON(data);
var CountResearches = 0;
jQuery.each(res, function (index, value) {
CountResearches++;
$("#researches").append("<tr><td>"
+ value.research_serial +
"</td><td>"
+ value.research_release_date +
"</td><td>"
+ value.research_release_hejry_date +
"</td><td>"
+ value.research_pages +
"</td><td>"
+ value.research_copies +
"</td></tr>"
);
});
/// function to show magazines data table
$('#add_researches_button').click(function() {
$("input[name='bstock_researchs_id[]']:checked").each(function(i) {
val[i] = $(this).val();
});
$.ajax({
type: "POST",
url: '../BstockIn/getResearchesIds/' + val,
dataType: "json",
success: function(data) {
$('#researches').css('display', 'block');
var res = $.parseJSON(data);
var CountResearches = 0;
jQuery.each(res, function(index, value) {
CountResearches++;
if ($("#researches tr[data-id='" + value.research_serial + "']").length == 0)
$("#researches").append("<tr data-id='" + value.research_serial + "'><td>" +
value.research_serial +
"</td><td>" +
value.research_release_date +
"</td><td>" +
value.research_release_hejry_date +
"</td><td>" +
value.research_pages +
"</td><td>" +
value.research_copies +
"</td></tr>"
);
});
How to set CRUD working in Kendo? Update and read is ok, but create not. This is my code for this part:
create: {
url: function (data) {
return $("#gatewayPath").data("value") + "odata/ods/ProcessProductionPerformanceMovements";
},
dataType: "json",
type: "POST",
beforeSend: function (x) {
var auth = $("#authenticationType").data("value") + " " + $("#authenticationToken").data("value");
x.setRequestHeader("Authorization", auth);
}
},
and in parameterMap I have:
if (operation === "create") {
return '{ "_Key": "' + data._Key +
'", "Comment": "' + data.Comment +
'","MovementType": "' + data.MovementType +
((data.Unit) ? '","_UnitKey": "' + data.Unit._Key: "") +
((data.Material) ? '","_MaterialKey": "' + data.Material._Key: "") +
'","MaterialLotID": "' + data.MaterialLotID +
'","Status": "' + data.Status +
'","Quantity": "' + data.Quantity +
'","Description": "' + data.Description +
'","_UnitKey": "' + data._UnitKey +
'","_ProdPerfHeaderKey": "' + data._ProdPerfHeaderKey +
'","StockType": "' + data.StockType +
'","StockIndicator": "' + data.StockIndicator +
'","SAPStorageLocation": "' + data.SAPStorageLocation +
'"}';
}
There is a create example here on telerik.com.
var dataSource = new kendo.data.DataSource({
transport: {
/* the other CRUD settings are ommitted for brevity */
create: function (e) {
// batch is disabled
// generate appropriate data item ID and save the new items to the original datasource
e.data.my_ID_field_name = 123;
// ...
// on success return the new data items with IDs
e.success(e.data);
// on failure
//e.error("XHR response", "status code", "error message");
}
} });
I have the following javascript code snippet, which defines the chat funtion, it should create a chat in a Sharepoint site.
However I get "TypeError: $.chat is not a function", does anyone know how I could fix this?
Edit: I get this error when I try calling this function:
$(document).ready(function() {
$.chat({
listguid: "{3A076D9D-362B-455A-8F19-831F6716B6F0}"
});
});
(function($) {
$.chat = function(options) {
$.chat.settings = $.extend({
listguid: '0',
divid: 'jQueryChatBox',
savecaption: 'Send',
clearcaption: 'Clear',
messagecolumn: 'Message'
},
options || {});
ChatBox = "<input type='text' size='50' id='" + $.chat.settings.divid + "textbox' name='" + $.chat.settings.divid + "textbox'/><br/><input type='submit' id='" + $.chat.settings.divid + "submitbutton' value='" + $.chat.settings.savecaption + "'/><input type='reset' value='" + $.chat.settings.clearcaption + "'/>";
$('#' + $.chat.settings.divid).html(ChatBox);
$('#' + $.chat.settings.divid + 'submitbutton').click(
function() {
if ($.trim($('#' + $.chat.settings.divid + 'textbox').val()) == "")
return false;
var soapEnv = "<?xml version=\"1.0\" encoding=\"utf-8\"?> <soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> <soap:Body> <UpdateListItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\"> <listName>" + $.chat.settings.listguid + "</listName> <updates> <Batch OnError=\"Continue\"> <Method ID=\"1\" Cmd=\"New\"> <Field Name=\"" + $.chat.settings.messagecolumn + "\">" + $('#' + $.chat.settings.divid + 'textbox').val() + "</Field> </Method> </Batch> </updates> </UpdateListItems> </soap:Body> </soap:Envelope>";
$.ajax({
url: L_Menu_BaseUrl + "/_vti_bin/lists.asmx",
beforeSend: function(xhr) {
xhr.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems")
},
type: "POST",
dataType: "xml",
data: soapEnv,
contentType: "text/xml; charset=utf-8"
});
$('#' + $.chat.settings.divid + 'textbox').val('');
return false;
})
}
})
(jQuery);
$(document).ready(function() {
$.livelistdata({
prompt: false,
interval: 100,
opacity: '0.5'
})
});