Difference between .checked and .attr(checked,boolean) - javascript

I'm completely new in js and jquery. While trying to understand it, I've came up with an issue. But before that, I would like to apologise if my question contains subquestions.
First of all, I saw in this question that, .checked should be used with DOM objects while .attr() needs to be used with jquery objects. Now my question:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<ul>
<li>List element 1</li>
<li>List element 2</li>
</ul>
checkbox1:<input type='checkbox' id='checkbox1'/>
checkbox2:<input type='checkbox' id='checkbox2'/>
<script>
var checkboxes=$('input');
checkboxes[1].checked=true;
</script>
</body>
</html>
IN here, Does checkboxes variable is a jquery object or dom element ? I was thinking that $() returns a jquery object (as stated here) but when I try, checkboxes.attr('checked',true) rather than checkboxes[1].checked=true; , I got error. My another assumption is that, may be checkboxes variable is a jquery object and checkboxes[1] is an dom element? Am I right?
Edit
One more question, when I want to learn type of a variable, I'm writing browser's console this statement : typeof(VariableName). Unfortunatelly, When I write typeof(checkboxes) or typeof(checkboxes1), I got always Object result. But just know I learn that one of them is Jquery object and the other is DOM object. Is there any function which gives me these differences?

one of them is Jquery object and the other is DOM object. Is there any
function which gives me these differences?
You can use:
obj instanceof jQuery
If you want more universal way you can use:
Object.prototype.toString.call(myVariable);

Related

how get a value inside ui:repeat for javascript [duplicate]

