Display Modal via jQuery only when Modal has content in the body

I have this Modal:

<div id="reminderModal" class="modal fade">
                    <div class="modal-dialog" >
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="reminderModalLabel">Receipt Verification</h4>
                            </div>
                            <div class="modal-body text-center pagination-centered">
                                @foreach ($quot_one as $key_1)
                                <h5>Please verify the receipt of the quotation of <b>{{ $key_1->name }}</b> sent on
                                    {{ $key_1->date_of_sending_inquiry }} </h5>
                                    <p><a href="{{ route('quot.editquot', $key_1->quotId) }}" class="btn btn-dark "
                                        type="button">Verify Receipt</a></p>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

It displays on the page load called by jQuery:

  <script>
        $(document).ready(function() {
            $("#reminderModal").modal('show');
        })
    </script>

$quot_one are database entries that meet a certain condition where a value is 0. When that value is turned to 1 for every entry, the Modal will be empty body wise.

Is it possible to make that modal only appears if it has a body? And if so, how to do it? (I am very new to jQuery so any help would be appreciated)

axeloz

3 years ago

Level 2

It should be something like

  <script>
        $(document).ready(function() {
			let myModal = $('#reminderModal');
			if (myModal.html() != '') {   # or may modal.html().length != 0
				 myModal.modal('show');
			}
        })
    </script>

1 like

littledaggers

3 years ago

Level 1

@axeloz correct me if I'm wrong, but does that assume that the html elements don't exist so am asking it to not display when they don't? if so, outside the foreach loop I have an h4 element which is gonna be always there whether there are entries or not, so it is gonna display anyway. How to work around that?

axeloz

3 years ago

Best Answer

Level 2

@littledaggers there you go : https://codepen.io/aquel/pen/yLKNbJW

It works.

PS: this is NOT the best way according to me. I think it would be best to set an attribute to the modal for instance

<div id="reminderModal" class="modal fade" data-show="true">

1 like

littledaggers

3 years ago

Level 1

@axeloz okay thank you, I will read more about the data attributes. Thank you for guiding me that way. Currently I am an intern in backend and frontend web development, and Im still learning everything when it comes to coding a website's backbone. So helping me through it is much much appreciated!

Please or to participate in this conversation.