Question

我有一个使用bootstrap可编辑字段和弹出窗口的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>

以下是我视图中的popover代码：

<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');

我无法弄清楚为什么可编辑字段可以正常工作，更新数据库，直到视图中还包含popover标记。

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

{
"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元素也没有错。

由于我的原始问题是在错误的位置寻找答案，因此不确定这是否对任何人都有帮助。但是，将来某个被此类问题困扰的人可能会找到有用的答案/方向。与以往一样，当您知道/了解如何进行修复时，此修复既快速又容易。但是，如果不这样做，可能会很痛苦。

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

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

1 个答案: