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);
}
Related
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
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.
I have this table:
<tr v-for="row in tasks">
<td span #mouseover="showButtonFunction" #mouseleave="hideButtonFunction"> {{row.text}}<button v-if="showBatton" #click="editWindow(row.text)">Edit</button></td>
<td span #mouseover="showButtonFunction" #mouseleave="hideButtonFunction"> {{row.date_current}}</td>
</tr>
Function to handle on click event:
editWindow:function(text){
console.log('edit')
this.showModal=true;
this.textToFunction=text
}
On click I get modal form:
Vue.component('modal', {
props: ['text'],
template: `
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<input type="text" value={{text}} v-on:change="checInput(text)" name="text" >
<button class="btn btn-default">Save</button>
<button class="btn btn-default" #click="$emit('close')">Cancel</button>
</div>
<button class="modal-close" #click="$emit('close')"></button>
</div>
});
Question:
How can I send data from a row to a form?
Initially your modal is hidden and when you click on a button it will be shown and the data will be passed automatically via props :
<tr v-for="row in tasks">
....
</tr>
....
<modal :text="textToFunction" v-if="showModal"/>
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');
So I'm trying to get a modal to ng-repeat an array of objects and it won't show up at all.
I'm not quite sure what I'm doing wrong but hoping for help as to getting the ng-repeat to work!
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
<h4>Transfer Funds</h4>
</div>
<br />
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<table class="table">
<thead>
<tr>
<th class="text-center">
eGift Cards
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="trans in gctrans.Items | filter: cardSearch">
<td class="text-center">
<strong>{{getCustomerName(trans)}}</strong>
<strong>{{getCustomerCardNumber(trans)}}</strong>
<small>{{getCustomerPhone(trans) | tel}}<br /></small>
<small> {{getCustomerEmail(trans)}}<br /></small>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<br />
<div class="modal-footer">
<button class="btn btn-primary" ng-click="confirmTransfer(trans)">Next</button>
</div>
</div>
the two most likely things that would be causing this are model not existing in scope and filter causing unexpected behavior. The first to try would be seeing if the gctrans.Items is available in the scope of the modal. Try adding {{gctrans}} in the modal and see if any data is there, like:
<div class="col-md-12">
raw data: {{gctrans}}
<table class="table">
second, if there is data try removing the filter:
<tr ng-repeat="trans in gctrans.Items">
and one more thing to try, if the data is good and the filter is not unexpectedly removing items, you might not be selecting anything inside of the repeat. Try just outputting the item
<tr ng-repeat="trans in gctrans.Items">
<td class="text-center">
<strong>{{trans}}</strong>
</td>
</tr>
thanks so much for the input. I figured out what I had done wrong in the controller (hadn't declared gctrans in the modal function).
Make sure all your stuff is declared in functions as well if you're using modals and ng-repeat!