Question

What I’m looking for is some references or documents which provide information on performing jQuery and AJAX tricks for adding multiple inputs to a form at the click of a button. A great example would be Google’s Gmail client, which allows for the addition of adding multiple attachments to an email. The implementation behind that allows for a large amount of input fields which may appear out of thin air at the click of a button.

Answer 1

Ok, kinda vague but i’ll have a go.

What you can do is three things.

1) Clone a section of the form using jQuery and then append the clone where you want it to go.

2) Simply add the new controls using jQuery native.

3) Call an ashx file which in turn returns a web user control and then append that to where you want it to be.

So for item 3;

        $.get('/UserControls/MyASHXFile.ashx?', {}, function (data) {
            //code here to take the variable 'data' and append to a part of the form
        });

Now the ashx;

public class PublishPricingCalculator : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
            context.Response.Write(ViewManager.RenderView("/UserControls/MyUserControl.ascx"));
    }
}

Use this link http://weblogs.asp.net/scottgu/archive/2006/10/22/Tip_2F00_Trick_3A00_-Cool-UI-Templating-Technique-to-use-with-ASP.NET-AJAX-for-non_2D00_UpdatePanel-scenarios.aspx to get the code for ViewManager and how to return a view from an ashx file.

I really hope this helps you

Option 1

this simply involves having the following html

<div class="CloneToHere"></div>

<div style="display:none" class="MyDiv">
  <content/>
</div>

now your jQuery might look like this;

$('.MyDiv').appendTo('.CloneToHere');

http://api.jquery.com/clone/

Option 2

$('.CloneToHere').append('<p>Test</p>');

http://api.jquery.com/append/