Question

I am trying to get the Jquery UI modal dialog to take over after an autocomplete item is selected. I have everything popping up as excepted but there is code being ran after the modal dialog is up. In the end I want to have this dialog popup and react based on the button.

Select from auto-complete:

        select: function( event, ui ) {
        if(ui.item.squad != '0'){
            console.info('popup');
            var choice=null;

            $( "#dialog-confirm" ).dialog({
                resizable: false,
                height:140,
                modal: true,
                buttons: {
                    Cancel: function() {
                        choice = false;
                        $( this ).dialog( "close" );
                    },
                    "Move Shooter": function() {
                        choice = true;
                        $( this ).dialog( "close" );

                    }
                }
            });
            if(!choice){
                console.info($(this));
                $(this).text("");
                $(this).val("");
                $(this).attr("name", "");
                $(this).attr("value", "");
                console.info("false");
                return;
            }
        }

Most of the code has been taken from jquery ui here.

When I run this code I thought it would stop running code until a button was pressed but as you can see here the line that prints false to the console is printed.

Answer 1

Your code wont work as it will execute that entire block and return. What you want todo is define a function that is executed once the user has made their choice. Essentially you would do this by moving the if statement you have under the dialog code to its own function and then call this function as part of your button handler code.

Example:

Define the callback somewhere:

function handleDialogResponse(choice) {
    if(!choice){
        console.info($(this));
        $(this).text("");
        $(this).val("");
        $(this).attr("name", "");
        $(this).attr("value", "");
        console.info("false");
    }
}

Then change your dialog button code to something like this:

buttons: {
    Cancel: function() {
        $( this ).dialog( "close" );

        handleDialogResponse(false);
    },
    "Move Shooter": function() {
        $( this ).dialog( "close" );

        handleDialogResponse(true);
    }
}