StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Complete re-edit of the answer.</strong> As JQuery library is already present in your page this whole bit is useless:</p> <pre><code>/* Function to get Requested Verse */ function showVerse(str) { if (str=="") { document.getElementById("versePlace").innerHTML=""; ... etc etc. xmlhttp.open("GET","getverse.php?q="+str,true); xmlhttp.send(); } </code></pre> <p>Just replace it with</p> <pre><code>function showVerse(str) { $("#versePlace").html(""); $('#versePlace').load('getverse.php?q='+str, function() { scaleQuote(); }); } </code></pre> <p>We are therefore moving <code>scaleQuote()</code> in a callback function.</p> <ul> <li><p>Reason for this: the <code>scaleQuote()</code> function is now called in the original HTML page, your first problem is that if you output a script in the AJAX result it won't be executed!</p></li> <li><p>The second main concern is to call the scaleQuote() function ONLY AFTER the AJAX request is complete. "A" in AJAX means "asynchronous", it means roughly that the caller continues its execution regardless of whether the request is completed or not.</p></li> </ul> <p>So we must make sure to call <code>scaleQuote()</code> after the AJAX request-response has completed.</p> <p>JQuery's <code>.load()</code> function calls an AJAX page and puts the result in the element in parentheses (<code>$("#versePlace")</code>, where # stands for "id"). You pass your data via GET method with an object <code>{q: str}</code> and then you define a <em>callback function</em> that is <em>guaranteed</em> to run only after the request-response thing of Ajax is completed. </p> <p>Other functions can be reduced A LOT with JQuery:</p> <pre><code>/* Function to get Next Verse */ function MoveNext() { var str = parseInt($("#txtCurrent").val()) + 1; if (str!="") { $("#versePlace").html(""); $('#versePlace').load('move.php?q='+str, function() { scaleQuote(); }); } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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