update a modal with javascript bootstrap jquery

user_15988986 0
Viewed 83

I'm failing to get the modal updated with the data i want... The modal pops up when calling it, but it fails to update the fields..

Have tried tho get this for a long time now, but i am a rookie in javascript.

Call the modal:

<a href="" data-toggle="modal" data-target="#myModal" data-foodid="<?=$subject['food_id'];?>" data-food="<?=$food_name;?>" data-name="<?=$name;?>"  data-time="<?=$time;?>"  data-status="<?=$status;?>><i class="fa fa-eye""><?= $subject['food'] ?></i></a>

The modal

<div class="modal fade hide" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Informasjon om matvare</h5>
            </div>
            <div class="modal-body">
                <label style="font-weight: bold;"><strong>Matvare:&nbsp;</strong></label><span class="food" id="food">ingen?</span></br>
                <label><strong>Registrert av&nbsp;</strong></label><span class="modal-name" id="food">ingen?</span> </br>
                <label><strong>Registrert dato </strong></label> </br>
                <label><strong>Status </strong></label> </br>
                <a href="#myModal" type="submit" class="btn btn-sm btn-info editlink">Endre</a>
                <a href="#myModal" type="submit" class="btn btn-sm btn-danger deletelink">Slett</a>
                <a href="#myModal" type="submit" class="btn btn-sm close" data-dismiss="modal">Lukk</a>
            </div>
        </div>
    </div>
</div>

The script

<script>

$(document).ready(function(){
    $('#myModal').on('show.bs.modal', function (event) {
    //$('#myModal').on('click', function (event) {
        var applicant = $(event.relatedTarget);
        var foodid = applicant.data('foodid');
        var food = applicant.html('food');
        var name = applicant.data('name');
        var time = applicant.data('time');
        var status = applicant.data('status');

        var modal = $(this);
        alert('hgi');

        $('.food').text(food);
        modal.find('.food').text('test' + food);
        modal.find('.modal-name').text(name);
        modal.find('.modal-time').text(time);
        modal.find('.modal-status').text(status);
        modal.find('.editlink').attr('src', '/admin/food/edit/'+foodid);
        modal.find('.deletelink').attr('src', '/admin/food/delete/'+foodid));
    });
}
</script>

In the header

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

modal-dialog php jquery javascript
1 Answers

if you retrieve data from controller and you want populate the modal with them you can try this code, because i have had the same problem as you in the past and solved it this way.

STEP 1:

  • remove the data in the modal body

STEP 2:

  • populate the modal via JS: from the controller you emit an event and pass in it the data you need to populate the modal
<script>
window.addEventListener('openMyModalEvent', event => {
            console.log(event.detail.articolo[0]);
            //this clean the modal from previous data
            $(".modal-body").empty();
            // this code populate the modal
            $(".modal-body").append('<label>'+event.detail.variable_name.field+'</label>'); // you have to use $ ('. modal-body'). append (); for each data you want to switch to modal.
            $("#myModal").modal('show');
        })
</script>

STEP 3:

  • After modal-body add this code:
<div class="modal-footer>
     <a href="#myModal" type="submit" class="btn btn-sm btn-info editlink">Endre</a>
     <a href="#myModal" type="submit" class="btn btn-sm btn-danger deletelink">Slett</a>
     <a href="#myModal" type="submit" class="btn btn-sm close" data-dismiss="modal">Lukk</a>
</div>
Admin1
Related