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

Question

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

daniloquio · Accepted Answer · 2012-10-09 20:31:40Z

1

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();
                    }

edited Oct 9, 2012 at 20:31

answered Oct 9, 2012 at 20:24

daniloquio

3,9232 gold badges41 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sushanth -- · Accepted Answer · 2012-10-09 20:01:35Z

0

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..

answered Oct 9, 2012 at 20:01

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

3 Comments

e-on Over a year ago

Yes you're spot on - it has been created outside the form. How would I explicity clone the wrapper?

Sushanth -- Over a year ago

I used clone which is a wrong word here .. Select the modalpopup and append it inside the form..

Sushanth -- Over a year ago

$('#mdpopup').appendTo('form')

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related