why is my global variable not being retained?

C

carlos

I am writing the below javascript to populate an array with content
that I get from a google blog feed. I load the first array items value
by doing an innerHTML on a DOM element. The problem I am facing is
that when a user clicks the next button, I want my javascript function
(showNext) to get the next array item, and inject that array value in
the dom element. It seems to be working, but after I inject the new
content, the page is being reloaded, and it calls the same method that
originally loaded the first array items content (page_load - which is
called on the body onload). I tried setting a global variable called
"postback" that set the value to true once the page loads for the
first time. However, after I click next, the value gets reset again. I
am confused as to why this value is not being retained? It is in the
global cache right? Can someone take a peak at the code and give me
some suggestions?

var aContent = new Array();
var aTitle = new Array();
var aDate = new Array();
var activeIndex = 0;
var postBack = false;

function page_load(query) {

// Retrieve the JSON feed.
var script = document.createElement('script');
script.setAttribute('src', 'http://' + 'bikebr' + '.blogspot.com/
feeds/posts' +
'/default?alt=json-in-
script&callback=fillArrays');
script.setAttribute('id', 'jsonScript');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

function fillArrays(json) {

if(!postback) {

//store all entries
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry;
aTitle = entry.title.$t;
var postDesc = "posted: ";
aDate = postDesc + json.feed.updated.$t.substring(0,10) +
" ";
aContent = entry.content.$t;
}

//inject the first blog items into the page
document.getElementById('content').innerHTML = aContent[0];
document.getElementById('header').innerHTML = aTitle[0];
document.getElementById('date').innerHTML = aDate[0];
postBack = true;
}
}

function showContent(data) {
var divToInject = document.getElementById('data');
var newDiv = document.createElement('div');
newDiv.innerHTML = data;
divToInject.appendChild(newDiv);
}

function showNext() {

var i = activeIndex + 1;
if(i > aContent.length) {
i==0;
}
debugger;
document.getElementById('header').innerHTML = aTitle;
document.getElementById('content').innerHTML = aContent;
document.getElementById('date').innerHTML = aDate;
}

function showPrev() {
var i = activeIndex - 1;
if(i <= 0) {
i==0;
}

document.getElementById('header').innerHTML = aTitle;
document.getElementById('content').innerHTML = aContent;
document.getElementById('date').innerHTML = aDate;
}
 
T

Thomas 'PointedEars' Lahn

carlos said:
I am writing the below javascript to populate an array with content
that I get from a google blog feed. I load the first array items value
by doing an innerHTML on a DOM element. The problem I am facing is
that when a user clicks the next button, I want my javascript function
(showNext) to get the next array item, and inject that array value in
the dom element. It seems to be working, but after I inject the new
content, the page is being reloaded,

There is your problem. You have to prevent the reload.
[...] However, after I click next, the value gets reset again. I
am confused as to why this value is not being retained? It is in the
global cache right?

Wrong. A global variable is a property of the Global Object with the
DontDelete attribute. The Global Object and its associated execution
context is destructed when the document resource is reloaded; property
values are _not_ stored in the browser cache.
Can someone take a peak at the code and give me some suggestions?

You should post how you call these methods.
[...]
function page_load(query) {

// Retrieve the JSON feed.
var script = document.createElement('script');
script.setAttribute('src', 'http://' + 'bikebr' + '.blogspot.com/
feeds/posts' +
'/default?alt=json-in-
script&callback=fillArrays');
script.setAttribute('id', 'jsonScript');
script.setAttribute('type', 'text/javascript');

setAttribute() is unnecessary here.

script.src = "...";
script.id = "...";
script.type = "...";
document.documentElement.firstChild.appendChild(script);

You would want to append the `script' element as the child element of the
`head' element, which is not necessarily the first child of the `html' root
element: text nodes are child nodes, too. Consider this:

document.getElementsByTagName("head")[0].appendChild(script);

Loading scripts either way is no bullet-proof method, though. And to spare
you looking for one: there is none but to write the `script' element as-is.


PointedEars
 
L

lwhitb1

carlos said:
I am writing the below javascript to populate an array with content
that I get from a google blog feed. I load the first array items value
by doing an innerHTML on a DOM element. The problem I am facing is
that when a user clicks the next button, I want my javascript function
(showNext) to get the next array item, and inject that array value in
the dom element. It seems to be working, but after I inject the new
content, the page is being reloaded,

There is your problem. You have to prevent the reload.
[...] However, after I click next, the value gets reset again. I
am confused as to why this value is not being retained? It is in the
global cache right?

Wrong. A global variable is a property of the Global Object with the
DontDelete attribute. The Global Object and its associated execution
context is destructed when the document resource is reloaded; property
values are _not_ stored in the browser cache.
Can someone take a peak at the code and give me some suggestions?

You should post how you call these methods.
[...]
function page_load(query) {
// Retrieve the JSON feed.
var script = document.createElement('script');
script.setAttribute('src', 'http://' + 'bikebr' + '.blogspot.com/
feeds/posts' +
'/default?alt=json-in-
script&callback=fillArrays');
script.setAttribute('id', 'jsonScript');
script.setAttribute('type', 'text/javascript');

setAttribute() is unnecessary here.

script.src = "...";
script.id = "...";
script.type = "...";
document.documentElement.firstChild.appendChild(script);

You would want to append the `script' element as the child element of the
`head' element, which is not necessarily the first child of the `html' root
element: text nodes are child nodes, too. Consider this:

document.getElementsByTagName("head")[0].appendChild(script);

Loading scripts either way is no bullet-proof method, though. And to spare
you looking for one: there is none but to write the `script' element as-is.

PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>

Thanks for the feedback.

I call the page_load function in the body onload tag like below: It
doesn't require a parameter. I should have removed the query parameter
in the previous post.

body onload="javascript:page_load();"

Do you have any suggestions as to how I can prevent the page from
reloading, or from preventing the destruction of the global variable?

Thanks

<body onload='javascript:page_load();'
 
T

Thomas 'PointedEars' Lahn

lwhitb1 said:
carlos said:
I am writing the below javascript to populate an array with content
that I get from a google blog feed. I load the first array items value
by doing an innerHTML on a DOM element. The problem I am facing is
that when a user clicks the next button, I want my javascript function
(showNext) to get the next array item, and inject that array value in
the dom element. It seems to be working, but after I inject the new
content, the page is being reloaded,
There is your problem. You have to prevent the reload.
[...]
Can someone take a peak at the code and give me some suggestions?

You should post how you call these methods.
[...]

Thanks for the feedback.

You are welcome. Please trim your quotes to the minimum required to retain
context: http://www.jibbering.com/faq/faq_notes/clj_posts.html#ps1Trim

It would also be appropriate if you chose only one pseudonym to post,
although a real name would be appreciated even more.
http://rfc-editor.org/rfc/rfc1855.txt
I call the page_load function in the body onload tag like below: It
doesn't require a parameter. I should have removed the query parameter
in the previous post.

body onload="javascript:page_load();"

Then that is pointless. No parameter means static code:

<script type="text/javascript"
src="http://bikebr.blogspot.com/feeds/posts"></script>

And `javascript:' is a URI scheme that does not belong into event handler
attributes where it only serves as a label, if that.
Do you have any suggestions as to how I can prevent the page from
reloading, or from preventing the destruction of the global variable?

If you posted the *calling* code, I might have some.


PointedEars
 
L

lwhitb1

Actually, it is not static, because in that src url, a callback method
is given, and the JSON feed is passed to that method.

<script type="text/javascript" src="http://bikebrblogspot.com/feeds/
posts/default?alt=json-in-script&callback=fillArrays";></script>

Thanks for the feedback. I will take a look at the links you provided.
Also, i'll try to upload my code on a server so you can review it.
 
C

carlos

lwhitb1 said:
carlos wrote:
I am writing the below javascript to populate an array with content
that I get from a google blog feed. I load the first array items value
by doing an innerHTML on a DOM element. The problem I am facing is
that when a user clicks the next button, I want my javascript function
(showNext) to get the next array item, and inject that array value in
the dom element. It seems to be working, but after I inject the new
content, the page is being reloaded,
There is your problem. You have to prevent the reload.
[...]
Can someone take a peak at the code and give me some suggestions?
You should post how you call these methods.
[...]
Thanks for the feedback.

You are welcome. Please trim your quotes to the minimum required to retain
context:http://www.jibbering.com/faq/faq_notes/clj_posts.html#ps1Trim

It would also be appropriate if you chose only one pseudonym to post,
although a real name would be appreciated even more.http://rfc-editor.org/rfc/rfc1855.txt
I call the page_load function in the body onload tag like below: It
doesn't require a parameter. I should have removed the query parameter
in the previous post.
body onload="javascript:page_load();"

Then that is pointless. No parameter means static code:

<script type="text/javascript"
src="http://bikebr.blogspot.com/feeds/posts"></script>

And `javascript:' is a URI scheme that does not belong into event handler
attributes where it only serves as a label, if that.
Do you have any suggestions as to how I can prevent the page from
reloading, or from preventing the destruction of the global variable?

If you posted the *calling* code, I might have some.

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
Then that is pointless. No parameter means static code:

Actually, it is not static, because in that src url, a callback method
is given, and the JSON feed is passed to that method.

<script type="text/javascript" src="http://bikebrblogspot.com/feeds/
posts/default?alt=json-in-script&callback=fillArrays";></script>

Thanks for the feedback. I will take a look at the links you provided.
Also, i'll upload my code on a server so you can review it.
 
T

Thomas 'PointedEars' Lahn

carlos said:
lwhitb1 wrote:
[...]
I call the page_load function in the body onload tag like below: It
doesn't require a parameter. I should have removed the query parameter
in the previous post.
body onload="javascript:page_load();"
[...]

Again, please quote properly. There will be no further requests.

[Fixed quotation levels]
Actually, it is not static, because in that src url, a callback method
is given, and the JSON feed is passed to that method.

<script type="text/javascript" src="http://bikebrblogspot.com/feeds/
posts/default?alt=json-in-script&callback=fillArrays";></script>

That is static *HTML code*, yes? And invalid, must be:

<script type="text/javascript"
src="http://bikebrblogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=fillArrays"></script>

See http://validator.w3.org/
Thanks for the feedback. I will take a look at the links you provided.
Also, i'll upload my code on a server so you can review it.

ACK.


PointedEars
 
L

lwhitb1

carlos said:
lwhitb1 wrote:
[...]
I call the page_load function in the body onload tag like below: It
doesn't require a parameter. I should have removed the query parameter
in the previous post.
body onload="javascript:page_load();"
[...]

Again, please quote properly.  There will be no further requests.

[Fixed quotation levels]
Actually, it is not static, because in that src url, a callback method
is given, and the JSON feed is passed to that method.
<script type="text/javascript" src="http://bikebrblogspot.com/feeds/
posts/default?alt=json-in-script&callback=fillArrays";></script>

That is static *HTML code*, yes?  And invalid, must be:

  <script type="text/javascript"
src="http://bikebrblogspot.com/feeds/posts/default?alt=json-in-script&...."></script>

Seehttp://validator.w3.org/
Thanks for the feedback. I will take a look at the links you provided.
Also, i'll upload my code on a server so you can review it.

ACK.

PointedEars
--
    realism:    HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness:    XHTML 1.1 as application/xhtml+xml
                                                    -- Bjoern Hoehrmann

What makes that code static? Do tell. Are my quotes ok for you now?
 
C

carlos

carlos said:
lwhitb1 wrote:
[...]
I call the page_load function in the body onload tag like below: It
doesn't require a parameter. I should have removed the query parameter
in the previous post.
body onload="javascript:page_load();"
[...]

Again, please quote properly.  There will be no further requests.

[Fixed quotation levels]
Actually, it is not static, because in that src url, a callback method
is given, and the JSON feed is passed to that method.
<script type="text/javascript" src="http://bikebrblogspot.com/feeds/
posts/default?alt=json-in-script&callback=fillArrays";></script>

That is static *HTML code*, yes?  And invalid, must be:

  <script type="text/javascript"
src="http://bikebrblogspot.com/feeds/posts/default?alt=json-in-script&...."></script>

Seehttp://validator.w3.org/
Thanks for the feedback. I will take a look at the links you provided.
Also, i'll upload my code on a server so you can review it.

ACK.

PointedEars
--
    realism:    HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness:    XHTML 1.1 as application/xhtml+xml
                                                    -- Bjoern Hoehrmann

Ok.. It is rather obvious that your trying to convey that I'm not
quoting properly, and that I have invalid javascript. Do you believe
that the page is not refreshing as a result of the invalid javascript?
 
P

pr

carlos said:
Ok.. It is rather obvious that your trying to convey that I'm not
quoting properly, and that I have invalid javascript. Do you believe
that the page is not refreshing as a result of the invalid javascript?

You are not quoting the minimum that makes sense of your post without
the need to look back over previous posts. The fact that you appear to
be two different people with a propensity for posting in tandem isn't
winning you any marks either.

Looking at the URLs you provided earlier, it looks like your trouble is
simply that you are following the link

<a href="" onclick="showNext();">Next Item</a>

instead of cancelling it in the showNext() function. A more practical
approach is

<a href="server_equivalent.php"
onclick="return showNext();">Next Item</a>

and

function showNext() {
...

return false;
}

So the link isn't followed where JavaScript is available but is followed
(to a sensible outcome) in other cases.
 
C

carlos

You are not quoting the minimum that makes sense of your post without
the need to look back over previous posts. The fact that you appear to
be two different people with a propensity for posting in tandem isn't
winning you any marks either.

Looking at the URLs you provided earlier, it looks like your trouble is
simply that you are following the link

   <a href="" onclick="showNext();">Next Item</a>

instead of cancelling it in the showNext() function. A more practical
approach is

   <a href="server_equivalent.php"
       onclick="return showNext();">Next Item</a>

and

   function showNext() {
     ...

     return false;
   }

So the link isn't followed where JavaScript is available but is followed
(to a sensible outcome) in other cases.

I appreciate all the help. My apologies for the quotes. I'll be sure
to keep that in mind from now on.

Thanks
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,990
Messages
2,570,211
Members
46,796
Latest member
SteveBreed

Latest Threads

Top