模态引导程序立即打开和关闭
[英]Modal bootstrap open and close immediately
问题描述
I created a filter search in JavaScript to get orders from my app, but when the search get results, I click in modal panel and it open and close immediately, I searched about that and find something related about conflict in JavaScript. 
我在JavaScript中创建了一个过滤器搜索来从我的应用中获取订单，但是当搜索得到结果时，我在模式面板中单击，然后立即打开和关闭，我进行了搜索并找到了与JavaScript冲突有关的内容。
Is not the first time what that happened, how to find this conflicts more fast? 这不是第一次发生什么事，如何更快地找到这种冲突？ Is have a software about that? 是否有与此相关的软件？ I try to use Fiddler, but I haved no success. 我尝试使用Fiddler，但没有成功。
Thats is my code: 那就是我的代码：
Order view 订单视图
<!DOCTYPE HTML>
@extends('admin/layouts/default')
{{-- Page title --}}
@section('title')
Comércio Urbano - Pedidos
@parent
@stop
{{-- Page level styles --}}
@section('header_styles')
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
@stop
{{-- Page content --}}
@section('content')
<section class="content-header">
<!-- section starts -->
<h1> <i class="glyphicon glyphicon-file"></i> Pedidos</h1>
<ul class="breadcrumb">
<li>
<a href="{{ route('admin.dashboard') }}">
<i class="livicon" data-name="home" data-size="14" data-loop="true"></i>
Início
</a>
</li>
<li>
<a href="#">Pedidos </a>
</li>
<li class="active">Listagem de pedidos</li>
</ul>
</section>
<section class="content">
<div class="row">
<center>
<table id="seachTable" style="margin: 1%;">
<tr>
<th>
<label for="marketplaceTitle">Marketplace</label>
<select class="form-control" name="marketplace" id="marketplace">
<option value="" @if(session('marketplace') === "") selected @endif>Selecione</option>
<option value="b2w" @if(session('marketplace') === "b2w") selected @endif>B2W</option>
<option value="Mercado Livre" @if(session('marketplace') === "Mercado Livre") selected @endif>Mercado Livre</option>
</select>
</th>
<th>
<label for="codigoprodutoTitle">Código (Produto)</label>
<input type="text" class="form-control" name="codigoproduto" id="codigoproduto" value="{{ session('codigoproduto') }}">
</th>
<th>
<label for="codigopedidoTitle">Código (Pedido)</label>
<input type="text" class="form-control" name="codigopedido" id="codigopedido" value="{{ session('codigopedido') }}">
</th>
<th>
<label for="StatusTitle">Status</label>
<select class="form-control" name="statusorder" id="statusorder">
<option value="" @if(session('statusorder') === "") selected @endif>SELECIONE</option>
<option value="confirmed" @if(session('statusorder') === "confirmed") selected @endif>CONFIRMADO</option>
<option value="CANCELED" @if(session('statusorder') === "CANCELED") selected @endif>CANCELADO</option>
<option value="PROCESSING" @if(session('statusorder') === "CANCELED") selected @endif>PROCESSANDO</option>
<option value="NOT_APPROVED" @if(session('statusorder') === "NOT_APPROVED") selected @endif>NÃO APROVADO</option>
<option value="paid" @if(session('statusorder') === "paid") selected @endif>PAGO</option>
</select>
</th>
<th>
<label for="DataTitle">Data</label>
<input type="date" class="form-control" name="dateaproved" id="dateaproved" value="{{ session('dateaproved') }}">
</th>
<th>
<label for="TotalTitle">Total</label>
<input type="text" class="form-control" name="totalorder" id="totalorder" placeholder="R$" value="{{ session('totalorder') }}">
</th>
</tr>
</table>
<button id="clean-form-button" class="btn btn-danger" style="margin: 1%;"><i class="glyphicon glyphicon-erase" ></i> Limpar Filtro </button>
</center>
<div class="tab-content">
<div id="order-table">
@include('admin.order-table')
</div>
{!! csrf_field() !!}
</div>
</div>
</section>
@stop
@section('footer_scripts')
<script>
$(window).load(function(){
$('#cover').fadeOut(1000);
})
</script>
<script src="{{ asset('assets/js/OrderSearch.js') }}"></script>
<script>
var postPesquisa = '{{ route('order::pesquisaPost') }}';
var pesquisaRequest = {
'model': '{{ session('model') }}',
'descricao':'{{session('descricao')}}',
'distributor': '{{ session('distributor') }}',
'status': '{{ session('status') }}',
'stock' : '{{ session('stock') }}',
'categoria' :'{{session('categoria')}}',
'image' : '{{ session('image') }}',
};
</script>
@stop
Order-Table view 订单表视图
<meta name="csrf-token" content="{{ csrf_token() }}" />
<div class="modal-loader"><!-- Place at bottom of page --></div>
<link rel="stylesheet" href="{{asset('assets/css/master.css')}}" />
<center>
<h4> <b style="color: #c0c0c0">{{$order->total()}} resultados</b> </h4>
</center>
<table class="table table-striped" style="padding: 1%;margin:1%; width: 97%">
<tr>
<th>Marketplace</th>
<th>Codigo Produto</th>
<th>Código Pedido</th>
<th>Status</th>
<th>Aprovação</th>
<th>Quantidade</th>
<th>Total</th>
<th style="width: 50px;">Relatório</th>
<th>PDF</th>
</tr>
@foreach($order as $orders)
<tr>
<td><span class="label label-primary">{{$orders->erp_marketplace}}</span></td>
<td><input type="text" class="form-control" name="codigoproduto" value="{{$orders->erp_createdid}}" style="max-width: 70%;" readonly> </td>
<td><input type="text" class="form-control" name="codigoproduto" value="{{$orders->erp_site}}" style="max-width: 70%;" readonly></td>
<td><span class="label label-default">{{ App\Helpers\OrderStatusHelper::$status[$orders->erp_status]}}</span></td>
<td>{{$orders->erp_orderaprove}}</td>
<td>{{$orders->erp_orderquantity}}</td>
<td>R${{$orders->erp_totalvalue}}</td>
<input type="hidden" name="getCode" value="{{$orders->erp_createdid}}" />
<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> <i class="glyphicon glyphicon-eye-open"></i></button></td>
<input type="hidden" name="getCode" value="{{$orders->erp_createdid}}" />
<td><button class="btn btn-danger" onclick= 'submitButton()' type="submit"><i class="glyphicon glyphicon-file"></i>PDF</button></td>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Detalhes</h4>
</div>
<div class="modal-body">
TESTE
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</tr>
@endforeach
</table>
And my default layout 而我的默认布局
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="UTF-8">
<title>
@section('title')
Comércio Urbano - Administração
@show
</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<script src="/assets/css/painel.css"></script>
<![endif]-->
<!-- global css -->
<link href="{{ asset('assets/css/app.css') }}" rel="stylesheet" type="text/css"/>
<!-- font Awesome -->
<!-- end of global css -->
<!--page level css-->
@yield('header_styles')
<!--end of page level css-->
</head>
<body class="skin-josh">
<header class="header">
<a href="{{ route('admin.dashboard') }}" class="logo">
<img src="{{ asset('assets/img/logo.png') }}" alt="logo">
</a>
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<div>
<a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
<div class="responsive_nav"></div>
</a>
</div>
<div class="navbar-right">
<ul class="nav navbar-nav">
@include('admin.layouts._messages')
@include('admin.layouts._notifications')
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
@if(Sentinel::getUser()->pic)
<img src="{!! url('/').'/uploads/users/'.Sentinel::getUser()->pic !!}" alt="img" height="35px" width="35px"
class="img-circle img-responsive pull-left"/>
@else
<img src="{!! asset('assets/img/authors/avatar3.jpg') !!} " width="35"
class="img-circle img-responsive pull-left" height="35" alt="riot">
@endif
<div class="riot">
<div>
<p class="user_name_max">{{ Sentinel::getUser()->first_name }} {{ Sentinel::getUser()->last_name }}</p>
<span>
<i class="caret"></i>
</span>
</div>
</div>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header bg-light-blue">
@if(Sentinel::getUser()->pic)
<img src="{!! url('/').'/uploads/users/'.Sentinel::getUser()->pic !!}" alt="img"
class="img-circle img-bor"/>
@else
<img src="{!! asset('assets/img/authors/avatar3.jpg') !!}"
class="img-responsive img-circle" alt="User Image">
@endif
<p class="topprofiletext">{{ Sentinel::getUser()->first_name }} {{ Sentinel::getUser()->last_name }}</p>
</li>
<!-- Menu Body -->
<li>
<a href="{{ URL::route('admin.users.show',Sentinel::getUser()->id) }}">
<i class="livicon" data-name="user" data-s="18"></i>
My Profile
</a>
</li>
<li role="presentation"></li>
<li>
<a href="{{ route('admin.users.edit', Sentinel::getUser()->id) }}">
<i class="livicon" data-name="gears" data-s="18"></i>
Account Settings
</a>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="{{ URL::route('lockscreen',Sentinel::getUser()->id) }}">
<i class="livicon" data-name="lock" data-size="16" data-c="#555555" data-hc="#555555" data-loop="true"></i>
Lock
</a>
</div>
<div class="pull-right">
<a href="{{ URL::to('admin/logout') }}">
<i class="livicon" data-name="sign-out" data-s="18"></i>
Logout
</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
<!-- Left side column. contains the logo and sidebar -->
<aside class="left-side sidebar-offcanvas">
<section class="sidebar ">
<div class="page-sidebar sidebar-nav">
<div class="nav_icons">
<ul class="sidebar_threeicons">
<li>
<a href="{{ URL::to('admin/product') }}">
<i class="livicon" data-name="table" title="Produtos" data-loop="true"
data-color="#418BCA" data-hc="#418BCA" data-s="25"></i>
</a>
</li>
<li>
<a href="{{ URL::to('admin/tasks') }}">
<i class="livicon" data-name="linechart" title="Finanças" data-loop="true"
data-color="#FFF" data-hc="#FFF" data-s="25"></i>
</a>
</li>
<li>
<a href="{{ URL::to('admin/gallery') }}">
<i class="livicon" data-name="piggybank" title="Vendas" data-loop="true"
data-color="#8FBC8F" data-hc="#8FBC8F" data-s="25"></i>
</a>
</li>
<li>
<a href="{{ URL::to('admin/users') }}">
<i class="livicon" data-name="sky-dish" title="Integração" data-loop="true"
data-color="#E0FFFF" data-hc="#E0FFFF" data-s="25"></i>
</a>
</li>
</ul>
</div>
<div class="clearfix"></div>
<!-- BEGIN SIDEBAR MENU -->
@include('admin.layouts._left_menu')
<!-- END SIDEBAR MENU -->
</div>
</section>
</aside>
<aside class="right-side">
<!-- Notifications -->
@include('notifications')
<!-- Content -->
@yield('content')
</aside>
<!-- right-side -->
</div>
<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" style="border-radius: 50%;"
data-toggle="tooltip" data-placement="left">
<i class="livicon" data-name="plane-up" data-size="18" data-loop="true" data-c="#fff" data-hc="white"></i>
</a>
<!-- global js -->
<script src="{{ asset('assets/js/jquery.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/js/app.js') }}" type="text/javascript"></script>
<script src="//cdn.bootcss.com/summernote/0.5.0/summernote.js"></script>
<script src="{{ asset('assets/js/painel.js') }}" type="text/javascript"></script>
<!-- Latest compiled and minified CSS -->
<script>
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
</script>
<!-- end of global js -->
<!-- begin page level js -->
@yield('footer_scripts')
<!-- end page level js -->
</body>
</html>
I realy try to find this conflicts, but I not have success. 我确实试图找到这种冲突，但是我没有成功。 Any Suggestion? 有什么建议吗？
1 个解决方案
解决方案1
0
I think the problem is in your foreach loop. 我认为问题出在您的foreach循环中。 Every table row has a button that targets the same modal id. 每个表格行都有一个针对相同模式ID的按钮。
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> <i class="glyphicon glyphicon-eye-open"></i></button>
</td>
Try appending the order id to the modal id and the modal idea and the button attribute that targets the modal to make them unique. 尝试将订单ID附加到模式ID，模式概念和针对模式的按钮属性以使其唯一。
Better still, remove the modal from the table rows and only have one one the page then populate it with js when you click a table row. 更好的是，从表格行中删除模式，只在页面上放一个模态，然后在单击表格行时用js填充它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
打开和关闭引导模式 - Open and close bootstrap modal
在模态框外关闭/打开引导模态？ - Close/Open Bootstrap Modal outside modal box?
如何关闭和打开像Bootstrap这样的模态 - How to close & open a modal like Bootstrap
轻击关闭时，引导模态弹出窗口打开 - Bootstrap modal popup open when tap close
如何打开和关闭反应引导模式？ - How to open & close react-bootstrap modal?
Bootstrap 模式：关闭当前，打开新 - Bootstrap modal: close current, open new
如何修复在单击按钮打开后立即关闭的模式弹出窗口 - How to fix modal popup that close immediately after click button to open
关闭当前模态后，打开新模态（引导程序） - Open new modal after close current modal (bootstrap)
打开窗户并立即关闭 - Open window and close immediately
Bootstrap 模式只打开和关闭一次然后它不起作用 - Bootstrap modal open and close only one time then it does not work
相关标签