How can I call a function when a Bootstrap modal is open?

Question

I use Boostrap 3.7 and Blade (Laravel 5.5).

I'm trying to display console.log('works') when my boostrap modal opens but it didn't work.

HTML :

@foreach(...)

    ...

    <div class="modal fade" id="reservationModal" tabindex="-1" role="dialog" aria-labelledby="reservationModal" aria-hidden="true">
        <div class="modal-dialog">
            ...
        </div>
    </div>
@endforeach

JS :

$('#reservationModal').on('shown.bs.modal', function (e) {
    console.log('works');
});

I followed this doc : https://getbootstrap.com/docs/3.3/javascript/#modals

And I already read that : Calling a function on bootstrap modal open

Thank's for help !

EDIT 1:

I solved the problem with this code :

$(document).on('show.bs.modal', '#reservationModal', function (e) {
    console.log('works');
});

But how to differenciate modals (because they are into foreach loop)?

Something like :

$(document).on('show.bs.modal', '#reservationModal-specificId', function (e) {
    console.log('works');
});

You're using the right event, however it looks like you're duplicating the `reservationModal` id multiple times as you're creating that element in a loop. That's likely to be the cause of your problem — Rory McCrossan, Dec 22 '17 at 11:40
where have you written this JS code? is it after the modal created? — Faraz PV, Dec 22 '17 at 11:42
@RoryMcCrossan and how can I solved this ? With an id on the `id='reservationModal'` like `id='reservationModal-3'` ? But if do this, how detect that it's the modal 3 or modal 6 which is open ? — Royce, Dec 22 '17 at 11:52
$('#reservationModal').on('shown.bs.modal', function (e) { console.log('works'); }); — Faraz PV, Dec 22 '17 at 11:54
Maybe you are adding the event listener before HTML printing. — Miquel Al. Vicens, Dec 22 '17 at 11:55
@N.Lamblin Don't use incremental `id` attributes. Use a `class` instead. — Rory McCrossan, Dec 22 '17 at 11:57

Faraz PV · Accepted Answer · 2017-12-22T12:43:37.657

4

I think your event listeners are created before HTML printing. So try this code.

$(document).on('show.bs.modal', '#reservationModal', function (e) {
    console.log('works');
});

$(document).on('show.bs.modal', '#reservationModal', function (e) {});

the bold characters will help to identify your modal

ANSWER FOR YOUR UPDATED PART

run the loop and create your modal as follows

<div class="modal fade reservationModal" id="reservationModal1" tabindex="-1" role="dialog" aria-labelledby="reservationModal" aria-hidden="true">
    <div class="modal-dialog">
        ...
    </div>
</div>

<div class="modal fade reservationModal" id="reservationModal2" tabindex="-1" role="dialog" aria-labelledby="reservationModal" aria-hidden="true">
    <div class="modal-dialog">
        ...
    </div>
</div>
...... and so on

Give reservationModal as class

and id as an incremented value appended to it

$(document).on('show.bs.modal', '.reservationModal', function (e) {
    console.log($(this).attr("id"));
});

edited Dec 22 '17 at 12:43

answered Dec 22 '17 at 12:00

Faraz PV

502
2
11

Yes my event are created before because JS is created in ``. That's works but how know which modal is call ? – Royce Dec 22 '17 at 12:05
i have given reservationModal as id – Faraz PV Dec 22 '17 at 12:05
$(document).on('show.bs.modal', '#reservationModal' – Faraz PV Dec 22 '17 at 12:05
Yes but my code is into `@foreach()` so each modal are same id right ? Ho differentiate them ... – Royce Dec 22 '17 at 12:07
are you getting the console or not? – Faraz PV Dec 22 '17 at 12:07
your question was that you are not getting the console.log, and I have provided you the answer – Faraz PV Dec 22 '17 at 12:09

score 1 · Answer 2 · answered Dec 22 '17 at 11:49

1

As pointed out by @Rory McCrossan in a comment, the duplication of the id is the key problem of your code. To fix this, you may use index:

id="reservationModal-{{$loop->index}}"

And use start with selector like this if you want to call on each modal:

$('[id^="reservationModal-"]').on('shown.bs.modal', function (e) {
    console.log('works');
});

Or, just use indexed selector to use on particular modal:

$('#reservationModal-3').on('shown.bs.modal', function (e) {
    console.log('works');
});

answered Dec 22 '17 at 11:49

Bhojendra Rauniyar

83,432
35
168
231

My objective is to have a generic code for each modal yes. But your solution with `$('[id^="reservationModal-"]')` and`{{$loop->index}}` seems didn't works because modal didn't open at all. – Royce Dec 22 '17 at 11:58
I think that the first solution, with `[id^="reservationModal-"]` is the right way but didn't works and i don't know why. – Royce Dec 22 '17 at 12:25

How can I call a function when a Bootstrap modal is open?

2 Answers2

Related