1

Well, I searched the whole Internet the last days to find a way to attach an unique ID and/or name to a GENERATED form inside a Bootstrap-Modal and I never succeeded...

I know I'm making mistakes in the code, but I ran out of ideas, I don't know what to use.

*Edit: I'm using Bootstrap 3, I created a table, having a live search field using JavaScript. The table rows are displayed from a database using a query. The last column of the row pops up a Bootstrap-Modal inside which a form is located, now here is the problem! I managed to assign a unique ID to each Modal and each Modal popup button, but the form! From here everything is mist.

Here is the code:

<div id="fm-<?php echo $row['PacientID']; ?>" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                &times;
            </button>

            <h4 class="modal-title">
                <b>
                    Fișa medicală #<?php echo $row['PacientID']; ?>: <?php echo $row['Name'].' '.$row['Surname']; ?>
                </b>
            </h4>

            <?php
                if (isset ($entranceSuccess))
                {
            ?>
                    <div class="alert alert-success text-center">
                        <?php echo $entranceSuccess; ?>
                    </div>
            <?php
                }
            ?>

            <?php
                if (isset ($entranceError))
                {
            ?>
                    <div class="alert alert-danger text-center">
                        <?php echo $entranceError; ?>
                    </div>
            <?php
                }
            ?>
        </div>

        <form data-toggle="validator" id="entranceForm" role="form" method="POST">
            <div class="modal-body">
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th class="text-center">Data Intrării</th>
                            <th class="text-center">Medic Stomatolog</th>
                            <th class="text-center">Tratament</th>
                            <th class="text-center">Achitat</th>
                        </tr>
                    </thead>

                    <tbody>
                        <?php
                            $intrari = "SELECT * FROM intrari";
                            $intrariResults = $db -> query($intrari);

                            while ($row2 = $intrariResults -> fetch_assoc())
                            {
                                if ($row2['Pacient'] == $row['PacientID'])
                                {
                        ?>
                                    <tr class="text-center">
                                        <th scope="row" class="text-center">
                                            <?php echo $row2['EntranceDate'];?>
                                        </th>

                                        <td>
                                            <?php
                                                if ($row2['Medic'] == 1)
                                                {
                                                    echo 'Dr. Carmen Pădurean';
                                                }
                                                else if ($row2['Medic'] == 2)
                                                {
                                                    echo 'Dr. Claudiu Șuc';
                                                }
                                                else if ($row2['Medic'] == 3)
                                                {
                                                    echo 'Dr. Mihaela Toncean';
                                                }
                                                else if ($row2['Medic'] == 4)
                                                {
                                                    echo 'Dr. Alexandra Cenan';
                                                }
                                                else
                                                {
                                                    echo 'MEDICUL STOMATOLOG NU A FOST DEFINIT!';
                                                }
                                            ?>
                                        </td>

                                        <td>
                                            <?php echo $row2['Treatment'];?>
                                        </td>

                                        <td>
                                            <?php echo $row2['Achitat'];?>
                                        </td>
                                    </tr>
                        <?php
                                }
                            }
                        ?>

                        <tr>
                            <th scope="row" class="text-center">
                                <div class="form-group">
                                    <div class="input-group date entranceDateField">
                                        <input type="text" class="form-control" id="entranceDate" name="entranceDate">
                                        <div class="input-group-addon">
                                            <span class="glyphicon glyphicon-th"></span>
                                        </div>
                                    </div>
                                </div>
                            </th>

                            <td>
                                <div class="form-group">
                                    <select class="form-control" id="medic" name="medic">
                                        <option value="1">Dr. Carmen Pădurean</option>
                                        <option value="2">Dr. Claudiu Șuc</option>
                                        <option value="3">Dr. Mihaela Toncean</option>
                                        <option value="4">Dr. Alexandra Cenan</option>
                                    </select>
                                </div>
                            </td>

                            <td>
                                <div class="form-group">
                                    <input type="text" class="form-control" id="treatment" name="treatment">
                                </div>
                            </td>

                            <td>
                                <div class="form-group">
                                    <input type="text" class="form-control" id="achitat" name="achitat">
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-success" id="addEntrance" name="addEntrance-<?php echo $row['PacientID'];?>">
                    <span class='glyphicon glyphicon-plus'></span> Adaugă Intrare
                </button>

                <?php
                    if (isset ($_POST['addEntrance-<?php echo $row[PacientID]; ?>']))
                    {
                        $entranceDate = $_POST['entranceDate'];
                        $pacient = $row['PacientID'];
                        $medic = $_POST['medic'];
                        $treatment = $_POST['treatment'];
                        $achitat = $_POST['achitat'];

                        $insertEntrance = "INSERT INTO intrari (EntranceDate, Pacient, Medic, Treatment, Achitat)
                        VALUES ('$entranceDate', '$pacient', '$medic', '$treatment', '$achitat')";

                        if (mysqli_query ($db, $insertEntrance))
                        {
                            $entranceSuccess = "Pacientul a fost adăugat în baza de date cu succes!";
                        }
                        else
                        {
                            $entranceError = "A apărut o eroare nedefinită! Suna-l pe Andrei (0755 696 200) și dictează-i: \"Error code: " . mysqli_error ($db) . "\"";
                        }
                    }
                ?>
            </div>
        </form>
    </div>
