Updating angular object array on ng-click - javascript

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.

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.

Copy google charts to another div doesn't work in IE

My HTML page using css materialize tabs.
I build all my google chart graphs in 'show' table divs, after it I 'hide' them and when the user click on tab I replace the html tab with the correct one from the 'hide' divs.
In google chrome and firefox it works good, but in IE it doesn't work :(
<div id="row1">
<br />
<table align="center" style="background-color:white">
<tr valign="top">
...
</tr>
<tr valign="top">
...
</tr>
</table>
<br />
</div>
<div id="row2">
<br />
<table align="center" style="background-color:white;">
<tr valign="top">
...
</tr>
<tr valign="top">
...
</tr>
</table>
<br />
</div>
<div class="col s12" id="dashboardtabs">
<ul class="tabs" style="background-color:#80CBC4" id="tabs">
<li class="tab col s3"><a id="titletab1" class="white-text" href="#tab1" onclick="reloadForTabs('titletab1')" style="background-color:#009688">Subjects Status</a></li>
<li class="tab col s3"><a id="titletab2" href="#tab2" class="white-text" onclick="reloadForTabs('titletab2')" style="background-color:#80CBC4">Stratification</a></li>
</ul>
</div>
<div id="tab1" class="col s12"></div>
<div id="tab2" class="col s12"></div>
My js Code:
at the first load change all the rows div to show - google charts need to build on show divs for support user settings (width, high and etc.):
var emptyTabs = function()
{
titletabs.forEach(function (val) {
$('#tab' + val.slice(-1)).html('');
});
}
emptyTabs();
//Changed chart divs from hide to show
titletabs.forEach(function (val) {
$('#row' + val.slice(-1))[0].style.display = 'block';
});
After the user selected tab:
//Changed chart divs from show to hide
titletabs.forEach(function (val) {
$('#row' + val.slice(-1))[0].style.display = 'none';
});
//Display the selected tab (After filters, in the first load and etc.)
var selectedtab = document.getElementsByClassName('white-text active')[0].id;
$('#tab' + selectedtab.slice(-1)).html($('#row' + selectedtab.slice(-1)).html());
In IE the graphs in the 'hide' divs (not in tabs) display correctly, but when the html div insert into the tab - the data is empty, The graph displays with all its properties but without data (bar chart - without the bars).
like this:
And not like this:
Open https://jsfiddle.net/wjqwd467/ in google chrome and in IE and see the different...
Could someone help me?
Thanks!
for starters, Object.values isn't compatible with IE
see --> Object.values() - browser compatibility
try replacing with...
for (var i = 0; i < arraydata.length; i++) {
var daraarr = [];
for (var key in arraydata[i]) {
if (arraydata[i].hasOwnProperty(key)) {
daraarr.push(arraydata[i][key]);
}
}
daraarr.push("color:" + mycolor[arraydata[i].rownum]);
datatable.addRow(daraarr);
}

Create custom follow button for my application

I would like a directive that dynamically knows if I'm following the user in my App.
I have a resource to get the currentUser
this.following = function () {
var defer = $q.defer();
var user = $cookies.getObject('currentUser');
UserResource.get({id: user.id}).$promise.then(
function (data) {
defer.resolve(data.following);
});
return defer.promise;
};
This is in one of my services. It returns all users that I'm following.
When instantiating my controller I fetch the users I follow within my app:
UserService.following().then(
function (data) {
$scope.following = data;
});
I would like to move that into a directive so that I can easily reuse it somewhere else in my app.
This is the HTML I am using right now (and it's not really beautiful) :
<div class="item" ng-repeat="user in users">
<div class="right floated content">
<div ng-show="isFollowing(user)" class="ui animated flip button" tabindex="0"
ng-click='unFollow(user)'>
<div class='visible content'>
Following
</div>
<div class="hidden content">
Unfollow
</div>
</div>
<div ng-hide="isFollowing(user)" ng-click="follow(user)" class="ui button">Follow</div>
</div>
</div>
But instead something like :
<div class="item" ng-repeat="user in users">
<um-follow-button um-user="user"></um-follow-button>
</div>
then depending if I'm following the user or not then render one of the two options.
I don't know if I will have to use a controller in my directive.
I have looked at : https://gist.github.com/jhdavids8/6265398
But it looks like a mess.

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.

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