ctf0 / Laravel-Media-Manager

A "Vuejs & Laravel" Media Manager With Tons of Features
MIT License
829 stars 179 forks source link

[BUG] Manager from a Modal closes my form tag #168

Closed ChristianC1123 closed 3 years ago

ChristianC1123 commented 3 years ago

What version of Laravel are you using? (nothing lower than v6).

Ver 8.13.0

is it an issue related to installation or usage ?

Usage

what is the error you are getting ?

The Page is refreshing every time, ifI click on a button of this mediamanager. My form-tag is closed after the example-comp

Extra Info "attaching a screen shot would be very helpful"

My code:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            Neue Arbeitsanweisung
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                <!-- BEGINN Insert-->
                    <div class="p-4 sm:px-20 bg-white border-b border-gray-200">
                        <div>
                            <x-jet-application-logo class="block h-12 w-auto" />
                        </div>

                        <div class="mt-8 text-2xl">
                            Bitte die Dokumentendaten eingeben.
                        </div>

                        <div class="mt-6 text-gray-500">
                            <!-- Formular -->
                                <form method="POST" action="/aa_new">
                                    @csrf
                                    <!--
                                    @error('title')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                    @enderror
                                    -->

                                    <div class="form-group">
                                        <label for="dokument_name">Dokumenten-Name</label>
                                        <input type="text" class="form-control @error('dokument_name') is-invalid @enderror" id="dokument_name" name="dokument_name" placeholder="Dokumentenname oder Bezeichnung">
                                        @error('dokument_name')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                         @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="version">Version</label>
                                        <input type="number" class="form-control @error('version') is-invalid @enderror" id="version" name="version" placeholder="Version">
                                        @error('version')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                         @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="typ">Typ der Arbeitsanweisung</label>
                                        <select class="form-control" id="typ" name="typ">
                                        <option value="1">Allgemeine Anweisung</option>
                                        <option value="2">Arbeitsanweisung</option>
                                        <option value="3">Prüfanweisung</option>
                                        <option value="4">Service-Anweisung</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="art_nr">Art.Nr für Stücklistenvergleich</label>
                                        <input type="text" class="form-control @error('version') is-invalid @enderror" id="art_nr" name="art_nr" placeholder="Art.Nr für Stkl.">
                                        @error('art_nr')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                         @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="status">Status der Arbeitsanweisung</label>
                                        <select class="form-control" id="status" name="status">
                                        <option value="1">Erstellt</option>
                                        <option value="4">Gesperrt</option>
                                        <option value="7">zur Freigabe</option>
                                        <option value="8">Rejected</option>
                                        <option value="9">Freigegeben</option>
                                        </select>
                                    </div>

                                    <!-- VUE IMPORT -->

                                    <example-comp inline-template>
                                        <div id="app">
                                            {{-- manager --}}
                                            <div v-if="inputName">@include('MediaManager::extras.modal')</div>

                                            {{-- items selector --}}
                                            <media-modal item="cover" :name="inputName"></media-modal>
                                            <media-modal item="gallery" :name="inputName" type="folder"></media-modal>
                                            <media-modal item="links" :name="inputName" :multi="true"></media-modal>

                                            {{-- for editor --}}
                                            @include('MediaManager::extras.editor')

                                                {{-- cover --}}
                                                <section>
                                                    <img :src="cover">
                                                    <input type="hidden" name="cover" :value="cover"/>
                                                    <button @click="toggleModalFor('cover')">select cover</button>
                                                </section>

                                                {{-- gallery --}}
                                                <section>
                                                    <input type="text" name="gallery" :value="gallery"/>
                                                    <button @click="toggleModalFor('gallery')">select gallery folder</button>
                                                </section>

                                                {{-- links --}}
                                                <section>
                                                    <input v-for="item in links"
                                                        :key="item"
                                                        :value="item"
                                                        type="text" 
                                                        name="links[]"/>

                                                    <button @click="toggleModalFor('links')">select gallery links</button>
                                                </section>

                                        </div>
                                    </example-comp>

                                                   <br>
                                    <div class="form-group">
                                        <label>Angemeldeter Benutzer:</label><br>
                                        <input type="text" class="form-control" id="user" name="user" value="{{ Auth::user()->name }}">

                                    </div>
                                    <div class="form-group">
                                        <label for="bemerkung">Bemerkung</label>
                                        <textarea class="form-control mywysiwygtextarea" id="bemerkung" name="bemerkung" rows="3"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="tags">Tags</label>
                                        <input type="text" class="form-control" id="tags" name="tags" placeholder="Tags">
                                    </div>
                                    <button type="submit" class="btn btn-primary">Neu anlegen</button>
                                </form>
                            <!-- Ende Formular -->
                        </div>
                    </div>
                <!-- ENDE Insert -->

            </div>

        </div>
    </div>
</x-app-layout>

<script src="{{ asset("js/app.js") }}"></script>

Firefox and Chrome are closing my form directly after the example-comp. In my Source-Code there isn't a </form> on this place. I can see this only on my browser console.

Do You Know A Solution For this Issue ?

no, I need your help

ctf0 commented 3 years ago

am sorry i couldnt understand what exactly is the issue, can u create a repo for me to test ?

ctf0 commented 3 years ago

i think i got the issue now, u r using the manager inside a form which wont work, plz check Use-The-Manager-From-A-Modal

the manager have to be outside your form