get data from modal and display it in a parent controller table - javascript

I would like to know how we can pass the data from modal and display them in a main controller table. On click of generate button in modal am getting input text data and displaying it in the table. But table is not updated with the data. Here is my plunkr- https://plnkr.co/edit/yk4Zcl6LF79cw4msYUrw?p=preview
// Code goes here
var myTable = angular.module('myTable', ['ui.bootstrap']);
myTable.controller('tableCtrl', function($scope, $http, $uibModal) {
$scope.Catalogs = [];
$scope.phNumber = [];
$scope.schema=[{"value":"2.0"},{"value":"2.2"}];
$scope.revision=[{"value":"ARev"},{"value":"XRev"}];
$http({ method:'GET',
url: 'http://100.96.16.175:8080/CGSDataManager/webapi/component_type',
headers: {'Accept': 'application/json'}
}).
success(
function (data) {
$scope.components = data;
/*for(var i = 0; i< data.length; i++) {
$scope.components = data[i].description;
//alert(data[i].description + components);
}*/
}
);
// rest call to get System Models
$http({ method:'GET',
url: 'http://100.96.16.175:8080/CGSDataManager/webapi/platform_info',
headers: {'Accept': 'application/json'}
}).
success(
function (data) {
$scope.systems = data
for(var i = 0; i< data.length; i++) {
phNumber = data[i].platform_id;
}
}
);
$scope.change = function() {
$scope.opts = {
backdrop: true,
backdropClick: true,
templateUrl : 'modalView1.html',
controller : 'ModalInstanceCtrl',
resolve: {} // empty storage
};
$scope.opts.resolve.item = function() {
return angular.copy({schema:$scope.schema, revision:$scope.revision, components:$scope.components, systems:$scope.systems, phNumber:$scope.phNumber, Catalogs:$scope.Catalogs}); // pass name to Dialog
}
var modalInstance = $uibModal.open($scope.opts);
modalInstance.result.then(function(){
//on ok button press
},function(){
//on cancel button press
console.log("Modal Closed");
});
};
});
myTable.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, item) {
$scope.item = item;
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
$scope.submitData = function() {
$scope.item.Catalogs.push({name: $scope.catalogName,validation: "true", publishing: "hello"});
$uibModalInstance.dismiss('submit');
};
});
// modal code
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" data-ng-click="cancel()">×</button>
<h4 style="color: #0085C3;" ><b style="font-size:14px;">Filter</b></h4>
</div>
<div class="modal-body" name="modalData">
<div class="row">
<div class="col-md-12 ">
<form>
Catalog Name: <input type="text" data-ng-model="catalogName"/>
</form>
</div>
</div>
<div class="row" >
<div class="col-md-3 dell-bannercolor line">
<span style="font-size: 12px">Schema</span>
<table class="table table-striped">
<tbody>
<tr data-ng-repeat="sc in item.schema">
<td style="padding-top: 2px; padding-bottom: 4px;"><input type="checkbox" data-ng-model="sc.selected" data-ng-true-value="'{{sc.value}}'" data-ng-false-value="''"> <span style="font-size: 10px; color: #000000; padding-top: 2px; padding-bottom: 4px;">{{sc.value}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3 dell-bannercolor line">
<span style="font-size: 12px">Revision</span>
<table class="table table-striped">
<tbody>
<tr data-ng-repeat="re in item.revision">
<td style="padding-top: 2px; padding-bottom: 4px;"><input type="checkbox" data-ng-model="re.selected" data-ng-true-value="'{{re.value}}'" data-ng-false-value="''"> <span style="font-size: 10px; color: #000000; padding-top: 2px; padding-bottom: 4px;">{{re.value}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3 dell-bannercolor line">
<span style="font-size:12px">Component Type</span>
<div style="height:180px; overflow:auto;">
<table class = "table table-striped" >
<tbody>
<tr data-ng-repeat="x in item.components">
<td style=" padding-top:2px; padding-bottom:4px;"><input type="checkbox" data-ng-model="x.selected" data-ng-true-value="'{{x.description}}'" data-ng-false-value="''"> <span style="font-size:10px; color:#000000; padding-top:2px; padding-bottom:4px;">{{x.description}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-3 dell-bannercolor">
<span style="font-size:12px">System Model</span>
<br/>
<div style="height:150px; overflow:auto;">
<table class = "table table-striped" >
<tbody>
<tr data-ng-repeat = "y in item.systems">
<td style=" padding-top:2px; padding-bottom:4px;"><input type="checkbox" data-ng-model="y.selected" data-ng-true-value="'{{y.platform_id}}'" data-ng-false-value="''"> <span style="font-size:10px; color:#000000; padding-top:2px; padding-bottom:4px;">{{y.model}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" data-ng-click="cancel()">Cancel</button>
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="submitData()">Generate</button>
</div>
// html code
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="script.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<style>
.dell-bannercolor {
color: #0085C3;
}
//
adding this code for vertical line -- start
.line {
position: relative;
}
.line:after {
content: '';
position: absolute;
right: 0;
border-right: 1px solid #cfc7c0;
top: 10%;
bottom: 10%;
}
//
end
</style>
</head>
<body ng-app="myTable" ng-controller="tableCtrl">
<div class="containter">
<div class="jumbotron">
<h1>JSON to Table</h1>
</div>
<div >
<div id="table1Div" style="background:white;position absolute;">
<table class="table table-hover table-bordered" id="peopleTable">
<tbody>
<tr>
<th>Catalog Name</th>
<th>Validation</th>
<th>publishing</th>
</tr>
<tr data-ng-repeat="catalog in Catalogs">
<td>{{catalog.name}}</td>
<td>{{catalog.validation}}</td>
<td>{{catalog.publishing}}</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" ng-click="change()">Clone</button>
</div>
</div>
</div>
</body>
</html>


See this https://plnkr.co/edit/hxdkNBvccYDie1tiigZy?p=preview
you Need to pass it while closing modal and get in controller
$uibModalInstance.dismiss($scope.item.Catalogs);


you can use $rootScope
myTable.controller('tableCtrl', function($scope, $rootScope,$http, $uibModal) {
$rootScope.Catalogs = [];
})
in another controller just push into catalogs not into item.catalogs
myTable.controller('ModalInstanceCtrl', function ($scope,$rootScope, $uibModalInstance, item) {
$scope.submitData = function() {
$rootScope.Catalogs.push({name: $scope.catalogName,validation: "true", publishing: "hello"});
}
});

Related

How to activate pop up modal if button is clicked using jquery?

I've created a table where my data can be ACTIVE or INACTIVE and this is already working, my goal is I just want to add a function that when I clicked the button to make my data INACTIVE, it will pop up a modal and has a message. But I don't know how will I make it pop up.
I've found a similar post but it cannot be applied to mine, because what I did has a different approach and I think mine is easier for myself to understand and will or might complicate things for me if I try to use the link. Thanks in advance
Here is my code in my JQUERY
$(document).on('click', '.status_checks', function() {
var status = '1';
var selector = $(this);
var id = $(this).data('id');
if ($(this).hasClass("btn-success")) {
status = '0';
}
$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: status
},
success: function(data) {
selector.hasClass("btn-success") ? (selector.removeClass("btn-success").addClass(
"btn-danger"),
selector.text("Inactive")) : (selector.removeClass("btn-danger").addClass(
"btn-success"),
selector.text("Active"));
// location.reload();
}
});
});
// For status Active/Inactive
function StatusChange() {
$("#dataTables").DataTable().destroy();
$("#tb_body").empty();
var status = $('#stats').val();
if (status) {
$.ajax({
type: "POST",
url: "../forms/form_statusForspecs_dtbl.php",
data: {
status: status
},
success: function(data) {
$("#dataTables").append(data);
$("#dataTables").DataTable();
}
});
}
}
// Startup
$(document).ready(function() {
$('#stats').change(function() {
$(this).val();
});
$("#stats").trigger('change');
});
#import https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
.statusButton {
color: white;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 20px;
white-space: nowrap;
padding: 2px 12px;
font-size: 12px;
line-height: 1.42857143;
border-radius: 4px;
user-select: none;
}
</style>
</head>
<!-- this is the modal that I want to pop up -->
<div class="modal fade" id="reason_for_modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<center> Confirmation </center>
</h4>
</div>
<!-- Modal body -->
<div class="modal-body panel-body">
<center>
<br><br>
<p> <strong> Reason for Inactive </strong> </p>
</center>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="col-sm-15">
<div class="form-group">
<button type="submit" id="submitBtn" class="btn btn-danger pull-right" data-toggle="modal" data-target="#maModal" onclick="window.location.href='#'">
<span class="fa fa-check"></span>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<br>
<br>
<a href="../forms/form_toolspec.php">
<button class="btn btn-primary pull-right">
<span class="fa fa-plus-circle"></span>
Add Record
</button>
</a>
</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<br>
<!-- Status -->
<div>
<form action="GET">
<div class="form-group">
<label> Table group by Status </label>
<select name="selector_id" onchange="StatusChange()" style="width:200px;" class="show-menu-arrow form-control" id="stats">
<!-- <option value="" disabled> Select Status </option> -->
<option value="1" selected> ACTIVE </option>
<option value="0"> INACTIVE </option>
</select>
</div>
</form>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Table of Tools Specification
</div>
<!-- /.panel-heading -->
<div class="panel-body" id="showStatus">
<div class="table-responsive">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th> Tools Name </th>
<th> Model No. </th>
<th> Value </th>
<th> Number of days </th>
<th>
<center> Status </center>
</th>
</tr>
</thead>
<tbody id="tb_body">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Here is my form_statusForspecs_dtbl.php AJAX call in function StatusChange()
<?php
include ("../include/connect.php");
$status = $_POST['status'];
$con->next_result();
$result = mysqli_query($con, "CALL GetToolSpecByStatus('$status')");
while ($row = mysqli_fetch_assoc($result))
{
echo '<tr>';
echo "<td><a href='edit_toolspec.php?ID=".$row['ID']."' style='color:red;'>" . $row['tools_name'] . "</a></td>";
echo '<td>'.$row['model_num'].'</td>';
echo '<td>'.$row['model_num_val'].'</td>';
echo '<td>'.$row['no_of_days'] .'</td>'; ?>
<td>
<center>
<p data-id="<?php echo $row['ID'];?>"
class="status_checks statusButton <?php echo ($row['status'])? 'btn-success': 'btn-danger'?>">
<?php echo ($row['status'])? 'Active' : 'Inactive'?>
</p>
</center>
</td>
<?php
echo '</tr>';
}
?>
Here is my form_btnStats.php AJAX call for button to change status and will be recorded in sql database
<?php
include('../include/connect.php');
$user_id=$_POST['id'];
$newStatus=$_POST['status'];
$query = "UPDATE tools_spec SET status='$newStatus' WHERE ID = '$user_id'";
$result = mysqli_query($con, $query);
if($result === TRUE)
{
echo json_encode(1);
}
else
{
echo json_encode(0);
}
?>

As you only need to show popup when making button inactive you add code to show modal inside if(status == '1'){ and use $("#reason_for_modal").modal('show'); to show same . Also , put some condition around your ajax call so that it will execute only when status is 1 .Nextly ,if user click on deactivate button inside modal you can create one click event handler for same and pass value to ajax from there.
Demo Code :
var id;
$(document).on('click', '.status_checks', function() {
var status = '1';
var selector = $(this);
id = $(this).data('id');
if ($(this).hasClass("btn-success")) {
status = '0'; //change to 0
$("#reason_for_modal").modal('show'); //show modal
}
//enter only when status is 1
if (status == '1') {
/*$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: status
},
success: function(data) {*/
selector.removeClass("btn-danger").addClass(
"btn-success");
selector.text("Active");
/*}
});*/
}
});
//if activate btn is click
$("#submitBtn").on("click", function() {
var reason = $("#reason").val(); //get reason..
$("#reason_for_modal").modal('hide'); //hide modal
console.log(id)
$("#reason").val("")//empty textarea
/*$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: 0,
reason:reason
},
success: function(data) {*/
//change class and text
$("p[data-id=" + id + "]").removeClass("btn-success").addClass("btn-danger")
$("p[data-id=" + id + "]").text("Inactive")
/*}
});*/
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- this is the modal that I want to pop up -->
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Table of Tools Specification
</div>
<!-- /.panel-heading -->
<div class="panel-body" id="showStatus">
<div class="table-responsive">
<table width="50%" class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th> Tools Name </th>
<th> Model No. </th>
<th> Value </th>
<th> Number of days </th>
<th>
<center> Status </center>
</th>
</tr>
</thead>
<tbody id="tb_body">
<tr>
<td>abc</td>
<td>14</td>
<td>1</td>
<td>5</td>
<td>
<center>
<p data-id="1" class="status_checks statusButton btn-success">
Active
</p>
</center>
</td>
</tr>
<tr>
<td>abc1</td>
<td>14</td>
<td>11</td>
<td>51</td>
<td>
<center>
<p data-id="2" class="status_checks statusButton btn-danger">
Inactive
</p>
</center>
</td>
</tr>
<tr>
<td>ab3</td>
<td>13</td>
<td>13</td>
<td>51</td>
<td>
<center>
<p data-id="3" class="status_checks statusButton btn-success">
Active
</p>
</center>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="reason_for_modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<center> Confirmation </center>
</div>
<!-- Modal body -->
<div class="modal-body panel-body">
<center>
<br><br>
<p> <strong> Reason for Inactive </strong> </p>
<textarea id="reason"></textarea>
</center>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="col-sm-15">
<div class="form-group">
<button type="button" id="submitBtn" class="btn btn-success pull-right"> De-Activate</button>
<button type="button" class="btn btn-danger pull-right" data-toggle="modal" data-dismiss="modal">
<span class="fa fa-check"></span>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>

Option 1: Simple CSS class assignment
Example: https://www.w3schools.com/w3css/w3css_modal.asp
Option 2: Use jQuery.show() / jQuery.hide()
function StatusChange() {
...
if (status == 0) {
// This should use # / id
jQuery('div.modal').show();
}
}
Option 3: Use jQuery UI dialog
Example: https://jqueryui.com/dialog/

How to limit file upload in angular-file-upload

I have used angular-file-upload to upload files, files are uploading everything working fine.
Now, I have to add restriction that user can not able to upload more
then 5 pictures and at one shot single file should upload How is it possible,
Below is my code
Controller
'use strict';
angular.module('Modulename')
.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
var uploader = $scope.uploader = new FileUploader({
url: site_url+'upload.php'
});
// FILTERS
uploader.filters.push({
name: 'imageFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
console.info('onAfterAddingFile', fileItem);
// fileItem.upload();
};
uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};
console.info('uploader', uploader);
}]);
View section
<section ng-switch-when="1" class="form-section {{animationClass}} wow" ng-class="{{animationClass}}" ng-controller ="AppController" nv-file-drop="" uploader="uploader">
<div class="form-section-block">
<h3 class="heading text-center">Upload photos</h3>
<!-- Upload demo area -->
<style>
.my-drop-zone { border: dotted 3px lightgray; }
.nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
.another-file-over-class { border: dotted 3px green; }
html, body { height: 100%; }
canvas {
background-color: #f3f3f3;
-webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
-moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
box-shadow: 3px 3px 3px 0 #e3e3e3;
border: 1px solid #c3c3c3;
height: 100px;
margin: 6px 0 0 6px;
}
</style>
<div class="row">
<div class="col-md-3">
<h3>Select files</h3>
<div ng-show="uploader.isHTML5">
<!-- 3. nv-file-over uploader="link" over-class="className" -->
<div class="well my-drop-zone" nv-file-over="" uploader="uploader" options="{autoUpload :'true'}">
Base drop zone
<input type="file" nv-file-select="" uploader="uploader" multiple />
</div>
</div>
</div>
<div class="col-md-9" style="margin-bottom: 40px">
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th ng-show="uploader.isHTML5">Size</th>
<th ng-show="uploader.isHTML5">Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td>
<strong>{{ item.file.name }}</strong>
<!-- Image preview -->
<!--auto height-->
<!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
<!--auto width-->
<div ng-show="uploader.isHTML5" ng-thumb="{ file: item._file, height: 100 }"></div>
<!--fixed width and height -->
<!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
</td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
</tr>
</tbody>
</table>
<div>
<div>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button>
<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Remove all
</button>
</div>
</div>
</div>
<!-- Upload demo area -->
<div class="col-md-4 col-sm-4 label-block"></div>
<div class="col-md-6 col-sm-8 signup-full-column">
<div class="stepToggle-btn">
<span class="">
<i class="fa fa-angle-up" aria-hidden="true"></i>
</span>
<button type="submit" class="btn btn-success down" data-toggle="tooltip" tooltip-placement="top" uib-tooltip="Next Step" ><i class="fa fa-angle-down" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="clearfix"></div>
</div>
</section>

You can use the queue limit filter for this
var uploader = new FileUploader({
queueLimit: 1
});
<element nv-file-drop filters="queueLimit"></element>

Can I avoid "white" topBar, when JavaScript is executed?

I build my page with angularJS. When I test it every thing works well,
but sometimes the page flickers.
Here is a sample when I click M1 > Sub-Menu-Item, I see the page flicker.
Can anybody help me, please?
My ngRoute:
'use strict';
angular.module('ssdWebClientApp.Routes', [])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/m1/', {
templateUrl: '/views/m1/m1_list.html',
controller: 'M1'
})
...
.otherwise({
redirectTo: '/main'
});
}
]);
My Modules Main.js that enable pushState Featrue:
var App = angular.module('ssdWebClientApp', [
'ngGrid',
'ngCookies',
'ngResource',
'ngRoute',
'ngAnimate',
'angular.filter',
'ssdWebClientApp.Controllers',
'ssdWebClientApp.Routes',
'ssdWebClientApp.Services',
'ssdWebClientApp.Directives'
])
...
.config(function($interpolateProvider, $locationProvider, $httpProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$locationProvider.hashPrefix = '!';
$httpProvider.defaults.timeout = 300;
})
...
My Sub Module Script for M1:
'use strict';
angular.module('ssdWebClientApp.Controllers')
//s064
.controller('M1', ['$rootScope', '$scope', '$http', '$location', '$cookies', '$routeParams', '$filter', 'empty', 'm1',
function($rootScope, $scope, $http, $location, $cookies, $routeParams, $filter, empty, m1) {
console.debug('m1 init.');
$http.defaults.headers.common['X-CSRFToken'] = $cookies.csrftoken;
//
var params = {};
var sortingBy = ' +' || ' -';
var inquery_has_been_clicked = false;
//
$scope.inquery = function(reset){
$scope.hide_grid = false;
if(reset){
$scope.form.offset = 0;
params.downloadOrderId = $scope.form.downloadOrderId;
params.homeSIMMSISDN = $scope.form.homeSIMMSISDN;
params.iccid = $scope.form.iccid;
params.msisdn = $scope.form.msisdn;
params.limit = $scope.form.limit;
params.offset = $scope.form.offset;
}
else{
params.offset = $scope.form.offset;
if(!params.limit){
params.limit = $scope.form.limit;
}
}
// clean data for java server....lol
if(!params.downloadOrderId) delete params.downloadOrderId;
if(!params.homeSIMMSISDN) delete params.homeSIMMSISDN;
if(!params.iccid) delete params.iccid;
if(!params.msisdn) delete params.msisdn;
$scope.ajaxing = true;
m1.m1_downloaded_sim_list(params, function(data, status){
if (data.status != 200) {
$rootScope.go_error(status, data.error || data.message || data.error_message || data.msg);
$scope.customers = [];
$scope.total = [];
$scope.ajaxing = false;
return;
};
$scope.customers = data.objects;
$scope.customers.every(function(row){
row.origin_status = row.status;
return true;
});
$scope.total = data.meta.total_count;
$scope.ajaxing = false;
}, function(data, status){
$rootScope.go_error(status, data.error || data.message || data.error_message || data.msg);
$scope.ajaxing = false;
});
};
//
$scope.inquery_clicked = function(reset){
var input_params = [$scope.form.downloadOrderId, $scope.form.homeSIMMSISDN, $scope.form.iccid, $scope.form.msisdn];
var not_empty_count = 0;
for(var i = 0; i < input_params.length; i++){
if(input_params[i]){
not_empty_count += 1;
}
};
if(not_empty_count >= 2){
alert('Please keep only one input');
return;
};
if($scope.form.downloadOrderId || $scope.form.homeSIMMSISDN || $scope.form.iccid || $scope.form.msisdn){
$scope.inquery(reset);
inquery_has_been_clicked = true;
}
else{
alert('No input found.');
}
};
//
$scope.show_m1_iccid = function(item){
// console.log(item);
var url = item.iccidImage || '';
// url = CONFIG.file_path + url;
$('#m1_iccid_bar_code')
.modal('show')
.find('.bar_code')
.attr('src', url);
};
//
$scope.show_m1_msisdn = function(item){
// console.log(item);
var url = item.msisdnImage || '';
// url = CONFIG.file_path + url;
$('#m1_msisdn_bar_code')
.modal('show')
.find('.bar_code')
.attr('src', url);
};
//
$scope.input_security_code = function(item){
$scope.securityCode = '';
$scope.prepare_update_record = item;
$('#input_security_code').modal('show');
};
//
$scope.update = function(securityCode){
if(!securityCode){
alert("Please input security code.");
return;
}
var post_data = {
imsi: $scope.prepare_update_record.imsi,
homeSIMMSISDN: $scope.prepare_update_record.homeSIMMSISDN,
securityCode: securityCode,
status: $scope.prepare_update_record.status,
};
m1.m1_downloaded_sim_update(post_data, function(data, status){
if (data.status != 200) {
$rootScope.go_error(status, data.error || data.message || data.error_message || data.msg);
return;
}
alert('Update Success!');
$('#input_security_code button[data-dismiss=modal]').click();
$scope.inquery(false);
}, function(data, status){
$rootScope.go_error(status, data.error || data.message || data.error_message || data.msg);
});
};
//
$scope.sorting = function(field){
if($scope.customers && $scope.customers.length > 0){
$scope.customers.sort(function(first ,next){
if(sortingBy == ' +'){
return first[field] > next[field];
}
else{
return first[field] < next[field];
}
})
}
$('th[field] span.sortingBy').empty();
$('th[field=' + field + '] span.sortingBy').text(sortingBy);
if(sortingBy == ' +'){
sortingBy = ' -';
}
else{
sortingBy = ' +';
}
};
//
$scope.hide_grid = true;
$scope.ajaxing = false;
$scope.prepare_update_record = null;
$scope.form = {};
$scope.form.downloadOrderId = $routeParams.downloadOrderId || '';
$scope.form.homeSIMMSISDN = $routeParams.homeSIMMSISDN || '';
$scope.form.iccid = $routeParams.iccid || '';
$scope.form.msisdn = $routeParams.msisdn || '';
$scope.form.limit = $routeParams.limit || 12;
$scope.form.offset = $routeParams.offset || 0;
$scope.total = 0;
$scope.customers = [];
$scope.statusList = [];
$scope.query_string = $scope.form;
$scope.securityCode = '1';
//
m1.m1_downloaded_sim_status_list(function(data, status){
if(status != 200){
$rootScope.go_error(status, data.error || data.message || data.error_message || data.msg);
return;
}
$scope.statusList = data.statusList;
}, function(data, status){
$rootScope.go_error(status, data.error || data.message || data.error_message || data.msg);
});
//
$scope.$watch('form.offset', function(new_value, old_value){
if(inquery_has_been_clicked){
$scope.inquery();
};
}, true);
}
]);
My M1 Feature's View:
<div class="container r ssd-platform" style="width: 1300px; min-width: 1300px;">
<h3 style="text-align: center;">Inquire M1 SIM</h3>
<br>
<form role="form" class="form-inline m1">
<div class="row">
<div class="col-md-4 col-voucher">
<div class="input-group" style="width: 100%;">
<div class="input-group-addon m1_control_panel_label" style="font-size: 10pt;">Voucher No:</div>
<input class="form-control" type="text" ng-model="form.downloadOrderId" maxlength="24">
</div>
</div>
<div class="col-md-4 col-homesimmsisdn">
<div class="input-group" style="width: 100%;">
<div class="input-group-addon m1_control_panel_label" style="font-size: 10pt;">Home SIM MSISDN:</div>
<input class="form-control" type="text" ng-model="form.homeSIMMSISDN" maxlength="16">
</div>
</div>
<div class="col-md-4 col-m1iccid">
<div class="input-group" style="width: 100%;">
<div class="input-group-addon m1_control_panel_label" style="font-size: 10pt;">M1 ICCID:</div>
<input class="form-control" type="text" ng-model="form.iccid" maxlength="20">
</div>
</div>
<div class="col-md-4 m1-msisdn">
<div class="input-group" style="width: 100%;">
<div class="input-group-addon m1_control_panel_label" style="font-size: 10pt;">M1 MSISDN:</div>
<input class="form-control" type="text" ng-model="form.msisdn" maxlength="16">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 input-group m1-query-btn pull-right" style="margin-top: 5px;">
<button type="button" class="btn btn-info btn-lg" style="border-radius: 5px; width: 100%; height: 40px; border-radius: 0px; height: 38px;" ng-click="inquery_clicked(true);">Inquery</button>
</div>
</div>
</form>
<div ng-hide="create_paginator(total, form.limit, form.offset).length <= 0" style="position: relative;">
<ul class="pagination" style="margin: 0px; float: left;" ng-show="create_paginator(total, form.limit, form.offset).length > 0">
<li><a href ng-click="prev(form);">«</a></li>
<li ng-repeat="num in create_paginator(total, form.limit, form.offset)" ng-class="{true: 'active', false: ''}[form.offset/form.limit+1 == num]">
<a href ng-click="page(form, num)">{{num}}</a>
</li>
<li><a href ng-click="next(form, total)">»</a></li>
</ul>
</div>
<hr>
<br />
<table class="table table-bordered no-border-width top-spa" style="width: 100%;">
<tr>
<th field="downloadOrderId" style="cursor: pointer; width: 243px;" ng-click="sorting('downloadOrderId')">
Voucher No
<span class="sortingBy"></span>
</th>
<th field="homeSIMMSISDN" style="cursor: pointer; width: 178px;" ng-click="sorting('homeSIMMSISDN')">
Home SIM MSISDN
<span class="sortingBy"></span>
</th>
<th field="iccid" style="cursor: pointer; width: 190px;" ng-click="sorting('iccid')">
M1 ICCID
<span class="sortingBy"></span>
</th>
<th field="imsi" style="cursor: pointer; width: 200px;" ng-click="sorting('imsi')">
M1 IMSI
<span class="sortingBy"></span>
</th>
<th field="msisdn" style="cursor: pointer; width: 200px;" ng-click="sorting('msisdn')">
M1 MSISDN
<span class="sortingBy"></span>
</th>
<th field="status" style="cursor: pointer; width: 135px;" ng-click="sorting('status')">
Status
<span class="sortingBy"></span>
</th>
<th style="width: 108px;">
Action
</th>
</tr>
<tr ng-repeat="item in customers" ng-if="customers.length > 0 && ajaxing == false && !hide_grid">
<td style="text-align: center;">{{ item.downloadOrderId }}</td>
<td style="text-align: left;">{{ item.homeSIMMSISDN }}</td>
<td style="text-align: center;">
<a ng-click="show_m1_iccid(item);">
{{ item.iccid }}
</a>
</td>
<td style="text-align: center;">{{ item.imsi }}</td>
<td style="text-align: center;">
<a ng-click="show_m1_msisdn(item);">
{{ item.msisdn }}
</a>
</td>
<td style="text-align: center;">
<select class="form-control" ng-model="item.status" style="padding: 0px; width: 110px!important;" ng-disabled="item.origin_status == 'Reject' || item.origin_status == 'Collected'">
<option ng-repeat="status in statusList" value="{{ status }}" ng-selected="item.status == status">{{ status }}</option>
</select>
</td>
<td style="text-align: center;">
<button
type="button"
class="btn btn-default btn-lg"
style="border-radius: 0px; width: 100%; height: 25px; padding: 0px;"
ng-click="input_security_code(item)"
ng-disabled="item.status == 'Booking' || item.origin_status == 'Reject' || item.origin_status == 'Collected'">
Update
</button>
</td>
</tr>
<tr ng-show="customers.length == 0 && ajaxing == false && !hide_grid">
<td colspan="7">
<div style="width: 100%; background-color: transparent; text-align: center; color: red;">
No Data Found.
</div>
</td>
</tr>
<tr ng-show="ajaxing == true && !hide_grid">
<td colspan="7">
<div class="ajaxing-min" style="min-height: 30px; width: 100%;"></div>
</td>
</tr>
</table>
<!-- Modal -->
<div class="modal fade" id="m1_iccid_bar_code" style="z-index:9999;">
<div class="modal-dialog" style="width: 800px; margin-top: 200px;">
<div class="modal-content">
<div class="modal-header bg-primary" style="border-radius: 5px 5px 0px 0px;">
<div class="row">
<div class="col-md-8">
<h3 class="modal-title" id="ModalLabel" style="color: white;">M1 ICCID Bar Code</h3>
</div>
</div>
</div>
<div class="modal-body" style="text-align: center;">
<img class="bar_code" src="/images/glyphicons-halflings.png" alt="bar_code">
</div>
<div class="modal-footer">
<button type="button" style="margin-left: 40%; margin-right: 40%; width: 20%; padding: 0px 10px 0px 10px; border-radius: 0px; height: 25px;" class="btn btn-default btn-lg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="m1_msisdn_bar_code" style="z-index:9999;">
<div class="modal-dialog" style="width: 800px; margin-top: 200px;">
<div class="modal-content">
<div class="modal-header bg-primary" style="border-radius: 5px 5px 0px 0px;">
<div class="row">
<div class="col-md-8">
<h3 class="modal-title" id="ModalLabel" style="color: white;">M1 MSISDN Bar Code</h3>
</div>
</div>
</div>
<div class="modal-body" style="text-align: center;">
<img class="bar_code" src="/images/glyphicons-halflings.png" alt="bar_code">
</div>
<div class="modal-footer">
<button type="button" style="margin-left: 40%; margin-right: 40%; width: 20%; padding: 0px 10px 0px 10px; border-radius: 0px; height: 25px;" class="btn btn-default btn-lg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="input_security_code" style="z-index:9999;">
<div class="modal-dialog" style="width: 600; margin-top: 200px;">
<div class="modal-content">
<div class="modal-header bg-primary" style="border-radius: 5px 5px 0px 0px;">
<div class="row">
<div class="col-md-8">
<h3 class="modal-title" id="ModalLabel" style="color: white;">Input Security Code</h3>
</div>
</div>
</div>
<div class="modal-body" style="text-align: center;">
<input type="text" class="form-control" placeholder="Security Code" ng-model="securityCode" />
</div>
<div class="modal-footer">
<div class="btn-group-lg top-spa" style="text-align: center;">
<button type="button" style="width: 20%; padding: 0px 10px 0px 10px; border-radius: 0px; height: 25px;" class="btn btn-default btn-lg" ng-click="update(securityCode);">OK</button>
<button type="button" style="width: 20%; padding: 0px 10px 0px 10px; border-radius: 0px; height: 25px;" class="btn btn-default btn-lg" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Counter -->
<style>
form.m1 div[class^=col-md] {
font-size: 8pt;
padding: 0px;
padding-left: 5px;
font-weight: bold;
}
.ajaxing-min {
background-image: url('/images/ajaxing-min.gif');
background-repeat: no-repeat;
background-position: center;
}
.col-voucher {
width: 27%;
}
.m1-query-btn, .col-voucher {
padding-left: 0px!important;
}
.col-homesimmsisdn {
width: 25%;
}
.col-m1iccid {
width: 25%;
}
.m1-msisdn {
width: 23%;
}
.m1-query-btn {
width: 200px;
float: right;
}
th {
background-color: lightgrey;
text-align: center;
}
</style>
My index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<!--[if lt IE 9]><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GreenRoam</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css /styles/app.css -->
<link rel="stylesheet" href="/components/jquery-ui/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/components/jqueryui-timepicker-addon/dist/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" href="/components/swipebox/src/css/swipebox.css">
<!-- <link rel="stylesheet" href="/components/jquery-resizable-columns/dist/jquery.resizableColumns.css"> -->
<link rel="stylesheet" href="/components/ng-grid/ng-grid.min.css"></script>
<link rel="stylesheet" href="/styles/bootstrap.css">
<link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/styles/ssd-platform.css">
<link rel="stylesheet" href="/styles/ssd-platform-ng-grid-extends.css">
<!-- endbuild -->
</head>
<body ng-app="ssdWebClientApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="{% get_static_prefix %}components/es5-shim/es5-shim.js"></script>
<script src="{% get_static_prefix %}components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- Add your site or application content here -->
<!-- Header - NaviBar -->
<ssd-navbar></ssd-navbar>
<!-- Render Part -->
<div ng-view></div>
<!-- Footer -->
<ssd-footer></ssd-footer>
<!-- Additional Template -->
<ssd-alert></ssd-alert>
<!-- build:js /scripts/app.js -->
<script src="/components/jquery/dist/jquery.js"></script>
<script src="/components/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="/components/jqueryui-timepicker-addon/dist/jquery-ui-sliderAccess.js"></script>
<script src="/components/jqueryui-timepicker-addon/dist/jquery-ui-timepicker-addon.js"></script>
<script src="/components/swipebox/src/js/jquery.swipebox.js"></script>
<script src="/components/angular/angular.js"></script>
<script src="/components/bootstrap/js/affix.js"></script>
<script src="/components/bootstrap/js/alert.js"></script>
<script src="/components/bootstrap/js/button.js"></script>
<script src="/components/bootstrap/js/carousel.js"></script>
<script src="/components/bootstrap/js/collapse.js"></script>
<script src="/components/bootstrap/js/dropdown.js"></script>
<script src="/components/bootstrap/js/modal.js"></script>
<script src="/components/bootstrap/js/scrollspy.js"></script>
<script src="/components/bootstrap/js/tab.js"></script>
<script src="/components/bootstrap/js/tooltip.js"></script>
<script src="/components/bootstrap/js/transition.js"></script>
<script src="/components/bootstrap/js/popover.js"></script>
<script src="/components/smoothscroll-for-websites/SmoothScroll.js"></script>
<script src="/components/angular-resource/angular-resource.js"></script>
<script src="/components/angular-cookies/angular-cookies.js"></script>
<script src="/components/angular-route/angular-route.js"></script>
<script src="/components/angular-animate/angular-animate.js"></script>
<script src="/components/angular-filter/dist/angular-filter.js"></script>
<script src="/components/ng-grid/build/ng-grid.js"></script>
<script src="/components/ng-grid/plugins/ng-grid-flexible-height.js"></script>
<script src="/components/ng-grid/plugins/ng-grid-layout.js"></script>
<!-- Base -->
<script src="/scripts/Config/config.js"></script>
<script src="/scripts/Config/base_config.js"></script>
<script src="/scripts/Config/code_config.js"></script>
<script src="/scripts/Modules/main.js"></script>
<!-- Routes -->
<script src="/scripts/Routes/routes.js"></script>
<!-- Services -->
<script src="/scripts/Services/services.js"></script>
<script src="/scripts/Modules/product/services.js"></script>
<script src="/scripts/Modules/customer/faq/services.js"></script>
<script src="/scripts/Modules/product/onstore_management/services.js"></script>
<!-- Directives -->
<script src="/scripts/Directives/directives.js"></script>
<!-- Modules -->
...
<script src="/scripts/Modules/m1/m1.js"></script>
...
<!-- Main -->
<script src="/scripts/app.js"></script>
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
</body>
</html>