</div>

j08691
  • 204,283
  • 31
  • 260
  • 272
Krayen
  • 38
  • 10
  • You need to skip more code. Start from scratch and have a Bootstrap-Modal generate the simplest form you can think of. Try to attach a name or id to that, and post your attempt instead of this wall of code. – Teepeemm Nov 13 '15 at 17:50
  • I already did that, the form inside the modal reacts well, I posted this wall of code because there is a query at the start, inside which there is another query, and that may be a problem but I'm not sure. – Krayen Nov 13 '15 at 17:52
  • Then you need to [edit] that into your question, not hide it in your code. And you still need to edit down your code. Unless you think the table is somehow relevant. – Teepeemm Nov 13 '15 at 17:58
  • Okay, I removed useless parts from the code and explained what I want to – Krayen Nov 13 '15 at 18:21

1 Answers1

2

By looking at your code, I see you are putting Modal HTML inside loop and by assigning unique id's to modal selector id="fm-<?php echo $row['PacientID']; ?>" trying to create multiple modals with unique id(s), it will cause the page to load slow and running queries inside each unique modal fetching the records from database when even you don't need fetched records on page load, it's not a good practice,

so let's go one step backward and remove the Modal from while loop and put it outside and remove <?php echo $row['PacientID']; ?> from Modal id selector.

<div id="fm" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
         //Modal-Header, Modal-Body, Modal-Footer Comes Here
    </div>
  </div>
</div>

Now as you stated The last column of the row pops up a Bootstrap-Modal

Assuming you are triggering the modal with default behaviour with data attributes data-toggle="modal" data-target="#fm" and you have other information in other columns of rows like <?php echo $row['Name'].' '.$row['Surname']; ?> so you must have something like

<tr>
    <td><?php echo $row['PacientID']; ?></td>
    <td><?php echo $row['Name'].' '.$row['Surname']; ?></td>
    <td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#fm">Open Modal</button></td>       
</tr>

Now Let's pass the pacientid and name to modal, Add data-attribute data-pacient to name col and to modal trigger button so above table col's will be

<tr>
    <td><?php echo $row['PacientID']; ?></td>
    <td><span class="pacientname" data-pacient="<?php echo $row['PacientID']; ?>"><?php echo $row['Name'].' '.$row['Surname']; ?></span></td>
    <td><button type="button" data-pacient="<?php echo $row['PacientID']; ?>" class="btn btn-info" data-toggle="modal" data-target="#fm">Open Modal</button></td>       
</tr>

With bootstrap modal event listener, you can pass the information to modal when modal about to show or shown

