How to perform a check on ng-disabled in angularjs? - javascript

I am using a fuelUX Wizard and Angularjs. I would like the next button to be enabled or disabled basing on this controller method:
$scope.canMoveForward = function(){
switch($("#moduleWizard").wizard("selectedItem").step){
case 1:
//check if the module on the first step is valid*/
return $scope.validSelection && $scope.linkedPredicateForm.$valid;
case 2:
//check if the table is empty
return !linkingDataSource.isEmpty();
case 3:
var enab= ($scope.saveModeForm.$valid && $scope.newSourceForm.$valid) ||
($scope.saveModeForm.$valid && $scope.appendSourceForm.$valid)
}
};
So indeed this is how I decleared the buttons:
<div class="actions">
<button class="btn btn-mini btn-prev" ng-click="refresh()"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish" id="wizard-next" ng-disabled="!canMoveForward()"
ng-click="handleStepResult()">
Next<i class="icon-arrow-right"></i></button>
</div>
And it works fine, except when I get back from the second page to the first page: if the next button is disabled in the second page it will be this way even on the first page, unless I don't edit the form there. Is there anyway to refresh the ng-disabled binding?

I guess AngularJS cannot check if the output of canMoveForward() has changed or not. I found that for this kind of things it's easier to rely on scope variables. You could do something like this:
ng-disabled="!canMoveForward"
Then in your controller just set the property to true/false as needed:
$scope.canMoveForward = false;

I have had the same problem and I've discovered that the problem is with the ! operator.
This fails:
ng-disabled="!canMoveForward()"
But this will work:
ng-disabled="canNotMoveForward()"

Related

A method in angular that simply closes the page when hit to a button

To exit a window or Angular page I have created an Exit button in the .html. To make the button work I want to write a method in the .ts file that will help me simply close the page.
Note: I am using Angular11 and Bootstrap 4.
Help me write the method.
I'd suggest you share a piece of code you have tried first before asking the question like that. Anyways here's something you can do:
In Html:
<button type="button" class="btn btn-link" (click)="closePage()">Close Page</button>
In TS:
closePage(){
window.close();
}

How to add a new webpage to ASP.NET MVC

Right now I am making a MVC that has a default page that loads up. From this page, the user can press a button to go to the next page. So far, I have made the first page work and a button that goes to a specified URL for the second page. The only issue I am having is making the view that I want to correspond to the second page have the correct URL.
Here is the code for my button link to the next URL
<input type="button" value="Create" onclick="location.href='#Url.Action("IndexA", "HomeController")'" />
I guess my question is how do I make my view have the specified URL that I want so it can be accessed?
I used something like this in my own project.
#if (Request.UrlReferrer != null && Request.UrlReferrer.Host == Request.Url.Host)
{
<a href="#Request.UrlReferrer" class="dbtn btn-11">
<i class="fa fa-undo"></i>
#Resources._Action_Back
</a>
}
only came from within the domain that was published I said let the button appear.
there is something like add controller in default settings controller name + controller. So just write the name there.
I had to put "home" in the URL.Action instead of "HomeController"
Please see this photo.
https://ibb.co/4SS5nYh
You add a new controller and a new view for that new page (also a model). I have called mine Test.
Then in the button. you call them with url action.
<input type="button" value="Create" onclick="location.href='#Url.Action("Index", "Test")'" />

How to listen the 400 (Bad Request) with Angular *ngIf?

I won't paste any code, since this is a general question. I need to figure out how to listen if nothing returns. I can't get any objects, since nothing exists. I only receive on my GET request a message "400 (Bad Request)".(console).
How can I disable a button if there is a "400 (Bad Request)" (nothing exists)?
Is there a way to listen this on frontend?
Thanks
In Angular2 you would need to capture the error from the response.
badRequest: boolean = false;
this.appService.myHttpCall.subscribe(
data => // do something with success,
error => {
if(error.status == 400){
this.badRequest = true;
}
});
And use the result in your template. If you really want to go the *ngIf route you would do this:
<button *ngIf="badRequest" type="button" disabled>My Button</button>
<button *ngIf="!badRequest" type="button">My Button</button>
You would essentially have to code two buttons, both with *ngIf statements to get the result you want.
If you want to use the [disabled] attribute you would do this:
<button [disabled]="badRequest" type="button">My Button</button>
However, I would not disabled a button if a BadRequest happens, because then how would the user resubmit the form after correctly filling it out? For example, if the user leaves a required field blank, the server returns a BadRequest and disables the button. Then the user cannot correct the missing field and re-submit the form.
What I would do instead is to toggle the button's disabled attribute based on the validity of the form like this:
<form (ngSubmit)="onSubmit()" #myForm="ngForm">
...inputs....
<button type="submit" class="btn btn-success" [disabled]="!myForm.valid">SUBMIT</button>
</form>
Hope this helps.

