JQuery - Unfamiliar notation - javascript

I am modifying a javascript file in which they have used the following code. Does anyone know what this does / where it is documented / etc. It appears it is creating an anchor node and giving it the inner html of "Back", but I'm not sure how it works or what it's capabilities are, as I need to add various attributes to the link:
$("<a id=>").html("Back");
Thanks!

jQuery is just being forgiving. Normally, the code would look like this, instead:
$('<a/>').html("Back");
Which means, create an a element and set its inner HTML to "Back". You can chain some attribute assignments directly after:
$('<a/>')
.html('Back');
.attr('id', 'your-id');

This code is indeed creating an anchor element:
<a id="">Back</a>
You can add attributes using the "attr" function, like so:
$("<a id=>").html("Back").attr('href', myUrl);
Alternatively, you can add the attributes directly in the markup:
$("<a id='myId' href='url'>").html("Back");

It is creating an anchor element, but it hasn't appended it to anything, what you would normally do, is either:
$("body").append($("<a>").html("Back").attr("target", "_blank"));
(as an example), or even:
$("<a>").html("Back").attr("target", "_blank").appendTo($("body"));
Because it is a jQuery object, you can continue chaining methods on it to build it up how you want to.

I think it's just some bothched HTML being passed to the factory. Should result in a jQuery collection holding one anchor element which is not yet in the DOM and which has an empty id attr and contains the text "Back":
<a id="">Back</a>

Related

Append jQuery values not affected by javascript

I'm appending values into a div through jQuery, but I've realized what gets appended isn't affected by my javascript functions.
$(".div").append("<input type='text' class='textForm' placement='Value' />");
What I have setup in my javascript code is that it takes the attribute placement of any class "textForm" and makes it a value. But I've realized that once a value is appended, it isn't effected by my javascript. Any ideas on how to fix this issue?
If you are currently using
$(".textForm").click(){}
then now use
$(document).on("click",".textForm",function(){//Dtuff here})
This will attach the .on("click") to the document object and as such it will be enabled on all elements that exist and all elements that are created matching the .textForm selector.
I guess you have some events bounded to some elements like which are not working after the append . something like this.
$(function(){
$(".someClass").click(function(){
//dome some thing
});
});
If you want the same functionality to work on the newly injected( dynamically added via append /jquery ajax etc...) DOM elements, you should consider using jquery on. So your code should be changed like this
$(function(){
$(document).on("click",".someClass",function(){
//dome some thing
});
});
on will work for current and future elements
I'm not sure I understand the bit about why you're copying values from the placement attribute into the input value, but I can offer this suggestion to get your form fields to appear.
$("div").each(function() {
$(this).append($("<input type='text' class='textForm' placement='Value' />"))
});
I'm assuming that you want to identify your div via the tag name, and not the class name. If this is the case, your jQuery selector will need to be "div", and not ".div". Also, you need to wrap your HTML in $() in order to generate a DOM element.

How to get element from template by javascript?

I dont know good method how to get DOM element from template by javascript.
Example template:
<script id = "template" type="text/template">
<div>text1</div>
<div>text2</div>
<div>text3</div>
</script>
For example i want get div with "text2"
There is ways which i know, all of them are bad:
Add "class" to all elements - it breaks semantics (class created for CSS). In big projects you must use very long names for classes, its very inconvenient.
Get element by his number (index) - when adding a new element, you must rewrite old numbers in your code.
I see a couple of options:
If you don't want to use class , you can use a data-* attribute.
Assuming you load the template once and then duplicate its contents as desired, you could put id values on the elements in the template, which you then remove when cloning them and adding them to the document (so you don't end up with the same id on more than one copy of the element, which would be invalid and probably counterproductive).
Maybe you can also create as many templates as you need.
One for each div.
If you need to get each div at a time you must set ids to them ... of course you can also browse the dom inside script element to find the one you're interested in ...
Home this helps
Regards
mimiz

JavaScript String .replace method is replacing all my content?

I have successfully implemented finding and replacing some text with something else in the following way:
$(".class").html($(".class").html().replace(/\text\b/g, '<span class="newclass newclass2">new text</span>'));
When I apply this to my element 'class' it finds all the 'text' and replaces with 'new text' and everything relating to the new classes.
However, if I have more than one element on the page with the same class, it replaces all the classes with whatever text is in the first class.
For example, if my first class has the content "Hello everyone", when the script is applied to this class, it works fine. Any subsequent class of the same name is then replaced with "Hello everyone". These also have the function applied in the same way as the first occurrence of that class.
IE, it applies the script, then replicates this in every single class of the same name on the page.
I do not understand why it would do this, and rather renders the function pointless in many ways if it can't be used to change text throughout different sections without setting up new scripts and different classes.
Hopefully there is something simple at work here that I am not aware of, any help would be much appreciated.
Many thanks
Richard
That is the nature of class selectors--the .html(...) will replace the HTML of everything that matches the .class selector.
If you want to replace text in each individual .class element, you can use the .each function. (There are probably jQuerier ways, too.)
$(`.class`).each(function(n, el) {
var myHtml = $(this).html();
myHtml = mungeIt(myHtml);
$(this).html(myHtml);
});
If you want to select only an individual .class element, then you either (a) don't really want to be using classes, but IDs, or (b) need to understand enough of your structure or the context you wish to operate in to select only the targeted DOM element.
(And hope the structure or context doesn't change without a corresponding code update.)
You're specifying a class with the jQuery selector $(".class") That's what the period indicates. jQuery has a ton of selectors to choose from. A list is provided in the documentation here: http://api.jquery.com/category/selectors/
Also, I'd look at http://api.jquery.com/hasClass/ for your problem as you could then use if...then statements to not run into others
Dave is right about needing to use the .each method. We need to loop through each element at a time because .html() will only return the first element when there are multiple matches.
Try:
$('.class').each(function() {
$(this).html($(this).html().replace(/someWord/g,'withAnother'));
});

Get an element that has an ID which starts with some characters using Dojo

I have a node defined by the following HTML markup:
<div id="_13:3AVAsa7qVvAprAar19ie8LRorrLEm2g" >asdf</div>
I need to get a reference to it without using it's full id like:
dojo.byId('_13:*');
Is it possible or is there any other ways that could be achieved?
You should use the attribute starts-with selector.
I've never used Dojo, but looking here:
http://dojotoolkit.org/reference-guide/dojo/query.html
It seems that you need this:
dojo.query('div[id^="_13:"]')
That same link also contains examples of other useful selectors at the end of the page.

jQuery: DOM Elements: Attributes: query & create

I have a few questions about jQuery, relating to attributes:
Is there a jQuery or DOM API call that I could use to list or clone all of the attributes of a DOM element. The jQuery.attr() API call lets you do it if you know the name of the attribute, but if you don't, is there a way?
Is there a jQuery or DOM API call that I could use to create a new CSS rule, besides the obvious one of dynamically loading a new script?
It seems possible because when I open up the JS debugger in Google Chrome using CTRL-Shift-J, and click on a DOM element in the elements pane, I can see all of the attributes of the element without having to ask for them by name.
Clone the whole object, that will replicate all attributes as well, http://api.jquery.com/clone/
Add new style section into the head element using append, http://api.jquery.com/append/
The other guys are right that you should use clone - but if you want to list the attributes, you can do it like so:
for(attr in $('#selector')) {
console.log(attr);
}
I don't think you can create a new css rule, but you can do pretty much the same by attaching css to a selector:
$('#selector').css({
display: 'block'
});

Categories