We Keep Coding

How to Disable this save/submit button?

I am wondering what is the best method to disable this save button after one click?
Here is the code :
<button data-bind="enable: !$root.isSaving(), click: $root.addNewCard.bind($data, $root)" class="primary button" role="button" data-size="sm">
Save
</button>
Above is the .cshtml code
Below is the javascript code:
BillingInformation.prototype.addNewCard = function (parent, creditCard) {
parent.isSaving(true);
parent.isSettingDefault(true);
creditCard.cardNumber(creditCard.cardNumber().replace(/-|\s/g, ''));
let $form = $('#addNewCardForm' + creditCard.walletItemId()),
cardNumber = creditCard.cardNumber();
parseDynamicFormElements($form);
if ($form.valid()) {
verifyAddress($form, function () {
authentication.checkReAuthenticatedThenLaunchLoginOrExecuteTask(() => {
creditCard
.save()
.then(response => {
if (response.status === HTTP_STATUS_OK) {
creditCard.walletItemId(response.content);
parent.walletItems.push(creditCard);
creditCard.lastFourDigits(
creditCard.cardNumber() ? creditCard.cardNumber().substr(-4) : ''
);
creditCard.obfuscatedCardNumber(cardNumber.replace(/.(?=.{4})/g, '*'));
parent.newCardInstance(new CreditCard({paymentType: 'creditCards'}));
checkForRedirect();
} else {
let container = document.createElement('div');
container.append(
'We were unable to save your payment information. Please try again or give us a call at 1-800-461-8898'
);
smartPak.ui.modal(container, {
title: 'Unable to Save Payment Method',
buttons: {
Close: function (modal) {
modal.close();
}
}
});
}
})
.then(() => {
parent.isSaving(false);
});
});
});
parent.isSaving(false);
} else {
parent.isSaving(false);
parent.isSettingDefault(false);
}
};
What is the best method to prevent this from being clicked more than once after submission? currently if clicked multiple times it will duplicate the cc.
Thank you!

Maybe the the enable property should bind to a variable, not a function like you do in
enable: !$root.isSaving()

did you try switching click:
$root.addNewCard.bind($data, $root) to click: $root.addNewCard.bind($root, $data) ?
according to your declaration:
BillingInformation.prototype.addNewCard = function (parent, creditCard)
creditCard = $data from the form and parent = $root ?

I need to replace ActionLink for Dropdownlist

I'm having a foreach that it gives me a list of values that when click it call a controller:
#foreach (var item in Model)
{
<div>#Html.ActionLink(item.Text, "UpdateController",
new { subSectionID = item.Value, subsectionName = item.Text })</div>
}
I would like to do this but now using a dropdown list where clicking on the value redirects me to the controller.
If someone knows how to do it or do it in some other way, maybe using Select in html, it would help me, thanks!

Try the following:
<script type="text/javascript">
$('#subsec').change(function () {
var url = $(this).val();
if (url != null && url != '') {
window.location.href = url;
}
});
</script>
#Html.DropDownListFor(m => Model.GetEnumerator().Current,
Model.Select(d =>
{
return new SelectListItem() {
Text = d.Text,
Value = Url.Action("Your_Action_Name", "Your_Controller_Name", new { subSectionID = d.Value, subsectionName = d.Text })
};
}),
"-Select a value-",
new { id = "subsec" })
A similar solution you can find here: https://stackoverflow.com/a/6088047/6630084

Cannot filter files using Kendo Upload with rRazor

I saw no information on this topic really, except for info on how to filter files when using the latest Kendo library. So I am posting how I did it for others to use if they need to.

