Question

I’m writing some form validation functions, and I’ve decided to go with jQueryUI for prompting the user because of flexibility.

There is a slight problem tho. I want my functions to return an array which consists of a boolean and a string for my error reporting system. JQueryUI dialogs are asynchronous which means the browser won’t hang and wait for a return value as the native prompt() would.

Here is some sample code:

Validator function:

function verifyTOS_PVM_v2()
{
    verifyTOS_PVM_v2_callback = '';
    if(!empty($('#inputPVM').val())) {
        $('#inputPVM').val(date('d.m.Y', parseFinnishDate($('#inputPVM').val())));
        val = $('#inputPVM').val()
        date = parseFinnishDate($('#inputPVM').val());
        today = today();
        diff = Math.floor((date - today)/60/60/24);
        if(diff <= -14)
        {
            buttons = 
                [
                    {
                        text:"Kyllä",
                        click:function()
                        {
                            $(this).dialog('destroy');
                            verifyTOS_PVM_v2_callback = "Kyllä"
                        }
                    },
                    {
                        text:"Ei",
                        click:function()
                        {
                            $(this).dialog('destroy');
                            verifyTOS_PVM_v2_callback = "Ei"
                        }
                    }
                ]
            jQueryPrompt('Message', 'Koskien päivämäärää...', 400, buttons);
            while(verifyTOS_PVM_v2_callback != "Kyllä" && verifyTOS_PVM_v2_callback != "Ei")
            {
                setTimeout('i = i + 1', 50)
            }
            res = verifyTOS_PVM_v2_callback;
            if(res == "Kyllä")
            {
                error_occured = 2;
                error = 'Message'
            }
            else
            {
                error_occured = 1;
                error = 'Message'
            }
        }
    } else {
        error_occurred = 1;
        error = "Message";
    }
    reterr[0] = error_occurred;
    reterr[1] = error;
    return reterr;
}

Prompt function:

function jQueryPrompt(msg, title, width, buttons)
{
    $('body').append('<div id="jQueryPromptHost"></div>');
    $('#jQueryPromptHost').append(msg);
    $('#jQueryPromptHost').dialog({
        title: title,
        resizable: false,
        width: width,
        daraggable: false,
        modal: true,
        buttons: buttons
    })
}

I have tried polling for a variable and that failed miserably (firefox just hanged and took more memory for itself…)

Do you have any suggestions?

Regards,

Akke

EDIT:

I have picked another approach to this problem. I marked the closest solution as the answer, in case someone else picks his approach. Thank you all!

Answer 1

In your click event handler simply call a function instead of assigning a value.

buttons = [
    {
        text:"Kyllä",
        click: function() {
            $(this).dialog('destroy');
            handleButtonClick("Kyllä");
            //verifyTOS_PVM_v2_callback = "Kyllä"
        }
    },
    {
        text:"Ei",
        click: function() {
            $(this).dialog('destroy');
            handleButtonClick("Ei");
            //verifyTOS_PVM_v2_callback = "Ei"
        }
    }
]

//Somewhere else in the code
var handleButtonClick = function(value) {
    if (value == "Kyllä") {
        ...
    } else if (value == "Ei") {
        ...
    }
};