We Keep Coding

How do I call Datatables draw() method in Ajax?

I am trying to implement datatables draw() method in my Django application using AJAX. I have implemented both datatables and AJAX, which are working fine. However, I am facing a lot of challenges anytime I create a new object and call the draw() method so that datatables can refresh the table and show the newly created data the proper way. If I add the draw() method, the table does not get populated at all except I refresh the page.
main.js
//datatables
$(document).ready(function() {
$('table').on('click', ".dropdownDatatableButton" ,function() {
$( this ).toggleClass( "active");
});
function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
};
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
var table = $('#boardsTable').DataTable({
"autoWidth": false,
"info": false,
"lengthChange": false,
"processing": true,
"hover": true,
"serverMethod": 'post',
"searching": true,
"ajax": "/boards/api/data/?format=datatables",
"pagingType": "full_numbers",
"order": [[ 0, "asc" ]],
language: {
search: "",
"zeroRecords": '<img class=' + '"dataTables-error-image"' + 'src=' + "'/static/media/images/empty-search.jpg'"
+ '/>' + '<p class=' + '"dataTables-error-text"' + '>'
+ 'No boards were found that match your search' + '<p/>',
"loadingRecords": '<div class="spinner-border m-5" role="status">'
+ '<span class="sr-only d-block">Loading...</span> </div>'
+ '<p class="d-block text-center mt-3">Pulling board information...' + '</p>',
"processing": '<p class="d-block text-center datatables-processing-text">Please wait...' + '</p>',
"emptyTable": '<img class=' + '"dataTables-error-image"' + 'src=' + "'/static/media/images/new.jpg'"
+ '/>' + '<p class=' + '"dataTables-error-text font-weight-bold"' + '>'
+ 'No boards to show right now' + '<p/>'
+ '<p class=' + '"dataTables-empty-table-description"' + '>'
+ 'When you start working on recruitment campaigns, we’ll list all your boards here.'
+ '<p/>'
+ '<a class="dataTables-error-create-btn show-only-on-mobile" data-bs-toggle="modal"'
+ 'data-bs-target="#createBoardModal" data-bs-backdrop="static"'
+ 'data-bs-keyboard="false">' + 'Create a board' + '<a/>',
},
initComplete : function() {
$("#boardsTable_filter").detach().appendTo('.filter-form');
},
"drawCallback": function(settings) {
var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
pagination.toggle(this.api().page.info().pages > 1);
},
"columns": [
{data: null,
render: function ( data, type, row ) {
// show the board avatar and make merge it with `data: name`
return '<a class="datatable-board-link" href="' + data.url.toLowerCase() + '/manage' + '">'
+ '<img class="datatable-board-link-img" ' + 'src="' + data.avatar + '" ' + 'width="30px" '
+ 'height="30px" ' + 'alt="board avatar" />' + data.name + '</a>' ;
}
},
{data: null,
render: function ( data, type, row, meta ) {
// show the URL which are accessible to candidates
return '<a class="new-tab-board-link" href="' + data.lead.username + '/'
+ data.url + '" target="_blank">' + '/' + data.url
+ '<span class="material-icons">open_in_new</span>' + '</a>';
}
},
{ data: "lead",
render: function ( data, type, row, meta ) {
// show the lead recruiter avatar and combine the first and last names into a single table field
return '<a class="datatable-profile-link"' + 'href="'
+ 'http://127.0.0.1:8080/people/teams/' + data.id + '/' + data.username.toLowerCase() +'"'
+ 'target="_blank"' + '>' + '<img class="datatable-profile-link-img" ' + 'src="'+ data.avatar
+ '" ' + 'width="30px" ' + 'height="30px" ' + 'alt="' + data.name + ' ' + "'s avatar" + '"'
+ '/>' + data.name + '</a>';
},
},
{ data: null,
render: function ( data, type, row, meta ) {
return '<div class="dropdown datatables-dropdown" id="datatablesDropdown">'
+ '<span class="material-icons btn dropdownDatatableButton" id="dropdownDatatableButton"'
+ 'type="button"' + 'data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'
+ 'more_horiz</span>'
+ '<div class="dropdown-menu dropdown-menu-right datatables-dropdown-inner"'
+ ' aria-labelledby="dropdownDatatableButton">'
+ '<ul>'
+ '<li>Board settings</li>'
+ '<li><a class="btn btn-link btn-sm text-left">Delete</a></li>'
+ '</ul>'
+ '</div>'
+ '</div>';
},
},
],
"columnDefs": [
{"width": "10%", "targets": 3, "orderable": false},
],
});
table.columns().iterator('column', function (ctx, idx) {
$(table.column(idx).header()).append('<span class="sort-icon"/>');
});
// call the AJAX post method
$("#createBoardViaModalForm").on('submit', function (e) {
var spinner = $('#loader');
for ( instance in CKEDITOR.instances ) {
CKEDITOR.instances[instance].updateElement();
}
e.preventDefault();
spinner.show();
var serializedData = $(this).serialize();
$.ajax({
type: 'POST',
url: "post/ajax/board/",
data: serializedData,
success: function (data) {
if($('input[type="checkbox"]').prop("checked") == true){
//some codes
...
//take some serialised data and populate the table
// THIS IS WHERE THE ISSUE STARTS
var data = JSON.parse(data["data"]);
var fields = data[0]["fields"];
$("#boardsTable tbody").prepend(
`<tr>
<td>${fields["name"]||""}</td>
<td>${fields["url"]||""}</td>
<td>${fields["lead"]||""}</td>
</tr>`
);
// invoke datables draw() method to refresh the table
table.draw();
setTimeout(function(){
spinner.hide();
}, 1000);
console.log("Checkbox is checked. Modal will not be closed");
}
else if($('input[type="checkbox"]').prop("checked") == false){
// some codes
...
table.draw();
// more codes
}
},
error: function (jqXHR, textStatus, errorText) {
let data = jqXHR.responseJSON;
// more codes
console.log('There are some errors on the submitted form. Check the data errors array')
console.log(data)
}
})
});
//clear up the error logs when a user enters a value in the highlighted input field
});

