JS/HTML，bootstrap 弹出窗口和可编辑弹出窗口之间的冲突破坏了可编辑的保存数据

Question

我有一个 PHP (Laravel 5.5) 应用程序，它使用 bootstrap 可编辑字段和弹出窗口。弹出框效果很好，可编辑字段也很好用，直到它们与弹出框在同一视图 (blade) 上。

这是我认为的可编辑字段代码：

<a href="#" 
                                    class="assetName" 
                                    data-type="text" 
                                    data-name="split_amount" 
                                    data-url="update-real-row" 
                                    data-pk="{{ $real_split->id }}" 
                                    data-title="Edit Amount" 
                                    data-value="{{$real_split_yours}}">${{number_format($real_split_yours,0)}}
                                    </a></div>

这是我认为的弹出窗口代码：

<a href="#RE" 
                                    data-toggle="popover" 
                                    title="<h3> Tax Analysis for {{$real_asset->real_name}} property </h3>" 
                                    data-html="true" 
                                    data-content="{{$table_html}}">
                                    ${{number_format($after_taxes_value,0)}}
                                </a>

我在包含到视图中的文件中有他们的支持 JavaScript，因此相同的 JavaScript 存在于工作视图（可自行编辑的字段）和损坏的视图（可编辑的字段）中与弹出窗口位于同一页面上时的字段）。这是包含的脚本文件：

<script>

$(document).ready(function() {

$.fn.editable.defaults.mode = 'popup';
$.fn.editable.defaults.send = "always";

  $.fn.editable.defaults.params = function (params) 
  {
   params._token = $("#_token").data("token");
   return params;
  };

  $.fn.editable.defaults.success = function(response, newValue) 
            {
                //if(!response.success) return response.msg;
                window.location.reload();
            };

$('.assetName').editable({

           ajaxOptions: {
             dataType: 'json',
             type: 'post'
           }

           });
});

$('[data-toggle="popover"]').popover({
                    html: true,
                    trigger: 'manual'
                }).click(function(e) {
                    $(this).popover('show');
                    $('.popover-title').append('<button type="button" class="close">&times;</button>');
                    $('.close').click(function(e){
                        $('[data-toggle="popover"]').popover('hide');
                    });
                    e.preventDefault();
                    placement: 'bottom'
                    });

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

</script>

这是支持可编辑字段保存功能的控制器代码，该功能在不存在弹出窗口时起作用：

/**
 * Update the specified resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  \App\real_property_split  $real_property_split
 * @return \Illuminate\Http\Response
 */
public function updateRow(Request $request, real_property_split $real_property_split)
{
    $pk = $request->input('pk');

    $splitRecord = $real_property_split::findOrFail($pk);

    // get column name
    $col = $request->input('name');

    // get new value
    $value = $request->input('value');

    $splitRecord->$col = $value;
    $splitRecord->save();

    return \Response::json(array('status' => 1));
}

这是将可编辑字段连接到控制器的路由：

Route::post('split-scenario/update-real-row', 'RealPropertySplitController@updateRow')->middleware('auth');

我不明白为什么可编辑字段可以完美地工作，更新数据库，直到视图中也有弹出框标记。

这是在可编辑字段中输入新值时出现的错误：

{
"message": "",
"exception": "Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException",
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Routing\RouteCollection.php",
"line": 255,
"trace": [
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Routing\RouteCollection.php",
"line": 242,
"function": "methodNotAllowed",
"class": "Illuminate\Routing\RouteCollection",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Routing\RouteCollection.php",
"line": 176,
"function": "getRouteForMethods",
"class": "Illuminate\Routing\RouteCollection",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Routing\Router.php",
"line": 612,
"function": "match",
"class": "Illuminate\Routing\RouteCollection",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Routing\Router.php",
"line": 601,
"function": "findRoute",
"class": "Illuminate\Routing\Router",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Routing\Router.php",
"line": 590,
"function": "dispatchToRoute",
"class": "Illuminate\Routing\Router",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php",
"line": 176,
"function": "dispatch",
"class": "Illuminate\Routing\Router",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Routing\Pipeline.php",
"line": 30,
"function": "Illuminate\Foundation\Http\{closure}",
"class": "Illuminate\Foundation\Http\Kernel",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\fideloper\proxy\src\TrustProxies.php",
"line": 56,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 149,
"function": "handle",
"class": "Fideloper\Proxy\TrustProxies",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Routing\Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\TransformsRequest.php",
"line": 30,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 149,
"function": "handle",
"class": "Illuminate\Foundation\Http\Middleware\TransformsRequest",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Routing\Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\TransformsRequest.php",
"line": 30,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 149,
"function": "handle",
"class": "Illuminate\Foundation\Http\Middleware\TransformsRequest",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Routing\Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\ValidatePostSize.php",
"line": 27,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 149,
"function": "handle",
"class": "Illuminate\Foundation\Http\Middleware\ValidatePostSize",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Routing\Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode.php",
"line": 46,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 149,
"function": "handle",
"class": "Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Routing\Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 102,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php",
"line": 151,
"function": "then",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php",
"line": 116,
"function": "sendRequestThroughRouter",
"class": "Illuminate\Foundation\Http\Kernel",
"type": "->"
},
{
"file": "C:\xampp\htdocs\DS_dev_01\public\index.php",
"line": 55,
"function": "handle",
"class": "Illuminate\Foundation\Http\Kernel",
"type": "->"
}
]
}

该错误表明用于存储可编辑字段编辑值的方法不正确，但这不可能，因为当页面上没有弹出窗口时它工作得很好。

如果有人能发现问题，我将不胜感激。我一直埋头于此，试图找到冲突一个多星期，但无济于事。

提前致谢。

Answer 1

所以我发现了我的问题，这不是 JavaScrip 冲突。

我在可编辑字段的路线中有一个拼写错误，因此 Ajax return 成功更改数据库值的行程被绊倒并中断。它在只有可编辑弹出窗口的页面中工作的原因是该页面的路由很好。带有弹出窗口和可编辑弹出窗口的新页面有一个损坏的路线，JavaScript 元素没有问题。

不确定这是否对任何人有帮助，因为我最初的问题是在错误的地方寻找答案。但是，将来遇到类似问题的人可能会发现 answer/direction 有帮助。与以往一样，当您 know/figure 知道如何修复时，修复起来又快又简单。但是，如果您不这样做，可能会痛苦很多天。

感谢所有看过我问题的人。

JS/HTML，bootstrap 弹出窗口和可编辑弹出窗口之间的冲突破坏了可编辑的保存数据

JS/HTML, conflict between bootstrap popover and editable popup breaks editable save data

javascript

php

twitter-bootstrap

popover

x-editable