We Keep Coding

Updating angular object array on ng-click

Related to a previous post, I am really stuck on user click updating an object array in my angular app. In reality, the user click will force an http get. In the sample code here, I have simplified to a hard coded array. Also, the real app has multiple tabs, I have cut down the code to the crux, which is updating of the object on a click messing up the view. For example, the table in the view loses the selectable column. Other bad stuff happens in real app. I suspect some data binding issue?
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Assets
<div class="mdl-layout-spacer"></div>
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content">
<div class="table-content mdl-grid">
<div class="mdl-cell mdl-cell--6-col">
<table id=table1
class="table-fullwidth mdl-data-table mdl-data-table--selectable mdl-js-data-table mdl-shadow--4dp" >
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric"><span class="table-header">Asset</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in restdata">
<td class="mdl-data-table__cell--non-numeric mdl-typography--thin">{{ x.asset }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</main>
</div>
My simple js is like this:
var app = angular.module('homeApp.protect', []);
app.controller('protectCtrl', ['$scope', function($scope) {
$scope.tabcount = 0;
$scope.restdata = [];
$scope.response = [ {"id":"1","asset":"V-1-A1"},
{"id":"2","asset":"V-2-A1"},
{"id":"3","asset":"V-1-A2"},
{"id":"4","asset":"V-2-A2"}];
// activate tabs entered by user
$scope.activateTab = function (tabId) {
$scope.tabcount++;
console.log("In activate tab " + tabId + " tabcount = " + $scope.tabcount);
// get lists of all assets for all agents
if (tabId == "Assets") {
angular.copy($scope.response, $scope.restdata);
console.log($scope.restdata);
};
};
//Default entry on page load
$scope.activateTab ("Assets")
}]);
On initial load, the selectable check boxes look fine. On subsequent tab clicks, they disappear from rows (appear in header only). I have seen other problem with dynamic data. Thanks.

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>

How to dynamically link tabbable tabs

I'm making a little app which sorts websites by groups - where the groups appear as tabs in the tabbable navigator (twitter bootstrap). The premise is therefore, for a new tab to appear whenever you add a new group. This is what it looks like at the moment:
So the part where the new groups show up works perfectly (rendering them by using ng-repeat and going through all of the groups). However, when I click on them, the tabs don't show, i.e. nothing happenes. It worked when I had static tabs.
Here's the relevant html code:
<div class="tabbable tabs-left">
<ul class="nav nav-tabs" id="myTab">
<li class="active">All websites</li>
<li ng-repeat="group in listGroups()">{{group.name}}</li>
<li>+Add group</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<table class="table">
<tr class="row">
<th align="center">URL</th>
<th align="center" colspan="2">Actions</th>
</tr>
<tr class="row" ng-repeat="item in listSites()">
<td><font color="{{item.color}}">{{item.url}}</font></td>
<td>Edit</td>
<td>Delete</td>
</tr>
</table>
</div>
<div class="tab-pane" id="Social">asdf</div>
<div class="tab-pane" ng-repeat="group in listGroups()" id="{{group.name}}">asdf</div>
</div>
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
</script>
And here's my controller code:
app.factory('groups', function() {
var groups = [];
var groupsService = {};
groupsService.add = function(i_group) {
var group = {"name": i_group}
groups.push(group);
};
groupsService.list = function() {
return groups;
};
return groupsService;
});
function listCtrl($scope,sites, groups) {
$scope.listSites = sites.list;
$scope.listGroups = groups.list;
}
To sum it up, the question is essentially - how do I link tabs that have been dynamically generated to their also dynamically generated content?

You are mixing jQuery code and Angular and that causes problems.
For one, the jQuery code binds to <a>s already existing when the script is executed; new ones (the ones that Angular creates that is) will not get the event handler. You would want something like:
$("#myTab").on("click", "a", function(e) {
// same as your code
});
But you are still mixing Angular/jQuery. And it will probably not work, or work funkilly, because $scope.$apply() doesn't get called. Better is to use ng-click in your tabs and handle the event in the controller:
<li ng-repeat="group in listGroups()">
<a ng-click="selectGroup(group)">{{group.name}}</a>
</li>
(You will have to add the selectGroup() method in the controller.)
Having said that, you'd better use an existing component library, e.g. Angular UI with Bootstrap, as commented by pkozlowski.opensource.

Making div contents persistant

I have an interesting problem, which I would like some help with if possible.
I have the following segments of HTML:
<div id="main_">
<ul class="unstyled">
<ui:repeat var="adultPassenger" varStatus="adult" value="#{bean.adultPassengers}">
<li>
<div id="adult#{adult.index}" class="hitbox_">
<div id="passengerTitle">Adult #{passengerDetailsBean.getPassengerCount(adult.index)}</div>
</div>
<div class="hide">
<div id="adult#{adult.index}_form">
<div>
<div>
<div class="pull-left" style="width: 50%;">
<div><h:inputText value="#{adultPassenger.firstName}" class="pasFirstName_adult#{adult.index}" label="First Name"></h:inputText></div>
</div>
<div class="button-container">
<h:commandButton value="Continue" styleClass="btn btn-warning btn-large btn-block" onclick="handleDetailsClick('adult#{adult.index}')"></h:commandButton>
</div>
</div>
</div>
</div>
</div>
</li>
</ui:repeat>
</ul>
</div>
and
<div id="secondary_" class="hide">
<table>
<tbody>
<tr>
<td">
<h:commandButton id="secondaryBack" value="Back" styleClass="btn btn-warning">
</h:commandButton>
</td>
<td class="secondaryTitle">
<h3 class="page-title orange-title-big">Passenger Details</h3>
</td>
</tr>
</tbody>
</table>
<div id="secondaryContents">
</div>
</div>
They're both on the same page, and when the one div is visible the other is invisible. Thing is. Here's the JS I'm currently using:
$(".hitbox_").click(function() {
var round = Math.round;
var id = $(this).attr("id");
window.alert(id);
var f = $("pasFirstName_"+id).get();
console.log("name " + f.value);
// set contents of secondary div
var passengerDetails = $("#" + id + "_form").html();
$("#secondaryContents").html(passengerDetails);
$("#main_").toggleClass("hide");
$("#secondary_").toggleClass("hide");
});
function handleDetailsClick(index) {
var passengerDetails = $("#" + index + "_form").html();
$("#secondaryContents").html(passengerDetails);
$("#main_").toggleClass("hide");
$("#secondary_").toggleClass("hide");
}
What I want(and have tried, unsuccessfully, to achieve):
When the first div is clicked, it is hidden and the second div is shown after being populated with the hidden form in the first div. I do this to preserve class names etc, since there could be more than one such form.
When "Continue" is clicked, the second div is hidden, and it's contents passed back to the first div - I do this to preserve the details that were entered on the form.
My problem is that the details don't persist. When the same div is clicked again after having filled in the form before, it should should the form with the details that were previously entered.
This is where something goes wrong because there are never details in the form.
Does anyone know what I could be doing wrong?

The problem is in the following lines
var passengerDetails = $("#" + id + "_form").html();
$("#secondaryContents").html(passengerDetails);
Here, you are taking HTML of one div and adding it to another. While this will surely create the same html in target div, it will not retain any user entered values as well as any events bound on elements.
You should, instead, take the element and append it to target
var passengerDetails = $("#" + id + "_form").children();
$("#secondaryContents").append(passengerDetails);

Need help to form Jquery to slide a table row down if mouse hovers over previous(one up) table row

Only scrolls up on pageload so far and even then the animation is jittery
and ugly. I suspect it's something to do with me wanting to use this on tr element.
<table>
<tr class="ItemHeading">
<td>ItemName</td>
</tr>
<tr class="ItemDescription">
<td>
<ul>
<li>Item spec</li>
</ul>
</td>
</tr>
</table>
<script type="text/javascript">
$(".ItemDescription").slideUp(300);
$(".ItemHeading").hover(function () {
$(this).next("tr").slideDown(300);
});
$(".ItemHeading").mouseleave(function () {
$(this).next("tr").slideUp(300);
});
// $(document).ready(function() { $(".ItemDescription").slideUp(300); } );
</script>
The below works fine, but it doesn't slide the table row up and down, just hides and shows. Provided
I set the .ItemDescription css display property to none.
$('.ItemHeading').hover(function () {
$(this).next("tr").css("display", "block");
$(this).mouseleave(function () { $(".ItemDescription").css("display", "none"); });
});

I would strongly suggest against tables with animations. It's just not going to give you the results you're looking for.
Also, you're using closest incorrectly. closest will go up the DOM to find the "closest" parent that matches the provided selector. You're looking for next which will select the following row.
html:
<div class="table">
<div class="tr ItemHeading">
<div class="td">ItemName</div>
</div>
<div class="tr ItemDescription">
<div class="td">
<ul>
<li>Item spec</li>
</ul>
</div>
</div>
</div>
jQuery:
$(".ItemDescription").slideUp(300);
$(".ItemHeading").hover(
function () {
$(this).next(".tr").slideDown(300);
},
function() {
$(this).next(".tr").slideUp(300);
}
);
Working example here: http://jsfiddle.net/VKBYy/1/