在webix UI模式中表单数据

时间:2017-01-31 11:37:41

标签: javascript jquery webix

我使用的是Webix UI模式,这就是我使用它的方式:



this.add = function () {
scrollArea.css("overflow", "hidden");
$.ajax({
	type: "GET",
	url: "/detail/create",
	success: function (form) {
		webix.message.keyboard = false;
		webix.modalbox({
			title: "New detail",
			buttons: ["Accept", "Decline"],
			text: form,
			width: 400,
			callback: function (result) {
				switch (result) {
					case "0":
						addDetail();
						break;
					case "1":
						break;
				}
				scrollArea.css("overflow", "auto");
			}
		});
	}
});
function addDetail() {
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	$.ajax({
		type: "POST",
		url: "/detail/store",
		data: $('#detail_add').serialize(),
		contentType: "JSON",
		processData: false,
		success: function () {
		}
	});
}
};


And form's HTML:

<form action="" id="detail_add" method="post">
<input type="text" name="name" placeholder="Name">
<input type="text" name="article" placeholder="Article">
<input type="hidden" name="location_id" placeholder="1">
<input type="hidden" name="_token" value="{{ csrf_token() }}"/>
</form>
&#13;
&#13;
&#13;

当我单击模态中的接受时,我的JSON为空。我该如何解决? 我试图通过console.log获取输入值,但它也是空的。

2 个答案:

答案 0 :(得分:3)

这不是一般的答案,但示例代码不适用于解决问题,因为:

  • 我们不知道什么是scrollArea对象
  • 您尝试实现依赖于我们没有的成功脚本响应的代码
  • 我们没有启动代码的操作按钮

以下代码略有改动,可以展示您的案例:

我正在使用Webix UI模式,这就是我使用它的方式:

scrollArea = $(window.document);
this.add = function() {

  //scrollArea.css("overflow", "hidden");

  $.ajax({
    type: "GET",
    url: "/detail/create",
    beforeSend: function(form) {
      webix.message.keyboard = false;
      webix.modalbox({
        title: "New detail",
        buttons: ["Accept", "Decline"],
        text: form,
        width: 400,
        callback: function(result) {
          switch (result) {
            case "0":
              addDetail();
              break;
            case "1":
              break;
          }
          scrollArea.css("overflow", "auto");
        }
      });
    }
  });

  function addDetail() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $.ajax({
      type: "POST",
      url: "/detail/store",
      data: $('#detail_add').serialize(),
      contentType: "JSON",
      processData: false,
      success: function() {}
    });
  }
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
<script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>

<form action="" id="detail_add" method="post">
  <input type="text" name="name" placeholder="Name">
  <input type="text" name="article" placeholder="Article">
  <input type="hidden" name="location_id" placeholder="1">
  <input type="hidden" name="_token" value="{{ csrf_token() }}" />
  <button onClick="add()">Add</button>
</form>

当我单击模态中的接受时,我的JSON为空。我该如何解决? 我试图通过console.log获取输入值,但它也是空的。

答案 1 :(得分:0)

我找到了解决方法。 这很简单,但我犯了一个错误。 我需要使用

switch (result) {
    case "0":
       addDetail;
       break;
    case "1":
       break;
}

而不是

switch (result) {
    case "0":
       addDetail();
       break;
    case "1":
       break;
}

因为addDetail()立即调用函数,因此我的发送数据是空的