Redisplay of DataTable causes an error
Redisplay of DataTable causes an error
Glyndwr
Posts: 128Questions: 35Answers: 1
I had an earlier post trying to get DataTables to work for a different page. This was eventually solved. I now want to re-display a page when a button is selected. When the page is initially displayed archived events are not displayed. If the user clicks on the "Archived Hidden" button then the name changes to "Archived Shown" all activities (including archived) are retrieved and displayed. The initial display works fine; however, when I re-display the page I get the error:
Uncaught TypeError: $(...).DataTable is not a function
at displayActivities (e1ActivitySelect-ajax.js:13)
at HTMLAnchorElement.<anonymous> (e1ActivitySelect-ajax.js:80)
at HTMLAnchorElement.dispatch (jquery.min.js:3)
at HTMLAnchorElement.r.handle (jquery.min.js:3)
displayActivities @ e1ActivitySelect-ajax.js:13
(anonymous) @ e1ActivitySelect-ajax.js:80
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3
The ajax is:
$(document).ready(function(){
$("#includedContent").load("Menu.html");
$('[data-toggle="tooltip"]').tooltip();
displayActivities();
}); // end document.ready
function displayActivities() {
$('#ajaxGetUserServletResponse1').text('');
var activityTable = $('#activityTable').DataTable( {
"info": false,
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
columns: [
{data: 'adActivityID'},
{data: 'adActivityName'},
{data: 'adStartDate'},
{data: 'adEndDate'},
{
data: null,
className: "center",
defaultContent: '<a href="" class="editor_edit">Update</a> / <a href="" class="editor_copy">Copy</a> / <a href="" class="editor_list">View Participants</a>'
}
]
} );
var dataToBeSent = {
ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
ssAccountID : sessionStorage.getItem('ssAccountID'),
ssArchived : sessionStorage.getItem('ssArchived'),
};
//Joined
$.ajax({
url : 'E1ActivitySelectView', // Your Servlet mapping or JSP(not suggested)
data : dataToBeSent,
type : 'POST',
})
.fail (function(jqXHR, textStatus, errorThrown) {
//alert(jqXHR.responseText);
if(jqXHR.responseText.includes('No Activities')){
$('#ajaxGetUserServletResponse1').text('No Activities.');
}else{
if(jqXHR.responseText.includes('Invalid user')){
$('#ajaxGetUserServletResponse1').text('Invalid user.');
}else{
$('#ajaxGetUserServletResponse1').text('Error getting activities.');
}
}
$("#startDate").focus();
})
.done(function(responseJson1a){
// JSON response to populate the activities table
dataType: "json";
// alert(JSON.stringify(responseJson1a));
// Result of alert is:
// [{"adId":"2","grpId":"2","adActivityID":"2","adActivityName":"Visit Ryde Fire Station","adStartDate":"2017-05-24","adEndDate":"2017-05-24"}]
activityTable.clear();
activityTable.rows.add(responseJson1a).draw();
})
}
$('#archivedHidden').click(function(){
if($(this).text().trim() == 'Archived Hidden' ){
$(this).text('Archived Shown');
sessionStorage.setItem('ssArchived', "Shown");
$('#img-container').empty();
}else{
$(this).text('Archived Hidden');
sessionStorage.setItem('ssArchived', "Hidden");
$('#img-container').empty();
}
displayActivities();
});
$('#addActivity').click(function(){
window.location = "E1ActivityCreate.html";
});
This discussion has been closed.
Replies
The HTML is:
You are loading jQuery at least twice on the page - possibly a third time if it is in the
e1ActivitySelect-ajax.jsfile. Load jQuery only once.Allan
Hi Allan,
Thank you very much for your reply. The line e1ActivitySelect-ajax.js is the name of the ajax module I load as per the code above. I have update the html to ensure I am not loading jQuery more than once. I am not a programmer and am doing this for my Scout Group so please bear with my lack of knowledge. The new html is:
I don't immediately see what is going wrong there I'm afraid. Can you give me a link to a page showing the issue so I can help to debug it. If you don't want to make the link public, send me a PM by clicking my forum user name above and then "Send message".
Allan