I used the datatables reload API.
table = $("#boardsTable").DataTable().ajax.reload();

In your AJAX success function, you can draw it like so:
success: function(data) {
console.log(data);
if (data.d != null && data.d != undefined && data.d.results.length > 0) {
var table = $('#boardsTable').DataTable();
table.rows.add(data.d.results).draw();
}
}

Jquery keyup function doesn't work (using ajax, asp.net mvc)

I'm trying to build search filter with .keyup function. When i write one char in search textbox its works fine, but when i try to delete char, or add one more then it crushes and throws error "Internal server error". What im i doing wrong? I tried to parse given/taken data to json/html and it didn't help. Here is my script code:
<script>
$(document).ready(function () {
$("#Search").keyup(function () {
var searchby = $("#searchby").val();
var searchVal = $("#Search").val();
var setData = $("#dataSearching");
var catId = $("#categoryID").val();
setData.html("");
$.ajax({
async: true,
type: "get",
url: "/Default/GetSearchingData?categoryID=" + catId + "&searchBy=" + searchby + "&searchValue=" + searchVal,
dataType: "json",
contentType: "html",
success: function (result) {
if (result.length == 0) {
setData.append('<tr><td colspan="7" style="color: red;">Nie odnaleziono szukanej frazy</td></tr>');
} else {
for (var i in result) {
var Data = "<tr>" +
"<td>" + result[i].AlbumID + "</td>" +
"<td>" + result[i].AlbumName + "</td>" +
"<td>" + result[i].BandName + "</td>" +
"<td>" + result[i].AlbumCover + "</td>" +
"<td>" + result[i].Year + "</td>" +
"<td>" + parseFloat(result[i].Price) + "</td>" +
"<td>" +
"<button id=" + result[i].AlbumID + ' type="button" class="btn btn-primary myModals" data-toggle="modal" data-target="#exampleModal-' + result[i].AlbumID + '">' +
"Zobacz </button>" +
'<div class="modal fade" id="exampleModal-' + result[i].AlbumID + '" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-' + result[i].AlbumID + '" aria-hidden="true">' +
'<div class="modal-dialog" role="document">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<h5 class="modal-title" id="exampleModalLabel-' + result[i].AlbumID + '">' + result[i].AlbumName + ", " + result[i].Year + ", " + result[i].BandName + "</h5>" +
'<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
'<span aria-hidden="true">×</span> </button> </div>' +
'<div id="parent-' + result[i].AlbumID + '" class="modal-body">' +
"</div>" +
'<div class="modal-footer">' +
'<button id="closeModal" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>' +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</td>" +
"<td>"+
'<input id="categoryID" class="hidden" type="submit" value="' + result[i].CategoryID + "/>" +
"</td>"+
"</tr>";
setData.append(Data);
}
}
},
error: function (xhr, ajaxOptions, thrownError) {
//alert(xhr.responseText);
alert("Error!!: " + thrownError);
},
xhr: function () {
var xhr = new window.XMLHttpRequest();
return xhr;
}
});
});
});
</script>
And here is my action for searching in DefaultController:
public JsonResult GetSearchingData(int categoryID, string searchBy, string searchValue)
{
var albumsWithCategory = (from album in Album.GetAlbumList()
join category in Category.GetCategoriesList()
on album.CategoryID equals category.CategoryID
where (categoryID == album.CategoryID)
select album).ToList();
List<Album> newAlbumList;
if (searchBy == "AlbumName")
{
newAlbumList = albumsWithCategory.Where(x => x.AlbumName.StartsWith(searchValue, StringComparison.InvariantCultureIgnoreCase) || searchValue == null).ToList();
return Json(newAlbumList, JsonRequestBehavior.AllowGet);
}
else
{
newAlbumList = albumsWithCategory.Where(x => x.BandName.StartsWith(searchValue, StringComparison.InvariantCultureIgnoreCase) || searchValue == null).ToList();
return Json(newAlbumList, JsonRequestBehavior.AllowGet);
}
}
Here is my data model (if it would be useful to find issue):
public class BigViewModel
{
public IEnumerable<Album> Albums { get; set; }
public IEnumerable<Category> Categories { get; set; }
public IEnumerable<Order> Orders { get; set; }
public IEnumerable<Song> Songs { get; set; }
}
Image with error:
enter image description here

