简体   繁体   English

提交并保留第一个模态时如何关闭第二个引导模态?

[英]How to close the second bootstrap modal when submit and keep on the first modal?

I am using Laravel 5. I have a page which contains 2 bootstrap modals in 1 page of PHP; 我正在使用Laravel5。我有一个页面,其中包含1页PHP中的2个引导程序模式; modal on modal like in the picture below. 模态上的模态,如下图所示。 My problem is when I click submit on the second modal, it will redirect to the blank page. 我的问题是,当我在第二个模式上单击“提交”时,它将重定向到空白页。 I want that second modal is closed and the first modal is still in there. 我希望关闭第二个模态,而第一个模态仍在那里。 And I am trying using ajax and I am not good at it. 我正在尝试使用Ajax,但我并不擅长。
在此处输入图片说明

This is my submit button on the second modal: 这是我在第二个模式上的提交按钮:

<button type="submit" id="shipmat_btn" class="btn btn-success">Submit</button>

This is my controller code: 这是我的控制器代码:

public function MaterialShipmentAdd(Request $request)
{
    $shipment = new Shipment;
    $shipment->setConnection('SUPPLYCHAIN');
    $shipment->MAT_ID = $request['sip_material_add'];
    $shipment->MAT_NAME = $getmatname[0]->MAT_NAME;
    $shipment->SIP_QUANTITY = $request['sip_quantity_add'];
    $shipment->SIP_CREATED_AT = date('Y-m-d H:i:s');
    $shipment->save();
}

The ajax code: Ajax代码:

$('#shipmat_btn').submit(function(e) {
  $.ajax({
      url: "MaterialShipmentAdd",
      type: "POST",
      cache: false,
      success: function(data){
        $('#myModal2').modal('hide');
      }
  }); 
});

Your question isn't that much clear about your problem yet from I understand, 据我了解,您对您的问题还不太清楚,

The reason you get redirect to a blank page because your form is submitting using HTML. 您重定向到空白页的原因是因为您的表单是使用HTML提交的。 You need to prevent that by adding e.preventDefault() inside $('#shipmat_btn').submit 您需要通过在$('#shipmat_btn').submit添加e.preventDefault()来防止这种情况

You can hide the you first modal when the second modal started to show up by using show event. 当第二个模态开始显示时,可以使用show event隐藏第一个模态。 just like this, 像这样,

$("#myModal2").on('show.bs.modal', function () {
    $('#yourModal1Id').modal('hide');
});

hope this helps! 希望这可以帮助!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM