How do you generate forms with AJAX?

Question

Okay, How do you generate your ajax-forms?

Do you keep the <form>-code in the javascript-files and load the data with ajax (e.g. json), or do you load a generated html-file (with all the <form> and <input> that you just push to the browser)? Or is there another simpler way?

If you use any framework, do you get your forms generated automatically from your models?

What do you find easiest to keep up and maintain? Is there any plug-in or libraries you find useful, maybe something to jQuery?

Share your thoughts!

Answer 1

There is a solution in the jQuery library

 jQuery.get( url, [data], [callback], [type] )

Load a remote page using an HTTP GET request. This is an easy way to send a simple GET request to a server without having to use the more complex $.ajax function. It allows a single callback function to be specified that will be executed when the request is complete (and only if the response has a successful response code). If you need to have both error and success callbacks, you may want to use $.ajax.

$.get() returns the XMLHttpRequest that it creates. In most cases you won't need that object to manipulate directly, but it is available if you need to abort the request manually.

Have a look at the jQuery Documentation

Example:

$.get("someForm.pl", { name: "John" },
  function(data){
    $(data).appendTo(document.body); // you might place it somewhere else
  });

Edit:

Example where you only change the values of the existing dom:

<form id="myForm"><input id="myName" /></form>

$.get("someForm.pl", { name: "John" },
  function(data){
    $("#myForm").each(function(){
      this.value = data[this.id];
    });
  },"json");

Where your server response would:

{ 'myName' : 'John' }