Question

I made this JS function that open 2 pages

 function edit(id){
    window.open('<?php echo site_url();?>store_out/store_out_print/'+id);
    window.open('<?php echo site_url();?>store_out/delivery_print/'+id);
    document.getElementById('print').target = '_blank';
}

I have that table that display all possible records that user can select one row and click on print image so two pages are opened:

 <?php
         for($i=0;$i<sizeof($storeout);$i++){ ?>
   <tr class="gradeZ" id="<?php echo $storeout[$i]->storeout_id;?>" onclick="edit(this.id); ">
                <td><?php printf("%06d",$i+1);?></td>
                <td><?php echo $storeout[$i]->storeout_id;?></td>
                <td><?php echo $storeout[$i]->storeout_modified_time;?></td>
                <td><?php echo $account[$i][0]->account_name;?></td>
                <td><?php echo $storeout[$i]->rof_id != 0 ? "R.O.F" : "S.O";?></td>


            </tr>
        <?php } ?>

I want when I select specific row and click on the print image, execute two functions to open two different pages (delivery/store_out).

Any Ideas guys?

Answer 1

I’m going to assume that the td is in a tr which is programmatically generated in a loop (i.e. you will have more than 1 tr, td, and img). I will also assume jQuery is available.

The first problem will be if you have more than 1 row that is created in a loop, you will have a bunch of things with the same id="print". This is not the good js.

You should append the store_out (or whatever the id is you are trying to get to the controller) to the id attribute. Something like id="print_<?php echo $thing->id;?>". This will let you get the id you want to pass to the edit function. I would also add a class="print" which will make the below easier. So, the whole row would look something like:

<td width="5%"><a id="print_<?php echo $thing->id; ?>" class="print" href="#" ><img src="<?php echo site_url();?>/images/print.png" border="0" title="Print" height="25" width="25"/> </a></td>

Which would output something like:

<td width="5%"><a id="print_1234" class="print" href="#" ><img src="http://example.com/images/print.png" border="0" title="Print" height="25" width="25"/> </a></td>

Second is you are not passing the id to the method so far as I can tell. Considering you heeded the above, you can pull the id from the id attribute.

$('.print').click(function(){
    var id = $(this).attr('id').split('_')[1];
    edit(id);
})