Retrieving PHP variables to Bootstrap Modal

Question

Okay, so i am developing a class project and I'm building a website with basic functionality. I'm new to php and javascript.

So here is the problem. I have created a database in phpMyAdmin called 'itemdb'. I am able to add items to it through html+php and also delete them. Now what i want to do is to edit the data in the database and that is where I can't find a fix for it.

This is what my idea is. 1. clicks on edit button. 2. Opens Bootstrap Modal. 3. Displays the item information. 4. Hits save changes. Database updated.

My problem is If I set the button/input type to "submit" surrounded with a form tag the modal will crash. However, the current code below does not have a form tag and the button is set as type"button" and when I click the button, it only displays one item's information even if I click another button(same data).

Here is my code.

for testing purpose, I have created a table displaying "hello" in the first row and a button in the second row, and when I click the button, it shall display the info in the modal.

 <div class = "row col-xs-10 col-sm-10 col-md-10 col-lg-10 ">
<?php
include 'connectDB.php';
$query = "SELECT * FROM `itemdb`;";
$result = mysqli_query($dbconnect, $query);
if(mysqli_num_rows($result) > 0)
{
    while($row = mysqli_fetch_assoc($result))
    {?>
    <table>
        <tr>
            <td>Hellow</td>
            <td>
                <?php
                echo "
                <button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#exampleModal\" 
                data-whatever=\"editDB[" .  $row['itemID'] . "]\" onclick=\"window.Socation.href = 'adminItems3.php?value=" .  $row['itemID'] . "'\";>Edit</button>
                ";?>
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                            </div>
                            <div class="modal-body">
                                <?php 
                                if(!empty($row['itemID'])){
                                $ID = $row['itemID'];
                                echo $ID;

                                $query1 = "SELECT * FROM `trademe`.`itemdb` WHERE `itemdb`.`itemID` = $ID;";
                                $result1 = mysqli_query($dbconnect, $query1);
                                if(mysqli_num_rows($result1) > 0){
                                $row1 = mysqli_fetch_assoc($result1);

                                echo "
                                <table class=\"table-striped\">
                                <tr>
                                <td class = \"imgBoxCol\">
                                <img class=\"imgBox img-rounded imgBox\"src=\"" . $row1['img_path'] . "\"></img>
                                </td>
                                <td>
                                <p >Ad Title: <input name=\"editadTitle\" value=\"" . $row1['adTitle'] . "\"/></p> 
                                <p>Item Name:<input name=\"edititemName\" value=\" " . $row1['itemName'] . "\"/> </p>
                                <p>Condition:<textarea name=\"editcond\" type=\"text\" >" . $row1['cond'] . "</textarea></p>
                                <p>Description:<textarea name=\"editdescription\"  type=\"text\" > " . $row1['description'] . " </textarea></p>
                                <p>Method:<input name=\"editmethod\" value=\"" . $row1['method'] . " \"/></p>
                                <p>Category:<input name=\"editcategory\" value=\"" . $row1['category'] . " \"/></p>
                                </td>
                                </tr>

                                </table>
                                ";
                                }}?>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Send message</button>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <?php//opening php// ending html code.  
    }
}
?>
</div>

script

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var Eid = button.data('whatever') // 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 other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + Eid)
   modal.find('.modal-body input').val(Eid)
  // document.location="adminItems3.php?idSelected=" + Eid
})

I have been trying to fix this for days. If you guys have better ideas of passing at least the item ID somehow, so that my modal will be able to retrieve it, then that would be really great!

Is there any way to pass the variable, so that i can retrieve it through my modal without crashing?

[Image of the 3rd button when clicked][2]

it displays the information of the first buton Thanks again !!

enter image description here

Answer 1

I've given the simplest way to open a modal dialog of bootstrap. It will help. Work according to this calmly. Keep patience. Follow the code as it is. It will help you.

<div class = "row col-xs-10 col-sm-10 col-md-10 col-lg-10 ">
    <?php
    include 'connectDB.php';
    $query = "SELECT * FROM `itemdb`;";
    $result = mysqli_query($dbconnect, $query);
    if(mysqli_num_rows($result) > 0)
    {
        while($row = mysqli_fetch_assoc($result))
        {?>
        <table>
            <tr>
                <td>Hellow</td>
                <td>
                    <a class="ItemID" href="#exampleModal" data-toggle="modal" data-whatever="<?echo $row['itemID'];?>">
                        <input type='button' class='btn btn-primary' value="Edit">
                    </a>
                </td>
            </tr>
        </table>
        <?php//opening php// ending html code.  
        }
    }
    ?>
</div>

In Your Footer, Place this code

