We Keep Coding

how to change the bind grid view in separately

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

Display different data in collapsible panel body

I am working on displaying data into multiple collapsible panel body dynamically to display individual data into each body on click but somehow on every click it sharing same data for each panels.
What I wanted to do is to display individual data for each item. Here is my sample code that I have written.
<span ng-repeat="t in tabledata">
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#{{t.appSystemName}}">
<table class="table borderless">
<tr>
<td>
<span class="glyphicon glyphicon-plus"
ng-click="getDataForProdQa(t.appSystemName)"
ng-model="plus">
</span>
</td>
<td>{{t.dbName}}</td>
<td>{{t.appSystemName}}</td>
<td>{{t.Id}}</td>
<td>{{t.frequency}}</td>
<td>{{t.timeStamp}}</td>
</tr>
</table>
</a>
</h4>
</div>
</div>
<div id="{{t.appSystemName}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table table-responsive" >
<tr ng-repeat="i in innertabledata">
<td>{{i.dbName}}</td>
<td ng-model="check">{{i.appSystemName}}</td>
<td>{{i.Id}}</td>
<td>{{i.frequency}}</td>
<td>{{i.timeStamp}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</span>
Looking some assistance to fix this issue

just try to make the id="accordion" dynamic as it is under ng-repeat and everytime same id is duplicated.So make dynamic id like id="accordion{{$index}}" and also the data-parent make it dynamic.Hope this helps.
Thanks

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

how to show the data in Ui if i am getting data in console in angular js

i have written one html file and corresponding controller logic for this page i am getting data in console but that data is not showing in my UI
<div id="panelDemo14" class="panel panel-default" ng-controller="NoticeController">
<div class="panel-heading">Enter Notice here</div>
<div class="panel-body">
<tabset>
<!-- SECOND TAB -->
<tab heading="Notice List">
<div class="panel panel-default" ng-controller="NoticeController " >
<div class="panel-body">
Displaying all notices. {{ gradeFilter }} {{ sectionFilter }}
<div class="row">
<div class="col-md-12">
<div class="box-placeholder">
<!-- START DATATABLE 1 -->
<div class="panel panel-default {{ dataLoad }}">
<div class="panel-heading">
<a ng-mousedown="csv.generate()" ng-href="{{ csv.link() }}" download="test.csv" class="pull-right btn btn-sm btn-info">Export to CSV</a>
<div ng-if="gradeFilter" class="panel-title">Classes</div>
</div>
<div class="table-responsive ">
<table ng-table="table.tableParams" export-csv="csv" show-filter="true" class="table table-bordered table-striped">
<tr ng-repeat="g in $data ">
<td data-title ="'Topic'" align="center" >{{g.noticeId}}</td>
<td data-title ="'Message'" align="center" >{{g.message}}</td>
<td data-title ="'Sender'" align="center" >{{ g.senderName }} </td>
<td data-title ="'Date'" align="center" >{{ g.date | cmdate:'dd-MMM-yyyy' }}</td>
<td align="center"><a ui-sref="admin.viewEditnotice({nid : g.noticeId})">View </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and my controller file
enter code here/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
console.log('Notice loaded');
App.controller('NoticeController', ["$scope","$http","$stateParams","Notice","toaster","APISource",function($scope,$http,$stateParams,Notice,toaster,APISource) {
'use strict';
$http.get(APISource.currentApiPoint+"/app/notice")
.success(function(data){
console.log(JSON.stringify(data))
})
.error(function(data)
{
});

Define your data as, $scope.mydata = data and then in ng-repeat use, g in mydata

Set your AJAX response to controller model like this:
$scope.$data = data

Jquery, delete dynamically added content

I'm trying to delete some div block which contains a bunch of content, I have a div bloc inside it I can add some content dynamically using a button also existing withing the same div, without adding content deleting the block is working fine, however when I add some content inside this bloc its not totally deleted, the dynamically added content is not deleted.
Here's my code :
<div class="collection form_lignefacturefournisseur" >
<div class="portlet box green">
<div class="portlet-title">
<div class="caption"><i class="fa fa-globe"></i>Produit de Bon de Livraison N°<span id="spanidbl{{ loop.index }}">{{ loop.index }}</span></div>
<div class="tools">
</div>
</div>
<div class="portlet-body">
<div class="form-group">
<label class="col-md-1 control-label">N° BL</label>
<div class="col-md-2">
{{form_widget(ligneffm.idbl,{ 'attr': {'class': 'form-control'} }) }}
<span class="help-block">{{form_widget(ligneffm.idbl)}}</span>
</div>
</div>
<table class="table table-scrollable table-striped table-hover table-bordered table_form_lignefacturefournisseur{{ loop.index }}" id="lignedevistable{{ loop.index }}" >
<thead>
<tr>
<th style="width: 188px;">Produit</th>
<th>Quntité</th>
<th>Prix HT</th>
<th>Sous Total HT</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for ligneff in ligneffm.ligneff %}
<tr class="ligneproduit{{loop.index}}">
<td>{{ form_widget(ligneff.idarticle,{ 'attr': {'class': 'form-control'} }) }}</td>
<td style="display:none;">{{ form_widget(ligneff.libelleligneff,{ 'attr': {'class': 'form-control'} }) }}</td>
<td>{{ form_widget(ligneff.qtLignefacturefournisseur) }}</td>
<td>{{ form_widget(ligneff.prixLignefacturefournisseur) }}</td>
<td style="display:none;">{{ form_widget(ligneff.listeprixarticle) }}</td>
<td class="inputdesible">{{ form_widget(ligneff.totalLignefacturefournisseur) }}</td>
<td> <a class="remove btn red" title="Remove" idx="{{loop.index}}"><i class="fa fa-eraser"></i></a></td>
</tr>
{% endfor %}
<tr id="lignefacturefournisseurtr" style="display:none" >
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="clearBoth"></div>
<input id="form_lignefacturefournisseur_btn__namear__" class="form_lignefacturefournisseur_btn btn green fa fa-plus" type="button" value="Ajouter" /><i style="display:none" id="countTiwg">{{loop.length}}</i>
</div>
The deleted part of the code is :
<div class="portlet box green">
<div class="portlet-title">
<div class="caption"><i class="fa fa-globe"></i>Produit de Bon de Livraison N°<span id="spanidbl{{ loop.index }}">{{ loop.index }}</span></div>
<div class="tools">
</div>
</div>
And the other part that contains the added content is not deleted
The jQuery code is as following:
$('.tools a.remove').live('click',function(){
$(this).parent().parent().siblings('.portlet-body').remove();
$(this).closest('div [class*="form_lignefacturefournisseur"]').remove();
blCount--;
});
Note : Ive tried several methods of invocking the click event, the same thing/result.
Any idea , thanks in advance!

Thanks every one for trying to help me, what I found, is that the button I was working on, has some work in the background, I'm using a template that help me with functionnalities, what Ive done is that I let it and created another button, work with it :
$(".supprimer_bl").live("click", function() {
var idBl = $(this).parent().parent().parent().get(0);
console.log('the class of the element is : ', idBl);
idBl.remove();
// $('.'+classCont).remove();
// $(this).closest('div [class*="form_lignefacturefournisseur"]').contents().remove();
blCount--;
});