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

【问题标题】：JS/HTML, conflict between bootstrap popover and editable popup breaks editable save dataJS/HTML，引导弹出窗口和可编辑弹出窗口之间的冲突破坏了可编辑的保存数据
【发布时间】：2018-06-19 05:51:41
【问题描述】：

我有一个使用引导可编辑字段和弹出框的 PHP (Laravel 5.5) 应用程序。弹出框效果很好，可编辑字段也效果很好，直到它们与弹出框位于同一视图（刀片）上。

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

<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": "->"
}
]
}

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

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

提前致谢。

【问题讨论】：

标签： javascript php twitter-bootstrap popover x-editable

【解决方案1】：

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

我在可编辑字段的路径中出现了拼写错误，因此使用成功更改的数据库值的 Ajax 回程发生了故障。它在仅带有可编辑弹出窗口的页面中起作用的原因是该页面的路线很好。带有弹出框和可编辑弹出框的新页面路径中断，JavaScript 元素没有问题。

不确定这是否对任何人有帮助，因为我最初的问题是在错误的地方寻找答案。但是将来被此类事情困扰的人可能会找到有用的答案/方向。与以往一样，当您知道/弄清楚如何修复时，修复将变得快速而简单。但是，如果您不这样做，可能会很痛苦。

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

【讨论】：