jquery dialog interferes with .net input checkbox checked property - always false

StackOverflow https://stackoverflow.com/questions/2074206

Question

I came across the following given a asp.net page containing

<div id='test'>
  <input type='checkbox' id='ch1' name='ch1' runat=server />
  <input type="button" id="view_test" />
</div>

and the following jquery code to show this div in a dialog

$("#view_test").click(function() {
    $("#test").dialog({ show: 'slide', width: 600, title: 'View Check' });
});

If view_test button was clicked, initializing the dialog, before the form post backs the checkbox ch1.Checked property in .Net is always False. However if you just postback without initializing the dialog it works as expected.

It's the strangest thing...

Was it helpful?

Solution

The jquery dialog is moved in the dom when it's created. After creating the dialog, try moving it back into the form tag:

$("#test").parent().appendTo($("form:first"));

Edit - Here's more complete code:

<script type="text/javascript">
    $(function() {

        $("#view_test").click(function() {
            $("#test").dialog({ show: 'slide', width: 600, title: 'View Check' });
            $("#test").parent().appendTo($("form:first"));
        });
    });
</script>

<body>
    <form id="form1" runat="server">
    <div>
        <div id="test">            
            <input type="checkbox" id="ch1" name="ch1" runat="server" />test
            <input type="button" id="view_test" value="click" />            
        </div>    
        <asp:Button ID="btnSubmit" runat="server" Text="submit" 
            onclick="btnSubmit_Click" />    
    </div>
    </form>
</body>

Code behind:

public partial class Tests_Test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        Response.Write(ch1.Checked.ToString());
    }
}

OTHER TIPS

I don't know the JQuery dialog plugin but I run across this frequently, with every Lightbox/Thickboxclone I've seen until now. Either:

  • The script will copy the DOM elements into the Lightbox area, instead of moving them.

  • The script will move the DOM elements into the Lightbox area, but not move them back into their original position, putting them outside the form.

My bet is the latter happens.

Possible workarounds:

  • put the form into the dialog window (if possible)

  • modifying the dialog script so it stores a reference to the parent element in the DOM objects it moves, and moves them back into the right place when the dialog gets closed.

  • Or use the very simple solution fehays suggests.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top