how to change the bind grid view in separately - javascript

I created one grid view to get the database table details,
here, when I click the Next Sync button it will pop up this box and I can choose the date and time,
but the problem is when I clicked any Next Sync button only change the first DateTime only,
this is the code of the table grid view
<table class="table table-striped border-bottom">
<thead>
<tr>
<th>Select to Sync.</th>
<th class="sorting">Source</th>
<th>Last Sync. Date</th>
<th>Download</th>
<th>Status</th>
<th>Next Sync Schedule</th>
<th>Schedule</th>
</tr>
</thead>
<tbody data-bind="foreach: PayrollIntegrationVM.GridDataList">
<tr>
<td><input type="checkbox" data-bind="checked:SHTYP_IS_MANUAL_SYNC"
class="i-checks" name="foo"></td>
<td data-bind="text:SHTYP_NAME"></td>
<td data-bind="text: moment(SHTYP_LAST_DATE).format('L LTS')"></td>
<td>
<div data-bind="ifnot: SHTYP_SYNC_STATUS">
<a href="#" data-bind="click: PayrollIntegrationVM.ErrorLog">
<span class="mr-2">
<img src="~/Content/img/icon-excel.png"
alt="Download">
</span> Download Error Log
</a>
</div>
</td>
<td data-bind="text: SHTYP_SYNC_STATUS? 'Success' : 'Failed'"><a href="#">
<i class="fa fa-close text-danger"></i></a></td>
<td data-bind="text: moment(SHTYP_NEXT_DATE).format('L LTS')" id="SHTYP_NEXT_DATE_GET"
name="Sync_Next_Date"></td>
<td><a href="#" id="Next-Sync-Value" data-toggle="modal" data-target="#sync"
name="Next_Sync_button">Next Sync.</a></td>
</tr>
</tbody>
this is the date time picker code
<div class="modal" id="sync" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-body">
<div class="col ml-5 d-flex flex-column justify-content-end">
<input type="date" class="form-control" id="NextSyncDate">
<input type="time" class="form-control mt-2" id="NextSyncTime">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="DoneButtonFunction()">Done</button>
</div>
</div>
</div>
</div>
this is the script part
<script language="JavaScript">
function DoneButtonFunction() {
var nextSyncDate = $('#NextSyncDate').val();
var nextSyncTime = $('#NextSyncTime').val();
var DateTime = nextSyncDate +" "+ nextSyncTime;
document.getElementById('SHTYP_NEXT_DATE_GET').innerHTML = DateTime;
}
}
</script>

it looks like in your js function, you find the element with the ID 'SHTYP_NEXT_DATE_GET', and js looks for the first one, try to save the row in the table, or find another way to Identify which 'SHTYP_NEXT_DATE_GET' element you want to edit

Related

The column is overflowed in table

Here is my problem. My columns are overflowed and I can't see it.
I know that some columns have a lot of data.
How can I edit HTML or CSS for that? This web I'm writing by Laravel framework.
Here is my source code, please view it. I'm using bootstrap for this.
<div class="box" ng-controller="TinTucNewController">
<div class="box-header">
{{csrf_field()}}
<h3 class="box-title">Danh Sách Tin Tức</h3> <br>
<button class="btn btn-new btn-xs btn-create">
<span class="glyphicon glyphicon-plus"></span>" Bấm vào đây để thêm dữ liệu"</button>
</div>
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead><tr>
<th>Mã Tin Tức</th>
<th>Thể Loại</th>
<th>Tiêu Đề</th>
<th>Tóm Tắt</th>
<th>Nội Dung</th>
<th>Hình Ảnh</th>
<th>Nổi Bật</th>
<th>Lượt Xem</th>
<th>Tạo mới</th>
<th>Cập nhật</th>
<th>Trạng thái</th>
<th>Công Cụ</th>
</tr>
</thead>
#foreach($ds_tt as $tt)
<tbody><tr>
<td>{{$tt->tt_ma}}</td>
<td>{{$tt->tt_theLoai}}</td>
<td>{{$tt->tt_tieuDe}}</td>
<td>{{$tt->tt_tomTat}}</td>
<td>{{$tt->tt_noiDung}}</td>
<td>
<img width="80" height="50" src="{{asset('upload/tintucnew/'.$tt->tt_hinh)}}"/>
</td>
<td>
#if($tt->tt_noiBat == 0){{'Tin Thường'}}
#else
{{'Tin Hot'}}
#endif
</td>
<td>{{$tt->tt_luotXem}}</td>
<td>{{$tt->tt_taoMoi}}</td>
<td>{{$tt->tt_capNhat}}</td>
<td><?php echo ($tt->tt_trangThai==2)?'Khóa':'Khả dụng' ?></td>
<td>
<button class="btn btn-warning btn-xs btn-edit">
<span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-danger btn-xs btn-delete"
ng-click="confirmDelete({{$tt->tt_ma}})">{{ method_field("DELETE")}}
{{csrf_field()}}
<span class="glyphicon glyphicon-trash"></span></button>
</td>
</tr>
</tbody>
#endforeach
</table>
</div>
</div>

