I have the following code which implements a Jquery data table in a .net core application. However the bootstrap theme is not visible. This view implements a layout page. I have checked the console in browser for any errors and cannot find any.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/css" src="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css"></script>
<script type="text/css" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"></script>
<script type="text/css" src="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.bootstrap4.min.css"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js">
</script>
<script>
$(function () {
$.ajax({
type: "POST",
url: "/ApplicationUsers/LoadData",
data: '{}',
contentType: "application/json; charset=utf-8",
headers: { 'Access-Control-Allow-Origin': '*' },
dataType: "json",
success: function (response) {
OnSuccess(response);
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
// INITIALIZATION OF DATATABLES
// =======================================================
function OnSuccess(response) {
console.log(response);
$.noConflict();
$('#datatable').DataTable(
{
fixedHeader: true,
paging: true,
scrollX: false,
lengthChange: true,
searching: false,
ordering: true,
data: response.data.result,
columns: [
{ 'data': '', "defaultContent": "", },
{ 'data': 'userID', "defaultContent": "", },
{ 'data': 'name', "defaultContent": "", },
{ 'data': 'userName', "defaultContent": "", },
{ 'data': 'emailAddress', "defaultContent": "", }]
});
};
</script>
There are some errors in your code.
The type="text/css" should be in <link>, and you reference a incorrect dataTable css. Refer to the following code.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link type="text/css" src="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css"></link>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
Remove the ; at the end of the method OnSuccess.
Related
I'm trying to implement datatables to my MVC ASP.NET Core with MySql project so i followed a step-by-step tutorial but i can't fix this error:
" DataTables warning: table id=tblCustomers - Requested unknown parameter 'CustomerID' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4 "
Here's my HTML View page:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<div style="width: 500px">
<table id="tblCustomers" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse">
<thead>
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
function OnSuccess(response) {
$("#tblCustomers").DataTable(
{
bLengthChange: true,
lengthMenu: [[5, 10, -1], [5, 10, "All"]],
bFilter: true,
bSort: true,
bPaginate: true,
data: response,
columns: [{ 'data': 'CustomerID' },
{ 'data': 'ContactName' },
{ 'data': 'City' },
{ 'data': 'Country' }]
});
};
</script>
</body>
</html>
and here is my Controller:
public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult AjaxMethod()
{
var customers = Context.Customers.ToList();
return Json(JsonConvert.SerializeObject(customers));
}
}
My AjaxMethod is returning:
Newtonsoft.Json.JsonConvert.SerializeObject returned "[{"CustomerID":1,"ContactName":"Lucas","City":"Jundiai","Country":"Brasil"},{"CustomerID":2,"ContactName":"Vitoria","City":"Jundiai","Country":"Brasil"},{"CustomerID":3,"ContactName":"Soutto","City":"Jundiai","Country":"Brasil"}]" string
First you need to change your AjaxMethod to :
[HttpPost]
public IActionResult AjaxMethod()
{
var customers = Context.Customers.ToList();
return Json(customers);
}
Then in your OnSuccess function, change it to:
function OnSuccess(response) {
$("#tblCustomers").DataTable(
{
bLengthChange: true,
lengthMenu: [[5, 10, -1], [5, 10, "All"]],
bFilter: true,
bSort: true,
bPaginate: true,
data: response,
columns: [{ 'data': 'customerID' },
{ 'data': 'contactName' },
{ 'data': 'city' },
{ 'data': 'country' }]
});
The columns's first letter needs to be lowercase.
Test result:
I have an ajax call that seems to be working fine on another page, however when i call it on this page it doesnt work.
CSHTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Script/jquery-1.12.2.min.js"></script>
<script src="~/Script/moment.js"></script>
<script type="text/javascript">
function qs(key) {
key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
return match && decodeURIComponent(match[1].replace(/\+/g, " "));
}
function initialiseForms() {
$.ajax({
type: 'POST',
url:'#Url.Action("Index", "Home")',
contentType: 'application/json; charset=utf-8',
error: function (response) { alert(JSON.stringify(response)); }
}).success(function (response) {
alert(JSON.stringify(response));
});
}
</script>
</head>
<body onload="initialiseForms()">
<h1 id="titleText"></h1>
<form id="evolveFormsForm" method="post" target="_self" action="Test">
<input type="hidden" id="formPackEventData" name="formPackEventData" value="" />
<input type="hidden" id="selectedTemplateCodes" name="selectedTemplateCodes" value="" />
<input type="hidden" name="logonMethod" value="automatic" />
</form>
</body>
</html>
Controller
public ActionResult Index()
{
return Json(new { success = true, rtn = "TEST" }, JsonRequestBehavior.AllowGet);
}
This alert(JSON.stringify(response)); works in the response but the breakpoint is not hit and the alert just displays an empty string.
Cheers
Shouldn't your ajax be like this?
$.ajax({
type: 'POST',
url:'#Url.Action("Index", "Home")',
contentType: 'application/json; charset=utf-8',
error: function (response)
{
alert(JSON.stringify(response));
},
success(function (response)
{
alert(JSON.stringify(response));
}
})
instead of
$.ajax({
type: 'POST',
url:'#Url.Action("Index", "Home")',
contentType: 'application/json; charset=utf-8',
error: function (response) { alert(JSON.stringify(response)); }
}).success(function (response) {
alert(JSON.stringify(response));
});
I feel like you have the success outside of the actual ajax as well as having an extra )
EDIT: An easy way for us to help you would be if you add a debugger; into the function itself and tell us if it throws an error in Google DevTools
Here at below code, the action method which is specified in the URL is not being called at all. can any one help me..?
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function getData() {
$('#list').jqGrid({
url: '/Home/gridData/', // here it is not calling
datatype: 'json',
contentType: "application/json; charset-utf-8",
// ...
});
}
Below one is action method:
public JsonResult gridData()
{
practiceEntities pt = new practiceEntities();
var jsonData = pt.tbl_dept.ToList();
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Make a call like this. Remove the back slash (/) from the front and back of URL and there is no need of charset-utf-8
$('#list').jqGrid({
url: 'Home/gridData', // here it is not calling
datatype: 'json',
contentType: "application/json",
...........
..........
});
I have this:
Index.cshtml:
<script src="#Url.Content("~/Scripts/jquery-1.3.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.7.2.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/fullcalendar.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/jquery-ui-1.7.2.custom.css")" rel="stylesheet" type="text/css" />
<div id="calendar"></div>
<script type="text/javascript">
$(document).ready(function () {
$('#calendar').fullCalendar({
theme: true,
header: {
left: '',
center: '',
right: ''
},
defaultView: 'agendaDay',
editable: false,
events: "/Calendar/GetEvents/"
});
});
//Set up the date picker and wire it's onSelect function
//to the FullCalendar plugin.
$("#datepicker").datepicker({
inline: true,
onSelect: function (dateText, inst) {
var d = new Date(dateText);
$('#calendar').fullCalendar('gotoDate', d);
}
});
//Set some defaults for the fullCalendar, including the URL to
//get the data from...
$('#calendar').fullCalendar(
{
theme: true,
defaultView: "basicWeek",
firstDay: 1,
events: "/Schedule/GetCalendar/"
});
</script>
<style scoped>
</style>
AgendaController:
public class AgendaController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
return View();
}
private long ToUnixTimespan(DateTime date)
{
TimeSpan tspan = date.ToUniversalTime().Subtract(
new DateTime(1970, 1, 1, 0, 0, 0));
return (long)Math.Truncate(tspan.TotalSeconds);
}
}
I am trying to install the free FullCalender Ajax plugin: http://fullcalendar.io/
But if I run the application and go to:http://localhost:41787/Agenda nothing is displayed. I put the <div id="calendar"></div> in the Index view file. But nothing happens. I don't see the Calendar.
And I put the scripts in the BundleConfig:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/fullcalendar.css",
"~/Content/fullcalendar.print.css"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/fullcalendar.js" ));
but I dont understand why I get the 404 not found error
ok, the scripts are running now correctly, but still dont see anything if I go to:
http://localhost:41787/Calendar
Request URL:http://localhost:41787/Scripts/fullcalendar.js
Request Method:GET
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4,nb;q=0.2
Cache-Control:no-cache
Connection:keep-alive
oke, I have it now like this:
<script type="text/javascript" src="~/Scripts/fullcalendar.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("hallo");
});
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
defaultDate: 'new Date()',
editable: true,
events:
[
{
title: 'Bi-weekly Meeting',
start: '2014-07-09',
color: 'red'
},
{
title: 'Tournament',
start: '2014-07-07',
end: '2014-07-10',
color: 'darkorange'
},
{
title: 'Test Event',
url: 'http://google.com/',
start: '2014-07-28'
}
]
});
So I see the Hallo message if I load the page, but by this line: $('#calendar').fullCalendar({
it says:
Uncaught TypeError: undefined is not a function Index:141
(anonymous function)
oh, oke, I triied like this:
$(document).ready(function () {
$("#calendar").fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
defaultDate: 'new Date()',
editable: true,
events:
[
{
title: 'Bi-weekly Meeting',
start: '2014-07-09',
color: 'red'
},
{
title: 'Tournament',
start: '2014-07-07',
end: '2014-07-10',
color: 'darkorange'
},
{
title: 'Test Event',
url: 'http://google.com/',
start: '2014-07-28'
}
]
});
and now it works :)
});
How would I run a method in backend to send emails when I have a jquery dialogue with yes and no button as following :
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
});
$(".confirmLink").click(function (e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons: {
"Yes": function () {
$(this).dialog("close"),
SendEmail(),
window.location.href = targetUrl;
},
"No": function () {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
</script>
<a class="confirmLink" href="emailsend.aspx"></a>
<div id="dialog" title="Confirmation Required">
<p>
Do you want to send an email?</p>
</div>
You would have to communicate this with the back end via ajax, the backend would then send the email; a little like this:
function SendEmail(email, content)
{
var data = "email=" + escape(email) + "&content=" + escape(content);
$.ajax({
url: "sendemail.asp",
type: 'POST',
data: data,
success: function(data){
alert("Hurray");
},
error: function() {
alert("Oh noes! It went wrong");
}
});
}