JS/DOM selector scoping - javascript

Is it possible to have some sort of Id scoping when manipulating DOM with JS?
I use jQuery as my JS framework.
For example:
Is there any mechanism that would allow to select someDiv children of first or someDiv children of second, or do all ids on the page have to be unique?
I know this would be doable using classes (jQuery selector would be .first>.someDiv), but is this doable for the id property as well?
Edit: for clarification, here's a more complete example:
File picture_editor.php:
...
JS script for this editor, that needs to manipulate picture_id
...
File main_view.php:
...
Script that manipulates picture_id
...
include(picture_editor.php);
...
Now in the case where picture_editor is included in a file (like main_view) that has an element with the same id as elements in picture_editor, something somewhere is going to stop working (whether it's some script in picture_editor or main_view, or both).
Question: How do you go around that?

HTML id attribute, Definition and
Usage:
The id attribute specifies a unique id for an HTML element.
The id must be unique within the HTML document.
The id attribute can be used by a JavaScript (via the HTML DOM) or by
CSS to make changes or style the
element with the specified id.
From http://www.w3schools.com/tags/att_standard_id.asp

All ids need to be unique, so I don't think so.

If your ids are not unique, then your page is not valid HTML. Rethink your structure if you have non-unique id.
As for whether jQuery supports it, it's unlikely, as it should never meet that scenario.

Related

Best practice in finding a DOM element

I want to toggle(hide/show) an element when a button is being pressed. I have two ways as to implement this:
Find the element according to its class name, e.g $('.my-content')
Find the element according to its relevant DOM position towards the button, e.g. $('#my-button').parent().next().next().next()
However, none of the above seems to me very reliable since in case someone changes the HTML code, the above approaches should not work. Is there something more reliable I am missing?
If it's a specific element, supply it with an Id value and use that
to find it.
If it's a TYPE of element, use a class name.
Other than that, there's no real conventions. Just try and make sure that somebody reading your code understands what is going on.
A very good practice is to decouple HTML, CSS and JS.
When binding javascript to DOM elements you should use javascript selectors.
Basically classes with some custom prefix (like js-) which will be used only for javascript purposes (not css style).
So whenever the DOM tree structure or the CSS class names are changed, you can still have your working JS selector
HTML
<div class="my-content js-toggle-element"></div>
JS
$('.js-toggle-element')
CSS
.my-content{ ... }
Plus, using Javascript Selectors:
makes HTML highly readable: you can easily find out what will happen to that element with that js class
allows you to easily apply/disapply that behaviour also to other elements in the future, simply by adding/removing that class in your HTML and without affecting CSS at all
<div class="my-content js-toggle-element"></div>
...
<div class="another-content-to-toggle js-toggle-element"></div>
Using jQuery will be much easiest way. Like this -
$( ".target" ).toggle();
The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
Reference - jQuery Toggle
If the class or the position of the element in DOM is changing then you can try
selecting it with the inner text
$("button:contains('buttontextgoeshere')")

Can you use IDs with HTML head tags?

I think the answer is probably "no," but I wanted to get the opinion of people who know a lot more than me. Can you use the "id" attribute with HTML elements in the head section, such as title or link? The purpose would be to change their values with JavaScript. Thanks in advance.
Yes. All HTML elements support the ID attribute.
See the spec:
The following attributes are common to and may be specified on all HTML elements (even those not defined in this specification):
…
id
Yup.
Every html element supports an id:
<head id="everyone"/>
The id attribute is a Global Attribute
Yes, you can use an id attribute in a head element. Further, here is the full list of Global Attributes and they may be specified on all HTML elements.
accesskey
class
contenteditable
dir
hidden
id
lang
spellcheck
style
tabindex
title
translate

How to access elements from a certain form and certain type with jquery

so I have a page with multiple forms and I would like to be able to access input elements of type="datetime" within a particular form. I know I can do $('input[type="datetime"]') but that would give me all input tags on the page. I also cannot use the "form" attribute because not all browser use it (Sigh IE). Worse scenario for me is to do something like:
$(document.forms["..."].elements).each(function() {
if (this.type="datetime") {.....}
});
but I am sure this can be done in jQuery with one selector. Can someone tell me how do this with one selector?
Add id to your form and then select DOM inside of that form as below.
$('#form input[type="datetime"]')
Without seeing some HTML this is just a shot in the dark. But if you give your forms an id you can do:
$("#yourFormId input[type='datetime']");
If you do not have ids, but you know the number, then this might do it:
$("form:eq(4) input[type='datetime']");
There are multiple ways to do it
Solution 1.
use descendant selector
ex:
$('#yourform input[type="datetime"]') //or
$('.yourform input[type="datetime"]') //or
$('form:eq(3) input[type="datetime"]')
Solution 2:
Use context based look up
Ex:
$('input[type="datetime"]', yourform)

Setting an attribute to the last position

Is it possible to set a new attribute to the last position of a html element using javascript/jQuery?
This would be helpfull for me in a case where the attribute order is important to decide whether the paragraph has changed or not.
Example:
<p attribute1="true" attribute2="true">
Now, i would like to add a third attribute so that the resulting paragraph would look like
<p attribute1="true" attribute2="true" attribute3="true">
No, it's not possible. Attributes are unordered in HTML and XHTML markup languages, so browsers are free to return them in whatever order they like, e.g. alphabetic, specified, etc.
You should rethink your approach, for instance using the .data() method to track changes:
$("#el").data("changeHistory", []);
// ...
$("#el").data("changeHistory").push(new Date().toString());
Optimally you should never be in a position where you need to read attributes in order (by index).
If you have an element like so <div id="container">, you can add an attribute using jQuery like so $('#container').attr('disabled', true);. Keep in mind this should add the attribute to the end of the element.
Another tip is if you are looking to modify a DOM element attribute such as style, consider looking at the jQuery API to see what methods are avialable before writing anything too crude. For example, if you wanted to add a style you could simply do $('#container').addClass('hover');

How to get element from javascript in JSF 2.0

I have JSF code like:
<h:inputText id="from" value="#{fromToMBean.fromName}"/>
I would like to get this element from JavaScript by ID (from), but I can't, because in generated HTML it is j_idt8:from
How can I get this element in e.g. jQuery? Is there any way to force JSF2 not to change ids?
You can either use a custom class which you only assign to this element and use css selectors or assign an id to the form and get the element with the id formid:from.
Is there any way to force JSF2 not to change ids?
You can set prependId="false" This way in generated HTML it will be from in place of j_idt8:from.
prependId : Flag indicating whether or not this form should prepend
its id to its descendent's id during the clientId generation
process. If this flag is not set, the default value is true.
How can I get this element in e.g. jQuery?
You can use ancestorComponent:from in jQuery to get this element.
Actually j_idt8 in j_idt8:from is auto generated id of ancestor component of your <h:inputText/>
for example
<h:form id="form">
<h:inputText id="from" value="#{fromToMBean.fromName}"/>
</h:form>
Now generated id of input text would be form:from
If you don't provide id to a component than your browser generates that dynamically. So don't forget to provide ids to components.
In JSF 1.2 you can use forceId="true". I'm not sure if you can use t:input in JSF 2, but you should be able to. Then it's ID in HTML will be what you expect.
In order to achieve full ID for a component, use EL implicit objects and their properties such as #{cc.clientId} and #{component.clientId}. Source: Acquire full prefix for a component clientId inside naming containers with JSF 2.0.
You can use jquery. Simply, use a selector defining the text it should contains. Something like this:
$( "input[name*='from']" )
'*=' is used to say that the name attribute contains some string. Also there exist '~=' with similar meaning.
For detailed explanations and examples visit http://api.jquery.com/attribute-contains-selector/

Categories

Resources