1

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

Nana Partykar
  • 10,556
  • 10
  • 48
  • 77
topacoBoy
  • 197
  • 2
  • 4
  • 17

2 Answers2

2

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>
Nana Partykar
  • 10,556
  • 10
  • 48
  • 77
  • Thank you very much for your reply sir, i will work on it ones i get back home. Will definitely get back to you ! :D – topacoBoy Oct 09 '15 at 09:34
  • Yeah sure @Chocobie95. But, work calmly. OK. Otherwise, anything missed.. you will get messed up with these code. So, step by step work. All the best. Hope, it will help. Thanku – Nana Partykar Oct 09 '15 at 09:35
  • hey sir, i have tried using your code. When i click the button now, only the black faded background of the modal pops out but not the modal body. So it's not displaying anything and also, i cant see any variables being passed to the variables through the url. Is there anything that i should change ? – topacoBoy Oct 10 '15 at 05:13
  • Yesterday, i answered one question of him. It worked fine there. check it once. http://stackoverflow.com/questions/33043115/passing-data-via-modal-bootstrap-and-getting-php-variable/33043821?noredirect=1#comment53909632_33043821 – Nana Partykar Oct 10 '15 at 08:47
  • Yess. Your modal is working. It will come. Check console, what error coming show me @Chocobie95 – Nana Partykar Oct 10 '15 at 09:00
  • omg. Im really sorry,sir ! i think my xampp was giving me some weird problem just now which was causing the error to load from the db. I just tried again to check the error and it worked perfectly fine !!!! Thank you for sharing your idea with me, i learnt something new ! YAY ! Thanks !!!! :D – topacoBoy Oct 10 '15 at 10:47
  • Ok Ok. Gud to hear @Chocobie95. My answer helped you ? – Nana Partykar Oct 10 '15 at 12:40
  • Then, i will suggest you tick this answer as correct answer. As,it will help other user to find the right answer. Thanku. Glad to hear @Chocobie95 – Nana Partykar Oct 10 '15 at 12:56
  • i cant do that sir, im still a new user:( it dissapears right after i mark i vote it. And btw can you explain what does this code does ? `cache:false,success:function(result){` at the javascript section ? – topacoBoy Oct 10 '15 at 13:00
  • Check this document. It will help you in understanding http://api.jquery.com/jQuery.ajax/ and http://community.sitepoint.com/t/what-does-it-mean-jquery-ajax-cache-false/98268 @Chocobie95 – Nana Partykar Oct 10 '15 at 13:04
0

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.  
}
}
ThinkTank
  • 1,187
  • 9
  • 15
  • Hey thanks for your reply . I've got a few question. the `$myModalID = "exemplaModal_".$row['ID'];` do i need to delare it in my php ? if yes, i have tried the steps you've given but it still aint working. Now it's not even displaying the Modal. Is there a way for me to pass the variable through get method and retrieve it in my php ? Btw the onclick function was used to test some other things. – topacoBoy Oct 09 '15 at 09:25
  • I'have edited with the code. the important part is to not forget the hastag when you declare modal ID in `data-target`. My Bad. – ThinkTank Oct 09 '15 at 15:14
  • I've done like what you have did, but it's still not displaying. I believe it must be due to the javascript ? how should i display it into the javascript ? this is how i display it... ` – topacoBoy Oct 10 '15 at 02:51