Code 32 : AK Sabin Blogs: January 2011

Wednesday, January 5, 2011

Delegates in JQuery

The listener of click event wont be listened by the straight approach like the following when you dynamically create the html part and append to the existing elements of a page.

$('#btnEdit').click(function(){

Say, when a row is appended to an existing table element(With a hyperlink in each row to edit the row item) on a click event, the edit row event of the row cant be managed by the following syntax

$('#btnEdit').click(function(){

Here you play with delegate.

See, on click of an html button control, you are adding a row to the existing table (Id="") at the end of the rows like the following.

$('#btnAdd').click(function(){

$('#TableOne > tbody:last').append('<tr><td>F13</td><td><a href="#" class="lnkEdit">Edit</a></td></td><td><a href="#" class="lnkRemove">[X]</a></td></tr>');

});



The row contains three TD elements, which includes a hyperlnk to edit the row and another to delete the added row. 



 $('#btnAdd').click(function(){

$('#TableOne > tbody:last').append('<tr><td>F13</td><td><a href="#" class="lnkEdit">Edit</a></td></td><td><a href="#" class="lnkRemove">[X]</a></td></tr>');

});



Edit event can be captured here as following



 $('#TableOne').delegate('a.lnkEdit', 'click', function(){



 $(this).closest("tr").each(function() {

var tr = $(this);

var column = 1;

$('td', tr).each(function(index, value) {  

var td = $(this);  

alert(td.text());

column++ ;

var txttd = $("input:text", td).each(function(){

alert($(this).val());

});

});       

});





The Delete click can be handled here



 $('#TableOne').delegate('a.lnkRemove', 'click', function(){

$(this).closest("tr").remove();

});

Can add the content into the DIV like this

$('#dvEdit').after('<b>ADDING HERE</b>');

});



Here follows the HTML part



<table id="TableOne" class="TableOne" cellspacing="1" border="0" bgcolor="#f1f1f1">

<tr> <td>

<input type="text" class="txtbox" /></td>

<td> F12</td>

<td> F13</td>

</tr> <tr>

<td> <input type="text" class="txtbox" /></td>

<td> F22</td>

<td> F23</td>

</tr> <tr>

<td> <input type="text" class="txtbox" /></td>

<td> F32</td>

<td> F33</td>

</tr> </table>

<div id="dvEdit" class="dvEdit"></div>

<input type="button" value="Get" id="btnGet" class="btnGet"/>

<input type="button" value="Add" id="btnAdd" class="btnAdd" />



Just a CSS tip too, to beautify the table. 



 $('#TableOne tr').each(function() {     

var tr = $(this);       

$('td', tr).each(function() {  

var td = $(this);  

$(this).addClass("tdbg");

$(this).attr("width", "200px");

});       

});

Saturday, January 1, 2011

JQuery: Add, Deete Rows, Validate the controls of added rows of a Table

What if the new rows with controls has to be added dynamically and deleted on button clicks and those controls have to be validated before submitting to the server. JQuery is the easiest way to add/remove at the client side dynamically.

Have a sneak peek here.

Look at the code here



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>JQuery Page</title>

<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>

<style type="text/css">

.mandatory

{

border: solid 1px red;

}

</style>

<script type="text/javascript"> 

function CallThis()

{

var requiredFields = $('#tableid').find('.requiredField');

var allFieldsComplete = true;

requiredFields.each(function(index) {

    if (this.value.length == 0) {

        $(this).addClass('mandatory');

        allFieldsComplete = false;

    } else {

        //alert(this.value);

        $(this).removeClass('mandatory');

    }

});

if(!allFieldsComplete){

   $('#dispMsg').html('Mandatory fields to be entered'); 

}

return allFieldsComplete;

    }

    

</script>



</head>

<body>

     <table id="tableid" border="1" class="tableid">

      <thead>

      <tr>

            <td bgcolor="#f1f1f1">Header 1</td>

            <td bgcolor="#f1f1f1">Header 2</td>

        </tr>

        <tr>

            <td><input type="text" class="requiredField" /></td>

            <td><input type="text" class="requiredField2" /></td>

        </tr>

        </thead>

        <tbody>

        <tr>

            <td><input type="text" class="requiredField" /></td>

            <td><input type="text" class="requiredField2" /></td>

        </tr>

        <tr>

            <td><input type="text" class="requiredField" /></td>

            <td><input type="text" class="requiredField" /></td>

        </tr>

        </tbody>

    </table> 

    <div id="dispMsg" style="color:Red;"></div>

    <input type="button" class="txtbox" value="Validate" onclick="javascript:CallThis();" />

    <input type="button" id="btnTest" value="Add"/>

    <input type="button" id="btnTest2" value="Remove"/>

</body>

<script type="text/javascript">



    $('#btnTest').click(function() {

    $('#tableid > tbody:last').append('<tr><td><input type="text" id="txt1" class="requiredField"/> </td><td>yyy</td></tr>');

    });

    $('#btnTest2').click(function() {

        $('#tableid > tbody:last tr:last').remove();

    });  

</script>

</html>

Wednesday, January 5, 2011

Delegates in JQuery

Saturday, January 1, 2011

JQuery: Add, Deete Rows, Validate the controls of added rows of a Table

Across the globe

Subscribe Now: google