I have a form with two states: editing and visible. When you click an icon to edit the form two buttons (acting like submit) at the bottom appear to save or cancel. When I click them the form is updated (or cancelled) and the buttons disappear. The problem is when I re-open the form to edit it (and the buttons are visible again) the last one clicked still has it's hover state applied in Chrome.
<div>
<div class="col-xs-5">
<button class="btn btn-primary pull-right" ng-click="save(true)">Save</button>
</div>
<div class="col-xs-5 cancel-btn">
<button class="btn btn-primary pull-left" ng-click="cancel()">Cancel</button>
</div>
</div>
For simplicity here is just the cancel function...
$scope.cancel = function() {
//set a flag for angular to hide/show editing mode in HTML
$scope.editMode = false;
};
As mentionned in an earlier comment (runTarm), this is because of the active/focused state of the buttons.
To change it :
.btn-primary:active,
.btn-primary:focus {
// place your 'default' styling over here
}
You will probably need to be more specific with your declaration because what I posted will override all the items with class btn-primary.
Hope this helps !
Related
I have problem with sign up button while registering as user, Actually there is check box for T&c. After checking that check box only button should enable.
Everything is going well But, when I am refreshing page I am not able to see button, I able to see all other elements even check box.
here are Html tags I used for check box and Sign Up button and I also used flags.
<p class="terms"> <div class="chckbx-cntnr zeromargin" style = "padding:2px;vertical-align:middle"><input type="checkbox" id="rd" name="check" class="flashadmin" ng-model="user.tnc" ng-click="setbuttonFlag(user.tnc)" class="flashadmin"><label class="cstmchk_lbladmin" for="rd"></label></div>
I agree to the Terms of Use and Privacy Policy.</p>
<button ng-if="buttonFlag==true" id="signup"class="btn btn-default btn-block btn-login" type="submit" >Sign up</button>
<button ng-if="buttonFlag==false" id="signup" class="btn btn-default btn-block btn-login" disabled >Sign up</button>
here is validation i wrote for flag
$scope.buttonFlag=false;
$scope.setbuttonFlag =function(checkbox){
if(checkbox == true){
$scope.buttonFlag=true;
}else{
$scope.buttonFlag=false;
}
};
I am getting in console
Error: $injector:unpr
Unknown Provider
First thing is your code looks clumsy!
Below mistake you did, you misunderstood the concept completely.
Why you required for two submit button in your html? Also no need separate click event for changing button flag.
Now coming to your question:
When I am refreshing page I am not able to see button
This is because your are using ng-if directive in button element at the same time while initiating your controller you set $scope.buttonFlag=false so obviously you can't see button while refresh..
Below snippet will work for you!
angular.module("app", []).controller("testCtrl", function($scope) {
$scope.buttonFlag = false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="testCtrl">
<input type="checkbox" ng-model='buttonFlag'> I agree to the Terms of Use and Privacy Policy.
<button ng-disabled='!buttonFlag' id="signup" class="btn btn-default btn-block btn-login">Sign up</button>
</div>
</div>
Well upon refresh you are manually setting buttonFlag to false hence the button disappears.Store buttonFlag in localStorage and check the state of buttonFlag unlike setting it to false as you have done.
if(localStorage.getItem('buttonFlag')){
buttonFlag = localStorage.getItem('buttonFlag');
}
else{
buttonFlag = false;
}
also instead of using two different button for signup use ng-disabled to disable or enable a button
In HTML file, there are 3 buttons as save,edit and cancel. Im hiding save and edit button depends on the functionality in javascript.
<div class="controls col-sm-9">
<button onclick="modJs.save();return false;" class="saveBtn btn btn-primary pull-right"><i class="fa fa-save"></i> <t>Save</t></button>
<button onclick="modJs.editrecord();return false;" class="EditBtn btn btn-primary " style="display:none;"><i class="fa fa-save"></i> <t>Update</t></button>
<button onclick="modJs.cancel();return false;" class="cancelBtn btn pull-right" style="margin-right:5px;"><i class="fa fa-times-circle-o"></i> <t>Cancel</t></button>
</div>
in my javascript fucntion, im showing and hiding edit and save buttons.
if(object != undefined && object != null) { //editing selected
$(".editBtn").show();
$(".saveBtn").hide();
this.fillForm(object);
}
Already i gave display:none in html tag for edit button. I want to show edit button if object is not null (that means edit). By the above code, the save button get hide, but edit button is not showing.
I guess there is a little spelling mistake there
replace
$(".editBtn").show();
with
$(".EditBtn").show();
Or maybe simply change classname EditBtn to editBtn to keep naming consistent.
In your HTML you're using the class EditBtn, in the JS code you use the class editBtn. Class names are case sensitive! Change it in the HTML to editBtn.
I have a button that triggers the below jquery function. Currently the function works and hides/shows the form element as desired. However it is tripping the html 5 validation (which I want on submit). Is there a reason it is triggering and a way I can prevent this? I experimented with having a return at the end of the function but no luck. Also neither form is required as part of the validation. I keep getting a pop up telling me previous items are required when I hide/show the form elements..
<button class="col-sm-2 btn btn-success" onclick ="hideFormField ()">Hide</button>
function hideFormField (){
if(!$("#trail").is(":visible"))
{
$("#trail").show();
$("#blazers").hide();
}else{
$("#trail").hide();
$("#blazers").show();
}
}
Try this:
<button class="col-sm-2 btn btn-success" onclick ="hideFormField ();return false;">Hide</button>
Try:
<button class="col-sm-2 btn btn-success" onclick="hideFormField();event.preventDefault();">Hide</button>
Jonathan Lonowski was correct in his comment. Buttons are submit-type by default so you need to explicitly define a button with type="button" attribute if you don't want any additional effects when the button is clicked.
A small example that illustrate the activation of HTML5 form validation through default button behavior is in this jsfiddle: http://jsfiddle.net/zk3jr9vn/
by default button is submit type so add Type to button
like
<button type="button" class="col-sm-2 btn btn-success" onclick ="hideFormField ()">Hide</button>
I have two buttons (describing the type of delivery). Once selected I have to press another button to proceed . Is there any way how I can proceed automatically after selection?
Here is my code before selection:
<button type="button" class="button btn-delivery-method" data-delivery-method="s_method_free">
<span class="btn-delivery-method__label">Select</span>
</button>
Here is my code after selection:
<button type="button" class="button btn-delivery-method delivery-method__selected" data-delivery-method="s_method_free">
<span class="btn-delivery-method__label">Select</span>
</button>
Here is my third button to proceed:
<button type="button" class="button btn-large--alt" onclick="shippingMethod.save()">
Continue
</button>
Thanks
You can add the onclick event to the first two buttons.
Btw, what does the code do after pressing either of the first two buttons?
Bind a click event to the first button as well:
$(".button.btn-delivery-method").click(function() {
// check if the delivery has been selected
if($(this).hasClass("delivery-method__selected")) {
// either call shippigMethod.save(); here
//trigger the button click
$(".button.btn-large--alt").trigger("click");
}
});
This will trigger the button only when the delivery is selected
if($(this).hasClass("delivery-method__selected")) {
$(".button.btn-large--alt").trigger("click");
}
It would be nice to have the Id from your second button just to avoid any conflicts with other buttons.
I am using knockout js and bootstrap. I have a list of users with a delete button on each row.
I also have a bootstrap modal dialog that has a confirmation message whether to delete the user or not.
I have a click binding on the delete button that can remove the user from the model. How do i change it so that the deletion happens after the user has confirmed.
I have searched several examples and they all suggest to use custom bindings, and the closest i found was this fiddle example
http://jsfiddle.net/snaptopixel/vDZQk/
The one problem with this example is, it uses a pre-defined item from the model in the modal popup, what i want is to automatically bind the item that was deleted by the user and show the user name and other properties in the modal window and ask for confirmation.
Here is my modal dialog
<div class="modal-body">
<div class="well">
<p>By clicking 'Yes', you will remove the User 'foo' from the system. This action cannot be undone. To cancel this action, click 'No'. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
For example...
The modal window will say "Are you sure you want to delete User 'foo'? I would like to have access to the selected User inside the modal window.
Thanks for your help
Set a click binding on the 'Yes' button to the function that actually does the deletion, and set the click binding on the delete button to a function that displays the modal. You'll probably want that function to store the current item in an observable (itemToDelete or something like that) so that the actual delete function knows what to delete.