jquery dialogue destroy syntax

104 views Asked by At

I have a dialog box that loads a partial view, called from a number of different views in my MVC 4 app. It has a text area and a small notice of how many characters are remaining in the text area. All works fine on page load, however when the dialog box is closed, whether by the send button or the close button in the dialog titlebar, when it is reopened the '#textarea_feedback' div content disappears until a page reload. I believe I should be using dialog('destroy') but cannot seem to get the syntax right. Either it has no effect or it displays the partialview at the bottom of the page. Please advise, hope I've included enough code to identify the issue. Thanx

   $(document).ready(function () {
    var text_max = 160;
    $('#textarea_feedback').html(text_max + ' characters remaining');
    $('#txtMessage').keyup(function () {
        var text_length = $('#txtMessage').val().length;
        var text_remaining = text_max - text_length;
        $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });


    $('#send').click(function (e) {
        if ($('#txtSMSMessage').val().trim()) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                data: $('form#Composer').serialize(),
                url: '/MyController/MyAction',
                success: function (data) {
                    alert('Sent');
                    $('#Composer').closest("div.ui-dialog-content").dialog("close");
                },
                error: function (a, b, c) {
                    $("#Composer").unblock();
                    alert(b);
                }
            });
            //$('#Composer').closest("div.ui-dialog-content").dialog("destroy");
        }
    });

    //var dialog = $('#Composer').closest("div.ui-dialog-content").dialog();
    //console.debug(dialog);
    //dialog.on("dialogbeforeclose", function (event, ui) {
    //    dialog.dialog('destroy')
    //});

});
1

There are 1 answers

0
Darkloki On BEST ANSWER

Wanted to post answer in case it could help someone else, really was LShetty's comment that lead me in the right direction. Added to the CLOSE function of the Ajax call that created the dialog box:

    $.ajax({
    url: 
      ...
    type: "POST",
    success: function (responseText, textStatus, XMLHttpRequest) {
        dialog.html(responseText);
        dialog.dialog({
            ...
            title: 'Send message',
            open: function () {
               ...
            },
            close: function () {
                $(this).dialog('destroy').remove()
            },
            ...
        });
    }