Ok, I hava solved this problem, the top-bar-space in the moment cause by
CSS Style
style="width: 100%!important; position: fixed;"
or
style="position: fixed!important; width: 100%!important; top: 0px!important;"
After I remove it, It's work well. But I don't know why...

Table Row Sliding Bug - MVC 5

I am currently implementing the answer to the question here:Can a table row expand and close? and everything currently works 100%!
However, as you can see in the picture there is a small gap between the rows, I want this gone for two reasons.
I simply would prefer there to be no gaps, I want the rows to all smoothly lay on top of each other until expanded.
If I click on that tiny gap it will close upwards, and then the normal open/close function no longer works for the row above it.
Any help appreciated!
I put an arrow by one of the gaps
Here is my entire View for that page (just for reference), BOTH the JS Script and the extra content (<td colspan="12">) can be found at the bottom of the page.
#model IEnumerable<WebApplication2.ViewModels.Starring.StarringViewModel>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
table tr button {
opacity: 0.5;
float: right;
}
table tr:hover button {
opacity: 1;
}
</style>
<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width:100%">
<div class="panel-heading">
<span style="font-size: 30px; font-style:oblique"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-star"></span>Starring</span></span>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" style="margin:3px; width:32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick="location.href='#Url.Action("Create", "Movie")';return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Movie</span></button>
<button type="button" style="margin: 3px; width: 32.8%" class=" btn btn-success col-lg-3 col-xs-3" onclick="location.href='#Url.Action("Create", "Employee")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Employee</span></button>
<button type="button" style="margin: 3px; width: 32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick="location.href='#Url.Action("Create", "Show")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Showing</span></button>
</div>
</div>
<table class="table table-striped table-hover table-responsive table-condensed">
<tr>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">Movie Name</span></h3>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h3>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">Actor</span></h3>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">#Html.DisplayNameFor(model => model.Role)</span></h3>
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td class="col-lg-2">
<span style="font-size: 17px;">#Html.DisplayFor(modelItem => item.movieName)</span>
</td>
<td class="col-lg-2">
<span style="font-size: 17px;">#Html.DisplayFor(modelItem => item.movieReleaseDate)</span>
</td>
<td class="col-lg-1">
<span style="font-size: 17px;">#Html.DisplayFor(modelItem => item.employeeName)</span>
</td>
<td class="col-lg-1">
<span style="font-size: 17px;">#Html.DisplayFor(modelItem => item.Role)</span>
</td>
<td class="col-lg-3">
<button type="button" class="btn btn-warning col-lg-3" onclick="location.href='#Url.Action("Edit", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
<button type="button" class="btn btn-info col-lg-3 col-lg-offset-1" onclick="location.href='#Url.Action("Details", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-align-justify"></span>Details</button>
<button type="button" class="btn btn-danger col-lg-3 col-lg-offset-1" onclick="location.href='#Url.Action("Delete", "Movie", new { id = item.movieID })' ;return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</td>
</tr>
<tr>
<td colspan="12">
<p style="font-size: 17px; font-style: italic; font-family: 'Roboto', sans-serif">
MovieID: #Html.DisplayFor(modelItem => item.movieID)
<br />
Description: #Html.DisplayFor(modelItem => item.movieDescription)
</p>
</td>
</tr>
}
</table>
</div>
<script>
$(function () {
$("td[colspan=12]").find("p").hide();
$("table").click(function (event) {
event.stopPropagation();
var $target = $(event.target);
if ($target.closest("td").attr("colspan") == 12) {
$target.slideUp();
} else {
$target.closest("tr").next().find("p").slideToggle();
}
});
});
</script>

