CODEWITHSUNDEEP
jqueryjeditable
The All Powerful
The All Powerful

Reputation: 104

jeditable multiple instances of select on page

So, as usual I am trying to work way outside of my comfort zone with JQuery; I have a table which displays job statuses ('Not Started', 'In Progress' and 'Complete') for the tasks which content creators on my club website are undertaking.

What I want is for users to be able to click on the current status, and be presented with a drop down box with all three options in it (like in PHPMYAdmin ENUM fields) and for the users to be able to select the new status, and have the value automatically submit itself.

That's all working fine, but the problem is I only seem to be able to get JEditable to send one static value (the content of the select) but I need it to send the content of the select AND an ID for the job so that the system knows which job to update and what to update it to...

I have the following code:

HTML

<table>
<tr><th>Page Title</th><th>Assigned To</th><th>Date Assigned</th><th>Job Status</th><th>Last Edited</th><th>Last Edited By</th></tr>
<tr><td><a href="/heroes-and-heroines-larp-world/nations/the-emerald-empire.html" target="_blank">The Emerald Empire</a></td><td> sebsmith</td><td>2014-07-16 00:00:00</td><td class="amber editable_select">In Progress</td><td>2014-07-19 11:05:46</td><td>sebsmith</td></tr>
<tr><td><a href="/heroes-and-heroines-live-roleplaying-links.php" target="_blank">Heroes and Heroines Live Action Roleplaying Club Links</a></td><td> sebsmith</td><td>2014-08-23 15:26:43</td><td class="red editable_select">Not Started</td><td>2014-08-23 15:55:56</td><td>sebsmith</td></tr>
<tr><td><a href="/heroes-and-heroines-live-roleplaying-links/larp-clubs/index.html" target="_blank">Heroes and Heroines Live Action Roleplaying Club - Links to other LARP Clubs and Systems</a></td><td> sebsmith</td><td>2014-08-23 15:35:56</td><td class="red editable_select">Not Started</td><td>2014-08-23 16:00:34</td><td>sebsmith</td></tr>
<tr><td><a href="/heroes-and-heroines-live-roleplaying-links/larp-suppliers/index.html" target="_blank">Heroes and Heroines Live Action Roleplaying Club - Links to suppliers of LARP equipment, costume and other essentials</a></td><td> sebsmith</td><td>2014-08-23 15:42:32</td><td class="red editable_select">Not Started</td><td>2014-08-23 16:01:04</td><td>sebsmith</td></tr>
<tr><td><a href="/heroes-and-heroines-live-roleplaying-links/larp-misc/index.html" target="_blank">Heroes and Heroines Live Action Roleplaying Club - Links to other Miscellaneous LARP Sites</a></td><td> sebsmith</td><td>2014-08-23 15:43:21</td><td class="red editable_select">Not Started</td><td>2014-08-23 16:01:22</td><td>sebsmith</td></tr>
<tr><td><a href="/heroes-and-heroines-live-roleplaying-links/larp-community/index.html" target="_blank">Heroes and Heroines Live Action Roleplaying Club - Links to LARP Communities</a></td><td> sebsmith</td><td>2014-08-23 15:44:23</td><td class="red editable_select">Not Started</td><td>2014-08-23 16:01:14</td><td>sebsmith</td></tr>
<tr><td><a href="/heroes-and-heroines-larp-world/nations/havdan.html" target="_blank">Havdan</a></td><td> sebsmith</td><td>2014-08-23 18:14:19</td><td class="red editable_select">Not Started</td><td>0000-00-00 00:00:00</td><td></td></tr>
<tr><td><a href="/heroes-and-heroines-larp-world/nations/enchantica.html" target="_blank">Enchantica</a></td><td> Fruitloop</td><td>2014-07-16 00:00:00</td><td class="amber editable_select">In Progress</td><td>2014-07-21 00:00:00</td><td>Fruitloop</td></tr>
<tr><td><a href="/heroes-and-heroines-larp-world/nations/the-fey-forest.html" target="_blank">The Fey Forest</a></td><td> Fruitloop</td><td>2014-08-23 18:06:11</td><td class="red editable_select">Not Started</td><td>0000-00-00 00:00:00</td><td></td></tr>
</table>

JS

<script src="/js/jeditable.mini.js"></script>
<script>$(function() {

  $(".editable_select").editable("http://www.heroesandheroines.org/index.php?task=AJAXRequest&type=listContentJobsChangeJobStatus", { 
    indicator : '<img src="/assets/icons-set/indicator.gif">',
    data   : "{'Not Started':'Not Started','In Progress':'In Progress','Complete':'Complete'}",
    type   : "select",
    submit : "OK",
    style  : "inherit",
  });
 });</script>

So, my question is: "How do I get JEditable to send an ID for each separate instance of the 'editable_select' td? Is there some way of sending an id through the class attribute? Or some clever way of doing it through the js?

I'm getting there slowly with JQuery, but there are so many things that are just beyond me... :(

Thanks!

Seb

Upvotes: 0

Views: 146

Answers (1)

Keith Grey
Keith Grey

Reputation: 141

you can just add an id to your td cell. Something like this:

<td id="job1status" class="amber editable_select">

Jeditable will automatically append the element id on to the post url. So, if you check your ajax post in the console (f12) , you should see it on the end like this: index.php?task=AJAXRequest&type=listContentJobsChangeJobStatus&id=job1status

Upvotes: 1

Related Questions