Knockout: Bind template bootstrap modal for many data objects

I am relatively new in Javascript and Knockout JS and I am facing the problem below:
I load data from a Ajax request and map it into my object:
function ActivityModel(obj) {
if (typeof (obj) != 'undefined') {
this.ShowTable = ko.observable(true);
this.Name = ko.observable(obj.nomVessel);
this.NumRecords = ko.observable(obj.data.length);
this.DataRecords = ko.observableArray([]);
var aux = [];
//When add new items, mark they as changed, so the update css style will be loaded
$.each(obj.data, function (index, value) {
aux.push({ hasChanged: ko.observable(true), record: value });
});
this.DataRecords.push(aux);
}
}
I store all objects into an observable Array named DataTables.
Then, based on the data, I render a 'gadget', that is composed by a div with some buttons, and a table that loads my data records:
<!-- ko foreach: DataTables -->
<div class="col-sm-6">
<div class="box gadget">
<div class="box-header clearfix">
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-chevron-up"></i>
<h1><strong><span data-bind="text: $data.Name"></span></strong> - Activities</h1>
<div class="icons pull-right">
<i class="glyphicon glyphicon-cog"></i>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table table-bordered table-hover text-left density-medium">
<thead>
<tr>
<th>Start Date</th>
<th>Start Time</th>
<th>End Date</th>
<th>End Time</th>
<th>Details</th>
</tr>
</thead>
<tbody data-bind="foreach: $data.DataRecords">
<tr class="tooltipstered" data-bind="tooltipster: 'bottom-right'">
<td data-bind="text: $data.record.startDate"></td>
<td data-bind="text: $data.record.endDate"></td>
<td data-bind ="text: $data.record.details"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /ko -->
Particularly, I have a button to open a bootstrap modal inside each gadget:
<div class="icons pull-right">
<i class="glyphicon glyphicon-cog"></i>
</div>
The code of the modal
<div id="modal-configure-gadget" class="modal fade modal-configure-gadget" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header shadow">
<button type="button" class="close" data-dismiss="modal">×</button>
<i class="icon-arrow-down-circle"></i><span class="h2">Configure <strong>gadget</strong></span>
</div>
<div class="modal-body">
<form action="" class="form-horizontal" role="form">
<div class="row">
<div class="col-sm-6">
<span class="h2">Set <strong>size</strong></span>
<div class="box box-filter">
<div class="form-group row">
<label for="linhas" class="control-label col-sm-4">Rows:</label>
<div class="add-remove-button col-sm-8">
<span class="btn btn-mini btn-navbar decrease-button">
<i class="glyphicon glyphicon-minus"></i>
</span>
<input id="linhas" type="text" class="form-control" value="1">
<span class="btn btn-mini btn-navbar increase-button">
<i class="glyphicon glyphicon-plus"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer shadow">
<button class="btn btn-success">Ok</button>
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
My problem is: For each 'gadget' created, I would like to bind the button I've shown to open the modal. Moreover the input 'linhas' inside the modal should be bound to the observable NumRecords of my object. When I tried to bind using a simple click binding I have an unexpected behaviour that I changed the value of the input for one object (thus updating a single observable NumRecords) and the call was somehow broadcasted to the other gadgets on the screen.
I also tried using a custom binding:
ko.bindingHandlers.UpdateActivityCount = {
init:function(element, valueAccessor, allBindings, viewModel, bindingContext) {
$('#modal-configure-gadget').on('show.bs.modal', function(e) {
$('#linhasActivity').val(bindingContext.$data.NumActivities());
});
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
$('#modal-configure-gadget .btn-success').on('click', function(e) {
var confirm_button = $(e.target).is("#btnConfirmActivitiesChange");
if (confirm_button === true) {
//Update Value
self.UpdateObservableValue(data.NumRecords, $('#linhasActivity'), 'int', data, event);
}
});
}
};
but the unexpected behaviour remained.
I suspect this behaviour is occurring because the id of the modal and its elements are the same of every gadget created (Instead having one modal for each gadget, I have just one modal for all of them and it is generanting a conflict).
However, I do not know how to generate multiple modals with different ids (and different ids for the components such as buttons and inputs). I had a look at the component binding, but could not realise how it works and whether it would be useful to solve my problem.
Anyone has a suggestion?
Thanks.
Some suggestions
at
<tbody data-bind="foreach: $data.DataRecords">
<tr class="tooltipstered" data-bind="tooltipster: 'bottom-right'">
<td data-bind="text: $data.record.startDate"></td>
<td data-bind="text: $data.record.endDate"></td>
<td data-bind ="text: $data.record.details"></td>
</tr>
</tbody>
you dont need to use the $data variable, since you are already inside a foreach context. You can replace it with
<tbody data-bind="foreach: DataRecords">
<tr class="tooltipstered" data-bind="tooltipster: 'bottom-right'">
<td data-bind="text: record.startDate"></td>
<td data-bind="text: record.endDate"></td>
<td data-bind ="text: record.details"></td>
</tr>
</tbody>
Also for modal dialog, you can have one dialog to show details of different objects. Something like
<!-- ko with: currentDialogDetails -->
<input id="linhas" type="text" class="form-control" data-bind="textInput: NumRecords" />
<!-- /ko -->
and the have a click binding for opening up the dialog like
<div class="icons pull-right">
</i>
</div>
and in your view model, add an observable and another click handler as
this.currentDialogDetails = ko.observable(null);
this.setCurrentDialogDetails = function(details){
this.currentDialogDetails(details);
}

HTML with id's construct dynamically

I have an html page with a div that has a bootstrap button to collapse/expand a table. I want to click on it to toggle collpase/expand.
I am inspired by this fiddle.
The javascript is
$('.meu-painel-colapsar').on('click', function () {
var id1 = $('.meu-painel-colapsar').attr('id');
var id2 = $('.colapsar-competencias').attr('id');
alert(id1);
$('#' + id2 + ' .colapsar-competencias').collapse('toggle');
});
And the html is
#foreach($dados as $dimensaoNome => $dimensao)
<div class="panel panel-{{ $cores[$dimensaoNome] }} meu-painel-colapsar" id="accordion-{{ $dimensao->id }}">
<button type="button" class="btn btn-success btn-xs"
id="dimensao_{{ $dimensao->id }}"
data-toggle="collapse" data-target="#">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> veja os resultados
</button>
<div class="panel panel-default">
#foreach($dimensao->competencias as $competenciaNome => $competencia)
<div class="panel-heading">
<div class="row">
<div class="col-md-6"><h4 class="competencia-head">{{ $competenciaNome }}</h4></div>
<div class="col-md-6" style="padding-top:8px;">
</div>
</div>
<div class="collapse colapsar-competencias" id="competencia-{{ $competencia->id }}">
<table class="table table-condensed">
<thead>
<tr>
<th>Situação atual</th>
<th class="col-md-6">Oportunidades identificadas</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>{{ $competencia->nivel->texto }}</p>
</td>
<td>
<div class="col-lg-12">
{!! $competencia->recomendacao !!}
</div>
</td>
</tr>
</tbody>
</table>
</div>
#endforeach
</div>
</div>
#endforeach
The id's accordion-{{ $dimensao->id }} and competencia-{{ $competencia->id }} are generated with the two foreach's.
The problem is that the javascript code only gets the first id's of accordion-{{ $dimensao->id }} and competencia-{{ $competencia->id }}.
I'm struggling with this for hours without success. How can I get this id's correctly when I click the button?
If I'm understanding right, you are much better off not using ids at all and just relying on classes. Use $(this).find(...) to only find .colapsar-competencias elements that are inside the clicked element.
$('.meu-painel-colapsar').on('click', function () {
$(this).find('.colapsar-competencias').collapse('toggle');
});
http://jsfiddle.net/Vq6gt/120/
$('#accordion .panel-collapse',this).collapse('toggle');

