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

On click function firing more times every time button is clicked

I had an initial issue where I could not get a button within a modal to work.
I got my solution; however, it ended up breaking the main screen table's button events. I figured separating the scripts into different files and including the file to use specific js files on certain cshmtl pages would solve my problem; however, it's causing me more grief. I had all of these scripts in one file, if there is a solution where all my buttons work inside and outside the modal, I will be happy to take that route.
I think I have it just about figured out -- but now when I click the "add user" button once it's fine. If i click it twice, two modals pop up. If I click it 3 times it freaks out. I am unsure what to do about the problem. I am not the most proficient in js/jQuery, very new and learning.
Main Page:
<link rel="stylesheet" href="~/css/Maintenance.css" />
<link rel="stylesheet" href="~/css/Index.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="~/js/Maintenance.js"></script>
<div class="tableContainer">
<div class="maintHeader">
<div class="headerText">
All Users
#*This button is the one causing issues -----------------------------------*#
<button class="sqButton btnGreen float-right" title="Register"
data-toggle="ajax-modal"
data-target="#register"
data-url="#Url.Action("Register", "Home")">
<i class="glyphicon glyphicon-plus"></i>
</button>
#*-------------------------------------------------------------------------*#
</div>
</div>
#if (Model.Any())
{
//--Table Header Declaration--
<div class="wrapper">
<div class="scrollTable">
<table class="table table-hover table-md ">
<thead>
<tr>
<th class="text-left tableHead d-none">Id</th>
<th class="text-left tableHead">User Name</th>
<th class="text-left tableHead">Email</th>
<th class="text-left tableHead">Phone Number</th>
<th class="text-left tableHead">City</th>
<th class="text-left tableHead text-right">Remove</th>
</tr>
</thead>
#*--Table Body For Each to pull DB records--*#
<tbody>
#foreach (var user in Model)
{
#Html.Partial("~/Views/Administration/Users/UserTable.cshtml", user)
}
</tbody>
</table>
</div>
</div>
}
<div id="modal-placeholder"></div>
</div>
Modal HTML:
<link rel="stylesheet" href="~/css/Modals.css" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="~/js/MaintModals.js"></script>
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="loginLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modalPosition" role="document">
<div class="modal-content">
<div class="modal-header headerFormat">
<span class="modal-title TitleFont">Login</span>
<button type="button" class="close closePadding" data-dismiss="modal" aria-label="Close">
<span class="xColor" aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" class="mt-3" asp-controller="Account" asp-action="Login">
<div class="form-group row text-center">
<label class="col-sm-3 text-right col-form-label labelFont" asp-for="Email"></label>
<div class="col-sm-7">
<input asp-for="Email" class="formField" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group row text-center">
<label class="col-sm-3 text-right col-form-label labelFont" asp-for="Password"></label>
<div class="col-sm-7">
<input asp-for="Password" class="formField" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group row text-center">
<label asp-for="RememberMe" class="col-sm-4 text-right col-form-label labelFont" />
<div class="col-sm-12">
<input asp-for="RememberMe" />
#Html.DisplayNameFor(m => m.RememberMe)
</div>
</div>
<div asp-validation-summary="All" class="text-danger"></div>
<button type="submit" class="btn btn-primary padFloat green">Login</button>
<button type="button" class="btn btn-secondary padFloat blue" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
Maintenance.js:
$(function () {
var placeholderElement = $('#modal-placeholder');
$('[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
placeholderElement.html(data);
placeholderElement.find('.modal').modal('show');
});
});
});
MaintModal.js:
$(function () {
$(document).on('click', '[data-dismiss="modal"]', function () {
$(".modal-backdrop").remove();
});
});
$(function () {
var placeholderElement = $('#modal-placeholder');
$(document).on('click', '[data-toggle="ajax-modal"]', function (event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
placeholderElement.html(data);
placeholderElement.find('.modal').modal('show');
});
});
});
site.js:
$('.sqButton').click( function (event) {
event.stopPropagation();
});
I just want my parent table's buttons to work and the buttons within the modal to work. I attempted to unbind ($('[data-toggle="ajax-modal"]').unbind("click");) the event before each event but that fixed nothing.
I am sure there's a simple way to do it. I have just been dancing around it and making it more complicated than it should be.