It looks like you're using Bootstrap. The default styles in Bootstrap applies a 5px padding to tds inside .table-condensed. You can override this with the following rule in your CSS...
.table>tbody>tr>td {
padding: 0px;
}
If you only want the padding removed when the p is collapsed, you can change the rule to include a nopadding class...
.table>tbody>tr>td.nopadding {
padding: 0px;
}
And use jQuery to attach the class to the td when you collapse the p...
$(function () {
$("td[colspan=12]").find("p").hide();
$("td[colspan=12]").addClass("nopadding");
$("tr").click(function () {
var $target = $(this);
var $detailsTd = $target.find("td[colspan=12]");
if ($detailsTd.length) {
$detailsTd.find("p").slideUp();
$detailsTd.addClass("nopadding");
} else {
$detailsTd = $target.next().find("td[colspan=12]");
$detailsTd.find("p").slideToggle();
$detailsTd.toggleClass("nopadding");
}
});
});
JSFiddle

Angular js load progress bars on opening modal

I have the following angular js htmlapp:
<!DOCTYPE html>
<html ng-app="StudentProgram">
<head>
<title>Student Program Management</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/badge.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">{{subcategory.name2}} - Add Courses</h4>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-body">
<div class="panel col-md-5">
<div class="panel-body">
<p><font size="2">Required Credits : <span class="badge badge-machb pull-right">{{subcategory.required2}} </span></p>
<p>Completed Credits : <span class="badge badge-machb pull-right">{{subcategory.completed2}} </span></p>
<p>Planned Credits : <span class="badge badge-machb pull-right">{{subcategory.planned2}} </span></font></p>
</div>
</div>
<!--<input type="checkbox">{{child}}-->
<div class="panel progress col-md-7" style="height:121px;">
<div class="panel-body">
PROGRESS
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="{{getPercentage()}}" aria-valuemin="0" aria-valuemax="100" ng-style="{width:(getPercentage()+'%')}">
{{getPercentage()}}%
</div>
</div>
</div>
</div>
<div class="panel panel-default" style="float:left;width:525px;">
<div class="panel-body" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto;position:relative;">
<table class="table table-hover checkbox">
<tr>
<th>Course</th>
<th>Credits</th>
</tr>
<tr ng-repeat="child in subcategory.children">
<td class="vcenter"><input type="checkbox" ng-checked="selectedCourses.indexOf(child) != -1" ng-click="toggleCheck(child)" value=""/>{{child}}</td>
<td class="vcenter">3</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="ok()">Save</button>
<button class="btn btn-default" ng-click="cancel()">Cancel</button>
</div>
</script>
</head>
<body>
<div class="container">
<div class="col-lg-9 col-md-9 col-sm-10">
<div class="" id="content">
<div class="pull-right">
<span class="glyphicon glyphicon-plus-sign"></span>
<span class="glyphicon glyphicon-file"></span>
<span class="glyphicon glyphicon-calendar"></span>
<span class="glyphicon glyphicon-search"></span>
</div>
<br/><br/>
<div ng-controller="mycontroller">
<div ng-repeat="detail in details">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><span class="badge badge-machb pull-right">{{detail.completed}} / {{detail.required}}</span>{{detail.name1}}</h3>
</div>
<div ng-repeat="subcategory in detail.subcategory1" class="panel-body">
<h4><strong>{{subcategory.name2}}
<button class="btn btn-default pull-right" ng-disabled="subcategory.required2 == subcategory.completed2" ng-click="open(subcategory)">Add Course <span class="glyphicon glyphicon-plus"></span></button>
</strong></h4>
<table class="table table-hover">
<tr>
<th>Course</th>
<th>Term</th>
<th>Credit</th>
<th>Grade</th>
</tr>
<tr ng-repeat="subcategory2 in subcategory.subcategory2">
<td>{{subcategory2.course}}</td>
<td>{{subcategory2.term}}</td>
<td>{{subcategory2.credit}}</td>
<td>{{subcategory2.grade}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
<script>
var app = angular.module('StudentProgram', ['ui.bootstrap']);
app.controller('mycontroller', function($scope, $modal, $log){
$scope.details=[
{name1:"TIER 1 - CORE FOUNDATIONS", completed:"9", required:"13", subcategory1:[
{name2:"Critical Reading and Writing",completed2:"6",required2:"6",planned2:"0",children:['ENGL-1301','HIST-1301'], subcategory2:[
{course:"HIST 1301",term:"Spring 2012",credit:"3.0",grade:"B"},
{course:"ENGL 1301",term:"Spring 2012",credit:"3.0",grade:"A"}
]},
{name2:"Speaking and Listening",completed2:"3",required2:"3",planned2:"0",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312','ARAB-1411','ARAB-1412','CHIN-1311','CHIN-1312','CHIN-1411','CHIN-1412','CZEC-1311','CZEC-1312','CZEC-1411','CZEC-1412','FREN-1311','FREN-1312','FREN-1411','FREN-1412','GERM-1311','GERM-1312','GERM-1411','GERM-1412','GREE-1311','GREE-1312','GREE-1411','GREE-1412','ITAL-1311','ITAL-1312','ITAL-1411','ITAL-1412','JAPN-1311','JAPN-1312','JAPN-1411','JAPN-1412','KORE-1311','KORE-1312','KORE-1411','KORE-1412','LATI-1311','LATI-1312','LATI-1411','LATI-1412','PORT-1311','PORT-1312','PORT-1411','PORT-1412','RUSS-1311','RUSS-1312','RUSS-1411','RUSS-1412','SGNL-1301','SGNL-1302','SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311','VIET-1312','VIET-1411','VIET-1412'],
subcategory2:[
{course:"SPCH 1311",term:"Spring 2012",credit:"4.0",grade:"A"}
]},
{name2:"Quantitative Reasoning",completed2:"0",required2:"3",planned2:"0",children:['MATH-1314','MATH-1414','MATH-1316','MATH-1324','MATH-1325','MATH-1425','MATH-1332','MATH-1333','MATH-1348','MATH-1350','MATH-1351','MATH-2321','MATH-2421','MATH-2342','MATH-2442','MATH-2412','MATH-2413','MATH-2414','MATH-2415','MATH-2318','MATH-2418','MATH-2320','MATH-2420','MATH-2305'],
subcategory2:[
]},
{name2:"Wellness and The Human Experience",completed2:"0",required2:"1",planned2:"0",children:['ARTS-1311','ARTS-1312','ARTS-1313','ARTS-1316','ARTS-2313','ARTS-2316','ARTS-2326','ARTS-2333','ARTS-2336','ARTS-2341','ARTS-2346','ARTS-2348','ARTS-2356','ARTS-2366','BIOL-1322','BUSI-1307','COMM-1316','COMM-1318','DANC-1245','DANC-1341','DANC-1347','DANC-1351','DRAM-1322','DRAM-1330','DRAM-1351','MUEN-1122','MUEN-1131','MUEN-1132','MUEN-1133','MUEN-1134','MUEN-1135','MUEN-1136','MUEN-1137','MUEN-1151','MUEN-1152','MUEN-1153','MUEN-2123','MUEN-2141','MUSI-1116','MUSI-1181','MUSI-1183','MUSI-1192','MUSI-1263','MUSI-1301','PHED-1100','PHED-1101','PHED-1102','PHED-1104','PHED-1105','PHED-1106','PHED-1107','PHED-1108','PHED-1109','PHED-1110','PHED-1111','PHED-1112','PHED-1113','PHED-1114','PHED-1115','PHED-1116','PHED-1117','PHED-1118','PHED-1119','PHED-1120','PHED-1121','PHED-1122','PHED-1123','PHED-1124','PHED-1125','PHED-1126','PHED-1127','PHED-1128','PHED-1129','PHED-1164','PHED-1165','PHED-1251','PHED-1304','PHED-1306','PHED-1346','SOCI-2301','SOCI-2340','SPCH 2341'],
subcategory2:[
]}
]},
{name1:"TIER 2 - CORE DOMAINS", completed:"10", required:"26", subcategory1:[
{name2:"Qualitative Reasoning, Literacy and Research",completed2:"3",required2:"3",planned2:"0",children:['ENGL-1302'],
subcategory2:[
{course:"ENGL 1302",term:"Summer 2012",credit:"3.0",grade:"A"}
]},
{name2:"Self and Society",completed2:"3",required2:"9",planned2:"0",children:['HIST-1302','HIST-2301','HIST-2328','HIST-2381','GOVT-2305','ANTH-2302','ANTH-2346','ANTH-2351','COMM-1307','CRIJ-1301','CRIJ-1307','ECON-1301','ECON-2302','ECON-2311','GEOG-1302','GEOG-1303','GEOG-2312','GOVT-2304','GOVT-2311','HIST-2321','HIST-2322','HIST-2327','PSYC-2301','PSYC-2306','PSYC-2314','PSYC-2316','SOCI-1301','SOCI-1306','SOCI-2306','SOCI-2319','SOCI-2336','TECA-1303','TECA-1354'],
subcategory2:[
{course:"GOVT 2301",term:"Spring 2012",credit:"3.0",grade:"B"},
{course:"PSYC 2301",term:"Summer 2012",credit:"--",grade:"--"}
]},
{name2:"Humanity, Creativity and the Aesthetic Experience",completed2:"0",required2:"6",planned2:"0",children:['ARTS-1301','ARTS-1303','ARTS-1304','DANC-2303','DRAM-1310','DRAM-2361','DRAM-2366','HUMA-1311','HUMA-1315','MUSI-1306','MUSI-1308','MUSI-1309','MUSI-1310',
'CUST-2370','ENGL-2321','ENGL-2322','ENGL-2323','ENGL-2326','ENGL-2327','ENGL-2328','ENGL-2331','ENGL-2332','ENGL-2333','ENGL-2342','ENGL-2343','ENGL-2351','HUMA-1302','HUMA-1305','HUMA-2319','PHIL-1301','PHIL-1304','PHIL-1316','PHIL-1317','PHIL-2303','PHIL-2306','PHIL-2307','PHIL-2316','PHIL-2317','PHIL-2318','PHIL-2321','ARAB-2311','ARAB-2312','CHIN-2311','CHIN-2312','CZEC-2311','CZEC-2312','FREN-2311','FREN-2312','GERM-2311','GERM-2312','GREE-2311','GREE-2312','ITAL-2311','ITAL-2312','JAPN-2311','JAPN-2312','KORE-2311','KORE-2312','LATI-2311','LATI-2312','PORT-2311','PORT-2312','RUSS-2311','RUSS-2312','SPAN-2311','PAN-2312','SPAN-2321','SPAN-2322','SPAN-2323','SPAN-2324','VIET-2311','VIET-2312'],
subcategory2:[
]},
{name2:"Scientific Discovery and Sustainability",completed2:"4",required2:"8",planned2:"0",children:['ANTH-2401','BIOL-1406','BIOL-1407','BIOL-1408','BIOL-1409','BIOL-1411','BIOL-2401','BIOL-2402','BIOL-2406','BIOL-2416','BIOL-2420','BIOL-2421','CHEM-1405','CHEM-1406','CHEM-1407','CHEM-1411','CHEM-1412','CHEM-2423','CHEM-2425','ENVR-1401','ENVR-1402','GEOL-1401','GEOL-1402','GEOL-1403','GEOL-1404','GEOL-1405','GEOL-1445','GEOL-1447','PHYS-1401','PHYS-1402','PHYS-1403','PHYS-1404','PHYS-1405','PHYS-1407','PHYS-1415','PHYS-1417','PHYS-2425','PHYS-2426'],
subcategory2:[
{course:"BIOL 1406",term:"Spring 2012",credit:"4.0",grade:"B"},
{course:"BIOL 1407",term:"Summer 2012",credit:"--",grade:"--"}
]}
]}
];
$scope.open = function (subcat) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
detail: function() {
return subcat;
}
}
});
};
});
var ModalInstanceCtrl = function ($scope, $modalInstance, detail) {
$scope.subcategory = detail;
$scope.selectedCourses= [];
$scope.subcategory.planned2 = parseInt($scope.subcategory.planned2,10);
$scope.subcategory.completed2 = parseInt($scope.subcategory.completed2,10);
$scope.subcategory.required2 = parseInt($scope.subcategory.required2,10);
angular.forEach(detail.subcategory2, function(item) {
$scope.selectedCourses.push(item.course);
});
$scope.toggleCheck = function (course) {
if (($scope.selectedCourses.indexOf(course) === -1) && ($scope.subcategory.planned2 + $scope.subcategory.completed2 < $scope.subcategory.required2)) {
$scope.selectedCourses.push(course);
$scope.subcategory.planned2 += 3;
if (($scope.subcategory.planned2 + $scope.subcategory.completed2) == $scope.subcategory.required2) {
alert('Requirement met');
}
} else {
$scope.selectedCourses.splice($scope.selectedCourses.indexOf(course), 1);
$scope.subcategory.planned2 -= 3;
}
$scope.getPercentage = function () {
return (($scope.subcategory.planned2+$scope.subcategory.completed2)/($scope.subcategory.required2)*100).toFixed(2);
}
};
$scope.ok = function () {
$scope.subcategory.subcategory2 = [];
for(var i = 0; i < $scope.selectedCourses.length; i++){
$scope.subcategory.subcategory2.push({course: $scope.selectedCourses[i], term:"--",credit:"--",grade:"--"});
}
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
</script>
</div>
</body>
</html>
When we click on the add courses button(for example in the self and society section), it opens a modal that has a progress bar to the right. The progress bar changes once we press on some course from the list below it. But i want the progress bar to load along with the modal ie. in the self and society section, the progress bar already has a value of 33.3% but it does not load that until we trigger a course. How do i do it?
Please help

You accidentally defined the getPercentage function inside the toggleCheck function. You need to define it outside toggleCheck, and then call it at the end of toggleCheck:
$scope.getPercentage = function () {
return (($scope.subcategory.planned2+$scope.subcategory.completed2)/($scope.subcategory.required2)*100).toFixed(2);
}
$scope.toggleCheck = function (course) {
if (($scope.selectedCourses.indexOf(course) === -1) && ($scope.subcategory.planned2 + $scope.subcategory.completed2 < $scope.subcategory.required2)) {
$scope.selectedCourses.push(course);
$scope.subcategory.planned2 += 3;
if (($scope.subcategory.planned2 + $scope.subcategory.completed2) == $scope.subcategory.required2) {
alert('Requirement met');
}
} else {
$scope.selectedCourses.splice($scope.selectedCourses.indexOf(course), 1);
$scope.subcategory.planned2 -= 3;
}
$scope.getPercentage();
};

Categories