Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is a bit of a long shot, as I am not working on your code, and I normally develop by tweaking the code (and testing it) step by step. So this may need a bit more work on your end to get it to behave properly...</p> <pre><code>// BUGGY INITIAL CODE REMOVED </code></pre> <p><strong>Appendum</strong></p> <p>This solution uses <a href="http://jquery.com/" rel="nofollow">jQuery</a>'s <a href="http://api.jquery.com/load" rel="nofollow"><code>$.load()</code> function</a> - See <a href="http://api.jquery.com/load" rel="nofollow">http://api.jquery.com/load</a>. You will need to include jQuery in the <code>&lt;head&gt;</code> section of the page the above code will be within, using the following:</p> <pre><code>&lt;head&gt; &lt;!-- Whatever other bits are already here //--&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; </code></pre> <p><strong>Appendum #2</strong></p> <p>The following is a self-contained PHP Script which demonstrates this functionality. Has been tested and works. Simply remove the lines marked "TEST DATA ONLY" and remove the <code>#</code>s from the beginnings of lines marked "PROD DATA" and it should be halfway to a complete solution for you:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Tester&lt;/title&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;style&gt; a.inactive { color:#AAA; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;?php # Page Configuration Details $dbHost = 'localhost'; $dbUser = 'root' ; $dbPass = 'password'; $dbBase = 'database'; $reviewsPerPage = 4; #$link = mysqli_connect( $dbHost , $dbUser , $dbPass , $dbBase ); // PROD DATA ONLY #if( mysqli_connect_errno() ) // PROD DATA ONLY # die( 'Error: Could not connect to database. Please try again later' ); // PROD DATA ONLY #$db = mysqli_select_db( $link , $dbBase ); // PROD DATA ONLY //check if the starting row variable was passed in the URL or not if( !isset( $_GET['feedback'] ) || !is_numeric( $_GET['feedback'] ) ){ //we give the value of the starting row to 0 because nothing was found in URL $feedback = 0; $prevPage = false; }else{ //otherwise we take the value from the URL $feedback = (int) $_GET['feedback']; $prevPage = max( $feedback-$reviewsPerPage , 0 ); } $nextPage = $reviewsPerPage+$feedback; #$query = "SELECT * FROM clients, orders // PROD DATA ONLY # WHERE clients.ID = orders.ID // PROD DATA ONLY # ORDER BY Date DESC // PROD DATA ONLY # LIMIT $feedback,$reviewsPerPage"; // PROD DATA ONLY #$result = mysqli_query( $link , $query ); // PROD DATA ONLY $result = array_fill( // TEST DATA ONLY $feedback , // TEST DATA ONLY $reviewsPerPage , // TEST DATA ONLY array( // TEST DATA ONLY 'Comments'=&gt;'The comments' , // TEST DATA ONLY 'Organisation'=&gt;'John Smith' // TEST DATA ONLY ) // TEST DATA ONLY ); // TEST DATA ONLY ?&gt; &lt;div class="sidebar"&gt; &lt;div class="clientwrapper"&gt; &lt;h2&gt;Client Feedback&lt;/h2&gt; &lt;div id="clientFeedback" class="box"&gt; &lt;div class="feedbackHolder"&gt; &lt;div id="clientFeedbackContent"&gt; &lt;?php #while( $row = mysqli_fetch_array( $result ) ){ // PROD DATA ONLY foreach( $result as $k =&gt; $row ){ // TEST DATA ONLY #echo ' &lt;p&gt;'.$row['Comments']. // PROD DATA ONLY # ' &lt;span class="name"&gt;By '.$row['Organisation'].'&lt;/span&gt;&lt;/p&gt;'; // PROD DATA ONLY echo ' &lt;p&gt;#'.$k.': '.$row['Comments']. // TEST DATA ONLY ' &lt;span class="name"&gt;By '.$row['Organisation'].'&lt;/span&gt;&lt;/p&gt;'; // TEST DATA ONLY } echo ' &lt;a class="nodecoration" href="'.$_SERVER['PHP_SELF'].'?feedback='.$nextPage.'" &gt;&lt;span class="next-button"&gt;More&lt;/span&gt;&lt;/a&gt;'."\n"; echo ' &lt;a class="nodecoration'.( $prevPage===false ? ' inactive' : '' ).'" href="'.$_SERVER['PHP_SELF'].'?feedback='.(int) $prevPage.'" &gt;&lt;span class="prev-button"&gt;Prev&lt;/span&gt;&lt;/a&gt;'."\n"; ?&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; var reviewsPerPage = &lt;?php echo $reviewsPerPage; ?&gt;; $(document).ready(function(){ // Bind our Custom Code to the "A" tags with class "nodecoration" within the "clientFeedback" div $( '#clientFeedback a.nodecoration' ).live( 'click' , function(e){ console.log( 'Running' ); e.preventDefault(); // Get the URL to Load theURL = $( this ).attr( 'href' ); // Use the jQuery $.load() function to replace the contents of this element // with another element gained through AJAX $( '#clientFeedback .feedbackHolder' ) .load( theURL+' #clientFeedbackContent' , function(){ e.preventDefault(); // Prevent the link from behaving like it normally would. }); }); }); &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="announcewrapper"&gt; &lt;h2&gt;Announcements&lt;/h2&gt; &lt;div class="box"&gt; &lt;p&gt;There are currently no announcements.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POhow to use ajax to update this page?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USLuke Stevenson
    1. USLuke Stevenson
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POhow to use ajax to update this page?
      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
    1. COwow thanks so much, but i have a number of questions. The script as far as i can see doesnt make use of the XMLHTTPRequest to update the div on the fly. Also when clicking on more the page does in fact refresh as it jumps to the top again (or am i mistaken). Lastly i am slightly confused with the javascript portion of the code as it is probably done in a manner that a very experienced person would, and i am only a beginner.
      singulars
      1. PO
      1. USDeep
    2. COThe XMLHTTPRequest (AJAX Request) is handled by jQuery's `$.load()` function. You will, of course, need to include jQuery in the `<script...</script>` tags at the top of any page you do this on. See http://jquery.com/ for details. (The lack of jQuery in your current page is probably the reason why the links are jumping to a new page.)
      singulars
      1. PO
      1. USLuke Stevenson
    3. COSee my Answer - Revised with more detail, references and an example which should give you a better idea of how it works. (Tested OK on XAMPP here.)
      singulars
      1. PO
      1. USLuke Stevenson
 

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