<div id="exampleModal" class="modal fade" aria-hidden="true" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div>

In Script

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

NewPage.php
([NOTE: Remember, this page name is also used in script tag. So, if you change this name of page. You have to change the same page name in script tag which i gave])

<?
include 'connectDB.php';
?>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
    <?php 
    if(!empty($_GET['ItemID']))
    {
        $ID = $_GET['ItemID'];
        echo $ID;

        $query1 = "SELECT * FROM `trademe`.`itemdb` WHERE `itemdb`.`itemID` = $ID;";
        $result1 = mysqli_query($dbconnect, $query1);
        if(mysqli_num_rows($result1) > 0)
        {
            $row1 = mysqli_fetch_assoc($result1);
            echo "
            <table class=\"table-striped\">
            <tr>
            <td class = \"imgBoxCol\">
            <img class=\"imgBox img-rounded imgBox\"src=\"" . $row1['img_path'] . "\"></img>
            </td>
            <td>
            <p >Ad Title: <input name=\"editadTitle\" value=\"" . $row1['adTitle'] . "\"/></p> 
            <p>Item Name:<input name=\"edititemName\" value=\" " . $row1['itemName'] . "\"/> </p>
            <p>Condition:<textarea name=\"editcond\" type=\"text\" >" . $row1['cond'] . "</textarea></p>
            <p>Description:<textarea name=\"editdescription\"  type=\"text\" > " . $row1['description'] . " </textarea></p>
            <p>Method:<input name=\"editmethod\" value=\"" . $row1['method'] . " \"/></p>
            <p>Category:<input name=\"editcategory\" value=\"" . $row1['category'] . " \"/></p>
            </td>
            </tr>

            </table>
            ";
        }
    }?>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Send message</button>
</div>

Answer 2

All your modals have the same ID "exampleModal" so only the first one is shown when modal is triggered.

Try to make ID like

$myModalID = "exemplaModal_".$row['ID'];

in both

data-target=\"#<?php echo $myModalID?>\"  //I forget to let the hastag here, my bad

AND

class="modal fade" id="<?php echo $myModalID?>".

PS : you have a mistake

onclick=\"window.Socation.href"

Its not Socation but Location

EDIT :

<div class = "row col-xs-10 col-sm-10 col-md-10 col-lg-10 ">
<?php
include 'connectDB.php';
$query = "SELECT * FROM `itemdb`;";
$result = mysqli_query($dbconnect, $query);

if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
// HERE you declare your modal ID
$myModalID = "exemplaModal_".$row['ID'];
?>
<table>
    <tr>
        <td>Hellow</td>
        <td>
            <?php
            ///!\ HERE : Dont forget to let the hashtag in data-taget : data-target="# <---
            echo "
            <button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#<?php echo $myModalID?>\" 
            data-whatever=\"editDB[" .  $row['itemID'] . "]\" onclick=\"window.Socation.href = 'adminItems3.php?value=" .  $row['itemID'] . "'\";>Edit</button>
            ";
            ?>

            <!-- And Here juste add the normal echo $myModalID -->
            <div class="modal fade" id="<?php echo $myModalID?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                        </div>
                        <div class="modal-body">
                            <?php 
                            if(!empty($row['itemID'])){
                            $ID = $row['itemID'];
                            echo $ID;

                            $query1 = "SELECT * FROM `trademe`.`itemdb` WHERE `itemdb`.`itemID` = $ID;";
                            $result1 = mysqli_query($dbconnect, $query1);
                            if(mysqli_num_rows($result1) > 0){
                            $row1 = mysqli_fetch_assoc($result1);

                            echo "
                            <table class=\"table-striped\">
                            <tr>
                            <td class = \"imgBoxCol\">
                            <img class=\"imgBox img-rounded imgBox\"src=\"" . $row1['img_path'] . "\"></img>
                            </td>
                            <td>
                            <p >Ad Title: <input name=\"editadTitle\" value=\"" . $row1['adTitle'] . "\"/></p> 
                            <p>Item Name:<input name=\"edititemName\" value=\" " . $row1['itemName'] . "\"/> </p>
                            <p>Condition:<textarea name=\"editcond\" type=\"text\" >" . $row1['cond'] . "</textarea></p>
                            <p>Description:<textarea name=\"editdescription\"  type=\"text\" > " . $row1['description'] . " </textarea></p>
                            <p>Method:<input name=\"editmethod\" value=\"" . $row1['method'] . " \"/></p>
                            <p>Category:<input name=\"editcategory\" value=\"" . $row1['category'] . " \"/></p>
                            </td>
                            </tr>

                            </table>
                            ";
                            }}?>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Send message</button>
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>
<?php//opening php// ending html code.  
}
}