This is Kendo being used in Razor Syntax:
#(Html.Kendo().Upload()
.Name("procfiles")
.Async(a => a
.Save("SavePF", "AccountEvent", new { id = Model.SeqNum })
.Remove("RemovePF", "AccountEvent", new { id = Model.SeqNum })
.AutoUpload(true)
).Files(f =>
{
if (Model != null && !string.IsNullOrEmpty(Model.ProcedureFile))
{
f.Add().Name(Path.GetFileName(Model.ProcedureFile));
}
})
.Multiple(false)
.ShowFileList(true)
.Events(e =>
{
e.Error("accountEventEditController.uploadProcFileError");
e.Select("accountEventEditController.onProcFileUploadSelect");
e.Upload("accountEventEditController.onProcFileUpload");
e.Success("accountEventEditController.onProcFileSuccess");
e.Remove("accountEventEditController.onProcFileRemove");
e.Complete("accountEventEditController.onProcFileComplete");
})
)
As you can see, you can hook into the "Select" event. Then I have a .js controller handler file, that executes the following code to filter file types.
var onChkFileUploadSelect = function (e, type) {
var files = e.files;
var acceptedFiles = [".pdf", ".xlsx"];
var isAcceptedImageFormat = ($.inArray(files[0].extension, acceptedFiles)) != -1;
console.log(files[0].extension);
if (!isAcceptedImageFormat) {
e.preventDefault();
$(targetErrorControl).fadeIn('slow').delay(3000).fadeOut('slow');
}
}
Hopefully this helps some out there.

get checkbox array value in angular JS

I've seen a few posts asking the same question but I can't make it work. I'm quite new to angular so I would need help.
I'm trying to insert a new income with tags.
I get thoses tags from a service and display them like this :
<label ng-repeat="tag in tags">
<input type="checkbox" ng-model="tags_chosen" name="tags_chosen[tag]" ng-true-value="<%tag.id%>"/> <%tag.name%>
</label>
When I try to get back the checkbox values in angular, it doesn't work :
this.addIncome = function($scope) {
var data = {
'project_id':$scope.project_id,
'amount':$scope.amount,
'payment_date':$scope.payment_date,
'tags':$scope.tag_chosen,
'description':$scope.description,
'type':$scope.type
};
return $http.post(URL.BASE_API + 'income/store',data).
success(function(response) {
ServicesStatus.return = response;
}).error(function(response) {
console.log('Service error');
});
};
How could I do that ?
Thanks !

