How can have an ng-if two way conditionality within a button? - javascript

I have a button that I would like to not autofocus on a textfield if the browser is Internet explorer. There are other ids and various things in the button element I didn't include. I know I could include two separate ng-if statements and repeat both pieces of button classes from the outside, one with and one without forcefoucus.
Is there a possible way of putting the ng-if inside the button tag so I wouldn't need to repeat the other stuff in the button tag?
Non IE
<button type="button"
otherStuff
ng-click="doStuff(); forceFocus('currentPassword')"
</button>
IE
<button type="button"
otherStuff
ng-click="doStuff()"
</button>

in your forceFocus function add one more parameter: isInternetExp. So that you can return false if isInternetExp value is true
forceFocus('currentPassword', isInternetExp)

Related

Finding Certain Element Using XPATH with Not Contains

I am trying to search for a specific object inside a html website that the only difference is a disabled="". I have attempted to several attempts but none have been successful.
Problem:
There is two buttons displayed one that is active and the other one is disabled. My goals is to try to find the xpath only for the one that is enabled. I have attached the HTML for both buttons below.
HTML:
<button _ngcontent-skh-c131="" type="submit" class="mbsp-button btn-submit ng-star-inserted" id="price-submit-21C327109">submit </button>
<button _ngcontent-ylw-c131="" type="submit" class="mbsp-button btn-submit ng-star-inserted" id="price-submit-21C327008" disabled="">submit </button>
Xpath:
//*[(contains(#id, 'price-submit-')and not(contains(#disabled," ")))]
This XPATH returns a finding of two elements when I am expecting only one.
Any help would be appreciated.
The problem is your xpath isn't expressing what you really want. You're asking for elements that do not have a disabled attribute whose value contains a single space. Both do not, so both are selected.
It seems like what you really want is the element that has no disabled attribute whatsoever. Try this:
//*[(contains(#id, 'price-submit-')and not(#disabled))]
or
//button[(contains(#id, 'price-submit-')and not(#disabled))]

When should prefer angular directive over html native tag?

I'm a big fan of angularjs, I started lately to use it in all of my 'coding for fun' projects.
I have a big curiosity:
I have a two inputs, one disabled by a ng-disabled directive and the other disabled with an html tag (A better illustration in this link):
//...
<input type="text" disabled value="This is an html input text disabled" />
<input type="text" ng-disabled="true" value="disabled with angular js directive" />
//...
Using the browser ability I can right click on the input and remove the disabled and ng-disabled tags but only the one with the disabled tag would be editable, the other one will still be tracked by angular even when ng-disabled directives has been removed.
So, When and Why should I prefer using ng directives over native html tags? Which could be the impact of letting angular track all these actions? is it really worth to use it everywhere?
Use the native html 'disabled' if the element should always be disabled. (static, for example if you want to provide an input with text and never let the user change it)
Use angular if it should change based on variables value in the scope.
For example, say a button should change the state of an input.
<input type="button" ng-click="inpDisabled = true" >Disable Input</input>
<input type="text" ng-disabled="inpDisabled" />
live example
No harm will come if you still use ng-disabled="true" but it's redundant.
If you want to make directive static, you shoud use native html
<your-tag disable><your-tag>
against
<your-tag ng-disabled="true"><your-tag>
But AngularJS does not work this way, you shoud initialize your application and controller, then pass a variable as parameter to your directive:
JS:
$scope.isDisabled = true;
HTML:
<your-tag ng-disabled="isDisabled"><your-tag>
You shoud read more tutorials to make things clear

How to highlight a button in html page when i click on it?

I have four buttons on the page, when I click on one of them i want it to be highlighted.
The buttons are used to pass data to a controller.
They are like this:
<button name="region" id="region" type="button" onclick="window.location='/project/Viewdata/index/region/1'" class="current">ALL</button>
<button name="region" id="region2" type="button" onclick="window.location='/project/Viewdata/index/region/2'" class="current">1st</button>
check this JSFiddle
basically, you bind a highligt effect to the button with jQuery, when clicking it like this
$('button').click(function() {
$(this).effect( "highlight", {color: 'red'}, 3000 );
});
NOTE: As said in the comments, you should never have 2 elements with the same id on one page. If you want to use the same descriptor, use class instead of id

Javascript HTML Registration

I am creating a html document for class and there is an example in my notes that is very similar to what I have to do it has First Name, Last Name, and Phone Number, my question is what does this line of code mean? There is a .addphone in style but the code on the bottom only applies to phone why not first name or last name?
<!-- <div class="addphone" onclick="addPhone();">Add Phone</div> -->
<input id="adduser" type="submit" value="Add User" style="margin-top: 25px;">
</div>
The first line of code is an example of a clickable element. In this case has been commented out, meaning it will not be rendered in the browser.
For example:
<!-- Anything written here won't affect the page -->
Is it possible this line, plus the line in your stylesheet, are examples on how to write your other fields for your assignement?
Why not first name or last name?
I guess it's because your 'user' can have more than one phone, but not more than one first name or last name. This isn't really a programming question then though, is it?!
It's never good to put an onclick() event handler on a div element. It also looks like the div has been given a class for styling to make it look like a button or link. Well, if you need a button, or link, then use a button, or link. That way, keyboard support is automatically included.

Dynamically add <div> inside <input>

I want to add <div> inside <input>
<input type="submit"
name="body_0$main_0$contentmain_0$maincontent_1$contantwrapper_0$disclamerwapper_1$DisclaimerAcceptButton"
value="I understand and agree to all of the above "
onclick="return apt();"
id="DisclaimerAcceptButton"
class="DisclaimerAcceptButton">
The button is too long so I want to split its caption into two lines.
I don't have access to pure html since everything is dynamic.
input elements cannot have descendants:
<!ELEMENT INPUT - O EMPTY -- form control -->
^^^^^
However, if you can change the code that generates the button, you can use button instead:
<button name="body_0$main_0$contentmain_0$maincontent_1$contantwrapper_0$disclamerwapper_1$DisclaimerAcceptButton" onclick="return apt();" id="DisclaimerAcceptButton" class="DisclaimerAcceptButton">
I understand and agree to <br />
all of the above
</button>
This lets you style the content of the button however you want to.
A div is a block level HTML element and it shouldn't be added inside the button in such a way. You can however use CSS to specify a width to the button, and thus acquire the multi-lineness that you're looking for.
You can't add div inside of input element (unless you want it in input's value).
No can't do. And if it works on some browser, it's not guaranteed to work anywhere else, because it doesn't follow the standards.
Only you need:
<input type="checkbox" id="a"/>
<label for="a"><div>... div content ...</div></label>
Like somebody write in input you cannot put any element but in label for it can.

Categories

Resources