JQuery output a dynamic control in a div

Question

How do I handle the click of a checkbox to show another control preferrably a user conrtrol (ASP.NET ) dynamically.

Answer 1

I don't know anything about the system you're using but the low down dirty way I'd do this is...

Stick the user control on a blank page of it's own.

When the checkbox is clicked, have JQuery go get the HTML content of the page the user control is on and stick it in the div.

This will result in not-so-neat html in the calling page though.

And is this an asp:CheckBox or an html input?

Answer 2

Are you looking for something like this:

$(function(){
 $('#Control').hide(); //initially hide the control
 $('#checkbox').click(function(){  // bind the checkbox click event
 if ($('#checkbox').attr('checked')) {
  $('#Control').show(); 
 }
 });
});


<mycontrol:UC id="Control" runat="server" />

Answer 3

If you want to create a new object, you can do this:

var checkbox = $("<input type='checkbox' ... />");
$('div#someID').append(checkbox);

Though it sounds like you perhaps want to get the data to append from an AJAX call. I can't quite tell from the question.

Answer 4

Assuming you hide the control with CSS by default you could shorten TStamper's code to something like:

$(function() {
    $('#checkbox').click(function() {
     $('#control').toggle();
    });
});

<mycontrol:UC id="control" runat="server" />

Answer 5

I'm partial to using jquery's taconite plugin. It enables you to return multiple controls from a single ajax call. For a simple show/hide control scenario rendering a hidden control on a page is good enough. If your control is big or changes due to user actions then your best bet is rendering control on the server and using js to update DOM. If you're using jquery for your DOM updates and wish to find control by id use:

$("[id$=controlId]")

This will locate your control even with asp.net prefixes to the id. I'm working on a simple c# wrapper for the taconite plugin which should enable you to use the plugin more easily (sample web site coming soon).