<!DOCTYPE html PUBLIC "- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery And Script Tags With AJAX-Table Data</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(
function(){
$.ajax(
{
method: "get",
url: "./scripts_data.cfm",
dataType: "html",
success: populateTable
}
);
}
);
function populateTable( strHTML ){
var jTable = $( "#table" );
jTable.append( strHTML );
console.log( jTable.html() );
jTable.find( "> script.metadata" ).each(
function( intI, objScript ){
var jThis = $( this );
var jRow = $( "#" + jThis.attr( "rel" ) );
jRow.data(
"metadata",
eval( "(" + jThis.html() + ")" )
);
}
);
var jRows = jTable.find( "tbody > tr" );
jRows.find( "a.delete" )
.attr( "href", "javascript:void( 0 )" )
.click(
function( objEvent ){
var jRow = $( this ).parents( "tr:first" );
confirm(
"Are you sure you want to delete " +
jRow.data( "metadata" ).name +
" from the table?"
);
return( false );
}
)
;
}
</script>
</head>
<body>
<h1>
jQuery And Script Tags With AJAX-Table Data
</h1>
<table id="table" cellspacing="1" border="1" cellpadding="5">
<thead>
<tr>
<th>
ID
</th>
<th>
Name
</th>
<th>
Actions
</th>
</tr>
</thead>
</table>
</body>
</html>