Collecting Row IDs in an Array using Jquery and then Querying those values for a new table

Question

I'm trying to set up a function using jquery/php where a user selects a checkbox in a row with a specific ID (the id matches the primary key of the row data in my database), stores each row ID into an array, and then upon clicking the "compare selected rows" button passes it to a new page where a table of results is displayed with only those selected rows.

each input looks like this

<input type='checkbox' id='$id' class='compareRow'></input>

I am pretty novice at jquery and was planning to use a variation of a previous script I had put together to display dynamic row data in a modal. I am not sure if this code is relevant at all but it also passes the row id to another php page in order to query the database. Mind you this has only been used for single queries in the past where this new function would need some sort of foreach statement at the query level in order to process the array of IDs, im sure.

Heres the script I've been trying to tweak

$(function(){
    $('.compareRow').click(function(){
      var ele_id = $(this).attr('id');

       $.ajax({
          type : 'post',
           url : 'query.php', //query 
          data :  'post_id='+ ele_id, // passing id via ajax

       success : function(r)
           {
          other code? 
                     });
           }
         });
    });
    });

I know that there is much more needed here but this is just what I have so far, any help would be greatly appreciated.

Update, so I've created the page and have the following:

in my compareSelected.php I have the following code:

if(isset($_POST['post_id'])){
    $compare_received = $_POST['post_id'];
}
print_r($compare_receive);

It returns undefined index.

I also modified the code to change to that page after like so:

$('.compareRowButton').click(function(){
          var ids = [];
          //loop to all checked checkboxes
          $('.compareRow:checked').each(function(){
          //store all id to ids
          ids.push($(this).attr('id'));
      });
       $.ajax({
          type : 'post',
           url : 'compareSelected.php', //query 
          data :  {post_id:ids}, // passing id via ajax

       success : function(r)
           {
          window.location = 'compareSelected.php';

           }
         });
    });

Not sure why it won't pick up the array values.

rjatkinson · Accepted Answer · 2015-04-01 06:46:47Z

1

If you're set on your current implementation, you could maintain a reference to the data returned by each ajax call in the rows array. Later, you could implement a button that fires a function to append the row data to your table. Of course, you may need to parse the data returned by the request prior to appending.

$(function(){
  var rows = [];
  $('.compareRow').click(function(){
    var ele_id = $(this).attr('id');
    $.ajax({
      type : 'post',
      url : 'query.php', //query 
      data :  'post_id='+ ele_id, // passing id via ajax

      success : function(data){
        rows.push(data);
      }
    });
  });
  $('.displayTable').click(function(){
    // append to table or divs
  });
});

I would suggest you avoid a page reload here. Or, if you must, make the Ajax request on the following page. You want to avoid tightly coupling your logic between different jQuery modules. Ajax should be utilized to load data asynchronously, without requiring a page reload.

answered Apr 1, 2015 at 6:46

rjatkinson

4984 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Habitat Over a year ago

I have decided to take your advice and use this script but was wondering what I would need to do to parse the data back into a displayable format?

roullie · Accepted Answer · 2015-04-01 06:03:32Z

0

On your code. your sending ajax request everytime you click the checkbox. better to make another button or something before sending ajax request.

$('SOME_ELEMENT').click(function(){
      var ids = [];
      //loop to all checked checkboxes
      $('.compareRow:checked').each(function(){
          //store all id to ids
          ids.push($(this).attr('id'));
      });
       $.ajax({
          type : 'post',
           url : 'query.php', //query 
          data :  {post_id:ids}, // passing id via ajax

       success : function(r)
           {
          other code? 
                     });
           }
         });
    });

answered Apr 1, 2015 at 6:03

roullie

2,82019 silver badges26 bronze badges

9 Comments

Habitat Over a year ago

Awesome, makes sense and makes me happy to know I was somewhat on track by reusing this particular script. Any idea on the PHP side of the next page (where the new table is generated) on how I could get PHP to recognize the 'ids' array and cycle through each value in one query? Or do I just make a loop and have it re-query for each value in the array?

roullie Over a year ago

on your query.php you can access those ids using $_POST['post_id']

roullie Over a year ago

what's inside query.php then?

Habitat Over a year ago

Apologies, hit the enter button too early. Code is above

roullie Over a year ago

i see. why not just submit the form normally?

|

Collectives™ on Stack Overflow

Collecting Row IDs in an Array using Jquery and then Querying those values for a new table

2 Answers 2

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related