JQuery, JavaScript brilliance! An AJAX tutorial

I recently had the pleasure of using JQuery for a DHTML form as part of an e-commerce project I’m working on. The brilliance of this is the ability to to apply it to wide variety of usages. Especially Game Stat API usage! So who wants to get down to the nitty gritty of some nifty JQuery AJAX? Good. Buckle up campers, because we’re in for a ride!

Let’s quickly define our goal here. The end result is a form with several fields that can be added and removed, dyamically, in groups. I chose to take a rather verbose approach to this, so bear with me as we go.

First, we’re going to include our script.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Best placed in the head of your HTML document, but if it isn’t possible I have found that it works by adding it before any other code you’re inserting.

Next we will begin creating our script. The first this we will do is add the ready function for the document. (if you are not familiar with Document Object Modeling, or DOM, with JQuery here is a good reference) Let’s also create the base of the form and add two extra buttons, one to add rows and one to remove them.

<script type="text/javascript">
  $(document).ready(function() {
});
</script>
<form id="myForm" action="<?php echo $_SELF; ?>" method="POST">
    <div><br />
        <input type="button" id="btnAdd" value="add another channel" />
        <input type="button" id="btnDel" value="remove channel" disabled="true" /><br /><br />
    </div>
   <input type="submit" value="Submit" name="submit" id="submit" />
</form>

Now it’s time to  listen for button clicks. So within the ready function we will add new functions.
$(document).ready(function() {
$('#btnAdd').click(function() {
// how many clone-able input fields we currently have
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
// the numeric ID of the new input field being added
var c = ('ctable' + newNum);
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length; // how many clone-able input fields we currently have
$('#input' + num).remove(); // remove the last element
$('#btnAdd').attr('disabled','');
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});

The original author included several comments (what a great person!) so I made sure to include them. Would love to credit the original post, can’t seem to unearth it at this time though. Regardless, you will see that we are preparing  to “Clone” an object from the document. This will be the item with class of “input” as denoted by the # symbol. You will also note the btnAdd and btnDel for our add and remove buttons that we added to the end of the form.

Now for the really dirty stuff, build a table, set it in a div tag and duplicate it when the user clicks the add button, or conversely remove a table. After the opening form tag, place the following code, where “10” is the number of maximum allowed rows. Change this number as you like.

    <div id="input1" class="clonedInput">
      <table border="0" cellpadding="2" cellspacing="3" name="ctable1" id="ctable1" class="dyntable" width="800px">
	  <tbody name="ctb1" id="ctb1" class="dynctb">
	  <tr name="ctrow1" id="ctrow1" class="dynctr">
          <td name="item1" id="item1" class="dynctd">
          <input type="text" name="data1" id="data1" size="16" /></td>
          <td>
          <input type="text" name="stuff1" id="stuff1" size="16" /></td>
      </tr>
    </tbody>
    </table>
    </div>

Time for more AJAX, so we will add the “cloning” and “removal” processes to our script. Immediately after the line containing “var c = …” add the following code:

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
    // manipulate the name/id values of the input inside the new element
    newElem.children(':first').attr('id', 'ctable' + newNum).attr('name', 'ctable' + newNum);
    newElem.children(':first').find("tbody.dynctb").attr('id', 'ctb' + newNum).attr('name', 'ctb' + newNum);
    newElem.children(':first').find("tr.dynctr").attr('id', 'ctrow' + newNum).attr('name', 'ctrow' + newNum);
    newElem.children(':first').find("td.dynctd").attr('id', 'channel' + newNum).attr('name', 'channel' + newNum);
    newElem.children(':first').find("input#data" + num).attr('id', 'data' + newNum).attr('name', 'data' + newNum);
    newElem.children(':first').find("input#stuff" + num).attr('id', 'stuff' + newNum).attr('name', 'stuff' + newNum);
    $('#input' + num).after(newElem);
    $('#btnDel').attr('disabled','');
    if (newNum == 10)
      $('#btnAdd').attr('disabled','disabled');
    });

And that’s pretty much it! Enjoy!