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. 🙂

Answer 1

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.