Question

I am working on an asp.net page where I have used JQuery UI dialogue. This dialogue has a submit button. When I click the submit button dialogue closes. I want to call a Webmethod on it. If method returns ture, then I want to close it otherwise I want to keep it open with error message shown.

[Edited]

    <script>

        jQuery(function () {
            var dlg = jQuery("#dialog").dialog({
                draggable: true,
                resizable: true,
                show: 'Transfer',
                hide: 'Transfer',
                width: 320,
                autoOpen: false,
                minHeight: 10,
                minwidth: 10,
                beforeClose: function () {
                    $.ajax({
                        url: "Default.aspx/GetResult",
                        success: function (response) {
                            if (response == true) {
                                ("#dialog").close()
                            }
                            else {
                                alert('asdasdds');
                            }
                        }
                    });


                    return false; //this will stop dialog box to close
                }
            });
            dlg.parent().appendTo(jQuery("form:first"));
        });

    </script>

 <div id="Result">
        Click here for the time.</div>
    <div id="dialog" style="text-align: left; display: none;">
        <asp:Button ID="btnButton" runat="server" Text="Button" OnClick="btnButton_Click" />
    </div>

how to do it. Please suggest.

Regards,
Asif Hameed

Answer 1

You can call webmethod using ajax and then act on it conditionally based on the response. Let your webmethod just return true/false and then you can check this value on the client side.

Execute this code on submit button click and do not close the dialog. Let the success handler decide whether to close it or no.

$.ajax({
    url: "urlOfTheService.asmx/methodName",
    success: function(response){
        if(response == true){
            //Code to close the dialog
        }
        else{
            //Show the error message
        }
    }
});

ajax() reference: http://api.jquery.com/jQuery.ajax/

Update:

Use open event of dialog box to attach the submit handler to form and execute the above code.

        jQuery(function () {
            var dlg = jQuery("#dialog").dialog({
                draggable: true,
                resizable: true,
                show: 'Transfer',
                hide: 'Transfer',
                width: 320,
                autoOpen: false,
                minHeight: 10,
                minwidth: 10,
                open: function(){
                     $(this).find('form')
                     .unbind('submit')
                     .submit(function(){
                          var $form = $(this);
                          $.ajax({
                             url: "urlOfTheService.asmx/methodName",
                             success: function(response){
                                if(response == true){
                                   //Submit the form
                                   $form.unbind('submit')[0].submit();
                                }
                                else{
                                   //Show the error message
                                }
                           }
                         });
                         return false;
                     });
                }
            });
            dlg.parent().appendTo(jQuery("form:first"));
        });