CODEWITHSUNDEEP
jqueryasp.netjquery-uijquery-ui-dialog
e-on
e-on

Reputation: 1605

possible to use jquery dialog with asp.net user control?

I'm trying to open a user control in a jquery dialog popup but when I do, none of the server side events fire, and I'm guessing the UpdatePanels will also be disabled.

Anyone come across this before and is there a way around this to ensure that the user control works as expected?

This is the code I have for it. The user control itself is an image uploader and has three update panels, and a number of buttons/imagebuttons with server side click events.

<a href="#" id="imgDialog">Open Gallery</a>  
<div id="ImagePopup" style="display:none">
    <uc1:ImageGallery ID="ImageGallery1" ImageSectionID="1" runat="server" />    
</div>  
<script type="text/javascript">
    $(document).ready(function () {

        $("#imgDialog").click(, function (e) {
            $('#ImagePopup').dialog({
                bgiframe: true,
                modal: true,
                show: ("slide", { direction: "down" }, 200),
                hide: ("slide", { direction: "up" }, 200),
                showOpt: { direction: 'up' },
                width: 700,
                close: function (event, ui) {
                }
            });
            e.preventDefault();
        });
    });
</script>

I'm happy to move the control to an aspx page and use an iframe if necessary, but wanted to check first before I do.

Many thanks

Upvotes: 1

Views: 2961

Answers (2)

daniloquio
daniloquio

Reputation: 3902

You need to append dialog to the Form in order for the events to fire. Do it by adding the appendTo line as in the following code:

$("#imgDialog").click(, function (e) {
            $('#ImagePopup').dialog({
                bgiframe: true,
                ...........
                close: function (event, ui) {
                }
            });
            e.preventDefault();
            $('#ImagePopup').parent().appendTo(jQuery("form:first"));
        });

I have used Juery UI dialog with server controls, including controls for file uploading. I assure you it is possible.

I'm not sure but maybe your dialog will open only once. If that happen, try defining the close function like:

close: function (event, ui) {
                    $(this).remove();
                    }

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55740

The problem is when you put the server controls in the jQuery popup it will remove the controls from the form runat="server" and place it outside the form..

So because your controls are not inside the form runat="server" the server side events will not fire.

One workaround for this kind of issues is explicitly clone the wrapper after the usercontrol is loaded and append it to the form runat="server" . This should solve your problem..

You can check this with Firebug or any developer tools that the popup will be outside the form..

Upvotes: 0

Related Questions