How to stop my modal from appending new rows? - javascript

Table
<table id="fisicHostsTable">
<tr class="row">
<th class="tableHeader">Nombre</th>
<th class="tableHeader">IP</th>
<th class="tableHeaders">Sistema Operativo</th>
<th class="tableHeaders">Notas</th>
</tr>
<th:block th:each="fh : ${datacenterFisicHosts}">
<div>
<tr class="row">
<td id="fisicHostName" th:text="${fh.name}"></td>
<td id="fisicHostIp" th:text="${fh.ip}"></td>
<td id="fisicHostOS" th:text="${fh.operatingSystem}"></td>
<td id="fisicHostNotes" th:text="${fh.notes}"></td>
<td><button class="credentialsButton" th:attr="data-fisic-host-id=${fh.id}">CREDENCIALES</button></td>
</tr>
</div>
</th:block>
</table>
Modal:
<!-- Modal -->
<div class="modal fade" id="credentialsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title">Credenciales</h5>
</div>
<div class="modal-body">
<table id="credentialsTable">
<tr class="row">
<th>Usuario</th>
<th>Clave</th>
<th>Notas</th>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
JS
$(".credentialsButton").click(function(){
var fisicHostId = $(this).data('fisic-host-id');
$.get( "/fisicHost/" + fisicHostId + "/credentials", data => {
console.log(data);
for (i = 0; i < data.length; ++i) {
var fisicHost = data[i];
var new_row = document.createElement('tr');
new_row.className = "row fisichost";
var userCol = document.createElement('td');
userCol.textContent = fisicHost["user"];
new_row.append(userCol);
var passwordCol = document.createElement('td');
passwordCol.textContent = fisicHost["password"];
new_row.append(passwordCol);
var notesCol = document.createElement('td');
notesCol.textContent = fisicHost["notes"];
new_row.append(notesCol);
$("#credentialsTable").append(new_row);
}
$('#credentialsModal').modal('show');
$('#credentialsTable').remove(new_row);
}).fail(function(xhr, status, error) {
console.error(error);
alert('No se pudieron cargar las credenciales.');
});
});
The data array looks always like this:
the problem I have is that the credentials are repeating each time I click on the button. I want to show them once, not in a cicle but can't find the way to stop them from cycling !
I've added the remove(new_row) after the modal is showing but it's removing everything !
EDIT:
This is the modal:
I just want to show the first two rows cause there are two credentials I need to show, but as you can see, each time I open the modal the data is repeating itself ... i want to stop that repetition!

I would say, right before the loop for(i= etc, put:
$('#credentialsTable').empty();
Thus you remove all rows before adding.
So put this code just before the loop.

I think you are retrieving credentials and adding them to the table that you have in the modal. The problem is that once you close and open model, previous data is still there and new data is being added. To avoid such situation you need to listen to modal close event and once modal is closed remove added rows.
Something like this:
$('#credentialsModal').bind('hide', function () {
$('#credentialsModal tr.fisichost').remove();
});

You can use the jquery method .one instead of .on to only run a function the first time an event occurs.
$("button").one("click", function() {
console.log("ran only the once");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click me</button>

Related

Bootstrap Table Load Issues

I'm having challenges with updating my Bootstrap table using the load method. Even when I simplify the problem and try and update using a single record, nothing changes. I would eventually like to update the data set with the rowData, but I want to get the test_data working first.
Index Page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="mb-3">
<label for="sequence_input" class="form-label">Sequence Input</label>
<textarea class="form-control" id="sequence_input" rows="3"></textarea>
</div>
<button id="blastButton" type="button" onclick="blast_request();" class="btn btn-primary">Submit Blast Query</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">FASTA Validation</h5>
<button type="button" onclick="$('#exampleModal').modal('toggle')" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
There was an error with the FASTA validation. Please check your input and try again.
</div>
<div class="modal-footer">
<button onclick="$('#exampleModal').modal('toggle')" type="button" class="btn btn-secondary" data-dismiss="modal" data-target="exampleModal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
<!-- Start Table -->
<table
id="table"
class="table table-sm"
>
<thead>
<tr>
<th data-field="id">Hit ID</th>
<th data-field="def">Hit Definition</th>
<th data-field="acc">Hit Accession</th>
</tr>
</thead>
</table>
<!-- End Table -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.20.2/dist/bootstrap-table.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
My Script
/*
Function used courtesy of Oxford Protein Informatics Group
https://www.blopig.com/blog/2013/03/a-javascript-function-to-validate-fasta-sequences/
*/
function validateFasta(fasta) {
if (!fasta) { // check there is something first of all
return false;
}
// immediately remove trailing spaces
fasta = fasta.trim();
// split on newlines...
var lines = fasta.split('\n');
// check for header
if (fasta[0] == '>') {
// remove one line, starting at the first position
lines.splice(0, 1);
}
// join the array back into a single string without newlines and
// trailing or leading spaces
fasta = lines.join('').trim();
if (!fasta) { // is it empty whatever we collected ? re-check not efficient
return false;
}
// note that the empty string is caught above
// allow for Selenocysteine (U)
return /^[ACDEFGHIKLMNPQRSTUVWY\s]+$/i.test(fasta);
}
async function blast_request(){
let form_data = document.getElementById("sequence_input").value
let fasta_valid = validateFasta(form_data);
if (fasta_valid){
console.log('FASTA data validates')
try{
let response = await fetch(
'http://localhost:8000/', {
method: 'PUT',
headers: {"Content-type": "application/json"},
body: JSON.stringify({"formInput":form_data})
});
// get blast data
let blastData = await response.json();
console.log("data received", blastData);
// extract relevant fields
let rowData = getRowData(blastData)
console.log("row data ready", rowData);
// load data to table
// $('#table').bootstrapTable('load', rowData)
test_data = [{id:1, def:"definition1", acc:"acc1"}]
$('#table').bootstrapTable('load', test_data)
console.log("data loaded to table")
} catch (error){
console.log(error)
}
} else {
console.log("Input does not validate");
$('#exampleModal').modal('show')
}
}
function getRowData(input){
n = input['data'].length
data = input['data']
console.log(input)
rows = []
for (var i = 0; i<n; i++){
rows.push({
id: data[i]['Hit_id'],
def: data[i]['Hit_def'],
acc: data[i]['Hit_accession']
})
}
return rows
}

show particular data in pop up modal in vue.js

this is regarding Vue.js question
i'm trying to open bootstrap model form inside the Vue template
i use two vue template components,
this sub component call inside this competence and pass data from this to sub component
this component use for show particular (load one by one products) model data
so i need to show one by one products data on the model form (when product 1 show name 'Abc') like this
but i cant do this.. all implementation are done and working fine
but cant show the particular data on the model form
show it only first loop value (i have 3 products all load in the table,but when click edit button first product show correctly,but click 2nd product show first product data)
but when i call console.log function and view when open the model show particular data in the console, but not showing its on the model form
why it that
i put my code segment in the below
example-component
<tbody >
<tr div v-for="invoices in invoice">
<th class="invoice_name ">{{invoices.p_name}}</th>
<td class="unit">
<sub-com :pID=invoices.p_id :invoice=invoices :invoiceID=invoice_id></sub-com>
</td>
</tr>
</tbody>
sub-com
<template>
<div>
<div class="form-group">
Refund
</div>
<div class="col-md-6">
<div class="modal fade" id="refundModel" tabindex="-1" role="dialog" aria-labelledby="addNewLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form>
<div class="modal-body">
<div class="form-group">
<input v-model="form.name" type="text" name="name" placeholder="Name" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
this is sub.vue script segment
<script>
export default{
data(){
return{
form: {
name:''
}
}
},
props: {
pID: String,
invoiceID:String,
invoice:{},
}
methods: {
refundMethod(invoices){
this.form.name = invoices.p_name;
console.log(invoices.p_name);
$('#refundModel').modal('show');
}
}
There are a couple of issues that might clear things up.
First you need to add a key to your template v-for loop:
<tr v-for="invoices in invoice" :key="invoices.p_id">
Second you are using jquery to trigger the modal which could work but you will have to generate unique ids for each div:
<div :id="'refundModel_'+pID">
A more Vue way to do this is to use the bootstrap data-show attribute and link it to a Boolean modal property in your data:
<div :data-show="modal" :id="'refundModel_'+pID">
export default {
data(){
return{
modal : false,
form: {
name:''
}
}
},
props: {
pID: String,
invoiceID: String,
invoice: Object,
}
methods: {
refundMethod(invoices){
this.form.name = invoices.p_name;
console.log(invoices.p_name);
this.toggleModal()
}
toggleModal () {
this.modal = !this.modal
}
}
}

Angularjs: Able to log data but cannot display

I am attempting to create a form that upon clicking submit calls a function that will post to a php page (which runs a query), then displays those results on the page.
If I call said function in my controller on load, I get my expected result(data presented in html table in a modal). However if I call that function upon clicking submit. I can log the data result, but it does not display on my page.
$scope.report = {};
var url = "";
// calling our submit function.
$scope.submitForm = function() {
$http.post('url.php').success(function(data) {
// Stored the returned data into scope
$scope.names = data;
console.log(data);
$('#myModal').modal();
});
};
<button type = "button" class="btn btn-success" ng-click="submitForm()" >Submit Request</button>
<div class="modal fade" id="myModal" role="dialog" >
<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">Modal Header</h4>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered">
<tr>
<th>Name</th>
</tr>
<tr ng-repeat="name in names | filter:search_query">
<td><span>{{name.first}}</span></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Try adding a small $timeout before opening your modal (don't forget to inject $timeout to your controller):
$scope.submitForm = function() {
$http.post('url.php').success(function(data) {
// Stored the returned data into scope
$scope.names = data;
console.log(data);
$timeout(function () {
$('#myModal').modal();
},250);
});
};

How to get the id and name of an object on button click and display them in a modal in asp.net view

I have a strongly typed view in which I am looping over some objects from a database and dispaying them in a jumbobox with two buttons in it. When I click one of the buttons I have a modal popping up. I'd like to have somewhere in this modal the name and the id of the corresponding object, but I do not really know how to do this. I am a bit confused where to use c# and where javascript. I am a novice in this, obviously.
Can someone help?
This is the code I have so far. I don't have anything in relation to my question, except the code for the modal :
#model IEnumerable<eksp.Models.WorkRole>
#{
ViewBag.Title = "DisplayListOfRolesUser";
}
<div class="alert alert-warning alert-dismissable">You have exceeded the number of roles you can be focused on. You can 'de-focus' a role on this link.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var dataJSON;
$(".alert").hide();
//make the script run cuntinuosuly
$.ajax({
type: "POST",
url: '#Url.Action("checkNumRoles", "WorkRoles")',
dataType: "json",
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
if (data == false) {
$(".alert").show();
$('.btn').addClass('disabled');
//$(".btn").prop('disabled', true);
}
}
function errorFunc() {
alert('error');
}
});
</script>
#foreach (var item in Model)
{
<div class="jumbotron">
<h1>#Html.DisplayFor(modelItem => item.RoleName)</h1>
<p class="lead">#Html.DisplayFor(modelItem => item.RoleDescription)</p>
<p> #Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { #class = "btn btn-primary btn-lg" })</p>
<p> <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
</div>
}
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<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">#Html.DisplayFor(modelItem => item.RoleName)//doesn't work</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
I think your confusing the server side rendering of Razor and the client side rendering of the Modal. The modal cannot access your Model properties as these are rendered server side before providing the page to the user. This is why in your code <h4 class="modal-title">#Html.DisplayFor(modelItem => item.RoleName)//doesn't work</h4> this does not work.
What you want to do is capture the event client side in the browser. Bootstrap allows you to achieve this by allowing you to hook into events of the Modal. What you want to do is hook into the "show" event and in that event capture the data you want from your page and supply that to the Modal. In the "show" event, you have access to the relatedTarget - which is the button that called the modal.
I would go one step further and make things easier by adding what data you need to the button itself as data-xxxx attributes or to DOM elements that can be easily access via JQuery. I have created a sample for you based on what you have shown to give you an idea of how it can be achieved.
Bootply Sample
And if needed... How to specify data attributes in razor
First of all
you will need to remove the data-toggle="modal" and data-target="#myModal" from the button, as we will call it manually from JS and add a class to reference this button later, your final button will be this:
<button type="button" class="btn btn-default btn-lg modal-opener">Had role in the past</button>
Then
In your jumbotron loop, we need to catch the values you want to show later on your modal, we don't want to show it, so we go with hidden inputs:
<input type="hidden" name="ID_OF_MODEL" value="#item.WorkRoleId" />
<input type="hidden" name="NAME_OF_MODEL" value="#item.RoleName" />
For each information you want to show, you create an input referencing the current loop values.
Now you finally show the modal
Your document.ready function will have this new function:
$('.modal-opener').on('click', function(){
var parent = $(this).closest('.jumbotron');
var name = parent.find('input[name="NAME_OF_MODEL"]').val();
var id = parent.find('input[name="ID_OF_MODEL"]').val();
var titleLocation = $('#myModal').find('.modal-title');
titleLocation.text(name);
// for each information you'll have to do like above...
$('#myModal').modal('show');
});
It simply grab those values we placed in hidden inputs.
Your final code
#model IEnumerable<eksp.Models.WorkRole>
#{
ViewBag.Title = "DisplayListOfRolesUser";
}
<div class="alert alert-warning alert-dismissable">You have exceeded the number of roles you can be focused on. You can 'de-focus' a role on this link.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var dataJSON;
$(".alert").hide();
//make the script run cuntinuosuly
$.ajax({
type: "POST",
url: '#Url.Action("checkNumRoles", "WorkRoles")',
dataType: "json",
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
if (data == false) {
$(".alert").show();
$('.btn').addClass('disabled');
//$(".btn").prop('disabled', true);
}
}
function errorFunc() {
alert('error');
}
$('.modal-opener').on('click', function(){
var parent = $(this).closest('.jumbotron');
var name = parent.find('input[name="NAME_OF_MODEL"]').val();
var id = parent.find('input[name="ID_OF_MODEL"]').val();
var titleLocation = $('#myModal').find('.modal-title');
titleLocation.text(name);
// for each information you'll have to do like above...
$('#myModal').modal('show');
});
});
</script>
#foreach (var item in Model)
{
<div class="jumbotron">
<input type="hidden" name="ID_OF_MODEL" value="#item.WorkRoleId" />
<input type="hidden" name="NAME_OF_MODEL" value="#item.RoleName" />
<h1>#Html.DisplayFor(modelItem => item.RoleName)</h1>
<p class="lead">#Html.DisplayFor(modelItem => item.RoleDescription)</p>
<p> #Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { #class = "btn btn-primary btn-lg" })</p>
<p> <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
</div>
}
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<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">#Html.DisplayFor(modelItem => item.RoleName)//doesn't work</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>

Problems displaying dataTable in modal in html partial view

I asked a question here yesterday about this issue but got downvoted, probably because I didn't include any code which is understandable.
Hopefully this question will be more complete and allow you to help me more easily.
So I have 3 views in play:
StudentsList
Script
#{
ViewBag.Title = "StudentsList";
Layout = "~/Views/Shared/_LayoutM.cshtml";
}
#Scripts.Render("~/Scripts/charts")
#Styles.Render("~/Content/formsaltcss")
#model Mvc.Models.StudentViewModel
<script type="text/javascript">
$(document).ready(function () {
$('#AddStudentData').click(function () {
var type = 'student';
var id = 0;
$('#holderArea').html('');
if (!$('#studentDropDown option:selected').length) {
ToastrWarning('Please select a student before running the report');
return;
}
id = $('#studentDropDown').val();
var data = { id: id };
$.ajax({
url: '/Student/StudentAnalysisFiltered',
async: false,
data: data,
dataType: 'html',
success: function (data) {
$('#holderArea').html(data);
}
});
});
});
Relevant HTML
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="margin-bottom0 text-center">Student Analysis</h3></div>
<div class="panel-body">
<div class="row">
<div class="col-sm-12">
<form class="form-horizontal">
<div class="form-group">
<div class="row">
<label class="col-sm-2 control-label">Student Name</label>
<div class="col-sm-4">
#Html.DropDownListFor(c => c.Students, new SelectList(Model.Students, "StudentID", "Name"), "Choose Student"
, new { id = "studentDropDown", #class = "form-control input-sm", data_width = "100%" })
</div>
<div class="col-sm-offset-2 col-sm-10">
<button id="AddStudentData" type="button" class="btn btn-sm btn-primary">Select</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="holderArea">
</div>
StudentAnalysisSelected
Script
#using Data
#using Mvc.Helpers
#model Mvc.Models.StudentViewModel
#Scripts.Render("~/Scripts/datatables")
<script>
function StudentScoresModal(studentID, answer, result) {
$('#scoresTable').hide();
$('#scoresSpinner').show();
$('#scoresModal').modal('show');
var testID = #Html.Raw(Model.testID );
$.ajax({
cache: false,
url: "/Student/StudentScoresDrillthrough",
data: { 'studentID': studentID, 'answer': answer, 'result': result, 'testID': testID},
success: function (data) {
$('#scoresTable').html(data);
$('#scoresTable').show();
$('#scoresSpinner').hide();
},
error: function () {
toastr.options.positionClass = 'toast-bottom-right';
toastr.options.backgroundpositionClass = 'toast-bottom-right';
toastr.options.timeOut = 3000;
toastr.error('Unable to get student results.');
}
});
}
</script>
Relevant HTML
<div id="holderArea">
<button type="button" class="btn btn-sm btn-primary" onclick="StudentScoresModal(id, '', '')" id="#q.StudentID">View Scores</button>
</div>
<div class="modal in modal-stack" id="scoresModal" aria-hidden="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><strong>Student Scores</strong></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<div class="table-responsive" id="scoresTable" style="display:none">
</div>
<div class="sk-cube-grid absolute-center top-85" id="scoresSpinner" style="display:none">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
StudentScoresPartial
Script
<script>
$(document).ready(function () {
$('#studentScores').dataTable({
"data": #Html.Raw(Model.StudentScoresJson),
"columns":[
{ "sName": "StudentID" },
{ "sName": "Answer" },
{ "sName": "Result" }
]
});
});
</script>
HTML
<table id="studentScores" class="display table table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>StudentID</th>
<th>Answer</th>
<th>Result</th>
</tr>
</thead>
<tfoot>
<tr>
<th>User</th>
<th>Answer</th>
<th>Response</th>
</tr>
</tfoot>
<tbody></tbody>
</table>
How it all works
On the 'StudentsList' view there is a dropdown with list of students, and a 'Select' button to filter on an individual. OnClick this clears the holderArea div and passes studentID to the controller method, which returns a partial view 'StudentAnalysisSelected' and places it inside the holderArea div.
Now a graph is loaded with details specific to the indivudual. When clicked the 'scoresTable' is hidden and the modal is shown and an ajax call is made to StudentScoresDrillthrough controller, which returns the 'StudentScores' partial that is placed into the html of 'scoresTable'.
The problem
Now this all works perfectly first time I filter by student. I click 'Select', the graph loads, I click the graph and the datatable displays neatly in the modal.
However for reasons unknown to me when I click 'Select' again to re-filter, and click on the graph that is loaded all I see is the modal appear with the loading spinner, and it stops there. No errors pertaining to datatables in the console, or anything out of the ordinary for that matter.
I appreciate this is a bit of a read, but i'd be keen to hear any thoughts on what could be causing my issue.
Thanks!
It's because your dom is reloaded and so you loose your event attached.
If you attach ypur event like so, this should do, see doc :
$('#AddStudentData').on('click',function () {});
First try calling dataTable after filter button click using $('#studentScores').dataTable();
If this doesn't work
Instead on your refilter click write:
$('#studentScores').dataTable();
After your partialview is fully loaded. And bind your list in table directly e.g :
StudentID
Answer
Result
#foreeach(var item in Model)
{
item.User
item.Answer
item.Response
}
Finally tracked it down and it was because the modal show was called before the table show.
Thanks to those who posted suggestions, it's much appreciated

Categories