We Keep Coding

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.

How to set javascript variable to flask template variable using javascript

I want to set the javascript variable value to flask template variable in javascript. What I am trying is
$(document).on("click", ".prepopulate", function () {
var myBookId = $(this).data('id');
alert(myBookId); // The value is showing proper
{% set tempVar = 'myBookId' %}
alert ({{tempVar}})
});
But it's giving an error instead (UndefinedError: 'list object' has no attribute 'myBookId'). What is the way to set the template variable in javascript using javascript variable?

You want to use set like this:
%SET{"tempVar" value="myBookId"}%

You cannot do this because jinja runs before the page loads and on the server side but the javascript code is executed when the page is loading and on the client side (browser) so your myBookId variable doesn't exist for jinja (see this answer for more info). A way to achieve what you want is to use ajax. See here an example.

If you look at your rendered HTML you will see
alert (myBookId)
Unless you define a variable called myBookId, this is not valid JavaScript. You need to wrap the string value in quotes.
alert('{{ myBookId }}')
An even better way to do this is to let Jinja decide for you if quotes are needed.
alert({{ myBookId|tojson|safe }})
This will wrap string values in strings, leave integers alone, and use JavaScript booleans.

How can I define an attribute as a variable?

I'm trying to define the following line as a variable in Jquery by using
var attributeID = $("#element_to_pop_up").attr("attrId");
The link I am using is and attrId is a variable
<a id="element_to_pop_up" attrId="variable">Link</a>
Basically, I am trying to define the value of my attribute "attrId" as a variable.
One more thing to note This is within a FreeMarker template so FreeMarker is already giving me my variable value. I don't have to do an onclick to get the value.
Is there a better way of doing this?

HTML5 supports the notion of data attributes for application-specific uses. So a better approach is to name all your attributes with the data- prefix:
<a id="element_to_pop_up" data-attrid="variable">Link</a>
To include the information that #chris97ong added, the way to access this variable data using jQuery is:
var x= $('#element_to_pop_up').data('attrid');

How to escape quotes when setting a javascript string to the value propagated from a Django variable?

I'm propagating several variables to my template, some of which are strings that I want to use and manipulate through javascript. I'm setting this value as such:
var venue_toc = "{{terms_and_conditions}}";
terms_and_conditions is capable of having quotes in it itself, so I need to escape those in order for things to work as expected. What is the correct way to do that when bringing values up from Django?

Try with built-in filter escapejs
var venue_toc = "{{terms_and_conditions|escapejs}}";

handlebars access global variable: if statement

I've got a hbs template where I've got an array of objects and a boolean toggle variable (toggles the template behavior), let's say:
{
objs: list,
mode: true
}
I'm not able to access the mode variable when inside the loop over objs (the context is changed). What I want is to make an if-statement using the upper variable. I found that I can write a custom helper. But is there no other way to access the variable? I also found out, that inside the loop the variable is accessible via {{../mode}} - but still, don't know how to access that.

Finally, I've found a solution:
{{#if ../mode}}xyz{{/if}}