Add a dynamic numeric id when get all the element by a certain class (array) in jquery

Question

I want to select a certain element inside an array in jquery, getting the class which is something like . My purpose is to edit each row and then changing them dynamically with Ajax. The first step is to select all of each row with jquery onclick.

My code is the following:

<?php foreach ($database as $item): ?>
<tr class="row_<?php echo $item["id"]; ?>">
<th id="id_<?php echo $item["id"]; ?>"><?php echo $item["id"]; ?></th>
<th contentEditable="true" class="credit_type"><?php echo $item["credit_type"]; ?></th>
<th contentEditable="true" class="association_name"><?php echo $item["association_name"]; ?></th>
<th contentEditable="true" class="address"><?php echo $item["address"]; ?></th>

and so on which is producing the following html:

<tr class="row_1 odd">
                <th id="id_1">1</th>
                <th contenteditable="true" class="credit_type">0</th>
                <th contenteditable="true" class="association_name">ciao</th>
                <th contenteditable="true" class="address">123 cool street</th>
                <th contenteditable="true" class="city">Toronto</th>
                <th contenteditable="true" class="province">0</th>
                <th contenteditable="true" class="postal_code">l4n4m4</th>
                <th contenteditable="true" class="country">0</th>
                <th contenteditable="true" class="cycle_type">0</th>
                <th contenteditable="true" class="cycle_begin">2018</th>
                <th contenteditable="true" class="cycle_months">1</th>
                <th><button class="edit" id="edit_1">Edit</button></th>
                <th><button class="edit" id="delete_1">Delete</button></th>
            </tr>

With jquery, I want to select all the children element of the column with the class of row_1 and do it for each row (row_2, row_3 and so on).