$(document).ready(function(){ //Dom Ready
    $('#fm').on('show.bs.modal', function (e) { //Show event listener
        var id = $(e.relatedTarget).data('pacient'); //Fetch val from modal data-attribute
        var name = $('.pacientname[data-pacient="' + id +'"]').html(); //fetch val from selector `pacientname` data-attribute with match the val of modal button data-attribute
        $(".pid").html(id); //selector inside modal header to pass id
        $(".pname").html(name); //selector inside modal header to pass name
        $("#addEntrance").val(id); //Passing id to hidden input in form, explained below
        //Ajax method comes here which explains below
    });
});

Modal-Header

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title"><span class="pid"></span> <span class="pname"></span></h4>
</div>

Fiddle Example to pass information to modal

Now about the query you are running inside modal, it can be done via Ajax method and display the information in modal. As we already have the required variable var id = $(e.relatedTarget).data('pacient'); can use it to fetch the required information via Ajax method

var dataString = 'id='+ id;
alert(dataString);
$.ajax({
    type: "POST",
    url: "file.php", //Create this file and handle query in it.
    data: dataString,
    cache: false,
    success: function (data) {
        $("#morecontent > tbody.showHere").html(data); //show fetched information from database
    }
});

and file.php will be

<?php
//Database Connection Here
if(isset($_POST["id"])) {
    $id = $_POST["id"]; //escape the string
    $queryIntrari = "SELECT * FROM intrari WHERE Pacient = '$id'";
    $intrariResults = $db -> query($queryIntrari);
    while ($row2 = $intrariResults -> fetch_assoc()){
?>
        <tr class="text-center">
            <th scope="row" class="text-center">
                <?php echo $row2['EntranceDate'];?>
            </th>
            <td>
                <?php
                    if ($row2['Medic'] == 1)
                    {
                        echo 'Dr. Carmen Pădurean';
                    }
                    else if ($row2['Medic'] == 2)
                    {
                        echo 'Dr. Claudiu Șuc';
                    }
                    else if ($row2['Medic'] == 3)
                    {
                        echo 'Dr. Mihaela Toncean';
                    }
                    else if ($row2['Medic'] == 4)
                    {
                        echo 'Dr. Alexandra Cenan';
                    }
                    else
                    {
                        echo 'MEDICUL STOMATOLOG NU A FOST DEFINIT!';
                    }
                ?>
            </td>
            <td><?php echo $row2['Treatment'];?></td>
            <td><?php echo $row2['Achitat'];?></td>
        </tr>
<?php } } ?>

and the Modal-body, Modal-Footer with form and information fetched from database using Ajax will be like

<table class="table table-hover table-bordered" id="morecontent">
<form data-toggle="validator" id="entranceForm" role="form" method="POST">
<input type="hidden" id="addEntrance" name="addEntrance" value="">
    <div class="modal-body">
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th class="text-center">Data Intrării</th>
                    <th class="text-center">Medic Stomatolog</th>
                    <th class="text-center">Tratament</th>
                    <th class="text-center">Achitat</th>
                </tr>
            </thead>
            <tbody class="showHere">
                //Information Fetched from Database Using Ajax will show Here
            </tbody>
            <tbody>
                <tr>
                    <th scope="row" class="text-center">
                        <div class="form-group">
                            <div class="input-group date entranceDateField">
                                <input type="text" class="form-control" id="entranceDate" name="entranceDate">
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-th"></span>
                                </div>
                            </div>
                        </div>
                    </th>
                    <td>
                        <div class="form-group">
                            <select class="form-control" id="medic" name="medic">
                                <option value="1">Dr. Carmen Pădurean</option>
                                <option value="2">Dr. Claudiu Șuc</option>
                                <option value="3">Dr. Mihaela Toncean</option>
                                <option value="4">Dr. Alexandra Cenan</option>
                            </select>
                        </div>
                    </td>
                    <td>
                        <div class="form-group">
                            <input type="text" class="form-control" id="treatment" name="treatment">
                        </div>
                    </td>
                    <td>
                        <div class="form-group">
                            <input type="text" class="form-control" id="achitat" name="achitat">
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-success">
            <span class='glyphicon glyphicon-plus'></span> Adaugă Intrare
        </button>
    </div>
