Passing context variable values from javacript activity to page acitivity in web app

[vani97]

Hi ,

Im trying to display the values from context variable called res thats having table attributes values for image and comment 
but i couldnt able to display context variable  values 

This is the code that i have tried

window.onload = function() {

var length = document.controller.getValue("/ctx/vars/length");
var res=document.controller.getValue("/ctx/vars/res");
if(length!=0&&length!=''||res!=0&&res!=''){
console.log(length);
console.log(res);
var containerDiv = document.getElementById("uploadForm");

containerDiv.innerHTML = "";

for(var j = 0; j < length; j++) {
var newDiv = document.createElement("div");
newDiv.className = "image-container";
newDiv.innerHTML = '<img class="nlui-widget" src="' + res[j].image + '" />' +
'<p>' + res[j].comment + '</p>';
containerDiv.appendChild(newDiv);
}
}

What i have got through above code 

in javascript activity 

in page activity

in console also the values getting log 

Can anyone help on this ?

[_Manoj_Kumar_]

Hello @vani97 

Do not call the function on window.load.

Use a timeout and call the function after 500ms and that should work. Once this is working then you can try reducing the time intererval to a lower number. 

[vani97]

Hi @_Manoj_Kumar_ 

I used time out function here still the image and comment were not displaying !
This is the code which i hv tried

setTimeout(function() {
var length = document.controller.getValue("/ctx/vars/length");
var res = document.controller.getValue("/ctx/vars/res");

if (length != 0 && length != '' || res != 0 && res != '') {
console.log(length);
console.log(res);
var containerDiv = document.getElementById("uploadForm");

containerDiv.innerHTML = "";

for (var j = 0; j < length; j++) {
var newDiv = document.createElement("div");
newDiv.className = "image-container";
newDiv.innerHTML = '<img class="nlui-widget" src="' + res[j].image + '" />' +
'<p>' + res[j].comment + '</p>';
containerDiv.appendChild(newDiv);
}
} else {
console.log("inside Else");
}
}, 500);

[_Manoj_Kumar_]

In debug mode, do you see the values of length and res variables?

[_Manoj_Kumar_]

Hello @vani97 

The value of res is not a object but a string and that is why res.name and res.image is not able to populate the value.

Also, You can write your queryDef query direct in the page activity. Is there a reason why you have it in Javascript code first and using the context variable to print them on page activity?

[vani97]

Actually @_Manoj_Kumar_ I was not aware of this and also i thought this is the only thing to achieve this 

yeah will try it directly in page activity will let you know !

Thanks !

[vani97]

Hi @_Manoj_Kumar_ 

I tried you approach 

<script type="text/javascript">// <![CDATA[
// Get the length of the variable

var query = xtk.queryDef.create(
<queryDef schema="lpl:fanCommentTable" operation="select">
<select>
<node expr="@id"/>
<node expr="@image"/>
<node expr="@comment"/>
</select>
</queryDef>).ExecuteQuery();

var length = query.fanCommentTable.length();

//ctx.vars.length = length.toString();

var res = query.fanCommentTable;

//ctx.vars.res= res.toString();

setTimeout(function() {
//var length = document.controller ? document.controller.getValue("/ctx/vars/length") : 0;
//var res = document.controller ? document.controller.getValue("/ctx/vars/res") : [];

if (length && res && res.length) {
console.log(length);
console.log(res);
var containerDiv = document.getElementById("uploadForm");

containerDiv.innerHTML = "";

for (var j = 0; j < length; j++) {
var newDiv = document.createElement("div");
newDiv.className = "image-container";
newDiv.innerHTML = '<img class="nlui-widget" src="' + res[j].image + '" />' +
'<p>' + res[j].comment + '</p>';
containerDiv.appendChild(newDiv);
}
} else {
console.log("No data available.");
}
}, 500);
// ]]></script>

But got some uncaught syntax error">" as we added the querydef in page activity 

also value not get logged in chrome dev tool

[vani97]

yeah after changing the function from onload to time out i could able to see the values from ctx

[_Manoj_Kumar_]

The queryDef code will be outside of script tag.

Here is an example:

<%
your querydef code here

%>

[vani97]

Hi @_Manoj_Kumar_ 

I have placed outside of the script 

But  in console no available data getting logged  its seems like no value is passing

[_Manoj_Kumar_ · Accepted solution]

Hello @vani97 

You can remove everything within the script tab and just use the JSP code to print the values like this:

<%
var query = xtk.queryDef.create(
<queryDef schema="lpl:fanCommentTable" operation="select">
<select>
<node expr="@id"/>
<node expr="@image"/>
<node expr="@comment"/>
</select>
</queryDef>).ExecuteQuery();

var length = query.fanCommentTable.length();

//ctx.vars.length = length.toString();

var res = query.fanCommentTable;
for each(var r in res)
{
%>
<%= r.@name %>
<%= r.@image%>
<%
}
%>