My jquery is pretty basic:

    $(document).ready(function(){

    $( "button.edit" ).click(function() {
      var id = this.id;
      var value = $(".row_ th").text();
  }
  $.ajax({
    url: 'update.php',
    type: 'post',
    data: { all_my_value },
    success:function(response){
        console.log('Save successfully');               
    }
});

My question is that if there is any way to add my dynamic value id to the row when I get all the elements with a certain class.

I need to make an update call with ajax and send all the value with php after. — , May 09 '18 at 13:58
Ok, I'm really unclear on what you are asking for then. Are you saying you want to select all the ids from each of the rows? Or just the row that the button.edit is in? I don't see button edit in your markup to give a hint towards this. — Taplar, May 09 '18 at 13:59
Ok, so are you saying you want to select all the text for each column in that row? — Taplar, May 09 '18 at 14:07
Do you think that I could do everything in my server side code, calling the ajax function only to update my value through ajax? — , May 09 '18 at 14:08

Taplar · Accepted Answer · 2018-05-09T14:33:12.890

0

This logic puts a data-name on each of the columns that it should serialize. It starts at the button clicked, goes up to the parent row, and then finds all the elements that have the data field. It then reduces all their [data-name, innerText] pairs into the result object, and logs the data at the end for you to verify.

$('button.edit').on('click', function(e){
  var $button = $(e.target);
  var $namedColumns = $button.closest('tr').find('th[data-name]');
  var data = $namedColumns.get().reduce(function(result, column){
    result[$(column).data('name')] = column.innerText;
    
    return result;
  }, {});
  
  console.log(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="row_1 odd">
  <th id="id_1" data-name="id">1</th>
  <th contenteditable="true" class="credit_type" data-name="credit_type">0</th>
  <th contenteditable="true" class="association_name" data-name="association_name">ciao</th>
  <th contenteditable="true" class="address" data-name="address">123 cool street</th>
  <th contenteditable="true" class="city" data-name="city">Toronto</th>
  <th contenteditable="true" class="province" data-name="province">0</th>
  <th contenteditable="true" class="postal_code" data-name="postal_code">l4n4m4</th>
  <th contenteditable="true" class="country" data-name="country">0</th>
  <th contenteditable="true" class="cycle_type" data-name="cycle_type">0</th>
  <th contenteditable="true" class="cycle_begin" data-name="cycle_begin">2018</th>
  <th contenteditable="true" class="cycle_months" data-name="cycle_months">1</th>
  <th><button class="edit" id="edit_1">Edit</button></th>
  <th><button class="edit" id="delete_1">Delete</button></th>
</tr>
</table>

edited May 09 '18 at 14:33

answered May 09 '18 at 14:13

Taplar

24,788
4
22
35

It makes sense, is it possible then to create an array with this string? I'm using split, but I don't think it creates an array – May 09 '18 at 14:21
1

What exactly do you want the array to look like? – Taplar May 09 '18 at 14:22
allTheInputThs has to be split in a numeric way and I need to assign each value to a variable like first_value = allTheInputThs[0] – May 09 '18 at 14:24
1

Are you essentially wanting to serialize this row? Getting something like `{id:1, credit_type:0, association_name:ciao, ...}` ? – Taplar May 09 '18 at 14:26
for the ajax call and then I need to send the ajax call to the method in my class, kind of complicated for me but you know, I like to try stuff – May 09 '18 at 14:27
1

Updated the question to put all the data into an object. – Taplar May 09 '18 at 14:33
Wow, exactly what I was looking for – May 09 '18 at 14:38
Now, is there any way to sort them out and send them to an update request with jquery? If you have time could you have a look at this question: https://stackoverflow.com/questions/50256884/call-an-method-function-inside-a-class-in-object-oriented-php-with-ajax-and-up – May 09 '18 at 16:53
1

Keys in an object are not guarenteed to be in any specific order, so sorting them isn't really an issue. Especially since you can access them directly with the key. If you give this object to an ajax request, that is not performing json conversion, it will put the key value pairs in the query string in the url or body, depending on GET vs POST. In which case PHP can access them normally with $_GET['key'] or $_POST['key']. If you send it in as actual json, that involves something different and I would suggest you... – Taplar May 09 '18 at 16:56
1

...read https://stackoverflow.com/questions/7047870/issue-reading-http-request-body-from-a-json-post-in-php for more details on how to do that. – Taplar May 09 '18 at 16:56
Yeah, I notice the order.. but the my biggest problem is to call the function with ajax – May 09 '18 at 17:55
1

http://learn.jquery.com/ajax/jquery-ajax-methods/ Various reading on the subject. – Taplar May 09 '18 at 17:59
Yeah I got that part. My problem is that my system is kind of different, especially when it gets to the part of the actions and urls. I solved it, thank for your fantastic help. The only thing that I didn't get it is the way you code the order with reduce. Does it exist a function to avoit to sort the results? – May 09 '18 at 18:31
1

I'm not sure I understand your question. – Taplar May 09 '18 at 18:56
var data = namedColumns.get().reduce( function(result, column) { result[$(column).data('name')] = column.innerText; return result; },{}); Will create an array that it is sorted. I don't even quite understand how it works reduce. I looked in the documentation but your function is pretty clever.. I just want to understand what you did and why it sorted my value in an alphabetic order – May 09 '18 at 19:10
1

It doesn't create an array. It creates and object. With key value pairs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce `result[$(column).data('name')] = column.innerText;` is putting into the result object the string key `$(column).data('name')` and assigning it the string value of `column.innerText`. `[]` in this case does not denote an array. It is array notation for accessing an object in this case. `myObject.subThing` could also be written as `myObject['subThing']` – Taplar May 09 '18 at 19:11
and why in alphabetical order? – May 09 '18 at 19:17
I do not see anything in alphabetical order...? – Taplar May 09 '18 at 19:17
I console.log the object and I obtained the following key-pair values: address: "85 St George St" association_name : "designation" city : "Toponto" country : "0" credit_type : "0" cycle_begin : "1969-12-31" cycle_months : "1" cycle_type : "0" id : "1" postal_code : "M5S 2E5" province : "0" – May 09 '18 at 19:18
1

The first key for me when I run this in chrome is the "id" key, so it's not in order. Nothing about the logic is inherently performing an alphabetical sort. If sorting is happening on the display or some where else then that is browser specific. Edit: "id" is also the first key for me in firefox. Edit: and in IE – Taplar May 09 '18 at 19:20

score 0 · Answer 2 · answered May 09 '18 at 14:14

0

Get every element, and save the id to a data attribute: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

var id = 0;

$( ".yourclass" ).each(function( index ) {
  //start with id=1
  id++;
  $(this).attr('data-id', id);
});

Then you can select with the data attribute:

$(".yourclass[data-id='yourid']")

answered May 09 '18 at 14:14

Rence

2,900
2
23
40

My class is called row_1, row_2 – May 09 '18 at 14:26
Is the class even relevant? If you want all rows with both classes you could just use 'tr' – Rence May 09 '18 at 14:28

Add a dynamic numeric id when get all the element by a certain class (array) in jquery

2 Answers2