I am writing an application in Stenciljs and my custom element is as follows:
<custom-alert alertType="warning" alertId="warningMessage" hide>Be warned</custom-alert>
Now, the issue is with selecting this element via document.querySelector() or any other possibility to remove or add the hide attribute. This can be done for standard HTML elements easily:
document.querySelector('input').removeAttribute('hide');
How can I do this for my custom element?
I was able to get the desired result by adding an id attribute
<custom-alert id="myCustomAlert" alertType="warning" alertId="warningMessage" >Be warned</custom-alert>
Then this component can be hidden and shown as follows:
document.getElementById('myCustomAlert').setAttribute('hidden', 'true');
And shown as follows:
document.getElementById('myCustomAlert').removeAttribute('hidden');
Related
I create a dynamic tootltip on target element in the following way :
var dynamicTooltip = new bootstrap.Tooltip($(targetElement));
Everything work just fine, but i would like to add to the generated tooltip a custom class.
Is not clear to me how can i target to the html generated by bootstrap with the previous instruction (or better which bootstrap API should i use to attach a class).
I see that bootstrap tooltip have a class named "tooltip" but i can't use that class to find my newly generated element eg :
$(".tooltip")
In fact i am afraid that the code above will find also already existing tooltip, and i want target only the newly generated one.
How can i achieve that?
From bootstrap docs:
Here
You can use the template option to give complex HTML structure, or just the customClass option to add custom classes:
var dynamicTooltip = new bootstrap.Tooltip($(targetElement), {
customClass: 'myCustomClass'
});
is it possible to remove/add the html tag dynamically with condition in the javascript?
https://jsfiddle.net/kimsoon/Ldy9xhjt/3/
Example i need to remove the number 2 th column when button is clicked, insert back again when button is clicked. I have using this but does not work.
angular.element(document).find('.dataTable tfoot').remove($scope.items);///to remove
angular.element(document).find('.dataTable thead').prepend($scope.items);//to add
According to the Angular documentation on angular.element().find():
Note: Keep in mind that this function will not find elements by tag
name / CSS selector. For lookups by tag name, try instead
angular.element(document).find(...) or $document.find(), or use the
standard DOM APIs, e.g. document.querySelectorAll().
So, angular.element(document).find(...) can only be used lookup by tag name not class name.
Therefore, your code is not working because your .find() is not returning the element(s) you expect it to (in fact it's not returning any).
Use the DOM method getElementsByClassName to select using class name:
const dataTable = angular.element(document.getElementsByClassName("dataTable"));
Then you can perform your prepends or removals on the wrapped angular dataTable element:
dataTable.remove($scope.items); //to remove
dataTable.prepend($scope.items); //to add
I have a simple script in which I am trying to test the functionality of some buttons. Inside of my html I have a button:
<button> MyList </button>
In my script I tried the following:
...
await page.type('button[value="MyList"]');
await page.click('button[value="MyList"]');
This was a shot in the dark as I could not find a way to select an element by value in the puppeteer docs. Obviously it cannot find it and I get the error: 'No node found for selector: button[value="AccountList"]'
This is because the button's value is not MyList. MyList is the text content of the elment which is different than the value which is an attribute. In CSS you cannot query for elements by their text contents. Since there is no such native CSS selector that will work for your use-case, you have to traverse the DOM manually and look for the matching nodes.
There is such selector implemented in jQuery -
:contains(). I guess you can use some similar library for Node.js.
Noob Question on Data Attribute
I was wondering will using data-attribute in jQuery Selector can bring any trouble in the future?
I'm trying to reduced the usage of .class and #id as jQuery Selector, since most of data I'm working on will generated from data-attribute
example of the code
$(document).ready(function(){
var mydata = $(document).data('my-data-attribute');
});
will the code above slowing the load time?
or
$('[data-suffix-attribute="some_value"]').each(function(){
......
});
or
$('[data-suffix-attribute="delete"]').click(function(){
// delete action happening here
});
will this bring trouble?
$(document).ready(function(){
var mydata = $(document).data('my-data-attribute');
});
The code above will not work. If you want to read the HTML5 data attribute of an element using the jQuery .data() method firstly you need to select the relevant element using a jQuery selector and then you can use the method as is shown below:
var mydata = $('.example').data('suffix');
This will read the value of the data-suffix attribute of an element with a class of "example".
The other important thing to note when using the .data() method is that you have to omit the data- prefix from the selector to read the value stored in that attribute.
The way you have selected the attribute before the .each() method will work:
$('[data-suffix-attribute="some_value"]');
However, it would be better if you can narrow it down to a specific element like:
$('div[data-suffix-attribute="some_value"]');
This is because the first selector will go through every node in the document which will take more time whereas the second will only go through the div tags in the document.
The attribute selector is supported by the native query selectors so it is fine. As far as future is concerned I don't think in near future it will be a problem.
But it will be better if you can use a element selector attached to the attribute selector like $('div[data-suffix-attribute="delete"]')
If you are very worried about performance it will be a better choice to add a class attribute to the desired elements and then use class selector
It would be better to use id in selector which is fast obviously,
If you have multiple data attributes then it is better to use $('[data-suffix-attribute="delete"]').click();.
Instead of this you can use the parent selector for your data-attribute elements like,
$('#parentId').on('click','[data-suffix-attribute="delete"]',function(){
// delete action happening here
});
#parentId contains all data attribute elements
I am having a aspx page,in which there is a Select box control
<select name="selViewPerPage" id="selViewPerPage" style="width:30px">
In order to bring a particular style in all browsers, i am replacing this html control with dynamic select box using "selectBox.js" . Now the problem is , i am having two dropdowns in the page ,during runtime they are generated with same class name without any ids.So while trying to position the controls using css,the both drop downs takes the same position.
So i am not sure ,how to handle this situation .Please let me know,if you need more information.
Thnks
Try using a pseudo-selector to get just a specific item, such as the first, last, or nth item. See :eq() or :first() or :last() for example: http://api.jquery.com/category/selectors/. Using one of those sorts of selectors, you can get just the element you want to modify and apply styles to it individually. Ex.
$('ul').first()
or
$('ul:last')
or
$('ul').eq(1)
Or some other variant of these.
If you have multiple instances of items with the same class, use the .eq() selector.
$('.someSelect').eq(0) <-- first instance
$('.someSelect').eq(1) <-- second instance