Dailog Box not passing value after the Ajax call

Question

I am opening a dialog box on click and it has a div with textarea in it. On the same page I use an ajax call to load content in another div.

After I make the ajax call, the text field in the dialog box doesn't pass the value on submit but it works perfectly fine, before the ajax call.

Jquery

$(document).ready(function() {

  $("#popup").dialog({
    autoOpen: false,
    title: "Popup",
    show: {
      effect: "fade",
      duration: 150
    },
    hide: {
      effect: "fade",
      duration: 150
    },

    clickOutside: true,
    clickOutsideTrigger: "#btn"
  });

  $("#btn").click(function() {
    $("#popup").dialog("open");
  });
});

$.widget("ui.dialog", $.ui.dialog, {
  options: {
    clickOutside: false,
    clickOutsideTrigger: ""
  },
  open: function() {
    var clickOutsideTriggerEl = $(this.options.clickOutsideTrigger);
    var that = this;

    if (this.options.clickOutside) {
      $(document).on("click.ui.dialogClickOutside" + that.eventNamespace, function(event) {
        if ($(event.target).closest($(clickOutsideTriggerEl)).length == 0 && $(event.target).closest($(that.uiDialog)).length == 0) {
          that.close();
        }
      });
    }
    this._super();
  },

  close: function() {
    var that = this;
    $(document).off("click.ui.dialogClickOutside" + that.eventNamespace);
    this._super();
  },
});

Html

<button type="button" id="btn>Open Popup</button>
<div id="popup" style="display:none;">
<textarea id="textID" style="resize:none"></textarea></div>

Ajax Call causing the problem

$('.link').on('click', function (e) {
    var load= $(this).attr('href');
    var $this = $(this);
    if(load == "#open") {
        $.ajax({
            type: 'post',
            url: "/page/view/" + $(this).parents("[data-id]").attr("data-id"),
            complete: function (event) {
                $("#content").contents().remove();
                $("#content").append(event.responseText);
            }
        });
    }
    });

With the shown code, I don't see the form or the ajax call. But I see that a "click ouside" is closing the dialog. You should *probably* add a line there, to "copy" the textarea content to an hidden field within the form to submit. — Louys Patrice Bessette, Jul 08 '16 at 16:52
is already within the form, I am submitting the form on enter using another ajax call, It all works fine util I open another div using an ajax call, the form still submits but the value textarea is either empty or whatever was typed in with the last submission — DN0300, Jul 08 '16 at 16:59
You should show more code... Can't figure out how you use your ajax calls. — Louys Patrice Bessette, Jul 08 '16 at 17:03
Just updated the question and added the ajax call causing the issue, this ajax call loads content into a div and after that my form doest work properly — DN0300, Jul 08 '16 at 17:09
Ok... So the problem is the textarea's text not passed into this 2nd ajax? — Louys Patrice Bessette, Jul 08 '16 at 17:19
Yea, so textarea's text is not being passed on to the 2nd ajax (used to submit the form). Fields that are outside the dailog work fine even after the 1st ajax call but textarea that is in dialog doesn't work after the first ajax call. — DN0300, Jul 08 '16 at 17:23
In this 2nd ajax call... You reach `/page/view/[data-id]`... That's all. There is no data sent. You should probably do something like `data: $('#theForm').serialize()` like in [this answer](http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — Louys Patrice Bessette, Jul 08 '16 at 17:28
Definitely pay close attention to two things: (1) use the browser's debugging tools to **LQQK AT** what is *actually* being sent between client and server. Then, (2) watch the JavaScript error-logs. (As you are debugging your code, freely add statements that write more entries to this log.) — Mike Robinson, Jul 08 '16 at 18:37

Dailog Box not passing value after the Ajax call

0 Answers0