I believe that error is due formatting in query parameters. Instead of keyup i would try to use input event and instead of building query url i would use data property.
$("#Search").on("input", function () {
//...
$.ajax({
url: "/Default/GetSearchingData",
type: "get",
dataType: "json",
data: {
categoryID: Number(catId),
searchBy: searchBy,
searchValue: searchVal
},
success: function(result) {
if (result.length > 0)
{
var rows = response.map(item => {
return `
<tr>
<td>${item.AlbumID}</td>
<td>${item.AlbumName}</td>
<td>${item.BandName}</td>
<td>${item.AlbumCover}</td>
<td>...</td>
</tr>
`;
}).join("");
setData.html( `<table>${rows}</table>` );
} else {
setData.html( "<table><tr>Not found</tr></table>" );
}
},
error: function(xhr) { }
});
});

Converting the text into a clickable Link

I have a web application, which displays the result parsed from an XML file in the form of table using ajax. It is working good, but the thing is, the data in the XML file is mostly URLs but I am seeing the result in the form of text. I want that text to be made/converted into a clickable link so that it would make my life easier. Is there any code which would make it possible? If yes, please let me know where should I place it. That code is in ASPX page which also has the html code which is responsible for the style of my webpage..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="Scripts/jquery-3.2.1.js"></script>
<script language="javascript" type="text/javascript">
var CheckImage = "<img src='images/check.png' height='25' width='25'>";
var CrossImage = "<img src='images/cross.png' height='25' width='25'>";
var Fail = "<img src='images/fail.png' height='25' width='30'>";
setInterval(url, 100);
setInterval(redirects, 100);
function url()
{
$.ajax(
{
url: "/XMLFile.xml",
type: "GET",
dataType: "xml",
cache: false,
success: function (xml)
{
var tableContent1 = "<table border='1' cellspacing='0' cellpadding='5'>" +
"<tr>" +
"<th>SiteName</th>" +
"<th>URLType</th>" +
"<th>DNSStatus</th>" +
"<th>TargetStatus</th>" +
"<th>TTL</th>" +
"<th>SSL</th>" +
"<th>Force</th>" +
"</tr>";
$(xml).find('ProdURL').each(function ()
{
tableContent1 += "<tr>" +
"<td>" + $(this).attr('ProdHost') + "</td>" +
"<td>" + $(this).attr('URLType') + "</td>" +
"<td>" + ($(this).attr('DNSStatus') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + ($(this).attr('TargetStatus') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + $(this).attr('TTL') + "</td>" +
"<td>" + ($(this).attr('SSL') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + $(this).attr('Force') + "</td>" +
"</tr>";
});
tableContent1 += "</table>";
$("#UpdatePanel").html(tableContent1)
getdata(tableContent1);
}
});
}
function redirects()
{
//this ajax code parses the information from XML file and displays it on the table
$.ajax(
{
//If the name of the XML file is changed, make sure to update that in the url:
url: "/XMLFile.xml",
type: "GET",
dataType: "xml",
contentType:"url",
cache: false,
success: function (xml)
{
var tableContent2 = "<table border='5' cellspacing='1' cellpadding='10'>" +
"<tr>" +
"<th>URL</th>" +
"<th>Target</th>" +
"<th>Status</th>" +
"</tr>";
$(xml).find('Redirect').each(function ()
{
tableContent2 += "<tr>" +
"<td>" + $(this).attr('URL')+ "</td>" +
"<td>" + $(this).attr('Target') + "</td>" +
"<td>" + ($(this).attr('Status') == "Fail" ? Fail : CheckImage && $(this).attr('Status') == "OK" ? CheckImage : CrossImage) + "</td>" +
"</tr>";
});
tableContent2 += "</table>";
$("#UpdatePanel1").html(tableContent2)
getdata(tableContent2);
}
});
}

Here is a more complete example to show you. This is adding a anchor tag with the URL inside your table when you are creating your <td> in the loop.
let tableContent2 = "";
$("div").each(function() {
tableContent2 += "<tr>" +
"<td> <a href='" + $(this).attr('URL') + "'>" + $(this).attr('URL') + "</a></td>" +
"<td>" + $(this).attr('Target') + "</td>" +
"<td>" + $(this).attr('Status') + "</td>" +
"</tr>"
})
$("#UpdatePanel1").html(tableContent2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- this div is just for this example -->
<div URL="https://example.com" Target="I am a target" Status="OK"></div>
<table>
<tbody id="UpdatePanel1">
</tbody>
</table>

Rebuild actual FullCalendar eventClick Function

I have a fullcalendar calendar where the click-events having sweet-alert 2 popups in the functions. The pop up boxes have multiple drop downs that are built using sweet-alert HTML functionality. Here's an example of the code,
eventClick: function (calEvent, jsEvent, view, date) {
var clickValue = calEvent.description;
if (clickValue != 'OWEDVALUE') {
var btn = "button";
drop = drop.replace("select-style-purple", "select-style-green");
options = options.replace("select-style-purple", "select-style-green");
var title = calEvent.title.replace("\n", "<br />");
swal({
title: moment(calEvent.start).format("MM/DD/YYYY"),
type: 'info',
inputClass: 'select-style-green',
inputValue: calEvent.teachNum,
html: title + '<br />' +
'Notes: ' + calEvent.description + '<br /><br />Select A New Teacher: <br /><br />' + options + '<p></p>Select A New Service: <br /><br />' + drop +
'<br /><br /><div style="border:2px solid green;" >Update Hours: ' +
'<input type="text" autofocus id="newHours" style="display:block !important;" class="sweet-alert-input"/>' +
'<input type="hidden" id="oldHours" value="' + calEvent.hours + '" /></div>' +
'<button type="' + btn + '" id="btnA" value="' + calEvent.id + '" style="background-color: #D46752 !important;" class="sweet-alert2-button">Delete Record</button> ' +
'<button type="' + btn + '" id="btnB" value="' + calEvent.id + '" class="sweet-alert2-button">Update Record</button> ' +
'<button type="' + btn + '" id="btnC" style="background-color: #B9B9B9 !important;" class="sweet-alert2-button">Cancel</button>',
showConfirmButton: false
});
$(this).css('border-color', 'red');
}
This is an example of one of the drop down boxes built in a javascript var.
options = '<select id="teacherDrop" class="select-style-green">';
for (var i = 0; i < record_array.length; i++) {
options += '<option value="' + record_array[i].teachNum + '" ';
if (record_array[i].teachName == data[0].teacher)
options = options + ' selected="selected" >' + record_array[i].teachName + 'TEST</option>';
else
options = options + '>' + record_array[i].teachName + 'TEST</option>';
}options += '</select>';
What I would like to do is to rebuild the drop downs(updating the selected value) after every click-event ajax call, so I need to rebuild the actual eventClick functions not the eventSources. I have tried multiple things to no avail.
Here is the function that gets called when one of the submit buttons gets pressed from the Sweet-Alert.
$(document).on('click', "#btnB", function () {
if ($.isNumeric($("#newHours").val())) {
var qString;
qString = "id=" + this.value;
qString += "&teacherId=" + $("#teacherDrop").val();
qString += "&hours=" + $("#newHours").val();
qString += "&service=" + $("#serviceDrop").val();
$.ajax({
type: "POST",
url: "_data_ManageHomebound_Students.aspx?qt=updateStudentRecord",
data: qString,
async: false,
success: function (data) {
data = JSON.parse(data);
swal.close();
$('#calendar').fullCalendar('removeEvents', data[0].id);
$("#calendar").fullCalendar('renderEvent', {
title: "Service Type: " + data[0].serviceType + "\nTeacher: " + data[0].teacher + "\nHours: " + $("#newHours").val(),
id: data[0].id,
start: data[0].start,
end: data[0].start,
allDay: data[0].allDay,
description: data[0].description,
teacher: data[0].teacher,
homeBoundPaidID: data[0].homeBoundPaidID,
teachNum: data[0].teachNum,
serviceType: data[0].serviceType,
color: 'green',
textColor: 'black'
}, false);
$('#ant').addClass('animated zoomInDown').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass('animated zoomInDown');
});
//Here I'm going to rebuild the service type drop down and try to recreate all click events.
var options;
options = '<select id="teacherDrop" class="select-style-green">';
for (var i = 0; i < record_array.length; i++) {
options += '<option value="' + record_array[i].teachNum + '" ';
if (record_array[i].teachName == data[0].teacher)
options = options + ' selected="selected" >' + record_array[i].teachName + 'REBUILT</option>';
else
options = options + '>' + record_array[i].teachName + 'REBUILT</option>';
}
options += '</select>';
var temp = $("#hoursGiven").val();
if ($("#newHours").val() >= $("#oldHours").val()) {
temp = parseFloat(temp) + (parseFloat($("#newHours").val()) - parseFloat($("#oldHours").val()));
} else {
temp = parseFloat(temp) - (parseFloat($("#oldHours").val()) - parseFloat($("#newHours").val()));
}
$("#hoursGiven").val("");
$("#hoursGiven").val(temp);
$("#hoursOwed").val(parseFloat($("#totHoursNeeded").val()) - parseFloat(temp))
}
});
} else {
sweetAlert({
title: "Oops!",
text: "Please Make Sure Pay Rate is Numeric. \nPlease fix form and try again.",
type: "error"
});
return false;
}
});
So after the Ajax is successful I rebuild the options var that holds the drop down information for Sweet-Alert. This is the point where I need all of the click-events to be rebuilt to use the updated code(options var). The purpose of this is I'm trying to get the drop downs to have a pre-selected value of the most recently used item(teacher, etc...).

Update div with items on AJAX request

I have div where I need to show some data
I have button. By button I show modal
Here is code of modal
<div class="modal fade" id="myModal" role="dialog" data-backdrop="false">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Создание вопроса</h4>
</div>
<div class="modal-body">
#Html.Partial("~/Views/Questions/CreateQuestion.cshtml")
</div>
</div>
</div>
Here is code of script
<script>
var myFormDialog = $("containerForPartialView").dialog(
{ autoOpen: false, modal: true });
$("myButtonForShowDialog").button().on("click", function () {
myFormDialog.dialog("open");
});
$('.click').on('click', function () {
$('.content').toggle();
});
var counter = 0;
$(document).ready(function () {
$('#save').click(function () {
save();
email_update();
});
});
function save()
{
$.ajax({
type: 'Post',
dataType: 'Json',
data: {
question1: $('#Question1').val(),
question2: $('#Question2').val(),
question3: $('#Question3').val(),
question4: $('#Question4').val(),
question5: $('#Question5').val(),
question6: $('#Question6').val(),
question7: $('#Question7').val(),
question8: $('#Question8').val(),
question9: $('#Question9').val(),
question10: $('#Question10').val(),
},
url: '#Url.Action("Index", "Questions")',
success: function (da) {
if (da.Result === "Success") {
window.location.href = da.RedirectUrl;
} else {
alert( 'Error'+ da.Message);
}
},
error: function (da) {
alert('Error');
}
});
}
Also I have script for saving and updating div
Here is code
<script>
$(document).ready(function () {
email_update();
});
function email_update() {
$.ajax({
url: '#Url.Action("QuestionsList", "Questions")',
contentType: 'application/json; charset=utf-8',
type: 'GET',
dataType: 'json',
processData: false,
success: function (result) {
var email = result;
var edit = '#Url.Content("~/Images/Edit.png")';
var delete_ = '#Url.Content("~/Images/Delete.png")';
// console.log(result[0].Name);
for (var i = 0; i <= email.length - 1; i++) {
var arrow = '#Url.Content("~/Images/plus_plus.png")';
var questionHtml = '<div class = "title" style="margin-top:15px;margin-left:15px;margin-bottom:10px;">'
+
'<img class="click" src="'
+ arrow
+ '">' +
'<span class="test">' +
'<input type="text" class="testclass" readonly value="' +
result[i].Quest + '">' +
'<a style="margin-left:25px;">' +
'<img src="' + edit + '"/>' +
'<img style="margin-left:10px;" src="' + delete_ + '"/>' +
'</div>' +
'<div class ="content" style="margin-left:60px; width: 80%; height: 100px; background: white;">' +
'<div style="width: 100%">' +
'<div style="float:left; width: 50%;">' +
'<b style="margin-left: 40px;">' + "Время на ответ" + '</b>' +
'<b>' + ":" + '</b>' +
'<span>' + "Время на подготовку" +'</span>'+
'</div>' +
'<div style="float:right; width: 50%;">' +
'<b>' + result[i].TimeForAnswer + '</b>' +
'<b>' + ":" + '</b>' +
'<b>' + result[i].TimeForReady + '</b>'+
'</div>' +
'</div>' +
'</div>';
$(".count").append(questionHtml);
}
}
});
}
|
It works well when page starts. But in modal it not works, I mean this code email_update(); .