Databases
StackOverflow2013
Postsdbo
POSorting a table into mysql using Ajax
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSorting a table into mysql using Ajax
    primarykey
    data
    text
    <p>I've been developing a website for 4 months already and I felt the need of adding a drag and drop table that uses ajax to record the sequence in the mysql db! I have literally gone throughout the whole web and couldn't find a tutorial that fits so I decided to join them(tutorials) all.</p> <p>This is what I came up with:</p> <p>HTML:</p> <pre><code>&lt;table cellpadding="0" cellspacing="0" id="tableceleb"&gt; &lt;tr&gt; &lt;td style="width: 200px; color: #72A836; font-weight: bold; padding-left: auto; padding-right: auto;"&gt;Momentos &lt;a href="#" rel="group" id="opener"&gt;&lt;img src="images/add.png" title="Inserir Novo Momento!" id="add_momento" /&gt;&lt;/a&gt;&lt;/td&gt; &lt;td id="nome_cantico"&gt;Nome do Cântico&lt;/td&gt; &lt;td width="40px"&gt;&lt;/td&gt; &lt;td width="40px"&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td style="border-right: 0px;"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tbody&gt; // Start of the "draggable" table rows &lt;?php if (mysql_num_rows($query_escolhas) &gt; 0) { while ($row = mysql_fetch_array($query_escolhas)) { $momento = $row['nome']; echo '&lt;tr id="recordsArray_'.$row['id_momento'].'"&gt;'; echo '&lt;td style="width: 200px; font-weight: bold;"&gt;'.$momento.' &lt;a href="vercelebracao.php?id='.$id_celebracao.'&amp;remover_mom='.$row['id_momento'].'"&gt;&lt;img src="images/fechar.png" height="16" width="16" title="Remover momento!" /&gt;&lt;/a&gt; &lt;/td&gt;'; echo '&lt;td id="nome_cantico_black"&gt;'.$row['nome_cantico'].'&lt;/td&gt;'; echo '&lt;td&gt;&lt;img src="images/ppt1.png" height="32" width="32" title="Mostrar texto para colar para o ppt."/&gt;&lt;/td&gt;'; if ($row['pdf'] === 'N') { echo '&lt;td width="32px"&gt;&lt;/td&gt;'; } else{ echo '&lt;td&gt;&lt;img src="images/pdf.png" height="32" width="32" title="Mostrar pdf."/&gt;&lt;/td&gt;'; } echo '&lt;td&gt;&lt;a href="#" class="addcantico_momemnto_bot" title="Adicionar Cântico!"&gt;Adicionar&lt;/a&gt;&lt;/td&gt;'; echo '&lt;td style="border-right: 0px;"&gt;&lt;a href="#" class="addcantico_momemnto_botgrey" title="Remover Cântico!"&gt;Remover&lt;/a&gt;&lt;/td&gt;'; echo '&lt;/tr&gt;'; } } ?&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>Javascript:</p> <pre><code>$(document).ready(function(){ $(function() { $("#tableceleb tbody").sortable({ opacity: 0.9, cursor: 'move', axis: 'y', update: function() { var order = $(this).sortable("serialize") + '&amp;action=updateRecordsListings&amp;celeb=&lt;?php echo $id_celebracao ?&gt;'; $.post("updateDB.php", order); } }); }); }); </code></pre> <p>Notes: $id_celebracao is one of the rows that we use to identify which table_id it corresponds.</p> <p>Then we have updateDB.php that corresponds to the file that treats the ajax part:</p> <pre><code>&lt;?php require("host.php"); $action = mysql_real_escape_string($_POST['action']); $updateRecordsArray = $_POST['recordsArray']; $id_celebracao = $_POST['celeb']; if ($action === "updateRecordsListings"){ $listingCounter = 1; foreach ($updateRecordsArray as $order=&gt;$recordsArray) { $query = "UPDATE escolhas SET ordem =$listingCounter WHERE id_momento = $recordsArray AND id_celebracao=$id_celebracao"; mysql_query($query) or die('Error, insert query failed'); $listingCounter = $listingCounter + 1; } </code></pre> <p>} ?></p> <p>And finally we have the db table 'escolhas' presented and explained in the following scheme:</p> <p><img src="https://i.stack.imgur.com/zX82F.png" alt="enter image description here"></p> <p>Conclusion: It doesn't work. I really need your help in these because it is a fundamental part of the web app I'm developing!</p> <p>Hope the long post doesn't bother you!</p> <p>Also I'm not newbie in PHP and I know that mysql functions will be deprecated in the near future but it is not relevant to the project. Also, this is my first time working with Jquery and ajax!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USlangel
    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. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COHow are you accounting for multiple users to be using the site simultaneously, potentially overwriting one another's settings. Does it make more sense to use a cookie instead of storing it in your database?
      singulars
      1. POSorting a table into mysql using Ajax
      1. USoomlaut
    2. COthis is a small site for friends, that possibility is none.
      singulars
      1. POSorting a table into mysql using Ajax
      1. USlangel
    3. COAll the more reason to uncomplicate things and use the simplest technology for the task. I'd recommend [jQuery Cookie](https://github.com/carhartl/jquery-cookie)
      singulars
      1. POSorting a table into mysql using Ajax
      1. USoomlaut
 

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