Pass javascript objects between html pages - javascript

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

Related

google app script trying to access post data on web app via do post

I need to access formIDArray but in appscript return nothing when i call that. And how can i access this object ("FormIDArray[]") from the appscript
var array = e.parameters["FormIDArray[]"];
e.parameters convert every key's to have an array. there for array containing keywords become ("array[]") appending "[]" that thing end of keyword. You can access that by simply as describe top. :)

How to reference the entire dataLayer object in a custom HTML tag?

I am pushing redux dispatch events to the dataLayer. I am appending some information to the object and they end up being fairly complex objects. I have a custom html tag that fires when certain properties on the dataLayer object are certain values. The custom tag calls a window.publish() function that publishes a JSON object to an ELK stack. The window.publish() function takes and object as the argument: window.publish({"key":"value"}) .
What I want to do is publish the entire dataLayer object for the tag that is being fired. I know I can reference single variables on the object using {{}} notation, but how can I reference the entire object? Currently I'm doing this:
<script>
window.publish(
dataLayer[
dataLayer.findIndex(function(ev){return ev['gtm.uniqueEventId'] == .
{{UniqueEventId}}})
]);
</script>
where {{UniqueEventId}} is a custom variable I've setup.
Is there a better way to do this?
The solution I'm using in the question is the answer. It comes from here: https://productforums.google.com/forum/?utm_medium=email&utm_source=footer#!msg/tag-manager/cskdJPfJF1k/7L52mbwkAQAJ

Accessing javascript object named via php globally

I have a bunch of CSS properties stored in a MySQL database accessed via PHP. I need to make these properties available to JavaScript after the page has finished loading.
So what I did is foreach row, put the values in a Javascript object like so:
foreach ($cellcontent as $cellproperty) {
echo 'var '.$cellproperty->cell_id.' = {cellwidth:"'.$cellproperty->cell_width.'"};';
}
(For simplicity's sake I've only included one object property here but in reality there are many more.)
My problem is that at runtime, via JavaScript I get the cell_id reference which is somewhere in the html page like so:
var dacell = $(this).closest("div");
var cellid = dacell.attr("id");
So at this point, cellid is equal to the name of my var from the php output.
But when I try to get the property of my object (cellwidth) via JavaScript it doesn't work. Says its undefined when I try to see the value in an alert:
alert(cellid.cellwidth);
I think I'm just not referencing the actual object at this point and just trying to get a property of what has now become a string.
Is there a way to get back the reference to the object itself?
var cellid = dacell.attr("id");
The variable cellid is a string. Your hopes would be that the variable your are looking is in the global namespace which you can access via the following:
window[cellid].cellwidth
It's an awfull practice to pollute the global namespace with so much stuff.
Fetch all the values you need to inject into the JS, create an associative Array and inject it as a single JSON into the Page.
Nevermind everyone. The eval() javascript function fixed it all.
Instead of doing:
alert(cellid.cellwidth);
I did:
alert(eval(cellid).cellwidth);
and everything worked.
Thanks for all your time.
Cheers,
Erick P.

.data() html5 cross window

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');

JavaScript: how to pass object value from one function to another

I am using code lines like the following in order to fetch data from an intranet website:
util.setProp(obj, "firstNameOld", $(msg).find('#fname_a').text());
Now I have another function in the same file where I want to use the above again, resp. the value of that object - currently I am hard-coding this ('Test') for test purposes:
util.setProp(obj, "firstNameNew", 'Test');
How can I pass the value from the firstNameOld object in one function to the firstNameNew object in another function ? If a solution with global variables is better here than this would work as well.
Many thanks for any help with this, Tim.
I've never used the framework that includes util But I imagine that if there is a setProp() then there has to be a getProp() or something similar.
If so, you could do something like
util.setProp(obj, "firstNameNew", util.getProp(obj, "firstNameOld"));
This also relies on the assumption that you want to copy from two properties in the same object.
If not, then pass the desired source object in the getProp() call.
My guess is that functions (or properties) are called "firstNameOld" and "firstNameNew", so the first time you get it from selector, second time you want to do the same.
Try to use the local variable like that:
var text = $(msg).find('#fname_a').text();
//
util.setProp(obj, "firstNameOld", text);
//
util.setProp(obj, "firstNameNew", text);

Categories