I have a view and tried to show it directly in a popup by clicking from a webgrid... I get the following error:
jquery-3.2.1.min.js:4 GET http://localhost:54751/Facturas/Save/4176?_=1534975761119 500 (Internal Server Error)
My JS code:
<script>
$(document).ready(function () {
var oTable = $('#myDatatable').DataTable({
"ajax": {
"url" : '/Facturas/GetEmployees',
"type" : "get",
"datatype" : "json"
},
"columns": [
{ "data": "id_docto", "autoWidth": true },
{ "data": "id_Proveedor", "autoWidth" : true},
{ "data": "Nombre_Archivo", "autoWidth": true },
{ "data": "Ruta_Docto", "autoWidth": true },
{ "data": "id_tipo_docto", "autoWidth": true },
{ "data": "Estatus", "autoWidth": true },
{ "data": "Fecha", "autoWidth": true },
{
"data": "id_Proveedor", "width": "50px", "render": function (data) {
return '<a class="popup" href="/Facturas/Save/' + data + '">Editar</a>';
}
},
{
"data": "EmployeeID", "width": "50px", "render": function (data) {
return '<a class="popup" href="/Facturas/Delete' + data + '">Borrar</a>';
}
}
]
})
$('.tablecontainer').on('click', 'a.popup', function (e) {
e.preventDefault();
OpenPopup($(this).attr('href'));
})
function OpenPopup(pageUrl) {
debugger;
var $pageContent = $('<div/>');
$pageContent.load(pageUrl, function () {
$('#popupForm', $pageContent).removeData('validator');
$('#popupForm', $pageContent).removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse('form');
});
$dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
.html($pageContent)
.dialog({
draggable : false,
autoOpen : false,
resizable : false,
model : true,
title:'Actualización de Datos',
height : 550,
width : 600,
close: function () {
$dialog.dialog('destroy').remove();
}
})
debugger;
$('.popupWindow').on('submit', '#popupForm', function (e) {
var url = $('#popupForm')[0].action;
$.ajax({
type : "POST",
url : url,
data: $('#popupForm').serialize(),
success: function (data) {
if (data.status) {
$dialog.dialog('close');
oTable.ajax.reload();
}
}
})
e.preventDefault();
})
$dialog.dialog('open');
}
})
</script>
My C# code:
[HttpGet]
public ActionResult Save(int id)
{
try
{
using (SiniestrosEntities dc = new SiniestrosEntities())
{
var v = dc.CAT_Doctos_Proveedores.Where(a => a.id_Proveedor == id).FirstOrDefault();
return View(v);
}
}
catch (Exception e)
{
return View("Login");
}
}
Does anyone have an idea why it does not return my view "Save" to my Popup?
Related
here is i have a datatable based table i have fetched a data from database and displayed using datatable but in this datatable i went to redirect to show for each row of datatable so how to add a route for show with parameter 1d for each row thanks and waiting a positive response!
here is my code
<script>
$(function() {
$("#start_date").datepicker({
"dateFormat": "yy-mm-dd"
});
$("#end_date").datepicker({
"dateFormat": "yy-mm-dd"
});
});
// Fetch records
function fetch(start_date, end_date,zone_id,status_id,sector_id) {
$.ajax({
url: "{{ route('ProjectFilterdate/records') }}",
type: "GEt",
data: {
start_date: start_date,
end_date: end_date,
zone_id:zone_id,
status_id:status_id,
sector_id:sector_id
},
dataType: "json",
success: function(data) {
// Datatables
var i = 1;
$('#records').DataTable({
"data": data.ptojects,
// buttons
"dom": "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
"buttons": [
'copy','excel', 'pdf', 'print'
],
// responsive
"responsive": true,
"columns": [{
"data": "id",
"render": function(data, type, row, meta) {
return i++;
}
},
{
"data": "code"
},
{
"data": "name"
},
{
"data": "proposal_date"
},
{
"data": "proposal_value"
},
{
"data": "contractor"
},
{
"data": "subcontractor"
},
{
render: function ( data, type, row) {
return 'test';
}
},
]
});
}
});
}
i am trying to make an a href route but i don't know how to add an id parameter
here is the link i am trying
{
render: function ( data, type, row) {
return 'test';
}
the place of 1 must be replaced by id for each row
This is how i did t :
return DataTables::of($data)->addIndexColumn()
->addColumn('project', function ($test) {
return $test->project->title;
})
->addColumn('action', function ($test) {
$result = $test->active ? 'btn-success' : 'btn-danger';
return '<a href="' . route('projectDetail', [
'id' => $test->id
]) . '">detail </a>
';
})
->rawColumns([
'action'
])
->make(true);
}
Im loading 100,000 rows of data from my php BackEnd using Ajax as follow:
First an ajax call get the number of rows , pages "chunks" and the total of records to load from a click event (I already try with 10K rows to 50K rows and everything works ok).
$('#btnObtenerData').on('click', (e) => {
$.ajax({
url: 'getData.php',
type: 'GET',
dataType: 'JSON',
data: {
"accion": "getConteo"
}
}).done((response) => {
totalPaginas = response.totalPaginas,
totalFilas = response.totalFilas;
console.log(totalPaginas, totalFilas);
if (totalPaginas > 0) {
cargarPaginas(totalFilas, totalPaginas);
}
})
});
Once the first call is done cargarPaginas is executed, this function contains the followed code.
function cargarPaginas(totalFilas, totalPaginas) {
//paginar(1,totalFilas,totalPaginas);
let arr = [];
let pages = totalPaginas;
for (var i = 0; i < totalPaginas; i++) {
console.log(totalPaginas);
arr.push({
page: i + 1,
rows: totalFilas,
pages: pages
});
}
var p = $.when();
arr.forEach(function(item, key) {
p = p.then(function() {
return paginar(item.page, item.rows, item.pages);
});
});
}
And getPagina y paginar run the followed code as well
function getPagina(numeroPagina) {
let pagina = $("#paginacion").find('a.activa');
$("#tbodyReporte").find("[data-pagina='" + numeroPagina + "']").css("display", "");
$("#tbodyReporte").children("tr[data-pagina!='" + numeroPagina + "']").css("display", "none");
$(pagina).trigger('click');
}
function paginar(paginaNumero = 1, totalFilas = 1000, totalPaginas = 0) {
return $.ajax({
url: 'getData.php',
type: 'GET',
dataType: 'JSON',
data: {
accion: "getData",
"numeroPagina": paginaNumero,
"numeroFilas": totalFilas
}
}).done((response) => {
console.log(response);
if (paginaNumero == 1) {
tabla = $('#gridReporte').DataTable({
data: response,
columns: [{
"data": "Factura"
},
{
"data": "Tipo de Servicio"
},
{
"data": "SERVICIO"
},
{
"data": "fecha de emision"
},
{
"data": "NContrato"
},
{
"data": "CLIENTE"
},
{
"data": "Tipo Pago"
},
{
"data": "CIUDAD"
},
{
"data": "COLONIA"
},
{
"data": "Oficial de Recuperacion"
},
{
"data": "MONEDA"
},
{
"data": "MORA"
},
{
"data": "Cargo por Servicio"
},
{
"data": "ISV"
},
{
"data": "Total Factura"
},
{
"data": "N Cliente"
},
{
"data": "Dia Mora"
},
{
"data": "NUMRECIBO"
},
{
"data": "Agente Mant Cartera"
},
{
"data": "Nombre Vendedor"
},
{
"data": "Clase Cliente"
},
{
"data": "Tipo Vendedor"
}
],
dom: 'Bfrtip',
buttons: [
'excelHtml5'
],
"language": idioma_spanol,
"pageLength": 500,
"columnDefs": [{
"targets": '_all',
"createdCell": function(td, cellData, rowData, row, col) {
$(td).css('padding', '1px');
$(td).css('margin', '0px');
}
}]
});
} else {
tabla.rows.add(response)
.draw();
}
})
}
Like I said when a load of 50K records or less is made everything goes well
But when I try to load more than 90K records the Browser Tab crash like this:
I would like to understand why is this happening? and How to fix it.
Thanks in advice
I am having trouble adding in a delete confirmation on my JQuery datatable. I have a on click method on my delete button which calls the confirmation script which works but, if I click cancel, the row gets deleted when it should only be deleted if "Ok" is clicked.
<script type="text/javascript">
var assetListVM;
$(function () {
assetListVM = {
dt: null,
init: function () {
dt = $('#file_list').DataTable({
"serverSide": true,
"processing": true,
"ajax": {
"url": "#Url.Action("GetFiles","AttachmentsUser")",
"data": function (d) {
d.s = $('input[type=search]').val();
}
},
"columns": [
{ "title": "FileName", "data": "file_name", "searchable": true },
{
"title": "Actions",
"data": "file_name",
"searchable": false,
"sortable": false,
"render": function (data, type, full, meta) {
return 'Download | Delete';
}
}
],
});
},
refresh: function () {
dt.ajax.reload();
}
}
$('body').on('keyup', 'input[type=search]', function () {
assetListVM.refresh();
});
// initialize the datatables
assetListVM.init();
});
</script>
<script>
function DeleteFunction() {
if (confirm('Are you sure you want to delete this user - have you removed all roles for this user?'))
return true;
else {
return false;
}
}
</script>
use return to cancel default browser behavior.
onclick="return DeleteFunction()"
I have created a jquery grid and loaded the json data into it.. And i have some radiobuttons on pop up.. based on that selection the json value is changed. For the first time , the json is loaded into gqgrid. but when i select other radio button the json value is changed but that new json is not loaded into jqgrid. The old json is showing.
I have tried ,
obj.datatype = "local";
obj.viewrecords = true;
obj.rowNum = 20;
obj.pager = "#jqGridPager";
obj.data = jsonValue;
obj.localReader = {repeatitems: true};
obj.rowList = [20,30,50];
obj.loadonce = true;
obj.colModel = [
{ "label": 'Id', "name": 'studentId', "width": "150" , "key" : true},
{ "label": 'No', "name": 'studentNo', "width": "150"},
{ "label": 'Name', "name": 'studentName', "width": "150"},
{ "label": 'Phone', "name": 'studentPhone', "width": "150"},
{ "label":'Email', "name": 'primaryContactEmail', "width": "150" },
{ "label":'Address', "name": 'studentAddress', "width": "150" }
];
obj.multiselect = true;
obj.navOptions = { reloadGridOptions: { fromServer: true } };
//console.log(obj)
$("#grid_json").jqGrid(obj).jqGrid('filterToolbar').navGrid('#jqGridPager',
{ edit: false, add: false, del: false, search: true, refresh: true, view: true, position: "left", cloneToTop: true },
{
editCaption: "The Edit Dialog",
recreateForm: true,
checkOnUpdate : true,
checkOnSubmit : true,
closeAfterEdit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dailog
{
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
{
multipleSearch: true
}
)
// add first custom button
/* $('#grid_json').navButtonAdd('#jqGridPager',
{
buttonicon: "ui-icon-mail-closed",
title: "Send Mail",
caption: "Send Mail",
position: "last",
// onClickButton: customButtonClicked
}); */
/// add second custom button
$('#grid_json').navButtonAdd('#jqGridPager',
{
buttonicon: "ui-icon-pencil",
title: "Edit",
caption: "Edit",
position: "last",
//onClickButton: customButtonClicked
});
Try this first clear the grid data then reset the data property of the grid options to your new json data.
var grid = $("#grid_json");
grid.jqGrid('clearGridData').jqGrid('setGridParam', {
data: new_data
}).trigger('reloadGrid', [{ page: 1 }]);
I am populating a JSTree view with ajax commands. My current JS code is as follows
$(document).ready(function() {
$("#navigation").jstree({
"json_data": {
"ajax": {
"url": function (node) {
var nodeId = "";
var url = "";
if (node == -1) {
url = "#Url.Action("BaseTreeItems", "Events")";
} else {
nodeId = node.attr('id');
url = "#Url.Action("EventTreeItems", "Events")" +"?selectedYear=" + nodeId;
}
return url;
},
"dataType": "text json",
"contentType": "application/json charset=utf-8",
"data": function(n) { return { id: n.attr ? n.attr("id") : 0 }; },
"success": function() {
}
}
},
"themes": {
"theme": "classic"
},
"plugins": ["themes", "json_data", "ui"]
});
});
I would like to eliminate the if statement from the "ajax" property and fill it with the JSON data that is coming from the server. The JSON data looks like this
[{"data":{"title":"2012","attr":{"href":"/Events/EventList?selectedYear=2012"}},"attr":{"id":"2012","selected":false,"ajax":"/Events/EventTreeItems?selectedYear=2012"},"children":null,"state":"closed"},.....]
How can I feed the "ajax" property from the json into the "ajax" property in the JSTree?
For future reference I fixed it by doing the following
.jstree({
"json_data": {
"ajax": {
"url": function (node) {
var url;
if (node == -1) {
url = "#Url.Action("BaseTreeItems", "Events")";
} else {
url = node.attr('ajax');
}
return url;
},
"dataType": "text json",
"contentType": "application/json charset=utf-8",
"data": function(n) { return { id: n.attr ? n.attr("id") : 0, ajax: n.attr ? n.attr("ajax") : 0 }; },
"success": function() {
}
}
},