jQuery dataTable overflows in bootstrap modal - javascript

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>

Related

Updating Table In Partial View

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.

Get content of the dynamically created element using jquery

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 */
});

Kendo grid from html table crashes

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

How to bind a Bootstrap modal to action buttons rendered with Bootstrap Table

I'd like to use a Bootstrap modal triggered by the action buttons I have added to my Bootstrap Table, but I can't figure it out. Is there any way to bind the data attributes of these buttons to the modal? It's not working in this case. Or in case I can only do it from javascript, how could I do it, since it's not working either in my case. No error thrown either way.
This is a screen capture to make clear which buttons I'm talking about: the edit and remove buttons on each row.
And the code I'm using:
// Click handler for the edit button when I try the data attributes way
function operateFormatter(value, row, index) {
return [
'<a class="edit ml10" href="#dialogo-destinos" data-toggle="modal" title="Edit">',
'<i class="glyphicon glyphicon-edit"></i>',
'</a>',
'<a class="remove ml10" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}
// Code for the javascript way:
window.operateEventsDestinos = {
'click .edit': function (e, value, row, index) {
var $dialogo = $('.dialogo.destinos');
... // actions to populate the modal according to the row data
$dialogo.modal('show');
...
},
'click .remove': function (e, value, row, index) {
...
}
};
The table rendered by Bootstrap Table:
<div class="row">
<div class="col-md-12">
<table id="tabla-datos-destinos" class="bootstrap-table table table-striped table-hover"
data-pagination="true" data-search="true" data-show-header="true"
data-show-columns="true" data-show-refresh="true" data-toolbar="#custom-toolbar"
data-show-toggle="true" data-show-export="true">
<thead>
<tr>
<th data-field="nombre" data-sortable="true">Nombre</th>
<th data-field="poblacion" data-sortable="true">Localidad</th>
<th data-field="provincia" data-sortable="true">Provincia</th>
<th data-field="operate" data-formatter="operateFormatter" data-events="operateEventsDestinos">Acciones</th>
</tr>
</thead>
</table>
</div>
</div>
And of course the HTML for the modal:
<div class="dialogo destinos modal fade" id="dialogo-destinos">
...
</div>
Any ideas why this isn't working or what should I do?
EDIT:
I've also tried using a button instead of an A tag, but I can't get it working either. It's instead running the default behavior: submitting the form. Is there any way to add the action buttons directly within the HTML of the table instead of having to add them through javascript, which I think is the reason why the binding is not done?
You can simply tie data-toggle and data-target to a button inside your acciones div.
For example:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#dialogo-destinos">
Launch Modal
</button>

Angular.js view doesn't update when nested $scope array is updated

I am trying to make an angular.js view update itself when adding a comment. My code is as follows:
<div class="comment clearfix" data-ng-repeat="comment in currentItem.comments" data-ng-class="{bubble: $first}" data-ng-instant>
<div>
<p>
<span class="username">{{comment.user}}</span> {{comment.message}}
</p>
<p class="time">
10 minutes ago
</p>
</div>
</div>
<div class="comment reply">
<div class="row-fluid">
<div class="span1">
<img src="assets/img/samples/user2.jpg" alt="user2" />
</div>
<div class="span11">
<textarea class="input-block-level addComment" type="text" placeholder="Reply…"></textarea>
</div>
</div>
</div>
the scope is updated on enter:
$('.addComment').keypress(function(e) {
if(e.which == 10 || e.which == 13) {
$scope.currentItem.comments.push({
"user": "user3",
"message": $(this).val()
});
console.debug("currentItem", $scope.currentItem);
}
});
debugging $scope.currentItem shows that the comment has been added to it, however the view doesn't show the new comment. I suspect that the $scope is only being watched on its first level and that this is why the view doesn't update. is that the case? If so how can I fix it?
SOLUTION:
As Ajay suggested in his answer below I wrapped the array push into the apply function like this:
var el=$(this);
$scope.$apply(function () {
$scope.currentChallenge.comments.push({
"user": $scope.currentUser,
"message": el.val()
});
});
Modify the code to wrap inside scope.$apply because you are modifying the property outside the angular scope you have to use scope.$apply() to watch the values
I had to place my form inside the same div controller as the ng-repeat. I had two separate div controllers.
Use $scope.$parent.arrayObjet to modify the parent variables instead of $scope.arryaObject. It worked in my case.
<div class="col-sm-12 col-lg-12">
<div class="outer-container">
<div class="inner-container">
<div class="table-header">
<form id="teamForm" name="teamForm">
<table class="table table-bordered">
<thead>
<!-- Grid header -->
<tbody data-ng-if="(allTeamMembers.length==0)">
<tr>
<td class="text-center height_33_p" colspan="15"> {{noResultFound}} </td>
</tr>
</tbody>
<!-- Existing team member -->
<tbody data-ng-repeat="tm in teammemberDetailsArryobject|orderBy:orderByField:reverseSort" data-ng-form="innerForm_$index" data-ng-class="{'ng-submitted':innerForm_$index.$submitted}">
<tr></tr>
</tbody>
In the code I am deleting one record and add new row programmatically but all the rows are displayed in the ng-repeat rows(including deleted)

Categories