I'm trying to put some data into a child windows html tag. But it doesn't seem to work. I tried putting it in with some jquery on that child window and that is working fine.
Here is the code implemented in the parent window to send the data to the child window:
$(".something", fullscreen.document).data("data1", "whatever");
Which will return "undefined" with the following jQuery code in the child window.
console.log($(".something").data("data1"));
But when I store the data with the child jQuery-script it works perfectly:
$(".something").data("data1", "whatever");
Is crosswindow data storing into tags not allowed?
jQuery uses its own data store for data you set with .data(). Each instance of jQuery (in each window) will have it's own separate data store so you won't get results from one when calling from another.
If your data is simply a string, then you will probably find it easier to not worry about multiple instance data stores and just use .attr() to store the string as an actual attribute on the DOM object. Then, there's zero question about where it's stored or how to access it because it's directly on the DOM object which you can easily get to from either jQuery instance.
// store data on the object
$(".something", fullscreen.document).attr("data-data1", "whatever");
// read data from within the target window
console.log($(".something").attr("data-data1"));
Note the use of the HTML5 "data-xxx" convention to avoid any attribute naming conflicts with standard attributes.
jQuery does not save the data with the DOMElement but with in the scope the used jQuery instance. As of that two instances of jQuery no matter if in the same document (e.g. two versions of jQuery) or in different documents, won't share the internal data, neither they can access it.
You will always need retrieve the data with the same jQuery that was used to set it.
If you want to access the data in the child for an element where the data was that way:
$(".something", fullscreen.document).data("data1", "whatever");
then you would need to do it that way:
parent.window.$(".something", docmuent).data('data1');
Related
Let's say I have to remember the initial height of certain element.
A common practice I see is to save this value with $.data on that element.
I fail to understand the benefits of this. Why not simply keep a simple variable with that value, or an array with values if there are multiple elements? Keeps the code easy to understand.
The main reason for using data() is to store data specific to a certain element so it can be accessed later, here's an example
$('.elements').on('click', function() {
$(this).data('value', this.value);
});
$('.elements').on('keyup', function() {
$(this).val( $(this).data('value') );
});
Note that the event handler could match a number of different elements, and using data() keeps the data associated to each element without using several variables for each element or a complex array.
EXAMPLE
It allows the function to be reused to apply the same effect to other elements (without having to deal with closures).
It allows the value to be initialized with HTML.
It makes it easier for developer tools to inspect the data.
Basically because le you save information INSIDE A NODE, preventing possible variable name conflicts and without the need to pass variables around. All the needed informations about a node, stay with the node itself
I have made a class in javascript with an object that contains both variables and functions. I instantiate the object within one .html page, but when I change to another .html page, the object seems to be 'empty'.
How can I pass the object between one page to another?
You can have a look at Web Storage. This won't allow you to store a full JavaScript object, however you will be able to store as many string name-value pairs as you want. Either permanently (between browser restarts) or as part of a session.
Use localStorage, check this lib:
https://github.com/marcuswestin/store.js
You can do something like:
store.set('foo', originalObject);
and then...
var restoredObject = store.get('foo');
Removing stored objects:
store.remove('foo');
Fork "jQuery-like" syntax:
http://pastebin.com/x3KpKyr1
I'd like to do something like this:
var elem = document.createElement("input");
elem.setAttribute("my-attribute", myObject);
document.getElementById("parent").appendChild(elem);
Later I will need to fetch myObject when performing some actions on this (and similar) element(s).
Note: I need this as an attribute (and not, for example, as a member of the element object, as in elem.myAttribute = myObject), as for some elements the value is a string which is hard-coded into the HTML of the page. What I need is the ability to set this attribute programmatically for other elements, and to use values which are not always plain strings.
I tried this and it worked in my browser (Firefox 14), but I need to know if this works cross-browser, and also if I'll be able to fetch the values of such attributes using jQuery if I decide to use jQuery in my page later on.
No - attributes by definition store string values. The obvious approach is to store the object as a property but you say that's not suitable.
Either:
1) Use jQuery's data API (since it does not literally log the data on the element, so you can store whatever you want, not only strings)
2) Stringify the object and append that to the element as an HTML5 data attribute.
var elem = document.querySelector('p'),
obj = {foo: 'bar'};
elem.setAttribute('data-myObj', JSON.stringify(obj));
/* ...then, later... */
var data = JSON.parse(elem.getAttribute('data-myObj'));
Note, though, that, because we're dealing with JSON, you will not be able to store methods as part of this object. They will be stripped out by JSON.stringify().
Finally, using attributes means you'll muddy your HTML since they show up in any HTML dumps (unlike properties) but this is purely a cosmetic weakness.
You can use the data attribute in jquery to do this (http://api.jquery.com/data/)
You can use html 5 data attributes:
http://ejohn.org/blog/html-5-data-attributes/
And these can be retrieved using the jquery data api.
These will have to be stringifed however
"As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object"
I need to have two select menus in a CKEditor dialog, with the second select menu changing its options according to the selected option of the first menu. Simple enough you would think! But in CKEditor it seems really difficult to obtain the DOM equivalent of the CKEditor object. I can access the CKEditor Object but not its DOM equivalent(s).
The instance of the CKEditor select (UIElement) object has some useful DOM interactions i.e. getElement() but I can only access this object with the special this keyword within an event method within a CKEditor select "class" definition.
How can I access the instance of the CKEditor UIElement object (in this case the select)? I only have the id of the CKEditor object, CKEditor for some frustrating reason decides to apply random ids to its DOM object equivalents.
The instance object I am trying to access is documented here: (No mention of how to obtain this instance though!)
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.select.html
In fact the CKEDITOR.dialog.getCurrent() method will allow you to access the Dialog instance from any function, and from there you can access the UIElement instance of any CKEditor object you're after.
Can you cache what you need in the setup callbacks during your dialog's initialization?
You can pass the setup functions an object and they could put what they need in there. So you'd pass an object into your setup stuff:
onShow: function() {
//...
this.cachedDomIds = { };
this.setupContent(this.cachedDomIds);
//...
}
And then in your setup:
setup: function(cache) {
//...
cache.some_dom_id = this.domId;
//...
}
Then at least you'd have access to all the real DOM id attributes and you could getElementById() as needed.
Thanks for the suggestion mu is too short,
I found I could access the other select menus by using this method:
this.getDialog().getContentElement([insert_dialog_name_here], this.getValue()).getElement()
this.getValue will have the same id of the CKEditor UI element I'm after
I have recently been using the title tag in various HTML elements to store data in JSON format in the DOM.
Is this a bad approach (I am assuming it is)? What is the correct way to accomplish this that works well with jQuery? By "works well" I mean
$("myButton").click(function (e) {
var myData;
eval("myData=" + $(this).attr("title"));
});
Works pretty well but again I am assuming there is a better way to do this no?
PS: BTW how does the title tag of HTML elements actually work? I cant seem to find where it actually ends up getting used?
PSS: Can I also get a jQuery based and Non jQuery response? (Sorry to be fussy)
eval("myData=" + $(this).attr("title"));
This is almost a legal reason to slap you! (j/k)
You should use your own namespace object to store data "globally". In that context, globally means only global in your application code and not using the global object (window in a browser).
var my_application = {};
$('myButton').click(function() {
my_application.myData = $(this).attr('title');
});
This is a very basic strategy of course. In your particular case, you can also use jQuery's .data() method to attach data to a DOM node.
$('myButton').click(function() {
$.data(this, 'myData', this.title);
});
Ref.: .data(), jQuery.data()
In your example, I'd suggest doing the following which does not expose you to the security risks of 'eval':
myData = JSON.decode($(this).attr("title"));
In general it's a valid approach to holding non-secure data. You have a number of other options too:
Use JQuery's .data() methods:
myData = $this.data("foo");
In HTML5 you now can use custom data attributes (Eg "") as an attribute on any element. http://html5doctor.com/html5-custom-data-attributes/
You could use Local Storage if you know it is available. http://dev.w3.org/html5/webstorage/
You could use Backbone.js on top of Jquery to give you a more abstracted way of handling your data as Models. http://documentcloud.github.com/backbone/
use jquery data()
The jQuery.data() method allows us to
attach data of any type to DOM
elements in a way that is safe from
circular references and therefore free
from memory leaks. jQuery ensures that
the data is removed when DOM elements
are removed via jQuery methods, and
when the user leaves the page. We can
set several distinct values for a
single element and retrieve them
later:
jQuery.data(document.body, 'foo', 52);
In the jQuery world it is usually said to be a best practice to use the metadata plugin as it is an official jQuery plugin and also supports HTML5 data attributes. For more info you could look at this http://docs.jquery.com/Plugins/Metadata/metadata