closing jquery ui modal from within another function

Question

again. I have a script that is using the jQuery UI plugin to generate inline modal windows, as such:

function openModal(src, width, title){
    $("#" + src).dialog({
        modal: true,
        width: width,
        title: title,
        resizable: false,
        show: 'fade',
        hide: 'fade'
    });
    $('.ui-widget-overlay').hide().fadeIn();
    return false;
}

$(document).ready(function() {
    $('#newTopicBtn').click(function(e) {
        e.preventDefault();
        openModal('newTopic', 650, 'New Topic');
    });
});

The modal window pops up just as it should.

Most of these modal windows open forms of some sort. The problem is that when the form is submitted, and processed by the script, i can't seem to get the form's modal to close by itself when i use $('#newTopic').dialog("close"):

$('#newTopic_form').bind('submit', function() {
    var error = '';

    var topicTitle = $('input[name=newTopicTitle]').val();
    var topicBody = $('textarea[name=newTopicBody]').val();

    if(topicTitle == '' || topicTitle.length < 2)
    {
        error = error + '<br />You must enter a longer title.';
    }
    if(topicBody == '' || topicBody.length < 2)
    {
        error = error + '<br />You must enter a longer topic.';
    }

    if(error != '')
    {
        $('#newTopicError').css("display","none");
        $('#newTopicError').html(error);
        $('#newTopicError').fadeIn(1000);
    }
    else
    {
        var pageUrl = window.location.search;
        var pattern = /mode=viewcat&id=(\d+)&title/gi;
        var catID = pageUrl.match(pattern);

        var data = 'mode=newTopic&cat_id=' + catID + '&title=' + encodeURIComponent(topicTitle) + '&content=' + encodeURIComponent(topicBody) + '&u=' + usrId;
        $.ajax({
            url: "data.php",
            type: "POST",
            dataType: "json",
            data: data,
            cache: false,
            success: function(data) {
                if(data.response == 'added')
                {
                    $('#newTopicError').css("display", "none");
                    $('#newTopicError').html("You have added your topic.");
                    $('#newTopicError').fadeIn(1000);
                    setInterval(10000, function(){
                        $('#newTopic').dialog("close");
                    });
                }
            }
        });
    }
    return false;
});

The form submits and is processed perfectly fine, and the correct strings are faded into the modal's form response area, but the window never closes.

There is also an issue with my RegEx, as it only returns null instead of the catID, if anyone wants to help out with that one, too. :)

score 3 · Accepted Answer · answered Sep 22 '11 at 19:56

3

I think

setInterval(10000, function(){
    $('#newTopic').dialog("close");
});

should be:

setTimeout(function(){
    $('#newTopic').dialog("close");
}, 10000);

The original code has its parameters in the wrong order, and it says that you want to close the dialog every 10 seconds. The new code has the parameters in the right order, and will only execute once, 10 seconds from being set.

answered Sep 22 '11 at 19:56

Cᴏʀʏ

105,112
20
162
194

The OP may also want to investigate the jquery ui dialog autoOpen property. – BNL Sep 22 '11 at 20:00
@chaoskreator: You could add the function in this answer (http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript/5158301#5158301) to your JS utilities and then use `getParameterByName('id')` to extract the `id` field. You can avoid maintaining the URL patterns this way. – Cᴏʀʏ Sep 22 '11 at 20:34

closing jquery ui modal from within another function

1 Answers1