I would like to know how I can pass JSF managed bean properties to a JavaScript function.
Something like this:
<script>
function actualizaMenu(key){
#{linkedMenu.setKey(key)}
}
</script>
<ul>
<ui:repeat value="#{moduleList.modulos}" var="entity">
<li>
<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>
</li>
</ui:repeat>
</ul>
This is not exactly "passing" of JSF variables. This is just printing JSF variables as if they are JavaScript variables/values. You know, JSF and JS do not run in sync at all. JSF runs in webserver and produces HTML/CSS/JS code which in turn runs in webbrowser once arrived over there.
Your concrete problem is most likely caused because you wrote JSF code in such way that it generates invalid JS syntax. An easy way to verify that is by just checking the JSF-generated HTML output which you can find by rightclick, View Source in browser, and by checking if you don't see any syntax error reports in the JS console in browser which you can find by pressing F12 in Chrome/IE9+/Firefox23+.
Imagine that #{entity.key} here
<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>
prints a Java string variable like "foo", then the generated HTML would look like
<a onclick="actualizaMenu(foo)">some name</a>
But hey, look, that represents a JavaScript variable named foo, not a JS string value! So if you actually want to ultimately end up as
<a onclick="actualizaMenu('foo')">some name</a>
then you should instruct JSF to generate exactly that HTML:
<a onclick="actualizaMenu('#{entity.key}')">#{entity.nombre}</a>
Beware of special characters in the JSF variable though. You can use OmniFaces of:escapeJS() function for that.
Unrelated to the concrete problem, the concrete implementation of actualizaMenu() makes no sense. You seem to be attempting to set a bean property. You should not use JS for that, but a <h:commandLink> instead.
<h:commandLink value="#{entity.nombre}" action="#{linkedMenu.setKey(entity.key)}" />
Nest if necessary a <f:ajax> to make it asynchronous.
I would recommend using event binding with jQuery and the data attribute on elements to get the same result (assuming you use jQuery):
<script>
function actualizaMenu(key){
/* Logic here ... */
}
$(document).ready(function(){
$('.menuItem').click(function(){
var key = $(this).data('key');
actualizaMenu(key);
);
});
</script>
...
<ul>
<ui:repeat value="#{moduleList.modulos}" var="entity">
<li>
<a data-key="#{entity.key}" class="menuItem">#{entity.nombre}</a>
</li>
</ui:repeat>
</ul>
And, as pointed out elsewhere, unless #{linkedMenu.setKey(key)} actually returns a piece of javascript (which seams unlikely and would probably be really bad even if it did) you need to fix the function as well.
I know this question is old, but to those who are still looking there's an alternative.
If you are using primefaces just try this out.
Request Context

How to obtain a domNode by searching using classname instead of id?

I want to get a result exactly like dom.byId() returns, a domNode. However I cannot use id on my domNode. So my only other option is to search for it by class name instead of by id.
I tried
query(".classname").first()
because i know there is only one domNode that implements this class name
However I cannot use the result (which is a NodeList) in any subsequent functions in dojo that expect a domNode for example dojo/dom-geometry::position()
Well, If you want to access the nodes using class name.
below is the working code -
require(["dojo/query", "dojo/NodeList-traverse", "dojo/NodeList-dom", "dojo/domReady!"], function(query) {
query(".className").first().style({
"backgroundColor": "#FF0"
});
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<ul>
<li class="className">First</li>
<li class="className">Second</li>
<li class="className">Third</li>
</ul>
JS Fiddle : https://jsfiddle.net/vikash2402/jfwsLnd4/
Feel free to shoot your further queries.
Hoping this will help you :)

How to access inner html element present in actual html via javascript

I need to get the object of second level html element in my page.
<html>
<div id="out">
jasoidjisa
<html>
<head>//This object
<div id="in">
hihisdhi
</div>
</head>
</html>
</div>
<script>
alert(document.getElementsByTagName('html'));
</script>
Help me to access this html element via js
HTML is a reserved tag name and so you can't use it in the manner in which you have used it here. Which particular value from above are you trying to get exactly ? It might make sense to use the <div> tag with a class or I'd to identify it instead. If you specify which value you are specifically looking to get I can write up a theoretical solution.
vsank7787 was totally correct. Maybe you could use iFrames instead of nested html inside a HTML document since html is a reserved keyword.

How do I pass JSF managed bean properties to a JavaScript function?

I would like to know how I can pass JSF managed bean properties to a JavaScript function.
Something like this:
<script>
function actualizaMenu(key){
#{linkedMenu.setKey(key)}
}
</script>
<ul>
<ui:repeat value="#{moduleList.modulos}" var="entity">
<li>
<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>
</li>
</ui:repeat>
</ul>
This is not exactly "passing" of JSF variables. This is just printing JSF variables as if they are JavaScript variables/values. You know, JSF and JS do not run in sync at all. JSF runs in webserver and produces HTML/CSS/JS code which in turn runs in webbrowser once arrived over there.
Your concrete problem is most likely caused because you wrote JSF code in such way that it generates invalid JS syntax. An easy way to verify that is by just checking the JSF-generated HTML output which you can find by rightclick, View Source in browser, and by checking if you don't see any syntax error reports in the JS console in browser which you can find by pressing F12 in Chrome/IE9+/Firefox23+.
Imagine that #{entity.key} here
<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>
prints a Java string variable like "foo", then the generated HTML would look like
<a onclick="actualizaMenu(foo)">some name</a>
But hey, look, that represents a JavaScript variable named foo, not a JS string value! So if you actually want to ultimately end up as
<a onclick="actualizaMenu('foo')">some name</a>
then you should instruct JSF to generate exactly that HTML:
<a onclick="actualizaMenu('#{entity.key}')">#{entity.nombre}</a>
Beware of special characters in the JSF variable though. You can use OmniFaces of:escapeJS() function for that.
Unrelated to the concrete problem, the concrete implementation of actualizaMenu() makes no sense. You seem to be attempting to set a bean property. You should not use JS for that, but a <h:commandLink> instead.
<h:commandLink value="#{entity.nombre}" action="#{linkedMenu.setKey(entity.key)}" />
Nest if necessary a <f:ajax> to make it asynchronous.
I would recommend using event binding with jQuery and the data attribute on elements to get the same result (assuming you use jQuery):
<script>
function actualizaMenu(key){
/* Logic here ... */
}
$(document).ready(function(){
$('.menuItem').click(function(){
var key = $(this).data('key');
actualizaMenu(key);
);
});
</script>
...
<ul>
<ui:repeat value="#{moduleList.modulos}" var="entity">
<li>
<a data-key="#{entity.key}" class="menuItem">#{entity.nombre}</a>
</li>
</ui:repeat>
</ul>
And, as pointed out elsewhere, unless #{linkedMenu.setKey(key)} actually returns a piece of javascript (which seams unlikely and would probably be really bad even if it did) you need to fix the function as well.
I know this question is old, but to those who are still looking there's an alternative.
If you are using primefaces just try this out.
Request Context

get method isn't returning results

I'm trying to simply reproduce what is on the jquery site for the .get method:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
</ul>
<script type="text/javascript">
alert($('li').get());
</script>
</body>
</html>
It should return
[<li id="foo">, <li id="bar">]
But all I get is [object HTMLLIElement],[object HTMLLIElement]
Does anybody know what I might be doing wrong here?
Everything is alright:
The .get() method grants us access to the DOM nodes underlying each
jQuery object.
Get returns the DOM elements hold by the jQuery variable.
And when you output DomElements they become the form "HTMLLIElement".
But that's what .get does! It will retrieve the HTML DOM elements matched by the selector. If you want the jQuery objects, you should use just $('li').
Simple, select the ul element and display it's content with the html function:
alert($('ul').html());
html docs:
Description: Get the HTML contents of the first element in the set of matched elements.
You're not necessarily doing anything wrong.
What you're getting is the actual result of calling toString (which alert will do for you) on an array with 2 <li> DOM objects in it:
[object HTMLLIElement],[object HTMLLIElement]
However, what's mentioned in the API Documents isn't a string representation of the array, but is meant as a description of the array's current state in memory:
[<li id="foo">, <li id="bar">]
It was meant just as a shorter way of saying something like this:
The result is an array with 2 DOM objects that represent the <li id="foo"> and <li id="bar"> elements, respectively.
Now, if you actually want to get the markup in the alert, you'll have to get the outer HTML of the elements. Then try:
alert($('li').map(function () { return $(this).outerHTML(); }).get());
Example: http://jsfiddle.net/cmpwM/

Categories