模态引导程序立即打开和关闭
[英]Modal bootstrap open and close immediately
问题描述
我在JavaScript中创建了一个过滤器搜索来从我的应用中获取订单，但是当搜索得到结果时，我在模式面板中单击，然后立即打开和关闭，我进行了搜索并找到了与JavaScript冲突有关的内容。
这不是第一次发生什么事，如何更快地找到这种冲突？ 是否有与此相关的软件？ 我尝试使用Fiddler，但没有成功。
那就是我的代码：
订单视图
<!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
订单表视图
<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>
而我的默认布局
<!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>
我确实试图找到这种冲突，但是我没有成功。 有什么建议吗？
1 个解决方案
解决方案1
0
我认为问题出在您的foreach循环中。 每个表格行都有一个针对相同模式ID的按钮。
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> <i class="glyphicon glyphicon-eye-open"></i></button>
</td>
尝试将订单ID附加到模式ID，模式概念和针对模式的按钮属性以使其唯一。
更好的是，从表格行中删除模式，只在页面上放一个模态，然后在单击表格行时用js填充它。
打开和关闭引导模式
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.