jquery - how do i access those arrays and variables in the dom? - javascript

Im using firebug to debug jquery and in the dom tab i can see all the vars and arrays in there.
How do I access the different arrays and vars in the dom?
Cheers
Ke
I cannot access these object items, even though firefox lists them, i have sitems in the top level of the dom, i also have sitems within the parent variable.
a lot of head scratching happening here, would be grateful for any help :)

Looks like you want to access a user defined property, since these are not properties of the DOM ( Firebug Wiki DOM panel page. ), I don't think you can access them directly through your page, but you can access them through the Firebug console.
Simply type the name of the property into the command line of the Console... the part after >>> on the very bottom.
In your case you would type something like: sitems[0] and hit enter.
To access properties of the DOM... take a look at the DOM exploration page for Firebug.
To see how to access properties, functions, or constants of the DOM, check what you're interested in in the DOM tab.
Then you can "follow the bread crumbs" to access properties directly. Global properties are attached to window, so you don't need to include window:
Make sure to right click on things and explore the context menu, especially if you start looking at functions.

If it's an array you should access it as an array by referencing the index in the Array you are trying to access.
alert(sitems[1]);
If it's an object you can reference by using the "key" for the property or method of the object you are trying to access:
alert(sitems["keyName"]);
Likewise some of the stuff you'll see in the DOM tab are actually references to methods and objects within the DOM, so if you're going to call them or reference them you need to do so based on their type, or you may even need to provide arguments to them in order to get a response.
It's giving 'undefined' because you can't output the contents of an Array just by calling its name.

Related

Is it possible to get a DOM element in GTM custom template?

