PHP Table with modal link

[ribrahim]

Dear All,

I have a dynamic javascrip table for sort and filtering a data which contains 4 rows: Fullname, Companyname, address and email. Everything is working fine with loading the data from mysql database. I have added two actions to the table (view user and delete user). the view user button is working but I need the delete user button to open a modal and confirm the delete of the user selected. I have create the modal and is working but can't get the UserID value. I need your help please. Thank you.
Please find below the code:

<?php

while ($row = mysqli_fetch_assoc($results)) {

    echo "<tr>";
    echo "<td>" . $row['Fullname'] . "</td>";
    echo "<td>" . $row['Companyname'] . "</td>";
    echo "<td>" . $row['address'] . "</td>";
    echo "<td>" . $row['email'] . "</td>";

echo '<td><a href="index.php?action=viewuser&userID=' . $row['userID'] . '"><i class="fa fa-edit text-info" data-toggle="tooltip" data-placement="left" title="View User"></i></a>

<a href="#deleteuser" data-toggle="modal"><i class="fa fa-trash-o text-danger" data-toggle="tooltip" data-placement="left" title="Delete"></i></a> 
    echo "</tr>";
}
}
echo "</table>";
?>



<!-- Modal_Open -->
<div class="modal fade" id="deleteuser<?php echo $row['userID']; ?>" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <form action="" method="post">
                                        <div class="modal-body">
                                            <p class="lead"><?php echo $deleteUserConf.' '.clean($row['userName']); ?>?</p>
                                        </div>
                                        <div class="modal-footer">
                                            <input name="userID" type="hidden" value="<?php echo $row['userID']; ?>" />
                                            <button type="input" name="submit" value="deleteuser" class="btn btn-success btn-icon"><i class="fa fa-check-square-o"></i> <?php echo $yesBtn; ?></button>
                                            <button type="button" class="btn btn-default btn-icon" data-dismiss="modal"><i class="fa fa-times-circle-o"></i> <?php echo $cancelBtn; ?></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div> 

[diafol]

Add a class to your delete button (link), e.g.

class="delete-button"

But as you are not referencing your delete buttons to a row id in any way, you need to do that somehow. One way would be to add a data-id attribute to the button/link:

data-id="<?=row['userID']?>"

Also add and id to the modal userID field. Adding a default userID as a value to the modal makes no sense.

<input name="userID" id="userID" type="hidden" value="" />

Also not sure why you're doing a

deleteuser<?php echo $row['userID']; ?>

I have the sinking feeling that you've added a modal for every record. If this is NOT the case, then I can't understand the need to pass php values to the modal div block.

Add a handler - assuming using jQuery aas you're using Bootstrap:

$('.delete-button').click(function()
{
    //your inline data-toggle should open the modal
    //so no need to replicate that code here

    //this passes the id from the delete button to the hidden field:
    $('#userID').val($(this).data('id'));

});

But, your modal form has no action.

 <form action="" method="post">

You should never send a form to itself (own page) if you can avoid it. All forms data should be sent to a "handler" of some description and then depending on the processing, the handler redirects either to the same page or to another, with or without an error/success message.

At least you used POST instead of GET.

PS. Why using a link (<a>) for the delete buttons in your table instead of an action button (<button>) ?

[ribrahim]

Hello diafol,

Thank you and highly appreciated your response. When I click the view buttom, the user profile open and work fine. I'm using the follwing code to do this:

echo '<td><a href="index.php?action=viewuser&userID=' . $row['userID'] . '"><i class="fa fa-edit text-info" data-toggle="tooltip" data-placement="left" title="View User"></i></a>

When I try to use the same procedure for delete a user using modal i got error becuase the UserID in this case is not defined:

   <a data-toggle="modal" href="#deleteuser<?php echo $row['userID']; ?>"><i class="fa fa-trash-o text-danger" data-toggle="tooltip" data-placement="left" title="Delete"></i></a> 
    echo "</tr>";

The error message:
Parse error: syntax error, unexpected 'userID' (T_STRING), expecting ',' or ';'

So the main problem with using the table fields.

Best regards.

[diafol]

Forgive me for saying so, but this HTML, PHP mish-mash is a bit of a car crash. Usually, try to separate HTML and PHP as much as possible.
Generally we try to hide away as much code as possible in include files or at least place the functional stuff above the DTD. Markup should only contain minimal PHP, such as 'echo', the odd 'loop' and 'conditional'.

Your problem is here:

echo '<td><a href="index.php?action=viewuser&userID=' . $row['userID'] . '"><i class="fa fa-edit text-info" data-toggle="tooltip" data-placement="left" title="View User"></i></a>
<a href="#deleteuser" data-toggle="modal"><i class="fa fa-trash-o text-danger" data-toggle="tooltip" data-placement="left" title="Delete"></i></a> 
    echo "</tr>";

You have echoed inside an echo:

echo '<td><a href="index.php?action=viewuser&userID=' . $row['userID'] . '"><i class="fa fa-edit text-info" data-toggle="tooltip" data-placement="left" title="View User"></i></a>
<a href="#deleteuser" data-toggle="modal"><i class="fa fa-trash-o text-danger" data-toggle="tooltip" data-placement="left" title="Delete"></i></a>'; 
echo "</tr>";

Should fix it.

However, do consider changing all this echoed markup - it will be extremely difficult to modify. Maintenance nightmare.

[ribrahim]

Hello diafol,
Your solution does not work. I explain that my code working fine. All what i need is how to send the userId to modal to confirm the deletion. I try this, but got error on using <?php echo $row['userID']

<a a data-toggle="modal" href="#deleteuser<?php echo $row['userID']; ?>"><i class="fa fa-history text-success" data-toggle="tooltip" data-placement="left" title="Delete"></i></a>

I think because I'm using <?php within the php.

Now when using

<a data-toggle="modal" href="#deleteuser'.$row['userID'].' ">i class="fa fa-history text-success" data-toggle="tooltip" data-placement="left" title="Delete"></i></a>

I can get the userID but can't open the modal.

Any solution.

Thanks.

[diafol]

Your solution does not work.

Heh heh.

If you're telling me that your original is valid code...

echo '<td><a href="index.php?action=viewuser&userID=' . $row['userID'] . '"><i class="fa fa-edit text-info" data-toggle="tooltip" data-placement="left" title="View User"></i></a>
<a href="#deleteuser" data-toggle="modal"><i class="fa fa-trash-o text-danger" data-toggle="tooltip" data-placement="left" title="Delete"></i></a> 
    echo "</tr>";

... one of us has spent too long in the sun.

Anyhow, I'm not suggesting that was your ONLY problem, but the one that was causing your last error message.
I know I'm gonna regret this... can you show your latest code snippet please.