CODEWITHSUNDEEP
phpmysqltwitter-bootstraplaravelforeach
xTheWolf
xTheWolf

Reputation: 1886

Foreach Entry in DB: Table row with Onclick Modal with a row

Sorry if the title may be confusing,

I'm using Laraverl blade, and I have a foreach inside my table in order to show as many rows as database records.

@foreach ($terminals as $terminal)
                            <tr>
                                <td>{{ $terminal->id }}</td>
                                <td>{{ $terminal->serial }}</td>
                                @if ($terminal->state != 0)
                                    <td><a href="" data-toggle="modal" data-target="#terminalModal--{{ $terminal->id }}">{!! GetTerminalState($terminal->state) !!}</a></td>
                                @else
                                    <td>{!! GetTerminalState($terminal->state) !!}</td>
                                @endif
                                <td>
                                    <a href="{{ route('showSpecificTerminal', $terminal->id) }}" class="btn btn-primary btn-sm">
                                        <i class="fa fa-cc-visa" aria-hidden="true"></i> Terminal Details
                                    </a>
                                </td>
                            </tr>
                            <!-- TODO: Move Modal outside of table?-->
                            @if ($terminal->state != 0)
                                <div class="modal fade" tabindex="-1" role="dialog" id="terminalModal--{{ $terminal->id }}">
                                    <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">Terminal (S/N: {{ $terminal->serial }})</h4>
                                            </div>
                                            <div class="modal-body">
                                                <h3 class="text-center">In use by</h3>
                                                <strong>ID: </strong>{{ $terminal->user->id }}<br>
                                                <strong>Username: </strong>{{ $terminal->user->name }}<br>
                                                <strong>Real Name: </strong>{{ $terminal->user->realname }}<br>
                                                <strong>E-Mail: </strong>{{ $terminal->user->email }}<br>
                                                <strong>OID: </strong>{{ $terminal->user->oid }}<br>
                                                <a href="{{ route('showSpecificProfile', $terminal->user->id) }}" class="btn btn-block btn-primary btn-sm">
                                                    <i class="fa fa-user" aria-hidden="true"></i> Profile
                                                </a>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal-dialog -->
                                </div><!-- /.modal -->
                            @endif
                        @endforeach

As you can see, inside the ForEach I use my custom function GetTerminalState which echoes a bootstrap label ("Not in use" for when $terminal->state is 0, and "In use" for when it is not 0).

When it is 0 Zero it should generate a modal, which opens on click on the label. Inside this modal I want to use a table, but that doesnt work (Table inside of a table).

So I need to move the modal out of the table, but don't want to use another ForEach later on. Also, does anyone knows of a better method of dynamically generating modals per database record?

Upvotes: 0

Views: 416

Answers (1)

kkyeboah
kkyeboah

Reputation: 186

Use javascript to generate your modals. Listen to click event on your labels, pass the DB record id to your javascript code and make an ajax call for the data that goes into the modal and render it.

Upvotes: 1

Related Questions