0

In a modal there are two input fields, the inputs are sent to the controller, processed there and then stored in the database.

After successful storage of the data, the modal is reset and hidden.

How can I add the newly created data(interest) to the view without reloading the page? And that the same functions exist as with an already existing element?

I use Bootstrap in the frontend and Laravel in the backend

Ajax:

<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $("#storeinterest").click(function(e){
        e.preventDefault();
        var itag = $('#create_itag').val();
        var name = $('#create_name').val();

        $.ajax({
            type:'POST',
            url:'{{URL::route('interests.store')}}',
            data:{name:name, itag:itag},
            success:function(data){
                _toastr_new(data.message, "top-full-width", "success", false, '.toastr-notify', 0);
                $('#create_itag').tagsinput('removeAll');
                $('#create_name').val('');
                $('#addInterest').delay(1000).fadeOut(450);

                setTimeout(function(){
                    $('#addInterest').modal("hide");
                }, 1500);
            }
        });
    });
</script>

Response from Controller:

$data = [
                'message' => trans('messages.newinterest'),
                'interest' => $interest
            ];
            return response()->json($data, 200);

View:

<div class="infinite-scroll">
                <div class="row">
                    @foreach ($interests as $interest)
                        <div class="col-md-4 col-sm-6 col-xs-12 mtm-10 mtmm-115">
                            <div class="box-icon box-icon-center box-icon-round box-icon-large text-center">
                                <div class="front rahmen_iboard box-shadow-7">
                                    <div class="box1" style="background-color:#FFFFFF">
                                        <div class="box-icon-title">
                                            <div class="z-100">
                                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                                    <i class="ico-xs glyphicon glyphicon-option-vertical float-right pt-8"></i>
                                                </a>
                                                <ul class="dropdown-menu dropdown-left-iboard dropdown-menu-right">
                                                    <li class="dropdown-item">
                                                        <a class="p-2" data-toggle="modal" data-target="#updateInterest{{$interest->id}}"><i class="ico-xs glyphicon glyphicon-globe"></i> Bearbeiten</a>
                                                        <a class="p-2" data-toggle="modal" data-target="#delteInterest{{$interest->id}}"><i class="ico-xs fa fa-remove"></i> Löschen</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="img-ausschnitt">
                                                <a class="img-hover" href="{{URL::route('interests.show', $interest->id)}}">
                                                    <img class="img-fluid" src="@if ($interest->mostVote) {{ Storage::url($interest->mostVote->postsImages->random()->image_thumbnail) }} @else {{ Storage::url('defaults/posts/nopost_interest.jpg') }}  @endif" alt="" />
                                                </a>
                                            </div>
                                            <div class="progress">
                                                <div class="@if ($interest->ratio < 20) progress-bar-danger @else progress-bar-primary @endif h-7" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:{{$interest->ratio}}%;">
                                                </div>
                                            </div>
                                            <span class="mdl-badge" data-badge="2"><b> {{$interest->name}}</b></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @include("modal.delteInterest")
                        @include("modal.updateInterest")
                    @endforeach
                </div>
                {{$interests->links()}}
            </div>
4

0 回答 0