验证后的JavaScript切换模式显示 [英] JavaScript toggle modal show after validation

问题描述

我正在通过模式提交表单.根据用户输入，一些数据将需要发送到模态.我需要在加载模态之前验证数据.如果未选择任何订单，当前代码将阻止显示模式，但是一旦用户选择了一些订单并重新提交表单，该模式仍然不会显示.

I'm submitting a form through a modal. Based on user input, some data will need sent to the modal. I need to validate the data before loading the modal. The current code prevents showing the modal if no orders are selected, but once the user selects some orders and resubmits the form, the modal still doesn't show.

JS

function batchHoldModalLauncher($hold_name){

// get modal id
var modal_id = "#"+$hold_name+"_modal_id";

// check if any orders are selected
if ($("#order_hold_table_body input:checkbox:checked").length > 0)
{
    $(modal_id).modal('show');
}
else
{
    // no boxes checked
    $('.modal').on('show.bs.modal', function() {
        return false;
    });

    alert('Choose some orders to put on hold');
}
}

Laravel PHP代码，其中提交了表单并调用了模态

Laravel PHP Code where form is submitted and modal is called

<div class="col-md-3" style="margin-top: 20px;">
{!! Form::open(['url' => '/hold', 'method' => 'POST', 'class' => 'form-inline']) !!}
<h4>
    Orders for Batch {{ $batch->id }}
    <div class="btn-group">
        <button type="button" class="btn btn-sm btn-danger dropdown-toggle" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
            Hold <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-danger">
            @foreach($holds as $hold)
                <?php $hold_name = str_replace(' ', '', $hold->name); ?>
                <li><a href="#" data-toggle="modal" onclick="batchHoldModalLauncher('{{ $hold_name  }}')"
                       data-target="#modal{{ $hold_name }}">{{ $hold->name }}</a></li>
            @endforeach
        </ul>
    </div>
</h4>
<!-- Show each order in batch and allow user to place orders on hold -->
<table class="table table-striped" id="order_hold_table">
    <thead>
    <th>Order Number</th>
    <th>Hold
        <!-- de/select all checkboxes -->
        {!! Form::checkbox('hold_toggle', null, false, [
            'class'=>'toggle-button',
            'style'=>'float:right'
        ]) !!}</th>
    </thead>

    <tbody id="order_hold_table_body">
    @foreach($orders as $o)
        <tr>
            <td>
                @if($type == 'receiving')
                    {{ $o->id }}
                @elseif($type == 'sales')
                    {{ $o->order_number }}
                @endif
            </td>
            <td>
                {!! Form::checkbox('hold[]', $o->id, false, ['style'=>'float:right']) !!}
            </td>
        </tr>
    @endforeach
    </tbody>
</table>
{!! Form::close() !!}

推荐答案

@BrentConnor，根据您在聊天室中的消息，我正在将您的解决方案作为答案.

@BrentConnor, Per your message in the chat, I'm posting your solution as an answer.

您似乎一直在使用我在 https://stackoverflow.com/a/27868091/3869056中提供的原始代码，以防止发生特定动作时打开模态，即使该动作固有地被认为是有效的触发器也是如此.正如您在我的回答中指出的那样，它实际上破坏了打开模式的能力.

It appears that you had been using the original code I had provided in https://stackoverflow.com/a/27868091/3869056 to stop your modals from opening when a particular action occurs, even if that action inherently is consider a valid trigger. As you pointed out with my answer, it actually broke the ability to open modals.

而不是返回操作的false，而是应该将父级的stopPropagation()定位到孩子以进行测试，以使其符合防止启动模态的要求.

Rather than returning false for the action, you should stopPropagation() of the parent while targeting the child for testing if it meets the requirements for preventing the launch of the modal.

$('.modal_launcher').click(function(e) {
    // check if any orders are selected
    if($("#order_hold_table_body input:checkbox:checked").length > 0) {
        // append order numbers to the appropriate hold modal
    } else {
        // no orders selected -> alert user & prevent modal.
        e.stopPropagation();
        alert('Choose some orders to put on hold');
    }
}

很抱歉，我一直没有那么积极地帮助您解决问题，但是我很高兴我的建议将您引向了解决方案. :)

I'm sorry I couldn't have been a bit more active in helping you to sort it out, but I'm glad my advice led you to the solution. :)

这篇关于验证后的JavaScript切换模式显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！