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

Question

我有一个使用引导可编辑字段和弹出窗口的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  IlluminateHttpRequest  $request
* @param  Appreal_property_split  $real_property_split
* @return IlluminateHttpResponse
*/
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 回程跳闸并中断。它在只有可编辑弹出窗口的页面中工作的原因是该页面的路线很好。同时带有弹出框和可编辑弹出窗口的新页面有一个断开的路线，JavaScript元素没有任何问题。

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

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