Databases
StackOverflow2013
Postsdbo
POHow do i make a Javascript array global?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do i make a Javascript array global?
    primarykey
    data
    text
    <p>Forgive me I need a little help, I don't have a coders brain, actually i'm impressed I got this far but now I need a little help.</p> <p>I'm trying to build a player to load html files into a div from an xml file and then be able to navigate through the pages with previous and next buttons. So far I have managed to load the xml, convert it to an array and load the first page but when I click on the previous and next buttons I get "pages is undefined".</p> <p>Here is the code:</p> <pre><code>$(document).ready(function(){ var i = 0; $.ajax({ type: "GET", url: "studyguide/new_course.xml", dataType: "xml", success: function(xml) { pages = parseXml(xml) doStuff(pages); loadFirstPage(pages); } // END success }); //END ajax function parseXml(xml) { var pages = []; $(xml).find("page").each(function() { pages.push({ title: $(this).find("title").text(), url: $(this).find("url").text() }); // END .push }); // END .each return pages; } // END parseXML function doStuff(pages) { //Do some javascript stuff with the response alert(pages[0].title); alert(pages[0].url); } // END doStuff function loadFirstPage(pages){ //alert(pages[i].url); $('#displayResults').html('&lt;img src="../images/495.gif" /&gt;'); $( "#displayResults" ).load(pages[i].url, function() { }) //END .load }; //END loadFirstPage function loadPage(pages){ //alert(pages[i].url); $('#displayResults').html('&lt;img src="../images/495.gif" /&gt;'); $( "#displayResults" ).load(pages[i].url, function() { }) //END .load };// END loadPage $('#prev').bind('click', function(pages) { i--; //alert(i); loadPage(); }) //END click $('#next').bind('click', function(pages) { i++; //alert(i); loadPage(); }) // END click }); // END ready </code></pre> <p>And the xml:</p> <pre><code>&lt;?xml version="1.0" encoding="iso-8859-1"?&gt; &lt;course&gt; &lt;section name = "Section One"&gt; &lt;page&gt; &lt;title&gt;Page 1&lt;/title&gt; &lt;url&gt;studyguide/page1.html&lt;/url&gt; &lt;instructions&gt;&lt;/instructions&gt; &lt;/page&gt; &lt;page&gt; &lt;title&gt;Page 2&lt;/title&gt; &lt;url&gt;studyguide/page2.html&lt;/url&gt; &lt;instructions&gt;&lt;/instructions&gt; &lt;/page&gt; &lt;page&gt; &lt;title&gt;Page 3&lt;/title&gt; &lt;url&gt;studyguide/page3.html&lt;/url&gt; &lt;instructions&gt;&lt;/instructions&gt; &lt;/page&gt; &lt;/section&gt; &lt;section name = "Section Two"&gt; &lt;page&gt; &lt;title&gt;Page 1&lt;/title&gt; &lt;url&gt;studyguide/page4.html&lt;/url&gt; &lt;instructions&gt;&lt;/instructions&gt; &lt;/page&gt; &lt;page&gt; &lt;title&gt;Page 2&lt;/title&gt; &lt;url&gt;studyguide/page5.html&lt;/url&gt; &lt;instructions&gt;&lt;/instructions&gt; &lt;/page&gt; &lt;/section&gt; &lt;/course&gt; </code></pre> <p>So I have 2 Questions, firstly how do I make the array global so it can be used by the loadPage function. And second, is there a better way of doing this in the first place. The xml could contain 5 pages or 100 pages so I want to keep it dynamic.</p> <p>Thanks</p> <p>Thanks for your help guys. I made some changes and now I get "pages[I] is undefined. Sorry i'm not a coder by nature so you have to go slowly with me.</p> <pre><code>$(document).ready(function(){ var i = 0; var pages = []; $.ajax({ type: "GET", url: "studyguide/new_course.xml", dataType: "xml", success: function(xml) { pages = parseXml(xml) doStuff(pages); loadFirstPage(pages); } // END success }); //END ajax function parseXml(xml) { //var pages = []; $(xml).find("page").each(function() { pages.push({ title: $(this).find("title").text(), url: $(this).find("url").text() }); // END .push }); // END .each return pages; } // END parseXML function doStuff(pages) { //Do some javascript stuff with the response alert(pages[0].title); alert(pages[0].url); } // END doStuff function loadFirstPage(pages){ //alert(pages[i].url); $('#displayResults').html('&lt;img src="../images/495.gif" /&gt;'); $( "#displayResults" ).load(pages[i].url, function() { }) //END .load }; //END loadFirstPage function loadPage(pages){ //alert(pages[i].url); $('#displayResults').html('&lt;img src="../images/495.gif" /&gt;'); $( "#displayResults" ).load(pages[i].url, function() { }) //END .load };// END loadPage $('#prev').bind('click', function(pages) { i--; //alert(i); loadPage(pages); }) //END click $('#next').bind('click', function(pages) { i++; alert(i); loadPage(pages); }) // END click }); // END ready </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser2961753
    1. USuser2961753
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow do i make a Javascript array global?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COUse `window.varname = ...`.
      singulars
      1. POHow do i make a Javascript array global?
      1. USclover
    2. COjust declare the array where you declare `i`: `var i = 0, pages=[];`. Don't forget to remove it from the parseXML function
      singulars
      1. POHow do i make a Javascript array global?
      1. USkoala_dev
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload