Protractor has the nifty isEnabled() function for elements. Though it works great for <button>, it isn't doing the trick for <a> elements.
I can easily check the disabled or ng-disabled attribute, but is there a cleaner way?
You need to get the attribute directly like this:
expect(myelement.getAttribute('disabled')).toBeTruthy();
I use this in my Protractor testing daily without issue.
Even though MBielski's answer would work, a bit cleaner than using getAttribute(), would be to use isEnabled():
expect(myelement.isEnabled()).toBe(false);
if (dcoument.getElementById("a").disabled) {
//disabled
} else {
//active
}
You simple can you use jQuery to determine whenever the attribute is enabled or disabled on a link
$(function() {
$('input[type="button"]').on('click',function(){
if($('a').prop('disabled')){ // checks whenever the element has the given atribute
alert('it is enabled');
} else {
alert('it is not enabled');
}
});
http://jsfiddle.net/ukLsxna2/1/
Related
I have multiple elements on a page that are triggering a load of select2 to the element. I'm trying to conditionally check if the element has a certain class, and if so add the tag option; otherwise do not. I thought something like this would work, but it's not:
$('.element_to_add_select_two_on').select2({
tags:function(element) {
return (element.className === 'classname_i_am_targeting');
},
});
What am I missing here? I'm subjecting myself to the following buffoonery to get this to target and load:
$('.element_to_add_select_two_on').each((index,element) => {
let showTags = false;
if ($(element).attr('class').split(' ').includes('classname_i_am_targeting')) {
showTags = true;
}
$(element).select2({
tags:showTags,
});
});
There are a few problems with your first attempt. First, you are defining tags as a function when what you want is the result of the function, since tags needs to be defined as a boolean true or false. The other is that inside your .select2() call, you do not have access to the calling element $('.element_to_add_select_two_on') in the way that you think. It isn't an event that you are listening on, it's a function call that wants an object passed with its configuration.
You conveyed that your second method works, but it can be simplified with the jQuery hasClass() function:
$('.element_to_add_select_two_on').each((index, element) => {
$(element).select2({
tags: $(element).hasClass('classname_i_am_targeting'),
});
});
There is a much simpler way to do all of this, however, and it is much more flexible and already built into select2 via the way of data-* attributes (note, you need jQuery > 1.x). You can simply add data-tags="true" to any of your select elements with which you want tags enabled. These will override any configuration options used when initializing select2 as well as any defaults:
<select data-tags="true">
...
</select>
I have met an unexpected behavior for me of contenteditable attribute in Angular. I have an object with HTML, stored as a value:
public json_html = {
"button1":"<p contenteditable='true'>first section</p>",
"button2":"<p>second section</p>",
"button3":"<p>third section</p>",
}
And I apply this values like this (via innerHTML):
<div [innerHTML]="selectedButton"></div>
Everything works fine except contenteditable attribute - it's just missed in HTML:
QUESTION:
How to force contenteditable attribute to work (when element becomes through [innerHTML])? Is there a proper way to do that or may be there is a workaround?
LIVE EXAMPLE: https://stackblitz.com/edit/angular-9pyhg3-lnivvj?file=app%2Fbutton-overview-example.html
That attribute is stripped for security reasons
If you tell Angular that it should treat it as safe, use DomSanitizer
constructor(sanitizer: DomSanitizer) {
this.json_html = {
"button1": sanitizer.bypassSecurityTrustHtml("<p contenteditable='true'>first section</p>"),
"button2":"<p>second section</p>",
"button3":"<p>third section</p>",
}
StackBlitz example
I searched around on Google, here on StackOverflow, probably-now-outdated HTML5 spec's, and have not found an answer. I feel as though I'm missing something obvious.
I'm wondering if there is a way to specify when creating an HTML5 custom element, that users of that new element should (or must, to be 'valid' to the element's spec) only use it once per document?
For example with HTML's elements, 'head', 'body', 'main', etc., should only be used once within a document. I have not been able to find a way to do this with custom elements. Is this possible, either with vanilla HTML5, Polymer, or some other means?
Thanks to any who can help.
Use built-in callbacks to track the usage of the custom element:
var MyElementPrototype = Object.create(HTMLElement.prototype);
MyElementPrototype.len = 0;
MyElementPrototype.attachedCallback = function() {
MyElementPrototype.len++;
if (MyElementPrototype.len > 1) {
alert('The Document is not Valid'); // Do Something
}
};
MyElementPrototype.detachedCallback = function() {
MyElementPrototype.len--;
};
document.registerElement(
'my-element',
{
prototype: MyElementPrototype
}
);
If you just want to validate the document, you can do it easily with JavaScript.
JsFiddle: http://jsfiddle.net/4AXaS/
HTML:
<div>Lorem</div>
<div>Ipsum</div>
JavaScript:
$(function () {
if ($('div').length > 1) {
alert("Can't use this element more than once in the document");
}
});
link:http://jsfiddle.net/KM9bK/1/
$('.comprejuntoproduto input:checkbox').on('click', function (e) {
if ($('.comprejuntoproduto input:checkbox').is(':checked')) {
$(".comprejuntoproduto").addClass("changeborder");
}else{
$(".comprejuntoproduto").parent().removeClass("changeborder");
}
});
I want when .compreprodutojunto input:checkbox is checked, change the .compreprodutojunto border style.
Thanks so much
First, you need to actually include the jQuery library if you're going to use jQuery (not sure if this was a fiddle-only issue or not). If you didn't include jQuery in your actual page outside of jsFiddle, you'd do it like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
(Note, you can download your own copy if you prefer to host it yourself, or call it directly from code.jquery.com)
Also, when you call .removeClass() you can simply call it on the element that you had previously called .addClass() on, in this case <div class="comprejuntoproduto">.
See: http://jsfiddle.net/KM9bK/7/
$('.comprejuntoproduto input:checkbox').on('click', function (e) {
if ($(this).is(':checked')) {
$(".comprejuntoproduto").addClass("changeborder");
} else {
$(".comprejuntoproduto").removeClass("changeborder");
}
});
I need to disable right-click on a hyperlink which is in a span. I need to disable only one link from the whole page. Any suggestions?
If you dont want to show the context menu on hyperlink, you can do so without doing anything to other part or even span where it exists. I tested in IE, Firefox and it works.
Link
This should work:
oncontextmenu=”return false;”
Place it on any element you want to disable right click for.
Be aware that this causes bad user experience and users can disable it very easily.
Disclaimer: not tested.
If you don't want to pollute your HTML with inline events and you care about supporting IE < 9, you can use this lovely mess:
function addEvent (el, eventType, listener) {
if (el.addEventListener) { // W3C-compliant
el.addEventListener(eventType, listener, false);
}
else {// IE-specific
el.attachEvent('on'+eventType, listener);
}
}
addEvent(document.getElementById('myLinkID'), 'contextmenu', function (e) {
if (e.preventDefault) { // W3C
e.preventDefault();
}
else { // IE
e.returnValue = false;
}
});
I have never seen one done through HTML (that does not imply it is not possible). However, JavaScript can help you here.
You can do something like:
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
Try this oncontextmenu="return false;"
IN MVC:
#Html.ActionLink("print page", "myprint", "print", null, new { #oncontextmenu="return false;"})
You can also use jQuery:
$(".myHyperlinks").contextmenu(function () { return false; });