I have some javascript code that looks like this:
dojo.query("#maintenanceOpData tr").forEach(function(node, index, nodelist){
if (index % 2 == 0) {
dojo.style(node, {
"backgroundColor": "#FFFFCC"
});
};
});
Everything I find in online documentation shows that dojo.style expects the ID of the DOM element, not the DOM node itself. What can I do? The only other examples show using dojo.query(...).style(...), which applies the style to all nodes. I only want to apply it to every other node, which is why I use the for-each call.
http://dojotoolkit.org/reference-guide/dojo/style.html
dojo.style(node, style, value);
node:
id or reference of the DOM node to get/set style for
EDIT: Works for me
Which version of Dojo are you using? Like JIP says, the code you've pasted should work fine ( http://jsfiddle.net/4HXMF/ ), given that you're using a recent version of Dojo.
Dojo query actually supports many of the new selectors, so you can in fact do:
dojo.query("#maintenanceOpData tr:nth-child(odd)").style("backgroundColor", "#FFFFCC");
Related
i am trying a drag and drop in an iframe and to do that i need to pass xpath in find since i cant find a unique element to pass in cy.get()
currently i am trying
cy.xpath('//div[#class="unlayer-editor"]//iframe[#src]')
.should("be.visible")
.find('//div[#class = "blopockbder-coent-tols43 col-sm-12"]//div[#aria-describedby="t8ppy-tooltip-9"]')
but this isnt working
i am using cypress for automation
Not an expert on xpath, but I think .find() can't be mixed with an xpath selector.
Two things to try
// chain 2nd xpath in place of .find()
cy.get('div[class="unlayer-editor"] iframe[id="my-iframes-id"]')
.should("be.visible")
.xpath('//div[#class = "blopockbder-coent-tols43 col-sm-12"]//div[#aria-describedby="t8ppy-tooltip-9"]')
or
// use .within() instead of .find() (roughly equivalent)
cy.get('div[class="unlayer-editor"] iframe[id="my-iframes-id"]')
.should("be.visible")
.within(() => {
cy.xpath('//div[#class = "blopockbder-coent-tols43 col-sm-12"]//div[#aria-describedby="t8ppy-tooltip-9"]')
})
Other things that might need adjusting
The iframe selection generally needs a follow-up command to get it's document body (ref Working with iframes)
// get the iframe document body any select within it
cy.get('div[class="unlayer-editor"] iframe[id="my-iframes-id"]')
.its('0.contentDocument.body', { log: false }).should('not.be.empty')
.within(() => {
cy.xpath('//div[#class = "blopockbder-coent-tols43 col-sm-12"]//div[#aria-describedby="t8ppy-tooltip-9"]')
})
Some of those classes in the path like col-sm-12 are purely display-oriented and may be different if you test at different devices. Once the test works, try removing them to make the test more robust.
In JQuery I used parent() function to get immediate parent of any element. In loop something like this
$(this).parent();
The same I want to do in dojo my loop is like this.
dojo.query(".entryURL").forEach(function(node, index, arr){
var url = dojo.attr(node, "href");
// I want to get the parent of node, which will be ofcourse diff for each iteration
});
Someone please give me a Hint, I tried using parent.node also I'm trying to append to the parent like this
dojo.place("<span style='color:green'>URL</span>",query(node).parent(), "last");
I'm getting this error in firebug
TypeError: _365.appendChild is not a function
Regards
Aadam
Some problems here:
dojo.place() or dojo/dom-construct::place() is not compliant with the dojo/NodeList API used by dojo/query. In stead of that use modules like dojo/NodeList-manipulate or dojo/NodeList-dom. Since you're a jQuery user, I recommend using dojo/NodeList-manipulate because it mimmicks the jQuery API.
To retrieve the parent of a DOM node, you indeed use the parent() method, but that part of the API is only available if you load dojo/NodeList-traverse.
This is a working example using the feedback:
require(["dojo/query", "dojo/NodeList-traverse", "dojo/NodeList-manipulate", "dojo/domReady!"], function(query) {
query(".entryURL").forEach(function(node, index, arr){
query(node).parent().append("<span style='color:green'>URL</span>");
});
});
JSFiddle: http://jsfiddle.net/okk8unj5/
server side background, getting deeper and deeper into client side.
I've got a site with a lot of legacy that I'm new to, and I'm just trying to get a handle on how things are working/what's available.
Is there a way to have jquery tell me(for a page/pages) all its current info and any plugins it can/is use/ing, similar to what phpinfo does?
Some proof of concept how you can get names for all plugins
var plugins = (function() {
var plugins = [];
for(var plugin in jQuery.fn) {
plugins.push(plugin)
}
return plugins;
}());
var filterValue = ['constructor', 'init', 'add', 'parents'] // // you must add all standard methods here
filterValue.forEach(function(value) {
var position = function(value) {
return plugins.indexOf(value);
}
while(position(value) >= 0) {
plugins.splice(position(value), 1)
}
})
console.log(plugins)
You can use the following for jQuery
console.log( jQuery.fn.jquery );
To answer your question directly, No jQuery does not have a mechanism that lists installed plug-ins.
jQuery does not keep such a registry of installed plugins. The jQuery plugin mechanism is to just add a method to the jQuery prototype (right along-side all the other jQuery methods). So, there's no separate list of which methods have been added by some outside agent (e.g. a plug-in). In addition, there's no one-to-one correspondence between methods and a particular plug-in as a single plug-in could add multiple methods.
It would be possible to create a master list (for any specific jQuery version) of what methods are there by default and then enumerate a jQuery object to find out which methods have been added since then, but you'd have to create that master list ahead of time and store it or create the master list immediately after jQuery was loaded before any plug-ins were loaded.
You can always test to see if any specific jQuery plug-in is loaded by just checking to see if any of its signature methods are available on a jQuery object.
So, if you really just wanted to know which of 10 plugins happen to be available in any given page, you could write a quick function that would test for each of the 10 plugins (by looking for the existence of known methods in those plugins) and would return a list of the ones installed, but this has to be done with specific knowledge of each plugin as there is no "generic plugin identification mechanism" since a plug-in is nothing more than a piece of code that adds methods to the jQuery prototype. It doesn't actually have any identity of its own.
In a tree built with jsTree, I have the text within the <a> tag sitting in a variable. I would like to check that node. How can I do so?
I am currently finding that node, using jQuery, and altering its class. However, this does not repair the parent node by making the parent undetermined in its class. I tried doing $('.colors').jstree("checkbox_repair"), but that didn't seem to do anything.
It would be great if someone could actually answer both those questions, since they are related to the same problem.
Here is a jsFiddle, illustrating the issue--> http://jsfiddle.net/thapar/5XAjU/
In js_tree there are .check_node ( node ) and .uncheck_node ( node ) functions, i think this is what you are asking for. Soe the documentation here: http://www.jstree.com/documentation/checkbox
This is an excerpt from the documentation in the link above, "how to perform an operation":
/* METHOD ONE */
jQuery("some-selector-to-container-node-here")
.jstree("operation_name" [, argument_1, argument_2, ...]);
/* METHOD TWO */
jQuery.jstree._reference(needle)
/* NEEDLE can be a DOM node or selector for the container or a node within the container */
.operation_name([ argument_1, argument_2, ...]);
So I think this syntax should work
$.jstree._reference(".colors").check_node('li#tree_3');
Also i am not sure you should be using a class to reference your tree. Probably use an ID to reference your tree, and then use this syntax:
$.jstree._reference("#colors").check_node('li#tree_3');
//EDIT: Please keep in mind that the newest version of jsTree doesn't have a function called _reference anymore. It got renamed to reference (without the leading underscore). (Last checked 24/08/2015 15:45 by #mkli90)
Link: https://www.jstree.com/api/#/?f=$.jstree.reference(needle)
If you want to check jsTree nodes on load for example like this:
$(document).ready(function()
{
$.jstree._reference('#menu').check_node('#pih2');
});
it does not work. For me works following:
$(function () {
$('#mainMenu1').bind('loaded.jstree', function(e, data){ //waiting for loading
$.jstree._reference('#menu').check_node('#pih2'); //check node with id pih2
$.jstree._reference('#menu').check_node('#pih6'); //check node with id pih6
});
});
I use jsTree 1.0-rc3 and JQuery 1.7.1.
Aloe
In current versions of jstree the following syntax works:
$("#my_tree").jstree("check_node", node_id);
I would like to add this solution, the select_node function does the same function as check_node. we can use it as follows;
$('#jstree_id').on('loaded.jstree', function() {
$("#jstree_id").jstree("select_node", ["list of nodes go here"]);
});
You can use it to select multiple nodes in an array or a single node.
As jQuery devs know, jQuery allows easy dynamic HTML creation like this
var d = $('<div/>')
.append('some text')
.append(
$('<ul/>').append(
$('<li/>').text('list item')
.css("color", "blue")
.click(function() {
// do something
})
)
);
What's a good coding convention for creating dynamic HTML like this that can go down an arbitrary number of levels, while still being able to identify where I am in the element hierarchy and can spot if I've closed all the parentheses/braces properly?
Please don't direct me to a templating library.
Don't forget you can pass a map of properties as the second argument when creating a new element (jQuery 1.4 +):
$("<li/>", {
text: "list item",
css: { color: "blue" },
click: function(){
// do something
}
)
See http://api.jquery.com/jQuery/#creating-new-elements
Use templates like Handlebars or EJS to decouple templates from the behavior specific code.
Handlebars have an extra added feature, that is to precompile the template and convert it in a minified js. This minified js actually reduces the http calls and loads the page faster.
While in the template, you can add classes or ids to give styling mentioned in common css files.