Databases
StackOverflow2013
Postsdbo
POWhat is the Best Method for Loading a URL Returned from a JSON List in JQuery / Javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat is the Best Method for Loading a URL Returned from a JSON List in JQuery / Javascript
    primarykey
    data
    text
    <p>I am trying to AJAX some content into the #BlogContainer div and cannot seem to get my click function working properly. It seems to be falling apart in the if statement, but I can't figure out why. I have tested with alert and the return from the JSON is coming through as it should. The initial load also works fine its just the iterating through the JSON return and returning the url to the load function that doesn't seem to be working. </p> <p>The effect that I want to achieve is to load page content (blog entries) into the #BlogContainer div using .load and the URLs from the JSON file which point to the content, iterating to the next with each click on the #Nexus div.</p> <p>My main question is what is the best method for loading dynamically through a JSON return? I had an each function which did the exact same thing as well (it seemed to return the correct result, but would not actually load the content). I decided to use the for loop instead since what I read indicated it was slightly more efficient, though I doubt it would have much impact in my case.</p> <p>I am completely new to JS / JQ and previously had everything functioning the way I wanted using JQueryTools, but I thought the best way to learn would be to do it myself (with a little help of course :) ).</p> <p>HTML </p> <pre><code>&lt;div id="BlogContainer"&gt;&lt;/div&gt; &lt;div id="NexusRef" alt="03151201.htm"&gt;'03151201.htm'&lt;/div&gt; </code></pre> <p>JSON</p> <pre><code>{ "0": "'03151201.htm'", "1": "'01191201.htm'", "2": "'00000103.htm'", "3": "'00000102.htm'", "4": "'00000101.htm'" }​ </code></pre> <p>Javascript</p> <pre><code>$(function() { $('#Navigation').load('navi.htm'); $('#BlogContainer').load('03151201.htm'); $('#TT1').load('ajtt1.htm'); $('#TT2').load('ajtt2.htm') }); $(function() { $('#Nexus').click(function() { $.getJSON("BlogRoll.json", function(data) { var i = 0; var n = ($('#NexusRef').html()); var length = data.length; for (i = 0; i &lt; length; i++) { if (data[i] == n) { $(function() { $('#BlogContainer').load(data[i + 1]); }); } else { alert(data[i + 1]); } } }); }); });​ </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USandrew.carpenter
    1. USandrew.carpenter
    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. This table or related slice is empty.
    1. COit would be better if you'd explain the effect you want. the code may explain itself, but won't explain what you want since it could be doing something entirely different (or sub-optimal).
      singulars
      1. POWhat is the Best Method for Loading a URL Returned from a JSON List in JQuery / Javascript
      1. USJoseph
    2. COThanks for the guidance, I've appended to the main post.
      singulars
      1. POWhat is the Best Method for Loading a URL Returned from a JSON List in JQuery / Javascript
      1. USandrew.carpenter
 

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