Databases
StackOverflow2013
Postsdbo
POJQuery: How to select specific element of a class by data-, then use as target?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery: How to select specific element of a class by data-, then use as target?
    primarykey
    data
    text
    <p>I've modified code from this tutorial ( <a href="http://gazpo.com/2011/09/contenteditable/" rel="nofollow">http://gazpo.com/2011/09/contenteditable/</a> Demo: <a href="http://gazpo.com/downloads/tutorials/html5/contentEditable/" rel="nofollow">http://gazpo.com/downloads/tutorials/html5/contentEditable/</a> ) that will show more than one div of contenteditable div from a database, and through AJAX, save the changes of the modified .</p> <p>Here's what the PHP produces: <a href="http://jsfiddle.net/fmdx/78rWQ/" rel="nofollow">http://jsfiddle.net/fmdx/78rWQ/</a></p> <pre><code> &lt;div data-id="0" class="wrap"&gt;&lt;!-- Content Wrapper --&gt; &lt;div data-id="0" class="status"&gt;&lt;/div&gt; &lt;div data-id="0" class="content"&gt; &lt;p data-id="0" style="padding-left:7px;"&gt; &lt;span data-id="0" style="padding-right:10px;"&gt;a)&lt;/span&gt; &lt;span data-id="0" data-primary="1" data-comcounted="0" data-showcom="1" data-fileno="CTTEST" data-part="1" class="editable" contenteditable="true"&gt;Compliance with the terms and conditions of the Clearwater Ordinance as currently set forth by the City of Sheboygan.&lt;/span&gt;&lt;/p&gt; &lt;/div&gt; &lt;button data-id="0" class="save"&gt;Save&lt;/button&gt; &lt;/div&gt; </code></pre> <p>Multiplied by how many rows within that table.</p> <p>Here's the Jquery/Ajax: $(document).ready(function() {</p> <pre><code> $(".save").click(function (e) { //how do I narrow down these variables to that specific grouping being selected? var text = $('.editable').html(); var primary_key = $('.editable').attr('data-primary'); var showcom = $('.editable').attr('data-showcom'); var comcounted = $('.editable').attr('data-comcounted'); var part = $('.editable').attr('data-part'); var fileno = $('.editable').attr('data-fileno'); $.ajax({ url: 'save.php', type: 'POST', data: { text: text, primary_key: primary_key, showcom: showcom, comcounted: comcounted, part: part, fileno: fileno }, success:function (data) { if (data == '1') { $(".status") .addClass("success") .html("Data saved successfully") .fadeIn('fast') .delay(3000) .fadeOut('slow'); } else { $(".status") .addClass("error") .html("An error occured, the data could not be saved") .fadeIn('fast') .delay(3000) .fadeOut('slow'); } } }); }); $(".editable").click(function (e) { $(".save").show(); e.stopPropagation(); }); $(document).click(function() { $(".save").hide(); }); }); </code></pre> <p>This, multiplied by however many rows that are returned from the database.</p> <p>When one div is selected, every SAVE button appears, and when the data is saved, it shows the status bar for every div.</p> <p>What I am trying to do is get the data-id attribute of the span that was selected so that it it is unique for the wrapper, status, contentedibable section, and that save bar. In a way, it is serving as the ID for the whole wrapped segment.How would I change the jquery/AJAX so that when that when a contenteditable div is selected, only that specific div will be modified, have the save button pop up on it, and have that status bar show (instead of every one showing)?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USfmdx
    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. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CODid the below answer help you
      singulars
      1. POJQuery: How to select specific element of a class by data-, then use as target?
      1. USPSL
    2. COI'm putting the code in, but it's not showing the status bar on save (error or successful). Looking in the database, I'm also not seeing the changes so I'm going through the ajax to make sure I'm not trying to save this to a piece of lint. But it seems you've got me pointed on the right track, just trying to work the kinks out.
      singulars
      1. POJQuery: How to select specific element of a class by data-, then use as target?
      1. USfmdx
 

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