Bootstrap Modals to redirects me to a blank page

The website that I’ve made works perfectly fine without a build system. However, I am currently having a problem with the bootstrap modals with the Yeoman: Angular + Gulp build system. Whenever I click on the list item the modal does not appear, it takes me straight to blank page. I haven’t been able figure out the cause of this event.
At some point, the modals appeared to work without having to make any adjustments to the scripts. I restarted the grunt server again, and I was back to where I was. I don’t understand why the modals don’t appear and take me to blank page. Any ideas?
I was thinking this may had to do something with the Angular Routing, but I am not sure. I’ve already made some adjustments, and I am not receiving any sort of error message in the console. I need some advice on how to fix the problem. Any help will be appreciated.
The link to my code GitHub Repo
angular.module('sanMiguelApp')
.controller('Events',['$scope',function($scope){
$scope.eventname = [
{name:'Cinco De Mayo',date:'September',image: '../../images/cinco-de-mayo.jpg',number: 'first'},
{name:'River Fest',date:'September',image: '../../images/river-fest.jpg',number: 'second'},
{name:'School of Rock',date:'September',image: '../../images/school-of-rock.jpg',number: 'third'},
{name:'Golf Tournament',date:'September',image: '../../images/golf-tournament.jpg',number: 'fourth'},
{name:'20th Anniversary',date:'September',image: '../../images/anniversary.jpg',number: 'fifth'}
];
}])
.controller('TabController', ['$scope', function($scope) {
$scope.tab = 1;
$scope.setTab = function(newTab){
$scope.tab = newTab;
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
}]);
<div class="row">
<div class="col-md-5">
<img ng-src="images/student.jpg" class="img-responsive thumbnail" alt="San-Miguel-Building">
</div>
<div class="col-md-7">
<div class = "motto text-center animated zoomIn">"Transforming lives throught education,commitment and love."</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="thumbnail">
<img class = "img-responsive" style="height:100px" src="https://cdn1.iconfinder.com/data/icons/education-vol-2/48/074-512.png" alt="San Miguel">
<div class="caption">
<h3 class = "text-center">School Announcements</h3>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4" ng-controller= "TabController">
<div class="thumbnail">
<img class = "img-responsive" style="height:100px" src="http://www.cogransystems.com/wp-content/uploads/2013/07/sports-icon.png" alt="...">
<div class="caption">
<h3 class = "text-center">Sports Schedule</h3>
<ul class="nav nav-tabs">
<li role="presentation" ng-class="{active:isSet(1)}">
<a href ng-click="setTab(1)">Basketball</a>
</li>
<li role="presentation" ng-class="{active:isSet(2)}">
<a href ng-click="setTab(2)">Soccer</a>
</li>
<li role="presentation" ng-class="{active:isSet(3)}">
<a href ng-click="setTab(3)">Softball</a>
</li>
</ul>
<table class="table" ng-show="isSet(1)">
<thead>
<tr>
<th>Date</th>
<th>Opponent</th>
<th>Basketball</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">3/12</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/16</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/19</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
</tbody>
</table>
<table class="table" ng-show="isSet(2)">
<thead>
<tr>
<th>Date</th>
<th>Opponent</th>
<th>Soccer</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">3/12</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/16</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/19</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
</tbody>
</table>
<table class="table" ng-show="isSet(3)">
<thead>
<tr>
<th>Date</th>
<th>Opponent</th>
<th>Softball</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">3/12</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/16</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/19</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
</tbody>
</table>
<!-- <div class="list-group text-center">
<i class="fa fa-male fa-2x fa-fw pull-left"></i> Basketball
<i class="fa fa-female fa-2x fa-fw pull-left"></i> Basketball
<i class="fa fa-male fa-2x fa-fw pull-left"></i>Soccer
<i class="fa fa-female fa-2x fa-fw pull-left"></i> Soccer
<i class="fa fa-male fa-2x fa-fw pull-left"></i> Softball
</div> -->
</div>
</div>
</div>
<div class="col-sm-12 col-md-2">
<div class="thumbnail" ng-controller ="Events">
<img class = "img-responsive" style="height:100px" src="http://ketchikanpubliclibrary.org/wp-content/uploads/2014/10/events-calendar-icon-300x300.png" alt="...">
<div class="caption">
<h3 class = "text-center">Events</h3>
<div class="list-group text-center" ng-repeat = "events in eventname">
</i>{{events.name}}
<div class="modal fade" id="{{events.number}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" 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>
<h4 class="modal-title" id="myModalLabel">{{events.name}}</h4>
</div>
<div class="modal-body">
<div class = "row">
<div class = "col-md-12">
<img style = "height:150px,width: 50px"class = "img-responsive" src ="{{events.image}}"
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It probably has something to do with how you are injecting services into your various angular items. If you're not injecting with hard-coded strings at some point then minification is likely to break your app. I'd guess you know that already, but also that perhaps you missed one somewhere.
You can use syntax like:
function PhoneListCtrl($scope, $http) {...}
PhoneListCtrl.$inject = ['$scope', '$http'];
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
or
function PhoneListCtrl($scope, $http) {...}
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]);
The first method is less popular, but generally more preferred in terms of best practices.
I luckily found the solution why the modals weren't popping up. I had to omit "href" attribute in my anchor element. Since, I programmed my routing to "#/" for any unknown pages. That is the reason why it was taking me to a blank page rather than popping the bootstrap modal. Lesson learned!
</i>{{events.name}}
<a class="list-group-item" data-toggle="modal" data-target="#{{events.number}}"></i>{{events.name}}</a>