Description
So I've read through the GTM Custom template APIs; but I don't find anything regarding getting (e.g.) a div element. I've tried copying document from window using copyFromWindow() or calling document.getElementById through callInWindow(), but both times, I always get this error message when I add document to the permissions:
The value must not start with any key predefined on global scope (i.e. in Window), or any JavaScript keywords.
Question
Is there anyway that it is possible to call a DOM element through custom GTM tags?
My goal is to create a tag that can inject video's in selected div elements. I could do this by creating a custom HTML tag, but I don't want our marketing guy to always go through code. So a tag that asks him for the target ID and video url could make it easier
No. Preventing access to the DOM (and controlling access to the global namespace) is pretty much the point of sandboxed Javascript. Since GTM is not supposed to interfere with the DOM, this should not usually be a problem (well, that's what Google thinks at least).
If you need to learn about some property of a DOM object, you can get this (i.e. the property, not the object itself) via a DOM type variable and pass it in as a data item by creating a field that accept variables.
Simo has a bit about this in his inital write-up on custom templates (you have to scroll down quite a bit). While Google has added a number of APIs since, I doubt that a DOM API is coming up, because that would pretty much defy the purpose of sandboxed Javascript.

Accessing DOM objects with few identifiers (chrome extension)

I'm attempting to make my first ever chrome extension and I want to access the "Compose" button on Gmail via my content.js. I located the div that I want to use by inspecting the page, but I'm not sure how I can access it with Javascript since it's really deeply nested and doesn't have an ID attribute. I tried using document.querySelectorAll(".T-I.J-J5-Ji.T-I-KE.L3") and document.getElementsByClassName("T-I J-J5-Ji T-I-KE L3"), but the returned array was always empty. What am I doing wrong/what is a better way to access this element?
This is the HTML for the element I'm trying to get
here.
It would probably be easier to see the code I'm talking about by logging into Gmail (if you have one and right-clicking the "Compose" button and clicking Inspect).
I tried to type the command document.getElementsByClassName("T-I J-J5-Ji T-I-KE L3") in the console and it returned an array that contains theelement you are searching for.
I would say that your script do not have access to the entire document, so that you can not modify whatever you want, but I don't know enought about Chrome extension to be sure of that.
Good luck !
Try matching for document.querySelector('[gh="cm"]');.
I'm not sure what the gh attribute stands for, but its value cm represents the ComposeMessage button.

Get a property listed in the browser's Event Listener tab programmatically

I'm wondering if it is possible to get a HTML element's property listed in the Event Listeners tab?
The console command
getEventListeners(window.document.activeElement)
gives the full list.
But is it possible to get the above displayed property _oRecord through its "property path"?
A right click in the browser allows me to copy the property path, i.e. [""0""].P._oRecord in my case.
With getEventListeners(), I can get the function, while I need to get one of the "[[Scopes]]" properties.
[[Scopes]] is an internal property of the Javascript engine. It's only exposed to the developer tools.
You can't access this property programmatically via Javascript.
Though what you could do is, manually storing the object as global variable and inspect it programmatically:
(Right-click on [[Scopes]])
Say it has been stored as temp1, then this would allow you to further inspect the scope information programmatically:
Object.values(temp1).map((s) => s.object)

Tokbox session methods inaccessible

I am getting a javascript object which contains method list but I am not able to access method.
I am integrating tokbox api and i want to call unpublish function when user wants to disconnect the stream.
Please find attached image of my object and whole function list. Please give me solutions as soon as possible.
I don't see the problem from the screenshot attached. The session.unpublish(publisher) method should work as expected. If it is not, can you please show what the errors or the bad behavior look like? Are you passing in the Publisher object? Also be aware that just because you unpublish, does not mean the video element on the page will disappear, for that you must call publisher.destroy(). Lastly, the most simple solution would just be to call session.disconnect() and that will automatically clean up by unpublishing and destroying the publisher.
I do see another error related to a parameter you passed to either OT.initPublisher(element, properties, completionHandler), session.publish(element, properties, completionHandler), or session.subscribe(stream, element, properties, completionHandler). In one of those, as the element parameter, you are passing a reference to window rather than a valid element from the page. You might also have intended to use a String that matches the id attribute of an element on the page. Please fix that.

In YUI, is there a way to reference the tab or tabview objects from the DOM?

It seems like there should be, but I've looked over the API and nada. I don't see how it's done in 2.x. Currently, I store references with the elements to the tab and tabview objects via jQuery's data method.
The why: When I interact with the tabs via mouseovers and clicks, I need to be able to reference the YUI tab/tabview objects' properties & methods. Since I'm using event delegation b/c I have so many tabs (tabs within tabs), I'm not directly attaching (potentially hundreds of) event listeners, and thus I don't have access to the tabs and tabviews via the this symbol.
There's a corresponding method for buttons (YAHOO.widget.Button.getButton) but not one for tabs unless I'm missing something obvious.
Additionally, it seems that if I have a tab object, there's not a reference to the tabview. Once again, I create my own reference, but I assume there should be a reference or an accessor method already.
Can anyone shed any light on this? Anyone else approaching this differently?
The best place for YUI questions are the forums on yuilibrary.com.
The YUI TabView component has event delegation built-in. Every Tab event is actually handled by the TabView that it belongs to. Each events is routed to the appropriate Tab, and the context of the handler is set to the Tab.
This allows you to assign your listeners as you normally would:
tabview.getTab(1).on('mouseover', function(e) {
console.log(e.target.innerHTML); // e.target === Tab Label Element
console.log(this.get('label')); // this === Tab instance
});
This works for nested TabViews as well.
There is currently no binding between Tab and TabView except for the TabView's "tabs" attribute. You can iterate this collection and compare your element to each Tab's "element" attribute if there is a use-case for knowing which TabView it belongs to.
have you tried using Firebug, using the DOM tab/DOM subpanel, and actually looking through the attributes/properties/methods on the document and/or related elements? It's usually the fastest way to see what you can access.
also worthwhile to do a for..in loop to enumerate all of the properties/methods of a returned object if you are unsure what is available and unable to get that info via firebug.
e.g.
var properties = "";
for (prop in obj) {
properties += prop+"\n";
}
alert(properties);
This is true in most cases, not just your particular question.
EDIT
Having just checked the YUI examples for tabview, I see there is no property on the DOM elements for the tabs that refer to JS objects. I suppose this has been done to avoid DOM pollution, but it looks like you may have to make those reference yourself when creating the tabs/tabviews
e.g.
var tabView = new YAHOO.widget.TabView('demo');
document.getElementById("demo").tabView = tabView;

Categories

Resources