datetimepicker not working in loop

I show data in table with foreach and for each data I open a modal in the table. inside this model there is a datetimepicker. When I open the first modal, the datetimepicker works perfectly, but when close that modal and open another modal, the datetimepciker doesn't work. Where am I missing? Button to trigger modal

<a data-toggle="modal" data-target="#modalCart{{$result->orderId}}" class="orderNumber" >{{$result->orderNumber}}</a>

Modal

.
.
.
<div class="card-body collapse show" id="accordion4">
<form action="{{route('create-label')}}" method="post">
    @csrf
    <label class="control-label" for="WeightLbs">Ship Date</label>
    <div class="input-group date" id="reservationdate"  data-target-input="nearest">
        <input type="text" name="shipDate" id="shipDate" class="form-control datetimepicker-input inputs" data-target="#reservationdate">
        <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        </div>
    </div>
        <div class="modal-footer mt-3" >
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>                          
</form>
</div>
.
.
.

jQuery script

$(function () {
  $('#reservationdate').datetimepicker({
  format: 'YYYY/MM/DD',
  minDate: new Date(),
  defaultDate: new Date(),
  });
})

splatEric

4 years ago

Level 2

You’re using the same reference for every data-target, they probably need to be unique for each row

132qquick12

4 years ago

Level 1

@splatEric how can i do what you say

splatEric

4 years ago

Level 2

@132qquick12 actually I may have misread your html - is there a single modal that you are we-using for each table row?

If so, not sure what the problem could be, I assume it’s failing silently and there’s nothing in the console to help?

132qquick12

4 years ago

Level 1

@splatEric you are right what you say i need to use different reference for each data-target. but i don't know how i can do this

splatEric

4 years ago

Level 2

@132qquick12 I think you might need to have a single modal.

The table row click would provide the orderId to a function that would set the route on the modal form to submit for that order. And then toggle the modal to display.

function showLabelModalForRoute(route)
{
	$('form').attribute('action', route);
	$('#accordian4').modal('show');
}

<a href="#" onclick="showLabelModalForRoute({{route('create-label', $result->orderId)}});">{{$result->orderNumber}}</a>

I've suggested that you make the orderId part of the route here, but the alternative would be to have a hidden input that you would set instead ...

there's probably cleaner ways for the html etc ... but hopefully that gives you a jumping off point ... good luck

Please or to participate in this conversation.