Databases
StackOverflow2013
Postsdbo
PODynamic Manipulation of Page content using jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamic Manipulation of Page content using jQuery
    text
    copied!<p>I am a newbie and trying to make a simple dynamic page. which has contents in MySQL database, being fetched by php and stored in arrays. I am trying to generate the page based on the contents of these arrays using jQuery. I have pasted the code below and comments explain the stuff. It is not working please suggest me how to proceed. Thanks in advance.</p> <pre><code> // execute query $result = mysql_query($query) or die ("Error in query: $query. ".mysql_error()); $row = mysql_fetch_row($result); $id[$i] = $row[0];$question[$i] = $row[1];$opt1[$i] = $row[2];$opt2[$i] = $row[3];$opt3[$i] = $row[4];$opt4[$i] = $row[5];$answer[$i] = $row[6]; } mysql_free_result($result); // close connection mysql_close($con); ?&gt; &lt;script type="text/javascript"&gt; //POPULATE THE JS ARRAY WITH DATA FROM SERVER var Q = []; var op1 = []; var op2 = []; var op3 = []; var op4 = []; var ans = []; &lt;?php $cnt = 1;?&gt; for(i=1;i&lt;=10;i++) { Q[i] = "&lt;?php echo $question[$cnt] ?&gt;"; op1[i] = "&lt;?php echo $opt1[$cnt] ?&gt;"; op2[i] = "&lt;?php echo $opt2[$cnt] ?&gt;"; op3[i] = "&lt;?php echo $opt3[$cnt] ?&gt;"; op4[i] = "&lt;?php echo $opt4[$cnt] ?&gt;"; ans[i] = "&lt;?php echo $answer[$cnt++] ?&gt;"; } //IT WORKS FINE UPTO HERE // TRYING TO DYNAMICALLY DISPLAY THE ARRAY CONTENTS ON THE WEB PAGE based upon clicks on the ids will match with the answer array is it the // correct method to go about ?? // $("document").ready(function() { for(var i=1;i&lt;=10;i++) { $("p").css("border", "3px solid red"); $("#question").append(document.createTextNode(Q[i])); $("#op1").append(document.createTextNode(op1[i])); $("#op2").append(document.createTextNode(op2[i])); $("#op3").append(document.createTextNode(op3[i])); $("#op4").append(document.createTextNode(op4[i])); } }); &lt;/script&gt; &lt;/head&gt; // FRAMEWORK OF The html content &lt;body&gt; &lt;p class="q"&gt;&lt;/p&gt; &lt;p class="op1"&gt;&lt;/p&gt; &lt;p class="op2"&gt;&lt;/p&gt; &lt;p class="op3"&gt;&lt;/p&gt; &lt;p class="op4"&gt;&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>// for outis, here is the code:</p> <pre><code> var i = 1; $("#q").html(Q[i]); $("#op1").html(op1[i]); $("#op2").html(op2[i]); $("#op3").html(op3[i]); $("#op4").html(op4[i]); for(i=2;i&lt;=10;i++){ $("#q").html(Q[i]); $("#op1").html(op1[i]); $("#op2").html(op2[i]); $("#op3").html(op3[i]); $("#op4").html(op4[i]); $('.set').clone(true).insertAfter('.set'); } </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