</form>

Note: Created a hidden input in <form> above, passed the value <?php echo $row['PacientID']; ?> to the hidden input when modal show, Post this hidden input along with other inputs when submitted the form in modal to insert or update values into database

an example here

Mission accomplished and hope you figure it out how to pass and get information in modal

Note: You can submit the modal form either the way you are doing or can also do it with Ajax and show success or error message inside modal without closing it and leaving the page but that's another story to tell some other time.

Happy Coding.

Shehary
  • 9,926
  • 10
  • 42
  • 71
  • I got 2 days off programming, that's why I didn't offer feedback. Thank you for everything! I realized where I wasn't paying attention. The way you showed me here, it works, but no rows are displayed from the database (yes there are rows inserted in the database). – Krayen Nov 16 '15 at 08:28
  • I think that `$id = $_POST["id"]` isn't pointing to the right thing in `file.php`. – Krayen Nov 16 '15 at 08:30
  • I made some changes in the `ajax` code in answer, please use that code and see if you get alert and able to fetch the data from database against `$id` – Shehary Nov 16 '15 at 09:10
  • Oh sorry, my bad, my mousepad flipped and deleted the ``. It pops up an alert telling me each ID correctly, yes, but it still doesn't show rows from the database. – Krayen Nov 16 '15 at 09:24
  • then have to check the `file.php` it's path is correct and located at the `url` path given in Ajax call method and also check the query in `file.php` – Shehary Nov 16 '15 at 09:33
  • also make sure you change this line too in Ajax call `data: dataString,` – Shehary Nov 16 '15 at 09:40
  • Yes you're right, there was a conflict in the query. I got it working. Now the ultimate problem is that when I modify the `entranceDate` field, the `id` becomes `undefined`. I'm a little confused, I attached an image for you to see: `http://www41.zippyshare.com/v/hh12DrOZ/file.html` The display is a little weird too. Maybe the `` tag enters in conflict with the table. I think. – Krayen Nov 16 '15 at 09:42
  • about display, try to remove `` tag from `file.php` and in modal put it like this `` see if it fix the display issue and can you explain more about id `undefined` are your trying to submit the form with `Ajax` or `POST` – Shehary Nov 16 '15 at 09:51
  • I found out why the id becomes `undefined` when I click on the `entranceDate` field. I was using a script for that field to pop up an [Bootstrap-datepicker](https://eternicode.github.io/bootstrap-datepicker/) extension, and this is somehow a modifier for the id. The display is still the same. Here's the `datepicker` script that "modifies" the id, and the not working INSERT query: `http://www90.zippyshare.com/v/RNaxns5t/file.html` – Krayen Nov 16 '15 at 10:12
  • in `insert query` you have `$id = $_POST['id'];` try change this to `$id = $_POST['addEntrance'];` and when you open modal, inspect form elements and find this `` and check it has value, i made these change in your original code and passing the `id` via hidden input when form posted – Shehary Nov 16 '15 at 10:19
  • and form submit button is only `` remove all other values and attributes if you haven't – Shehary Nov 16 '15 at 10:21
  • Nothing seems to work out, when I click on the `entranceDate` field, the id modifies itself. Weird. I screenshoted this: `http://www10.zippyshare.com/v/0VMCmLV4/file.html` and I made this to show you how it should look like: `https://jsfiddle.net/4usddntm/` Anyways, thank you for everything, Shehary. The rest are resolvable minor issues. I hope you get a prize for this :) – Krayen Nov 16 '15 at 10:44
  • give me few mins, let me grab my cup of coffee and charge the brain, will revert back with fix of those minor issues, – Shehary Nov 16 '15 at 10:51
  • Check your email. Good wishes to you, sir! – Krayen Nov 16 '15 at 11:35