Question

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

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代码，其中提交表单并调用模态

<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() !!}

Answer 1

@BrentConnor，根据您在聊天中的留言，我将您的解决方案作为答案发布。

您似乎一直在使用我在https://stackoverflow.com/a/27868091/3869056中提供的原始代码来阻止您的模态在特定操作发生时打开，即使该操作本身被视为有效触发器。正如你在答案中指出的那样，它实际上打破了打开模态的能力。

如果该子项符合阻止启动该模式的要求，则应该针对该子项false，而不是为该操作返回stopPropagation()。{/ p>

$('.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');
    }
}

对不起，我无法帮助你解决问题，但我很高兴我的建议引导你找到解决方案。：）

验证后JavaScript切换模式显示

1 个答案: