I have the following controller:
function _deleteServiceInstance(serviceInstanceId) {
self.hasServerErrors = false;
self.serverErrors = [];
var flag = 1;
if (confirm("Are you sure you want to delete the service instance in this environment region?")) {
for (var i = 0; i < self.serviceInstanceDeployments.length; i++) {
var obj = self.serviceInstanceDeployments[i];
if (obj.state === "ACTIVE")
flag = 0;
}
if (flag === 0)
{
self.hasServerErrors = true;
self.serverErrors = ["Please delete the active deployments before deleting the service instance"];
// $window.location.reload();
$scope.$apply();
return self.serverErrors;
};
}
}
The following is the HTML:
<a uib-popover-template="ctrl.deleteServiceInstanceTemplate" popover-title="Delete service instance"
popover-placement="auto bottom" popover-trigger="outsideClick">
<button type="button" class="btn btn-danger">
Delete
</button>
</a>
<script type="text/ng-template" id="deleteServiceInstance.html">
<div class="container-fluid">
<div class="row">
<form name="ctrl.delete.form" class="form-horizontal" novalidate>
<div class="form-group" ng-class="{'has-error' : ctrl.hasServerErrors}">
<label class="col-sm-12 control-label">Are you sure?
<button type="submit" class="btn btn-primary" ng-click="ctrl.deleteServiceInstance(ctrl.serviceInstance.id)"
ng-disabled="ctrl.purge.form.$invalid">Yes</button>
<span ng-show="ctrl.hasServerErrors" class="help-block" ng-repeat="serverError in ctrl.serverErrors">{{serverError}}</span>
</label>
</div>
</form>
</div>
</div>
</script>
Basically, there is a delete button which opens as a pop-up. It asks for confirmation if I am sure of deleting something. If I press yes, it checks if there are any deployments in active state. If there are, it shows an error. Now, the problem is, when I click on the delete button for the second time, it shows the same error even when I haven't pressed yes. It keeps on showing the same error until the page is refreshed.
Edit: I have declared the _deleteServiceInstance like this in my controller:
self.deleteServiceInstance = _deleteServiceInstance
You should clear the messages while clicking the delete button event, instead of yes button click event
<button type="button" ng-click="clearMessages" class="btn btn-danger">
Delete
</button>
Controller
function _clearMessages() {
self.hasServerErrors = false;
self.serverErrors = [];
}
self.clearMessages= _clearMessages
Related
I want to disable button after click for about 3 sec, I do that but I have a problem, on my web app it's working more than 10 users and I want to resolve that click button when someone click on that button it generate some sort of code, and when 2 users click in same time it generate same code two times.
It's server side web app.
Code bellow
#using (Html.BeginForm("GenerateCodes", "Index", FormMethod.Post))
{
<div class="box-header">
<div class="row">
<div class="col-md-3 text-right">
<button type="submit" id="ok" class="btn btn-primary btn-lg">Generate</button>
<script>
var fewSeconds = 5;
$('#ok').click(function () {
// Ajax request
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function () {
btn.prop('disabled', false);
}, fewSeconds * 1000);
});
} </script>
</div>
</div>
</div>
Is it possible to do that with ajax and jQuery and should this pass to controller?
With a list of products, and once a 'remove from wishlist' button is clicked, it then removes that product from said product list, along with an AJAX request to the back-end for it to be removed via SQL.
The first click works, the jQuery executes and the product is then removed. The second click on the same type of button for any product, then loads the href instead of executing the jQuery, it's meant to execute the jQuery.
I've tried calling it as a static function from the anchor onclick="return removeFromWishlist();"
Have also tried executing the jQuery on the anchor link click via the jQuery event instead of the button tag itself.
jQuery('.button-wishlist').on('click', function (index) {
event.preventDefault();
// Calls the AJAX to remove it from the back-end via SQL etc
// The response is JSON within the following call
removeProductAjax(this);
console.log('removing product from the wishlist');
// Get the cell position of the product to remove from the wishlist
var position = jQuery(this).parent().parent().parent().data('cell');
var html = [];
var cells = 0;
jQuery('.wishlist_container .col-md-4').each (function () {
//
if (jQuery(this).data('cell') == position) {
cells++;
}
else if (jQuery(this).data('cell') !== undefined) {
html.push(jQuery(this).html());
cells++;
}
});
var upto = 0;
jQuery('.product-row').each (function () {
var self = this;
// Repopulate all the product lists excluding the one removed
jQuery(self).children().each (function () {
jQuery(this).html(html[upto]);
upto++;
});
});
// Then clear everything from upto and onwards!
console.log('cells: ' + cells);
console.log('upto: ' + upto);
// let's change from array to 'standard' counting
upto--;
// Remove the last element!
jQuery('.product-row').find('[data-cell=' + upto + ']').remove();
// Check for any empty rows
jQuery('.product-row').each (function () {
if (jQuery(this).children().length == 0) {
jQuery(this).remove();
}
});
});
The HTML is basically:
<div class="row product-row">
<div class="row product-row"><div class="col-md-4" data-cell="0">
<h1>product 1</h1>
<a href="./page.php?page=cart&unwish=660986" data-index="660986" class="wishlist-button" onclick="return removeProductFromWishlist(this);">
<button name="wishlist" class="btn button-wishlist" data-type="remove">Remove from Wishlist</button>
</a>
</div>
<div class="col-md-4" data-cell="1">
<h1>product 2</h1>
<a href="./page.php?page=cart&unwish=661086" data-index="661086" class="wishlist-button" onclick="return removeProductFromWishlist(this);">
<button name="wishlist" class="btn button-wishlist" data-type="remove">Remove from Wishlist</button>
</a>
</div>
<div class="col-md-4" data-cell="2">
<h1>product 3</h1>
<a href="./page.php?page=cart&unwish=661067" data-index="661067" class="wishlist-button" onclick="return removeProductFromWishlist(this);">
<button name="wishlist" class="btn button-wishlist" data-type="remove">Remove from Wishlist</button>
</a>
</div>
</div>
I'm expecting it to execute the jQuery each time the "remove from wishlist" button is clicked, no matter what product, no matter what order. So, you can unwish many products, one after the other using AJAX / jQuery.
Follow all my comments under your Question...
And I think this is all the code you need.
PHP (I used i.e: ../removeProduct.php?id=) should respond with some JSON like:
// PHP does here some DB deletions or fails.
// Send back to AJAX the deleted item ID (or null)
// and some (error?) message
echo json_encode(['id' => $id, 'message' => $message]);
exit;
// No more PHP here. We exit.
// jQuery will collect that JSON response as `res`
jQuery(function($) {
function removeProductAjax(id) {
$.get("../removeProduct.php?id=" + id, 'json').always(function(res) {
if (res.statusText === 'error') { // General error (path invalid or something...)
return alert(`Error: Cannot remove product ID: ${id}`); // and exit function
}
if (!res.id) { // Something happened
return alert(res.message); // Alert PHP's error message and exit function.
}
// All OK. Remove item from products
$(".product-row").find(`[data-id="${res.id}"]`).remove();
});
}
$('.product-row').on('click', '.product-remove', function(ev) {
ev.preventDefault();
removeProductAjax($(this).data('id'));
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="row product-row">
<div class="col-md-4" data-id="660986">
<h3>product 1</h3>
<button type="button" class="btn product-remove" data-id="660986">Remove from Wishlist</button>
</div>
<div class="col-md-4" data-id="661086">
<h3>product 2</h3>
<button type="button" class="btn product-remove" data-id="661086">Remove from Wishlist</button>
</div>
<div class="col-md-4" data-id="661067">
<h3>product 3</h3>
<button type="button" class="btn product-remove" data-id="661067">Remove from Wishlist</button>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I have a bootstrap card which has three different content views inside it. I am controlling the view of each of the separate data sets onclick of a link for each one. The problem is when I click a link it does not hide the previous one. I am having trouble getting the function right with typescript.
in my component.ts file
public showEquifax:boolean = true;
public showExperian:boolean = false;
public showTransunion:boolean = false;
Then in my html file
<div class="btn-group" role="group" aria-label="Credit Report Navigation">
<button (click)="showEquifax = !showEquifax" type="button" class="btn btn-secondary">Equifax Report </button>
<button (click)="showExperian = !showExperian" type="button" class="btn btn-secondary">Experian Report </button>
<button (click)="showTransunion = !showTransunion" type="button" class="btn btn-secondary">Transunion Report </button>
</div>
Based on this logic how can I change the boolean value of the functions to false when the link clicked value gets changed to true
I tried to do something like this,
public showEquifax() {
showExperian() = false;
showTransunion() = false;
return true;
}
But I get an error for left-hand side assignment expression.
How can I write each of these boolean functions to change the others to false when the current function is set to true?
What you want is: when one is shown, the other two are hidden, right? What about change your logic to something like this:
// On the class, instead of 3 booleans
private shown: string = 'EQUIFAX';
Then, the buttons would act like this:
<button (click)="shown = 'EQUIFAX'" type=="button" ...
<button (click)="shown = 'EXPERIAN'" type="button" ...
<button (click)="shown = 'TRANSUNION'" type="button" ...
Then you could show your components like this:
<div *ngIf="shown === 'EQUIFAX'">
content here
</div>
<div *ngIf="shown === 'EXPERIAN'"> ... </div>
<div *ngIf="shown === 'TRANSUNION'"> ... </div>
I am making an app, the user can either select an item or use their camera to get the qr code which translates into an item's ID.
The problem is that I think some JQuery is messing with my scope from working properly.
I have to get the QR code by listening to an innerHtml change, once it changes (DOMSubtreeModified) the following occurs.
var index = 0;
$('#result').one('DOMSubtreeModified', function(e) {
var code = "";
if (e.target.innerHTML.length > 0) {
code = e.target.innerHTML;
$scope.ToRun(code);
}
});
$scope.ToRun = function(code) {
for (i = 0; i < $scope.plantList.length; i++) {
if ($scope.plantList[i].plantcode == code) {
index = i;
break;
}
}
$scope.currentPlant = $scope.plantList[index];
$scope.plantDetails = false;
$scope.searchDetails = true;
}
For some reason the following does not have any effect on my ng-classes. As when an item is selected I hide the input dialogs, and show the result one.
$scope.plantDetails = false;
$scope.searchDetails = true;
But when a user selects the item manually it works just perfectly. (the items have an ng-click on it)
$scope.viewPlant = function(plant) {
$scope.currentPlant = plant
$scope.plantDetails = false;
$scope.searchDetails = true;
};
And the above works fine, with the ng-click. So why won't my new function that listens for an innerHtml change work?
HTML snippet
<div ng-class="{ 'hidden': searchDetails }">
<!-- CHOOSE INPUT TYPE -->
<div class="form-group" style="margin-bottom:0px">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="digits = false; qr = true">Plant Code</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="digits = true; qr = false">QR Code</button>
</div>
</div>
</div>
<br />
<!-- QR CODE INPUT -->
<div ng-class="{ 'hidden': qr }">
<img id="blah" src="./images/placeholder.png" />
<span class="btn btn-default btn-file">
<i class="glyphicon glyphicon-camera"></i>
<input type="file" onchange="readURL(this);handleFiles(this.files)">
</span>
<div id="result">xxxxxx</div>
<canvas id="qr-canvas" width="800" height="600"></canvas>
</div>
<!-- MANUAL SELECTION INPUT -->
<div ng-class="{ 'hidden': digits }">
<input ng-model="search.$" style="width:100%; font-size:30px; text-align:center" placeholder="Plant Code" />
<div style="overflow: auto; max-height:250px">
<table class="table table-striped" style="background-color:lightblue">
<tr ng-repeat="plant in plantList | filter:search" ng-click="viewPlant(plant)" style="cursor:pointer">
<th>{{plant.name}}</th>
<th>{{plant.plantcode}}</th>
</tr>
</table>
</div>
</div>
<div>
</div>
</div>
<div ng-class="{ 'hidden': plantDetails }">
// results - this should appear when one of the above is entered.
// works for manual selection, but not qr code
</div>
Just confused on why my QR input will not fire off the change-class options to hide the searchDetails div and show the plantDetails div
EDIT: Doing a small test, it seems that my class variables are indeed not updating at all. I just put the values at the bottom of my page and they do not update when hitting the block of:
$scope.plantDetails = false;
$scope.searchDetails = true;
You need to let Angular know about the change. Add this at the end of your method and let me know if it works.
$scope.$apply();
I am working on MVC application in Visual Studio 2012. On my layout page, I have a button for login. I want to remove my login page button from my layout page, after the user login. I'm trying to do this in the following way, but it's not working. Tell me how to figure this out. Is my way of doing this correct?
$(document).ready(function () {
var login = 0;
$('#login-request').on('click', function () {
var name = $("#lg-name").val();
var pwd = $("#lg-password").val();
if (name.toString() == "" || pwd.toString() == "")
alert("one of the fields is incorrect or missing");
else
login = 1;
});
$(document).on('pagebeforeshow', '#layout', function () {
if (login == 1) {//login condition
$('#login').remove();
}
});
});
This is my layout page
<head>
<title>PetZone</title>
</head>
<body id="layout">
<header class="page-header" id="header-page">
<div class="row" id ="headre-row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn" id="login" href="#" onclick="location.href='#Url.Action("login")'">LOGIN <span class="icon glyphicon glyphicon-log-in"></span></a>
<a class="btn" id="signup" href="#" onclick="location.href='#Url.Action("signup")'">SIGNUP <span class="icon glyphicon glyphicon-sign-up"></span></a>
</div>
</div>
</div>
</header>
</body>
Consider replacing selectors with simple call:
if (Request.IsAuthenticated) {
//hide link or set it to Logout action
else
//show Logon link
}