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