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

时间:2018-06-19 05:51:42

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

我有一个使用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": "->"
}
]
}

错误将指示用于存储可编辑字段编辑值的错误方法,但这不能正确,因为当页面上没有弹出窗口时,它可以正常工作。

如果有人能发现这个问题,我将非常感激。我被埋葬在试图找到冲突超过一周无济于事。

提前致谢。

1 个答案:

答案 0 :(得分:0)

所以我找到了我的问题,这不是JavaScrip冲突。

我在可编辑字段中输入了错误,因此数据库值成功更改的Ajax返回行程跳闸并中断。它只在可编辑的弹出窗口中工作的原因是页面的路由很好。既具有弹出框又具有可编辑弹出框的新页面的路径断开,JavaScript元素也没有错。

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

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