Using server side process I have created my table and I am loading some data in a element like bellow
I want the content of class more element, I tried using ready, load but I am getting undefined when alert is made so please someone help me
My Whole code is here
<div class="container margin_120" id="form1">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<div id="tools">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h4 class="inner margin_5_tb"><i class=""></i>View Counts of Students Needing Financial Assistance<button type="button" id="button1" style="border:none;background-Color:#EAECEE; float: right;font-size:12px" ><u>Hide</u></button></h4>
</div>
</div>
</div><!--/tools -->
<div class="form-group" id="countTableDes">
<table class="table table-bordered" id="loan_data">
<thead>
<tr>
<th>Student Name</th>
<th>Student Photo</th>
<th>some data</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<script src="<?php echo base_url(); ?>assets/js/jquery-1.11.2.min.js"></script>
$(document).ready(function(){
var dataTable = $('#loan_data').DataTable({
"processing":true,
"serverSide":true,
"autoWidth": false,
"order":[],
"ajax":{
url:'<?php echo site_url("home/getLoans"); ?>',
type:"POST"
},
"columns":[
{ 'data' : 'stu_firstName' },
{ 'data' : 'id',
'render':function(id,data,row){
if(row.stu_passportPhoto && row.stu_passportPhoto!=null){
return '<p class="more"><b>About me</b> <br/>'+row.stu_aboutStudent+'</p>';
}
}
},
{
'data' : 'stu_somedata'
},
]
});
//Here I want to get each more class content.
$(document).find(".more").each(function(){
var content = $(this).text();
alert(content);
});
});
</script>
As the elements with the class "more" are created dynamically by the DataTable, you have to wait until the table or at least the row has been drawn completely. In order to do so, you have to hook into one of the available callbacks that DataTables offers:
https://datatables.net/reference/option/
Which one exactly depends on your needs, presumably drawCallback should work for your case, or you could also use createdRow for each row separately.
This is the example snippet from the docs, adapted to illustrate your case:
$('#loan_data').dataTable( {
// rest of your options goes here...
"drawCallback": function( settings ) {
// you'll want to select only inside your table,
// not the whole document, for performance reasons:
$('#loan_data').find(".more").each(function(){
var content = $(this).text();
alert(content);
});
}
} );
The problem might be the way datatable is rendered and how column:render is executed,
Worst case scenario is to use a mutator, or an event listener
such as Arrive.js
here is the link,
https://github.com/uzairfarooq/arrive/blob/master/src/arrive.js
It will listen to newly created elements and you can run something inside its function,
Do something like this,
$(document).arrive(".more", function() {
// 'this' refers to the newly created element
var content = $(this).text();
alert(content); /* do something */
});
Related
I have a page that is functional but I"m having an issue with Javascript inserting ajax results as html properly.
First of all, the page right now has a table with multiple rows, each row having it's own hyperlink. Clicking the link pops up a modal, makes an ajax call to get data, and the idea is that two values from the data result get inserted into h2 elements. Currently, I get my ajax result and it appends the first row since I"m using data[0] but I need this to work so that if my ajax result has 4 rows, I would append 4 sets of h2 elements. Also, since I'm using a modal that is based on any of the available links, I need to make sure it's appending only to the open modal if that makes sense?
Anyway, I just need to slightly alter this so that it appends to the open modal with the newest ajax results regardless of one or mulitple array rows in the result.
<table class="uk-table uk-table-hover">
<tbody>
#foreach($results as $result)
<tr class="" id="">
<td>
<a onclick="getDetails('{{$result->detailID}}')" data-toggle="modal" data-id="{!! $result->detailID !!}" data-uk-modal="{target:'#resultModal{{$result->detailID}}'}">{{$result->number}}</a>
</td>
</tr>
<!------------- MODALS ------------->
<div id="resultModal{{$result->detailID}}" class="uk-modal">
<div class="uk-modal-dialog">
<a class="uk-modal-close uk-close"></a>
<form method="POST" action="/tasks/complete" class="uk-form uk-form-stacked uk-margin-top">
<div class="uk-grid">
<div class="uk-form-row uk-width-1-1">
<h3>{{$result->number}} - {{$result->name}}</h3>
<h2 class="detailSite"></h2>
<h2 class="detailType"></h2>
</div>
</div>
</form>
</div>
</div>
#endforeach
</tbody>
</table>
<!-- End container -->
</div>
#endsection
<script type="text/javascript">
Vue.component('modal',{
template: '#modal-template'
})
new Vue({
el:'#app',
data: {
showModal: false
}
})
</script>
<script type="text/javascript">
function getDetails(detailID) {
console.log(detailID);
$.ajax({
url: "/details",
data: {detailID:detailID},
_token: "{{ csrf_token() }}",
type: "POST",
success: function (data) {
$('.detailType').html(data[0].detail_type);
$('.detailSite').html(data[0].detail_site);
},
});
};
</script>
#endsection
Goal: Attempting to create a feature where a table is updated with added rows from the database.
I'm running into an issue with how the views are formatted, my knowledge with javascript and MVC isn't strong enough to know which direction to go.
I have the main view, and from there I load in three partialViews separately via an ajax call which populates the div with the defined ID
<div class="container-fluid">
<div id="preTestSteps">
</div>
<div id="mainTestSteps">
</div>
<div id="postTestSteps"></div>
</div>
With the following function that loads these partial views;
$(document).ready(function() {
var testSuiteExecutionId = #(Model.TestSuiteExecutionId);
var testSuiteId = #(Model.TestSuiteId);
loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 1, "preTestSteps");
loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 0, "mainTestSteps");
loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 2, "postTestSteps");
});
function loadTestStepResultsPartialView( testSuiteExecutionId, testSuiteId, testStepType, divId) {
$.ajax({
type: 'POST',
url: '#Url.Action("DetailsTestStepResults", "TestSuiteExecutions")',
data: { 'testSuiteExecutionId': testSuiteExecutionId, 'testSuiteId': testSuiteId, 'testStepType': testStepType },
success: function(data) {
$("#" + divId).html(data);
}
});
}
This is working as intended.
Within these partial views, the model for the view is a list of view models, these view models are iterated over with the list of logs defined within them.
Partial View loaded from main view;
<div class="container-fluid">
#foreach (var testStep in Model)
{
<div class="row">
<div class="col-sm-12">
<h5 style="background-color: beige; padding: 5px">
#Html.DisplayFor(modelItem => testStep.TestStepName)
</h5>
</div>
</div>
<div>
#Html.Partial("~/Views/TestSuiteExecutions/TestStepLogsPartialView.cshtml", testStep.TestStepLogs)
</div>
<div>
#Html.Partial("~/Views/TestSuiteExecutions/TestStepLogsPartialView.cshtml", testStep.VerificationLogs)
<div style="padding-bottom: 25px" class="row"></div>
</div>
}
</div>
This is where things start breaking down. The partial views this partial view loads contain the logs and the table.
Log Partial View
#if (Model.Count > 0)
{
var accordianStepItemName = "accordianStep" + Model[0].TestStepId + Model[0].MessageType;
var collapseStepItemName = "collapseStep" + Model[0].TestStepId + Model[0].MessageType;
<!--TODO: Use PartialViews-->
<div class="row">
<div id="accordion" role="tablist" style="margin-left: 30px" aria-multiselectable="true">
<div id="transparent-card" class="card" style="border-color: white;">
<h6 class="mb-0">
<a data-toggle="collapse" data-parent="##accordianStepItemName" href="##collapseStepItemName" aria-expanded="false" aria-controls="#collapseStepItemName">
<i class="fa fa-plus"></i>
<i class="fa fa-minus"></i>
#(Model[0].MessageType == false ? Html.Raw("Verification Log") : Html.Raw("Execution Log"))
</a>
</h6>
<div id="#collapseStepItemName" class="collapse col-sm-12" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body">
<table class="table" id="logTable_#Model[0].TestStepId#Model[0].MessageType">
<thead>
<tr>
<th width="5%"></th>
<th width="20% !important">Time</th>
<th width="75%">Message</th>
</tr>
</thead>
<tbody>
#foreach (var logEntry in Model)
{
<tr id="tableRow_#logEntry.TestStepId#logEntry.MessageType">
<td><img width="20" height="20" src="~/Content/Images/#HtmlUtilities.GetTestSuiteExecutionIconName(logEntry.LogType)" /></td>
<td><i>#logEntry.TimeStamp</i></td>
<td><i>#Html.Raw(HtmlUtilities.GetHtmlFormattedString(logEntry.Message))</i></td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
}
I'm attempting to write a javascrtipt method that will call an ajax call to bring up new log models in a list, and then add new rows to the table, but I'm running into two issues.
1) How do I pass the partial views table id's to the javascript function to execute the update? If I don't have the unique ID's (because this is looped and it needs unique Id's based on what I'm trying to update) then I can't even find the element to attach the new rows to in the script
2) How do I even attach to the table? I've attempted to use static data, but in attempting to access the table within the partial view to just prove I can actually add rows, I get 'getElementsByTagName' is null error in the debug menu.
Is what I'm attempting even possible with the current layout of the view(s)? Would it be better served to simply use one view model and put all of this logic on a single page to make the javascript easier to handle/actually function?
You can achieve this by following:
Create a partial view for row.
Segregate tables with some unique filters may be the css class.
Use those id to append rows.
The idea is that I show a loading .gif file while I load the data and then once all the data has loaded, wait an x amount of time, currently 3000ms, but will be lowered, then after the given amount of time, set the value of data.show to true, so that the loading .gif is no longer showing and that the Table is.
So, how do I reference show from the JavaScript in the HTML, ng-show?
Any help would be appreciated!
Thanks :)
edit: This works regarding to this to answer - setTimeout v $timeout
HTML
<div ng-show="!show">
<img id="loader" src="resources/ajax-loader.gif">
</div>
<div ng-show="show">
<div class="ui grid center aligned">
<div class="column thirteen wide">
<table id="errorTable" class="ui compact celled definition table">
<p>Stuff</p>
</table>
</div>
</div>
</div>
JavaScript
function onSuccess(response) {
controller.errors = response.data;
setTimeout(function () {
$('#errorTable').DataTable({
"lengthMenu": [[6], [6]],
"dom": '<"toolbar">frtip'
});
$("div.toolbar").html('<div class="ui input left floated"><input type="text" placeholder="Search..."></div>');
$scope.show = true;
}, 3000);
}
The problem is you have not defined $scope.show in the beginning. You probably don't need show.data . Please add the following line at the beginning of the controller
$scope.show = false;
And Change html to:
<div ng-show="!show">
<img id="loader" src="resources/ajax-loader.gif">
</div>
<div ng-show="show">
<div class="ui grid center aligned">
<div class="column thirteen wide">
<table id="errorTable" class="ui compact celled definition table">
<p>Stuff</p>
</table>
</div>
</div>
</div>
And in controller:
You have added the $scope.show.data outside setTimeout bring it within the setTimeout function as per your need and add:
function onSuccess(response) {
controller.errors = response.data;
$timeout(function () {
$('#errorTable').DataTable({
"lengthMenu": [[6], [6]],
"dom": '<"toolbar">frtip'
});
$("div.toolbar").html('<div class="ui input left floated"><input type="text" placeholder="Search..."></div>');
$scope.show = true;
}, 3000);
}
Here is the plunker that I tried
Try adding $scope.show = { data: false }; in the controller
As there is no div.toolbar, meaning, $('div.toolbar') would be null/undefined, which leads to a Null Pointer at that statement and the next statement is not being executed, as the execution has stopped just before.
Simple solution could be to place the $scope.show.data = true; as the first statement in the function called by setTimeout.
I have the following html in About.cshtml
<div>
#Html.Partial("_SearchPanel", Model.scM)
</div>
<div class="row">
<div class="col-md-12 table-responsive" id="mapsDiv">
#Html.Partial("~/Views/Maps/_MapDetailsList.cshtml", Model.saVM)
</div>
</div>
_MapDetailsList.cshtml
<table class="table table-bordered table-striped table-bordered" id="MapDetails">
<thead>
....
</thead>
<tbody>
.....
</tbody>
Lots of data binding from model goes into the table and works perfectly until i try to convert it into a kendoGrid
Before adding .kendoGrid script
Script in About.cshtml
<script type="text/javascript">
$(function () {
$("#MapDetails").kendoGrid(
{
//sortable: true,
dataSource: {
pageSize: 5
},
pageable:true
});
});
</script>
then I get the following error:
Cannot read property 'nodeName' of undefined
If I replace #MapDetails in the script with #mapsDiv, nodeName error disappears
and Page nos start appearing as bullet points and datarows appear before the headers
if I say
$(".row").kendoGrid(...
there's madness: even the searchpanel gets paginated
Any clues please?
I have the following scripts/style sheets on page
"~/Scripts/jquery-{version}.js"
"~/Content/bootstrap.css"
"~/Content/Site.css"
"~/Content/freelancer.min.css"
"~/Content/kendo/kendo.common-bootstrap.min.css"
"~/Content/kendo/kendo.common.min.css"
"~/Content/kendo/kendo.default.min.css"
"~/Content/kendo/kendo.bootstrap.min.css"
"~/Scripts/modernizr-*"
"~/Scripts/freelancer.js",
"~/Scripts/freelancer.min.js"
"~/Scripts/kendo/jquery.min.js",
"~/Scripts/kendo/kendo.all.min.js",
"~/Scripts/jquery.unobtrusive-ajax.min.js",
"~/Scripts/kendo/kendo.aspnetmvc.min.js"
I totally had to scrap away this approach and create grid from js. As i didnot have linear data, so had to do lots of work arounds too
I have a table inside a bootstrap modal. The content that I populate inside the dataTable cells is quite large, and instead of wrapping the text to fit the table inside the modal, it overflows the modal, like it is unable to pick up the modal width and wrap the text.
Screenshot:
I have tried various solutions, such as specifying wrap CSS as well as specifying the table width (in % and px) and setting the width property on the table (in % and px) but there is absolutely no change to the table. Any advice on how to correct this issue would be greatly appreciated.
Code Extract 1 (Modal):
<!-- List Questions Modal -->
<div class="modal fade" id="questionsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="width: 95%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Questions</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="responsive-table">
<table width="900px" class="table table-bordered" style="margin-bottom:2em; width: 900px;" id="questionsTable">
<thead>
<tr>
<th >Code</th>
<th>Title</th>
<th>Instruction</th>
<th>Extract</th>
<th>class="text-center">Active</th>
<th class="text-center">Edit</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
Code Extract 2 (dataTable population):
function showQuestions(quiz_id)
{
$('#questions_quiz_id').val('quiz_id');
window.questionsTable.fnClearTable();
$.post('{{ url("getGameQuestions") }}', {quiz_id : quiz_id})
.done(function(data)
{
if (typeof(data.error) != 'undefined')
{
$('#error-msg').html(data.error);
$('#page-error').fadeIn(300).delay(2000).fadeOut(500);
}
else
{
for(var d in data)
{
var question = data[d];
var active = (question.active == undefined || question.active == false) ? "Inactive" : "Active";
var ai = window.questionsTable.fnAddData([
question.code,
question.title,
question.instruction,
question.extract,
active,
'<i class="icon-pencil" style="cursor:pointer; color:#E48A07;" title="Edit" onclick="setQuestion('+question.id+')"></i>'
]);
var oSettings = window.questionsTable.fnSettings();
var addedRow = oSettings.aoData[ai[0]].nTr;
addedRow.cells.item(2).setAttribute('width','29%');
addedRow.cells.item(4).className = "text-center";
addedRow.cells.item(4).className = "text-center";
addedRow.cells.item(5).className = "text-center";
}
$('#questionsModal').modal('show');
}
});
}
Try removing
<div class="responsive-table"> it might be causing responsive widths in the modal to fail.
You could also try specifying a max-width on the table.
This might be slightly related although it was a problem with Bootstrap 2.3.2 and it looks like you are using 3.
http://www.bootply.com/88364
This question is asked here
datatables does not becomes responsive on bootstrap3 modal dialog
I would suggest you enable the Datatables Responsive extension, ditch the wrapper and use this snippet of code instead.
//once the modal has been shown
$('#yourModal').on('shown.bs.modal', function() {
//Get the datatable which has previously been initialized
var dataTable= $('#yourResponsiveDataTableInModal').DataTable();
//recalculate the dimensions
dataTable.columns.adjust().responsive.recalc();
});
After trying so many solutions i found one who works for me!
Just put the table inside a div and define the CSS inside the code.
<div style="overflow:auto;">
<table>
.....
</table>
</div>
I hope this help!!
Remove the <div class="row"> and check.
Am also experienced same problem,after i removed the div, i got it perfectly.
After trying so many solutions i found a solution.
Just put the table inside a div and define the CSS inside the code.
<div style="overflow:auto;">
<table>
.....
</table>
</div>
I hope this help!!
<div class="modal-body">
<div class="row table-responsive">
<div class="col-sm-12">
<table id="example" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="site_name">
Feedback
</th>
<th>
Ticket Id
</th>
<th>
Date of Creation
</th>
<th>
Classification
</th>
<th>
Topic
</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
initialize the datatable like that
initialize the datatable when open the modal.first time when we open the modal i==1 second thime i==2 so datatble cant reinitalize again and again does not give any alert box like datatable already initalize
var i=1;
$('#myModal').on('shown.bs.modal', function (e) {
if(i==1){
var oTable=$('#questionsTable').DataTable();
}
i++;
});
Just insert your table inside a div with "table-responsive" class:
<div class="table-responsive">
//Your table here
</div>