We Keep Coding

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

ng-click is not working with return $sce.trustAsHtml in angular js without using html code in html page?

I am implementing data table and displaying some icon in the column. And putting ng-click in the font-awesome icon. But ng-click is not working.
Controller:
this.standardOptions = DTOptionsBuilder
.fromFnPromise(Rl.all('xyz/abc').getList())
.withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
.withBootstrap();
function actionRenderer(data) { // inject $sce if required.
console.log(data);
return $sce.trustAsHtml('<i class="fa fa-repeat cursor-pointer" aria-hidden="true" ng-click="volume()"></i> </a>');
}
this.standardColumns = [
DTColumnBuilder.newColumn('id').renderWith(actionRenderer),
];
function volume(){
alert("-----");
}
HTML
<div class="widget-body no-padding">
<table datatable dt-options="datatables.standardOptions" dt-columns="datatables.standardColumns" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th>Refresh</th>
</tr>
</thead>
</table>
</div>
I putted ng-click="volume()" But it is not working. I have seen links but in these links mentioned ng-bind-html in html page. But in my code I am not coding in html page. Only from java-script append the icon.
1.After using $sce.trustAsHtml, ng-click not working
2.Accessing ng-click when rendered via $sce.trustAsHtml
I am only hard code the column heading like Refresh. And definition append by javascript.

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>

jQuery dataTable overflows in bootstrap modal

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>