How to get id from mysql to modal?

Question

I am having a problem about getting id from mysql table to modal. I got a datatable that contain data from mysql table. i put a "UPDATE" button to edit data. UPDATE button opens modal in same page. The button code is ;

<a data-toggle='modal' class='btn btn-success btn-setting' href='#myModal1'>UPDATE</a>

It works perfectly and opens modal very well. But the problem starts from there. I need to target and post the id to modal content. To do this I have to do something like **href='something.php?id={id}'**

I have href='#myModal1'> so I couldn't do it.

What I have tried ?

I have tried **href='#myModal1?kid={$list["kid"]}'** When I mouse over the button I can see that it is getting the id but when I click the button the modal is not opening. Also I have tried to search google. I think lots of people are fixing this with javascript which I dont know :) Any help will be awesome. Thanks !

Answer 1

Create one class (any class name). For ex, i created ' UpdateButton ' in <a> tag. Create one ' data-OrderID ' (or any name). For ex, i created ' data-OrderID ' in <a> tag. Pass value of your ID in this attribute. Use in <script> tag below.

<a href='#myModal1' class='btn btn-success btn-setting UpdateButton' data-OrderID="<?echo $YourIdHere;?>"  data-toggle='modal'>
    UPDATE
</a>

Now, in <script> tag, i used 'UpdateButton' class to call modal. And, ' data-OrderID ' to pass value to something.php page

<script>
    $('.UpdateButton').click(function(){
        var Id=$(this).attr('data-OrderID');
        $.ajax({url:"something.php?Id="+Id,cache:false,success:function(result){
            $(".modal-content").html(result);
        }});
    });
</script>

something.php (modal)

<?
echo $Id = $_GET['Id'];
?>

It works for me. Hope for you too.

Check Here for more info.

Answer 2

Add a data attribute in html as bellow I used "data-exid"

<a data-toggle='modal' data-exid='[YOUR ID]' class='btn btn-success btn-setting' href='#myModal1'>UPDATE</a>

and try bellow code for model box start event

jQuery('#myModal1').on('show.bs.modal', function(event) {
var button = jQuery(event.relatedTarget) // Button that triggered the modal
var exId = button.data('exid') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or 0other methods instead.

/*Add this line in local*/
var modal = jQuery(this)
modal.find('#logId').val(-1)
modal.find('#logId').val(exId)});

Here "#logId" is an id of hidden box in a model