Form data in webix UI modal

Question

I'm using Webix UI modal, this is how i use it:

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>

When i click Accept in modal, my JSON is empty. How can i fix it? I was trying to get input's value by console.log, but it's empty too.

https://jsfiddle.net/fmm1q6bb/ But i can't place controller here — Svitavsky, Feb 03 '17 at 11:00
I can't get data from this form, because it's appearing dynamically and idk why i can't, because without webix works fine — Svitavsky, Feb 03 '17 at 12:19
Just commented the scrollArea, because there was no object in the fiddle and I think it's working https://jsfiddle.net/6eodk22b/2/ — sadlyblue, Feb 03 '17 at 13:05

score 3 · Answer 1 · answered Feb 05 '17 at 15:32

It's not an answer in general but the example code is not applicable to resolve something because:

We don't know what is scrollArea object
You try to implement code that is depending on successful script response we don't have
We don't have a button with an action to start your code

Here is the code slightly changed to work and to demonstrate your case:

I'm using Webix UI modal, this is how i use it:

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>

When i click Accept in modal, my JSON is empty. How can i fix it? I was trying to get input's value by console.log, but it's empty too.

score 0 · Accepted Answer · answered Feb 07 '17 at 20:37

I have found a solution for this. It's really simple, but i have done a mistake. I was need to use

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

Instead of

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

Because addDetail() calling function immediately, because of this my sending data was empty

Form data in webix UI modal

2 Answers2