Create a reusable modal using JQuery

I know writing an IF-ELSEIF-ELSE statement in the loop below would work, however I want to avoid having to write multiple modals. Instead I am looking for a JQuery modal to pop up when the image icon (basically a info image) is clicked. I want to be able to pass in the error into the function, which will then display in the modal.
Example:
Say I have a 400 Error and 500 Error, when I click the info icon, the definition should appear.
CODE BELOW:
index.gsp
<html>
<%-- Some code (saving space for body) --%>
<body>
<div id="content">
<div id="content-header">
<h1>Error Checking</h1>
</div> <!-- #content-header -->
<div id="content-container">
<div class="portlet">
<div class="portlet-content">
<div class="table-responsive">
<table
class="table table-striped table-bordered table-hover table-highlight table-checkable"
data-provide="datatable"
data-display-rows="25"
data-info="true"
data-search="true"
data-length-change="true"
data-paginate="true">
<thead>
<tr>
<th data-filterable="true" data-sortable="true" data-direction="desc">User ID</th>
<th data-filterable="true" data-sortable="true" data-direction="desc">Task ID</th>
<th data-filterable="true" data-sortable="true" data-direction="desc">Error Message</th>
</tr>
</thead>
<tbody>
<g:each in="${lists}" var="list">
<tr>
<td>${list.userId}</td>
<td>${list.taskId}</td>
<td>
**%{--WANT TO PLACE MODAL CALL HERE--}%**
**<i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i>
${list.errorMsg}**
</td>
</tr>
</g:each>
</tbody>
</table>
</div> <!-- /.table-responsive -->
</div> <!-- /.portlet-content -->
</div> <!-- /.portlet -->
</div> <!-- /#content-container -->
</div> <!-- #content -->
The MODAL I want to pop up:
<div id="styledFreqLargerModal" class="modal modal-styled fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Issue</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-tertiary" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
You can generate dynamic id's using your list item's id. Then you can place your modal at the place you have mentioned. The following is a code example:
<div id="styledFreqLargerModal${list.id}" class="modal modal-styled fade">
[..]
</div><!-- /.modal -->
If you are using jQuery-UI
<a class="openDialog" href="#styledFreqLargerModal${list.id}"><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>
In your javascript do:
$(document).on("click", "a.openDialog", function() {
$($(this).attr("href")).dialog();
}
If you are using bootstrap
<a data-toggle="modal" href="#styledFreqLargerModal${list.id}"><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>
Solved the problem... Used Jquery modal. This prevented me from having to create multiple modals. In the modal I have a "click" method that determines which item got clicked, then outputs that specific message. See code below.
index.gsp
<html>
<%-- Some code (saving space for body) --%>
<body>
<div id="content">
<div id="content-header">
<h1>Error Checking</h1>
</div> <!-- #content-header -->
<div id="content-container">
<div class="portlet">
<div class="portlet-content">
<div class="table-responsive">
<table
class="table table-striped table-bordered table-hover table-highlight table-checkable"
data-provide="datatable"
data-display-rows="25"
data-info="true"
data-search="true"
data-length-change="true"
data-paginate="true">
<thead>
<tr>
<th data-filterable="true" data-sortable="true" data-direction="desc">User ID</th>
<th data-filterable="true" data-sortable="true" data-direction="desc">Task ID</th>
<th data-filterable="true" data-sortable="true" data-direction="desc">Error Message</th>
</tr>
</thead>
<tbody>
<g:each in="${lists}" var="list">
<tr>
<td>${list.userId}</td>
<td>${list.taskId}</td>
<td>
<g:if test="${(list.errorMsg).contains("400")}">
<a id="modalAlert-${list.taskId}" class="modal-alert-null" ><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>
${list.errorMsg}
</g:if>
<g:elseif test="${(list.errorMsg).contains("500")}">
<a id="modalAlert-${list.taskId}" class="modal-alert-outOfBounds" ><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>
${list.errorMsg}
</g:elseif>
</td>
</tr>
</g:each>
</tbody>
</table>
</div> <!-- /.table-responsive -->
</div> <!-- /.portlet-content -->
</div> <!-- /.portlet -->
</div> <!-- /#content-container -->
</div> <!-- #content -->
<r:require modules="jquery"/>
<script type="text/javascript">
$(document).ready(function() {
// Null pointer exception
$(".modal-alert-null").click(function() {
modalAlert("400 error message");
});
// outOfBoundsException
$(".modal-alert-outOfBounds").click(function() {
modalAlert("500 error message");
});
});
function modalAlert(description)
{
$("body").append(buildAlertModal());
$("#alert-modal .modal-description").html(description);
$("#alert-modal").modal("show");
}
function buildAlertModal() {
return "<div id='alert-modal' class='modal modal-styled fade'>" +
" <div class='modal-dialog'>" +
" <div class='modal-content'>" +
" <div class='modal-header'>" +
" <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>" +
" <h3 class='modal-titl'>Exception Info</h3>" +
" </div>" +
" <div class='modal-body'>" +
" <p class='modal-description'></p>" +
" </div>" +
" <div class='modal-footer'>" +
" <button type='button' class='btn btn-tertiary' data-dismiss='modal'>Close</button>" +
" </div>" +
" </div>" +
" </div>" +
"</div>";
}
function closeModalAlert() {
$("#alert-modal").modal("hide");
}
</script>

Categories