simplemodal conflict with jhtmlarea

Question

whenever I close my simplemodal dialog, jHtmlArea stops working. My code is very simple $.modal.close();

This happens even if I click the close button on simplemodal dialog.

Thanks for any help.

Edit My app is using ASP.NET MVC3 and the html for the dialog loaded from a button click. This means that I'm re-creating the dialog on each button click. Maybe I shouldn't do this. Can you suggest a better workflow (maybe retrieve raw Json).

I've tried Eric's suggestion to call the richtexteditor (jhtmlarea) from onShow but same results. I've also tried this with another rich text editor (ckeditor) and still same results.

full code below

$(function () {
console.log("beginning ready() for issuesModal");
console.debug("calling tipTip() from ready()..");
$(".tip").tipTip({ maxWidth: "auto", edgeOffset: 10 });

var issuesModal = {
    _targetLink: null,
    _descriptionElem: null,
    _modal: null,
    _modalContainer: $('#basic-modal-content'),
    init: function () {
        console.debug("issuesModal.init()..");

        $("form.edit-issue-form, form.add-issue-form")
                 .submit(function (evt) {
                     evt.preventDefault();
                     hijackForm(this, issuesModal.formLoaded, "html");
                 });
    },
    formLoaded: function (data) {
        console.debug("issuesModal.formLoaded()..");
        issuesModal._modalContainer.html(data);
        issuesModal.doModal(issuesModal._modalContainer);
    },
    doModal: function (elem) {
        console.debug("issuesModal.doModal()..");
        if (issuesModal._modal !== null) {
            $.modal.close();
            issuesModal._modal = null;
        }
        this._modal = $(elem).modal({
            onShow: function (dialog) {
                console.debug("modal form showing..");
                this._descriptionElem = $("#Description");
                 issuesModal.doWysiwyg(this._descriptionElem);
            },
            onClose: function (dialog) {
                console.debug("modal form closing..");
                $.modal.close();
            }
        });
    },
    updateUI: function () {
        console.debug("issuesModal.updateUI()..");
        $(":input[type=submit],[type=reset]").button();

        //$("#issue-name-dropdown").css({ width: 400 }).selectmenu().next().css({ height: 50 })

        $(":input[type=reset]")
        .unbind('click')
        .click(
            function (evt) {
                console.debug("modal form close button clicked..");
                evt.preventDefault();

                $.modal.close();
            }
            );

    },
    doWysiwyg: function (elem) {
        console.debug("issuesModal.doWysiwyg()..");
        $(elem).htmlarea();

    }

};
issuesModal.init();
issuesModal.updateUI();

});

score 0 · Answer 1 · answered Mar 31 '11 at 03:36

You didn't provide any code, so I can only take a guess at the solution...

With the way SimpleModal works, I suggest initializing any 3rd party libraries in the onShow callback.

$('#element').modal({
    onShow: function (d) {
        $('textarea', d.data[0]).jHtmlArea(); // general idea, actual syntax may vary
    }
});

HTH

simplemodal conflict with jhtmlarea

Thanks for any help.

1 Answers1