How to send two or more parameters to component vue.js? (vue.js 2)

My view is like this :
<table class="table table-inbox">
...
<tbody>
#foreach($messages as $message)
<tr>
...
<td>
<div class="btn-group" role="group" aria-label="...">
...
<a href="javascript:" #click="modalShow('modal-delete-message','{{ $message->id }}')" class="btn btn-danger">
<span class="fa fa-trash"></span> Delete
</a>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
#section('modal')
<delete-message-modal id="modal-delete-message" :message-id="idModal"></delete-message-modal>
#endsection
My component vue.js (DeleteMessageModal.vue) is like this :
<template>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
</template>
<script>
export default{
name: 'DeleteMessageModal',
props:['messageId'],
methods: {
deleteMessage(event) {
var message_id = this.messageId
console.log(message_id)
...
}
}
}
</script>
When I click delete button, it will send value of message id to DeleteMessageModal component
I do : console.log(message_id), it success display value of message id
But here, I need another parameters too
The messages array on the view, besides id key, that there are seller_id key and buyer_id key
I want to send buyer_id key and seller_id key also to components vue
How can I do it?
UPDATE
My solution :
My view is like this :
<table class="table table-inbox">
...
<tbody>
#foreach($messages as $message)
<tr>
...
<td>
<div class="btn-group" role="group" aria-label="...">
...
<a href="javascript:" #click="modalShow('modal-delete-message','{{ $message->id }}#separator#{{$message->seller_id}}#separator#{{$message->buyer_id}}')" class="btn btn-danger">
<span class="fa fa-trash"></span> Delete
</a>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
#section('modal')
<delete-message-modal id="modal-delete-message" :message-data="idModal"></delete-message-modal>
#endsection
My component vue.js (DeleteMessageModal.vue) is like this :
<template>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
</template>
<script>
export default{
name: 'DeleteMessageModal',
props:['messageData'],
methods: {
deleteMessage(event) {
var messageData = this.messageData
var arr = messageData.split('#separator#')
message_id= arr[0]
seller_id= arr[1]
buyer_id= arr[2]
}
}
}
</script>

As added in comment, you can add in props:
<script>
export default{
name: 'DeleteMessageModal',
props:['messageId', 'buyerId', `sellerId `],
methods: {
deleteMessage(event) {
var message_id = this.messageId
console.log(message_id)
...
}
}
}
</script>
and pass it in the parent template:
<delete-message-modal id="modal-delete-message" :message-id="idModal" buyer-id="123" seller-id="32"></delete-message-modal>

Knockout: Bind template bootstrap modal for many data objects

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

Some suggestions
at
<tbody data-bind="foreach: $data.DataRecords">
<tr class="tooltipstered" data-bind="tooltipster: 'bottom-right'">
<td data-bind="text: $data.record.startDate"></td>
<td data-bind="text: $data.record.endDate"></td>
<td data-bind ="text: $data.record.details"></td>
</tr>
</tbody>
you dont need to use the $data variable, since you are already inside a foreach context. You can replace it with
<tbody data-bind="foreach: DataRecords">
<tr class="tooltipstered" data-bind="tooltipster: 'bottom-right'">
<td data-bind="text: record.startDate"></td>
<td data-bind="text: record.endDate"></td>
<td data-bind ="text: record.details"></td>
</tr>
</tbody>
Also for modal dialog, you can have one dialog to show details of different objects. Something like
<!-- ko with: currentDialogDetails -->
<input id="linhas" type="text" class="form-control" data-bind="textInput: NumRecords" />
<!-- /ko -->
and the have a click binding for opening up the dialog like
<div class="icons pull-right">
</i>
</div>
and in your view model, add an observable and another click handler as
this.currentDialogDetails = ko.observable(null);
this.setCurrentDialogDetails = function(details){
this.currentDialogDetails(details);
}

HTML with id's construct dynamically

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

If I'm understanding right, you are much better off not using ids at all and just relying on classes. Use $(this).find(...) to only find .colapsar-competencias elements that are inside the clicked element.
$('.meu-painel-colapsar').on('click', function () {
$(this).find('.colapsar-competencias').collapse('toggle');
});

http://jsfiddle.net/Vq6gt/120/
$('#accordion .panel-collapse',this).collapse('toggle');