Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>One method I've used for this before is to run a hash polling function. You can see it in action at this page:</p> <p><a href="http://www.webskethio.com/#services" rel="nofollow">http://www.webskethio.com/#services</a></p> <p>Here is the javascript for that page:</p> <p><a href="http://www.webskethio.com/ws.js" rel="nofollow">http://www.webskethio.com/ws.js</a></p> <p>Relevant code:</p> <pre><code>function pollHash() { //exit function if hash hasn't changed since last check if (window.location.hash==recentHash) { return; } //hash has changed, update recentHash for future checks recentHash = window.location.hash; //run AJAX to update page using page identfier from hash initializeFromUrl(recentHash.substr(1)); } $(document).ready(function(){ /* code removed for readability */ setInterval('pollHash()',100); // Important piece /* code removed for readability */ }); </code></pre> <p>and</p> <pre><code>//AJAX function to update page if hash changes function initializeFromUrl(fromLink) { /* code removed for readability */ //take hash from function call or from the URL if not input = fromLink || window.location.hash ; //remove # from hash output = input.replace("#",""); //get the URL of the AJAX content for new page pageId = output; var url = $(this).attr('href'), image = new Image(); image.src = url; var clickedLink = $(this).attr('id'); location.hash = clickedLink; image.onload = function () { $('#content').empty().append(image); }; image.onerror = function () { $('#content').empty().html('That image is not available.'); } $('#content').empty().html('Loading...'); } </code></pre> <p>[<strong>EDIT :</strong>] Here is the full code for your page that should work, provided you can create a page that just outputs the image's location from the database. </p> <pre><code>var recentHash = ""; var image_url =""; $(document).ready(function() { $('a.photo').click(function (event) { var clickedLink = $(this).attr('id'); location.hash = clickedLink; event.preventDefault(); }); setInterval('pollHash()',100); }); function pollHash() { //exit function if hash hasn't changed since last check if (window.location.hash==recentHash) { return; } //hash has changed, update recentHash for future checks recentHash = window.location.hash; //run AJAX to update page using page identfier from hash initializeFromUrl(recentHash.substr(1)); } //AJAX function to update page if hash changes function initializeFromUrl(fromLink) { /* code removed for readability */ //take hash from function call or from the URL if not input = fromLink || window.location.hash ; //remove # from hash output = input.replace("#",""); //get the URL of the AJAX content for new page pageId = output; if(pageId != ""){ var temp_url = 'http://whitecu.be/user/mountain/'+pageId+'.html'; $.get(temp_url, function(data) { image_url = data; image = new Image(); image.src = image_url; image.onload = function () { $('#content').empty().append(image); }; image.onerror = function () { $('#content').empty().html('That image is not available.'); } $('#content').empty().html('Loading...'); }); }else{ window.location = "http://whitecu.be/user/mountain"; } } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POload content via hashchange + jquery based on file name not in hash
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USBumbleShrimp
    1. USBumbleShrimp
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POload content via hashchange + jquery based on file name not in hash
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COthanks so much for the help! i'm still a little confused though. i undertand the pollhash function and that its being run ever 100 milliseconds to look for a new hash. but what is this `pageId = output;`, what is `output`
      singulars
      1. PO
      1. USweather
    2. COI just posted code directly from my scripts, with a bunch of things removed. You can replace $("hiddenContent).fadeout.... and onward with your current code to load the image into the div. I've gone ahead and done that for you in my answer, but it will likely need some tweaking on your part, I hope this helps you see how to use this though.
      singulars
      1. PO
      1. USBumbleShrimp
    3. CO@user1061301 if you do it this way, you can actually remove that stuff from the .click() and just make that change the hash, the polling function will take care of the rest when it sees the hash changed. (this happens so fast the user doesnt notice a delay)
      singulars
      1. PO
      1. USBumbleShrimp
 

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