set variable in angular without interrupting form post

I need to use an asp.mvc form post. I use some angularjs on the client side. I know this question is not doing everything the "angular way".
What I need to do is set a variable $scope.IsUploadingData when the post happens so I can disable the buttons and show something to indicate progress. I have tried using ng-click, but it seems to stop the post from happening. Is there anyway to set the variable without interrupting the form post?
#using (Html.BeginFormAntiForgeryPost(Url.Action("Accept", "Members", new { area = "Testing" })))
{
other form stuff here
<span class="input-group-btn">
<button ng-disabled="IsUploadingData == true" name="accept" type="submit">Submit</button>
<button class="btn btn-default" ng-disabled="IsUploadingData == true" name="reject" type="submit">Reject</button>
<img ng-show="IsUploadingData" src="/SiteMedia/spinner[1].gif" />
</span>
}
It looks like you could use ng-submit to control the submission process and set $scope.IsUploadingData in the function you call from ng-submit. This is a decent write-up on ng-submit: http://learnwebtutorials.com/angularjs-tutorial-submitting-form-ng-submit

how to redirect to another page when using javascript

I have a form In their it has a cancel button. when that button is clicked a confirm box will appear and ask whether user needs to leave the page then i need to redirect the page .I'm using codeigniter and I did this but it is redirects to same page.I don't know why? can anyone help me?
View(busineeRateView.php)
<?php $Vehicleid=$details['id']; ?>
<input type="submit" name="cancelreview" class="btn btn-primary btn-lg" value="CANCEL" onClick="return cancelConfirm();">
<script>
function cancelConfirm() {
job = confirm("Are you sure you want to cancel and leave this page?");
if (job == true) {
window.location.href = "http://localhost/ci/adpreview_ctrl/getad_preview/".$Vehicleid;
return true;
}
}
</script>
controller
public function loadReviewPage($vehicleid){
$data=array();
$data['details']['id']=$vehicleid;
$this->load->view('pages/templates/header');
$this->load->view('pages/businessRateView',$data);
$this->load->view('pages/templates/footer');
}
Since you return true from the event handler, the submit button submits the form.
Since that comes after the location assignment, it overwrites it.
Submitting a form will reload the current page (assuming form doesn't have an action attribute and the submitted data doesn't cause the server to return a different page).
Don't use a submit button. Your JavaScript is doing little more than simulating a link, so use a real link.
<a class="btn btn-primary btn-lg"
href="http://localhost/ci/adpreview_ctrl/getad_preview/$Vehicleid"
onclick="return cancelConfirm();">
Cancel
</a>
and
function cancelConfirm(){
return confirm("Are you sure you want to cancel and leave this page?");
}
NB: You seem to have left some PHP in your example. Make sure you express your URL in valid HTML/JS.
this line is confusing:
window.location.href = "http://localhost/ci/adpreview_ctrl/getad_preview/".$Vehicleid;
Seems you mix javascript and php. Concatenating strings in JS is done with +, not . which is php syntax. and php variables like $Vehicleid are not accessible directly in JS. Try to use a php block for that. like:
window.location.href = "http://localhost/ci/adpreview_ctrl/getad_preview/" + "<?= $Vehicleid; ?>";
I think maybe you use the wrong operation. You should use '+' instead of '.' in javascript string operation. '.' is used in php:)
window.location.href = "http://localhost/ci/adpreview_ctrl/getad_preview/" + $Vehicleid;

Categories