Jquery Dialog box

[primagic]

I have a .net page.

From code behind I am calling some jquery dialog boxes like:

If A = B Then

ScriptManager.RegisterClientScriptBlock(Me, [GetType](), "A", "success();", True)

Else

 ScriptManager.RegisterClientScriptBlock(Me, [GetType](), "B", "invalidclientcode();", True)

End If

My dialog boxes appear but they all appear one after the other. How do I solve this

Here is my dialog box code:

<div id="dialog-sucessmessage" title="Message saved">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your message has been saved
</p>
</div>


<div id="dialog-invalidclientcode" title="Invalid Client Code">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Invalid Client Code retrieved. Only certain client codes are allowed.
</p>
</div>

 

[jpadie]

Where are the two functions success() and invalid client code()? And the code that creates the dialogs?

 

[primagic]

The functions are in the head tag and the dialog code is in the body tag

 

[jpadie]

I meant that you would need to post them here for us to be able to point out where you are going wrong. Or point us to a page where we can see the issue in action.

 

[primagic]

Sorry.

Code for the dialog boxes was in a previous post

<div id="dialog-sucessmessage" title="Message saved">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your message has been saved
</p>
</div>


<div id="dialog-invalidclientcode" title="Invalid Client Code">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Invalid Client Code retrieved. Only certain client codes are allowed.
</p>
</div>

Javascript for the boxes

<script>
         $(function success() {
             $("#dialog-sucessmessage").dialog({
                 modal: false,
                 autoload: false,
                 buttons: {
                     Ok: function () {
                         $(this).dialog("close");
                     }
                 }
             });
         });
    </script>

    <script>
        $(function invalidclientcode() {
            $("#dialog-invalidclientcode").dialog({
                modal: false,
                autoload: false,
                buttons: {
                    Ok: function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    </script>

 

[jpadie]

See this jsFiddle

 

[primagic]

That's great. Thanks

But I need to call these actions from one button.

At the moment I am using (in code behind)

If A = B Then

ScriptManager.RegisterClientScriptBlock(Me, [GetType](), "A", "success();", True)

Else

 ScriptManager.RegisterClientScriptBlock(Me, [GetType](), "B", "invalidclientcode();", True)

End If

 

[primagic]

Also when I add your code to my page, the dialog boxes are appearing as text without the styling

 

[jpadie]

remember that you need to load the jquery UI css and you need to specify inline or in your stylesheet that the dialogs are set to display:none.

the buttons are just to show you how it works. your client side code can call success() or the opposite as it wants. of course this must be done client side, not server side. if you want it to be serverside then there is no point in spawning both dialogs. just output what you want and set the autoOpen to true. no need to call success() or whatever. but typically this type of UI is best ajaxed.