get user data using ajax

Viewed 96

I am trying to call data when i open the modal but its coming only for the first user not for others First I will click the a href link then it will open the modal which will consist some input fields ,in those input fields user will be able to see the existing data of person he wants to see

@foreach($jan as $j)
    <tr>
        <td><a href="#" class="btn btn-sm btn-dark investor-edit" data-id="{{ $j->id }}" data-toggle="modal"
               data-target="#myModal" id="inbox-modal">Edit</a></td>
    </tr>
@endforeach

<div class="modal bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                {{--
                <h5 class="modal-title float-left" id="exampleModalLabel">The subject of the mail will be displayed here</h5>
                --}}
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fa fa-times-circle"></i></span>
                </button>
            </div>
            <div class="modal-body">
                <div class="small">
                    <div class="form-row form-group">
                        <label class="col-md-5">
                            <h5>Investor Name <span class="form-required">*</span></h5>
                        </label>
                        <div class="col-md-7">
                            <input type="text" placeholder="Enter Investor Name" class="form-control" id="investor_name"
                                   name="email" required>
                        </div>
                    </div>
                    <div class="form-row form-group">
                        <label class="col-md-5">
                            <h5>Investor Mobile Number <span class="form-required">*</span></h5>
                        </label>
                        <div class="col-md-7">
                            <input type="text" placeholder="Enter Investor Mobile Number" class="form-control"
                                   id="investor_mobile" name="email" required>
                        </div>
                    </div>
                    <div class="form-row form-group">
                        <label class="col-md-5">
                            <h5>Date Of Birth <span class="form-required">*</span></h5>
                        </label>
                        <div class="col-md-7">
                            <input type="date" placeholder="Enter Date Of Birth " class="form-control" id="dob"
                                   name="email" required>
                        </div>
                    </div>
                    <div class="form-row form-group">
                        <label class="col-md-5">
                            <h5>Investor Marriage Anniversary <span class="form-required">*</span></h5>
                        </label>
                        <div class="col-md-7">
                            <input type="date" placeholder="Enter Marriage Anniversary Date " class="form-control"
                                   id="marriage_ann" name="email" required>
                        </div>
                        <input type="submit" class="btn btn-block btn-danger" name="submit" id="submit" value="Save">
                    </div>
                </div>
                <div class="col-xs-12 mt-3 small">
                    <p id="message-body"></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(document).ready(function () {
        $('#inbox-modal').on('click', function (e) {
            var id = $(this).data("id");
            $.ajax
            ({
                url: '{{ route('get-investors-data') }}',
                type: 'GET',
                data: {
                    'id': id,
                },
                success: function (response) {
                    $('#investor_name').val(response.user_name);
                    $('#dob').val(response.date_of_birth);
                    $('#investor_mobile').val(response.phone_no);
                    $('#marriage_ann').val(response.anniversary)
                }
            });
        });
    });
</script>

The data is coming for the first user only inside the modal,I am Unable to find out the mistake

Any help would be highly appreciated

1 Answers

Your Jquery selector is not working since you are looking for an ID that is not unique. Use Classes instead:

<td><a href="#" class="btn btn-sm btn-dark investor-edit inbox-modal" data-id="{{ $j->id }}" data-toggle="modal"
               data-target="#myModal" id="">Edit</a></td>

And in your Script (use the class selector . instead of the id selector #)

$('.inbox-modal').on('click', function (e) {
Related