In my document I am printing all elements with the given classname like so: console.log(this.document.getElementsByClassName("curClass"));
but how do I set those return forms to invalid?
I would like to do something like:
this.document.getElementsByClassName("curClass").setAll('invalid');
or similarly to this post, using field.setCustomValidity('Invalid field.")
however, it seems that is not an existing functionality.
Thanks!
Related
I want to put a disabled class into my select, but when I do this:
$("input").attr("disabled",true);
//I tried to to this but it didn't work too:
$("#myId").attr("disabled",true);
It disable all of my selects and not one.
How can I disable only "myId"?
Without seeing your HTML (which at the time of writing has not been supplied) it's very difficult for us to tell you why it's not working.
However, if $("#myId").attr("disabled",true); isn't working, then it suggests to me that you do not have an element in your HTML with id='myId'.
Things to check in the rendered HTML (as seen by the browser, not your code)...
Is there an element with an id of myId
Is the id exactly myId, and not myID for instance (as the case is important)
Are you using something like ASP.Net where naming containers could be changing the id of the rendered control to something like ctl00_myId
Do you have 2 elements with an id of myId... in which case, this is invalid HTML, as each element must have a unique id, and would result in jQuery only setting the disabled on the first item
It disables them all because $("input").attr("disabled",true); adds the attribute disabled to all input elements. Without seeing your HTML it's hard to tell what the reason is for it not disabling when you try using #myId
Here are some mistakes I've made in the past for similar problems:
1) I did not actually have the id on the element that I thought I had. Whether it was a misspelling, or capitalization difference, or underscore vs dash...the point is the id I was trying to reference on the page simply did not match the one I was looking for with jQuery
2) I referenced it as an id but really it was a class or vice versa. . for classes, and # for id's is second nature, but sometimes if you're tired or exhausted you can very easily make that mistake
3) I had given an id that existed in multiple elements. id is supposed to be unique by convention. Duplicate id's will produce unexpected behavior
Hopefully one of these simple reasons is the cause for your issue and you can quickly resolve it. Maybe take a 30 minute break and come back to it.
Suppose we have a custom element that renders a list of something. It is a selector element, so it does not atter how this something is rendered.
The problem is that this something is quite generic and there are custom elements to actually render it. For example, for countries we add a flag image, for general elements - a fontawesome icon, reputation for users, etc.
What I would like to have
And now I would like to pass the name of the custom element I want to render something with. So instead of this
<selector data.one-way="options" selected.two-way="selected"></selector>
Have something like
<selector element="country" data.one-way="options" selected.two-way="selected"></selector>
And in the selector I would like to have
<${element} content.one-way="el" repeat.for="el of data"></${element}>
What I get
Unfortunately, the code above renders as htmlescaped
<country content.one-way="el" repeat.for="el of data"></country>
So,
Is there a more or less clean way to achieve that? Basically I would like to pass the specify custom elements I want to render in my selector custom element. This post and the answer there have nothing to do with my question.
Using compose as described here... well, it is an option, but I would like to have different custom elements and a slightly different logic in CustomElement js files.
Thanks!
UPD
Well, there's an obvious way to do that by just adding something like a switch statement in the view
<country ... if.bind="el.type === 'country'"></country>
<phone ... if.bind="el.type === 'phone'"></phone>
<user ... if.bind="el.type === 'user'"></user>
But that would make the selector element dependent on country, user etc. So I would not like that.
I believe easiest way is using the compose tag (like you've mentioned):
<compose model.bind="item" view-model="widgets/${item.type}"></compose>
I found couple possible solutions, they may seems more complicated then compose.
#bindable({
name:'myProperty', //name of the property on the class
attribute:'my-property', //name of the attribute in HTML
changeHandler:'myPropertyChanged', //name of the method to invoke when the property changes
defaultBindingMode: ONE_WAY, //default binding mode used with the .bind command
defaultValue: undefined //default value of the property, if not bound or set in HTML
})
You can find more details there http://www.sitepoint.com/extending-html-aurelia-io-way/
I am really new to JavaScript, and Im basically trying to build a simple Script to get information from a site like Walmart.com. Im using firebug to test my little snippets. Im having a problem getting the price.
This is the my code:
var price = document.getElementById('clearfix camelPrice');
console.log(price);
I also tried ".camelPrice" with out the period and I keep getting null.
Thanks a lot in advance!
In this case, you're using the wrong method. getElementById does exactly what it says, it gets an element by its id. Looking on Walmart.com, 'camelPrice' is a CSS class.
We can still get elements by a class. What you want is document.getElementsByClassName(). Further, you can pass multiple arguments to getElementsByClassName like so:
document.getElementsByClassName('clearfix', 'camelPrice');
This grabs all elements that have both the clearfix and camelPrice classes set.
In addition to what the others have said about your selection looking like ids, here is how you can select by class name:
document.getElementsByClassName('classname');
Newer browsers allow you to make jQuery-like selections from native JavaScript:
document.querySelectorAll('#id .classname');
http://caniuse.com/queryselector
It looks like you're trying to provide a class selector to getElementById instead of an ID selector. This is what an ID looks like:
<div id="some-id">...</div>
This is what a class looks like:
<div class="some-class">...</div>
The difference is that only one element should ever have a specific ID on a page, where many elements might have the same class.
I am not sure how you are running your JavaScript in Walmart's site, which is not impossible, but maybe you should specify it, for instance if the Walmart site is in an iframe you will not be able to use getElementById() from your site.
On the other hand if you are running some sort of local Live Editor/Console, then maybe it is possible.
For the script you show above, you have an error on the ID since an id can only be one word, and you are missing to select what type of attribute you want from the element:
For example, <input>:
var price = document.getElementById('id').value
or for other tags like <div>:
var price = document.getElementById('id').innerHTML
I have 2 questions:
1st Question: Can a HTML element have more than one class(be part of more than one class)?
<p class="paragraphClass" class="highlightClass"/> // is that allowed?
2nd Question: Is there a javascript HTML parser library or set of default functions that search a string of HTML & give me all the HTML elements that have a specific class? I use AJAX to get HTML from a server(returned as text not XML), I then need to convert all HTML elements that have the class "updatable" to text-area HTML elements.
What do you think would be the easiest way to convert all HTML elements of a specific class to textareas when I have a string of HTML as either text or XML.
1st Question: Can a HTML element have more than one class(be part of more than one class)?
Yes, but like this:
<p class="paragraphClass highlightClass"/>
2nd Question: Is there a javascript HTML parser library or set of default functions that search a string of HTML & give me all the HTML elements that have a specific class?
The dead-simplest way to do this is with jQuery (surprise, surprise):
var html = 'your html in a string here',
$html = $(html),
$elts = $html.find('.someClassName');
// $elts is a (array-like) jQuery object which
// contains all the elements in the HTML string with class 'someClassName'
See the jQuery selectors API docs for more.
You can have as many classes as you like on any element by seperating them with spaces. eg:
<p class="paragraphClass highlightClass"></p>
Use a library like jQuery to do this.
1) Yes, but your syntax is not correct. You can specify more than one class separated by spaces like:
<p class="paragraphClass highlightClass"/>
2) You could just insert your HTML into the DOM using some elements .innerHTML property. That element could have display: none; so that it doesn't affect your page. Then you can use normal DOM methods on them like document.getElementByClassName('updatable'); Note that getElementByClassName() is not defined in IE so you have to write your own that selects by tagName and then iterates through them matching the classes, or use a framework like jQuery.
there is always jquery. You can use the selector to select all the elements with that class and then convert it to a textarea. Sounds like you want to convert it to edit that paragraph.
$(".paragraphClass").each(function{
$(this).replaceWith("<textarea>"+ $(this).text() +"</textarea>");
})
http://jsfiddle.net/bQgN3/
Why does document.forms[0] return something (the first form on the page), but document.getElementById("thediv").forms[0] does not return anything?
Example JSFiddle
On a more complex page, I would expect the be able to narrow down the scope of the browser's search for form elements by specifying an ID.
forms is a property of document. document.getElementById is a function that returns an HTMLElement object. This does not have a property called forms. Look at jQuery if you'd like more logical javascript.
Because there isn't such a property forms on DOM element objects, only the document object.
Forms are still forms within the same page no matter where they're found in the document tree. If you need to grab a subset of forms on a page based on a certain parent element, you'll probably want to try a library like jQuery.
document.getElementById('thediv').getElementsByTagName('form')[0];