Блог

может быть, кто-нибудь может помочь мне с моей проблемой? Все, что мне нужно, это показать div с содержимым (схема div на самом деле всегда одинакова, но содержимое (идентификатор, имя и т.д.) Отличается в зависимости от выбора пользователя. Например, пользователь выбирает модуль 1 и ниже показывает модуль один, выбирает модуль 2 и показывает модуль 2. Я предполагаю, что могу сделать это с помощью ajax или jQuery, но все, что я пробовал, не работает должным образом. Моя логика в представлении:

    <script>
        function showSmtpType() {
            var selectBox = document.getElementById('type');
            var userInput = selectBox.options[selectBox.selectedIndex].value;
            @foreach($modules as $module)
            if (userInput == "{{ route("module", ['module' => ($module->id)]) }}"){
                document.getElementById('moduleType').style.visibility ='visible';}
            else {
                document.getElementById('moduleType').style.visibility ='hidden';
            }
            return false;
            @endforeach
        }
    </script>
    <main class="main">
                <div class="container-fluid">
                    <div class="animated fadeIn">
                        <div class="row">
                            <div class="col-sm-6 col-lg-8">
                                <h4 class="head">Module-setup</h4>
                                <div class="col-md-9 col-xl-6">
                                    <span class="head-2">Module:</span>
                                    <select class="dropdownHeader function" id="type" name="type" onchange="return showSmtpType();">
                                        @foreach($modules as $module)
                                            <option value="{{ route("module", ['module' => ($module->id)]) }}">{{$module->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
    {{--Begin of description--}}
                                <div class="card-custom  bg-primary-2" >
<div class="card-body pb-0">
                                    @foreach($modules as $k=>$item)
                                    @if($k ==0)
                                    <div class="btn-group float-right">
                                        <button class="btn btn-transparent dropdown-toggle p-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="icon-settings"></i>
                                        </button>
                                    </div>
                                    <div class="text-value">
                                        @if($item->enabled == 1)
                                        <input checked name="enabled" type="checkbox" value=""><span class="checkbox">
                                            </span>
                                                 @endif
                                                @if ($item->enabled ==0)
                                                <input  name="enabled" type="checkbox" value=""><span class="checkbox"></span>
                                                        @endif
                                         Enabled </span><br/>
                                                    @if($item->active == 1)
                                        <input checked name="active" type="checkbox" value=""><span class="checkbox">
                                                        </span>
                                                            @endif
                                                            @if($item->active == 0)
                                        <input name="active" type="checkbox" value=""><span class="checkbox">
                                                                    @endif
                                                            Active</span>
                                            @endif
                                                @endforeach
                                    </div>
                                    <div id="moduleType" style="visibility: hidden;">
                                        <span style="margin-right: 40px;">Database:</span>
                                        {!! Form::text('database',isset($module->DB)? $module->DB : old('DB'),['placeholder' =>'Database'])!!}
                                        <br/> <br/>
                                        <span style="margin-right: 75px;">Path:</span>
                                        {!! Form::text('path',isset($module->path)? $module->path : old('PATH'),['placeholder' =>'Path'])!!}
                                        <br/><br/>
                                        <span style="margin-right: 5px;">Friendly name:</span>
                                        {!! Form::text('standardname',isset($module->standardname)? $module->standardname : old('DB'),['placeholder' =>'Friendly name'])!!}
                                        <br/><br/>
                                        <span style="margin-right: 20px;">Icon(20x20):</span>
                                        @if(isset($module->icon))
                                            <li style="list-style: none;" class="textarea-field">
                                                <label>
                                                    <span class="label">Image:</span>
                                                </label>
                                                {{ Html::image(asset('/images/img/icons'.$module->icon->path)) }}
                                                {!! Form::hidden('old_image',$module->icon->path) !!}
                                            </li>
  @endif
                                        <li style="list-style: none;" class="text-field">
                                            <div class="input-prepend">
                                                {!! Form::file('image',['class'=>'filestyle', 'data-buttonText'=>'choose image','data-buttonName'=>'image'])!!}
                                            </div>
                                        </li>
                                    </div>
                                </div>
                                <div class="chart-wrapper mt-3 mx-3" style="height:70px;">
                                    <canvas class="chart" id="card-chart1" height="70"></canvas>
                                </div>
                            </div>
{{--End of div with description of module--}}
                        </div>
                    </div>
                </div>
            </div>
        </main>
  

Будем очень признательны! Спасибо!

Вы можете использовать JavaScript для решения этой проблемы. Вам нужно было бы написать функцию, привязанную к тому, что выбирает пользователь, например onSelect, и когда пользователь выбирает опцию, в зависимости от того, какая это опция (вам нужно будет написать некоторую логику), она может раскрыть вашу функциональность, которая находится в скрытом div.

Итак, скройте элемент формы для ответов 1 и 2 в двух отдельных разделах. Вы можете настроить эти div так, чтобы они имели качество:

display:none

который скроет их. Как только они выбрали элемент формы 1 (или 2), покажите соответствующий div, связанный с ним. Вы можете сделать это в JavaScript с помощью:

document.getElementById("formQuestionTwo").style.display = "block";

PHP является серверной частью, поэтому вы не можете изменить то, что находится на стороне клиента.

Значением выбранных опций должен быть не маршрут, а, скорее, идентификатор модуля. Вместо создания множества divs на основе модулей, вы можете присвоить элементам в одном div определенные идентификаторы и использовать jQuery для таргетинга на конкретные элементы и изменения их содержимого.

 <select class="dropdownHeader function" id="type" name="type">
@foreach($modules as $module)
 <option value="{{ $module->id }}">{{$module->name }}</option>
@endforeach
</select>


<script>
// Using JQuery
$('#type').change(function() {
 const modules = {!! $modules !!};
 const type = this.val(); // a constant that holds the value of the selected type
 const module = modules[type]; // a constant that holds the module of the selected type

 // here target the div elements and change its content or manipulate it
 // For instance you have a <span id="status"></span> in the div. You can do
 $('#status').html(module.enabled); // this would change the span content to that of the selected type.

 // In vanilla javascript you can do
 document.getElementById('status').innerHTML = module.enabled;
}