try this:
$scope.tag_chosen =[];
$scope.toggleSelection = function ( deviceId, $event ) {
var checkbox = $event.target;
var action=(checkbox.checked ? 'add':'remove');
var idx = $scope.tag_chosen.indexOf( deviceId );
// is currently selected
if (action=='remove' && idx != -1 ) {
$scope.tag_chosen .splice( idx, 1 );
}
// is newly selected
if (action=='add' && idx == -1 ) {
$scope.tag_chosen.push( deviceId );
}
and in html >>
ng-click="toggleSelection(yourcjeckbox value,$event)"

kenodui treeview scroll to node issue

I have a tab strip with two tabs. In the first tab I have a search text box and grid to show search results. When the user has found the item using the search box, they select the item in the grid and it switches tabs to the treeview and selects the item in the treeview (all these components are kendo ui mvc).
The search is working and the the treeview item is selected, however, it has not scrolled down to the item position in the view. Here is the code I have, but cannot get the scrolling working. I am using the jquery plugin scrollto.
Index.cshtml:
<body>
<div class="container-fluid">
<section style="padding-top:10px;"></section>
<div style="float:left; position:fixed">
#(Html.Kendo().TabStrip()
.Name("tabstrip")
.Events(events => events
.Activate("onTabActivate")
)
.Items(tabstrip =>
{
tabstrip.Add().Text("Search")
.Selected(false)
.Content(#<text>
<div>
<div style="padding-bottom:5px; padding-bottom:5px;">
<input type="text" class="clearable" id="search" name="search" placeholder="Enter a Account Name or Number" />
</div>
#(Html.Kendo().Grid<SageEMS.CRM.WebApp.DataService.AccountTreeItem>()
.Name("searchGrid")
.Events(events => events
.Change("onGridSelect"))
.Columns(columns =>
{
columns.Bound(acc => acc.AccountName);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(w => w.Account))
.ServerOperation(false)
.Read(read => read.Action("LoadSearchResult", "Home").Data("searchAccounts"))
)
.Pageable()
.Selectable()
)
</div>
</text>);
tabstrip.Add().Text("Accounts")
.Selected(false)
.Content(#<text>
<div class='k-scrollable' style='height: 400px; overflow: auto;'>
#(Html.Kendo().TreeView()
.Name("treeview")
.Events(events => events
.Expand("onExpand")
.Select("onTreeviewSelect"))
.DataTextField("AccountName")
.DataSource(dataSource => dataSource
.Model(m => m
.Id("Account")
.HasChildren("HasChildren"))
.Read(read => read.Action("LoadAccountTree", "Home").Data("loadChildren"))
)
))
</div>
</text>);
})
)
</div>
<div id="dvSections" style="padding-left:450px;">
#{Html.RenderPartial("Sections", Model);}
</div>
</div>
<script>
var _selectedAccount = null;
var _selectedTrackingItem = null;
var _searchValue;
var _selectedGridItem = null;
var $search = $('#search');
var $treeview = $("#treeview");
var $searchGrid = $("#searchGrid");
var $txtSelectedAccount = $('#txtSelectedAccount');
var $tabstrip = $("#tabstrip");
$search.on('change keyup copy paste cut', function () {
// set delay for fast typing
setTimeout(function () {
_searchValue = $('#search').val();
$searchGrid.data("kendoGrid").dataSource.read();
}, 500);
});
$(function () {
$txtSelectedAccount.text("All");
$treeview.select(".k-first");
});
function searchAccounts() {
if (_searchValue) {
return {
searchTerm: _searchValue
};
}
}
function onExpand(e) {
_selectedAccount = $treeview.getKendoTreeView().dataItem(e.node).id;
$txtSelectedAccount.text(this.text(e.node));
}
function loadChildren() {
if (_selectedAccount) {
return {
id: _selectedAccount
};
}
}
function onTabActivate(e) {
var tab = $(e.item).find("> .k-link").text();
if (tab == "Search")
$search.focus();
if (tab == "Accounts") {
if (_selectedGridItem == null) return;
var dataItem = getTreeItem(_selectedGridItem.id);
if (dataItem)
selectNodeInTree(dataItem);
}
}
function onTreeviewSelect(e) {
_selectedAccount = $treeview.getKendoTreeView().dataItem(e.node).id;
$txtSelectedAccount.text(this.text(e.node));
}
function onGridSelect(e) {
var grid = $searchGrid.data("kendoGrid");
_selectedGridItem = grid.dataItem(grid.select());
var tabStrip = $tabstrip.kendoTabStrip().data("kendoTabStrip");
tabStrip.select(1);
// Get the tree item and select it
var dataItem = getTreeItem(_selectedGridItem.id);
if (dataItem)
selectNodeInTree(dataItem);
else
findExpandSearch(_selectedGridItem.id);
}
function getTreeItem(id) {
var treeView = $treeview.data('kendoTreeView');
var dataSource = treeView.dataSource;
var dataItem = dataSource.get(id);
return dataItem;
}
function findExpandSearch(id) {
// item is not loaded in treeview yet, find parent and trigger load children and search again
var url = "#Url.Action("LoadTreePath")";
$.ajax({
url: url,
type: "POST",
data: JSON.stringify({ id: id }),
dataType: "json",
contentType: 'application/json; charset=utf-8',
cache: false,
success: function (data) {
if (data && data.length > 1) {
$.each(data, function (index, value) {
_selectedAccount = value;
loadChildren();
});
var dataItem = getTreeItem(data[0]);
if (dataItem)
selectNodeInTree(dataItem);
}
},
error: function (error, h, status) {
alert(error.responseText);
}
});
}
function selectNodeInTree(item) {
var treeView = $treeview.data("kendoTreeView");
var node = treeView.findByUid(item.uid);
if (node) {
treeView.select(node);
treeView.trigger("select", { node: node });
treeView.element.closest(".k-scrollable").scrollTo(treeView.select(), 450);
}
else
alert('Account not found in tree.');
}
</script>
<script src="../../Content/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
I have used the following sample as a guide:
http://dojo.telerik.com/uYutu/23
Any suggestions appreciated, thanks in advance.

The example you posted works by scrolling the splitter's k-pane. The tabstrip you're creating your tree in doesn't have a k-scrollable, so you need to create your own scrollable container:
<div class='scrollable' style='height: 300px; overflow: auto;'>
<div id="treeview-left"></div>
</div>
and then scroll it
tree.element.closest(".scrollable").scrollTo(tree.select(), 150)
Also, I think triggering the select event shouldn't be necessary since the select method will do that for you.
(demo)

I had a similar problem in my Treeview setup which was close to yours and was using the scrollTo() much as described in Lars Höppner’s solution.
My problem turned out to be a height style that was being applied to my treeview. Having any height defined on the treeview breaks the scrollTo() operation.
Once I removed the offending css class it worked fine. Something to check for.