Hi guys, how are ya.
http://15daysofjquery.com/edit-in-place-with-ajax-using-jquery-javascript-library/15/
, have some nice edit in place example with jquery so i tried to use
it at my proyect, but i found some issues with the function html(). at
IE.
I'm new at jquery, but decided to learn more and more day after day,
so here's my problem.
For example, check this.
<html>
<head>
<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<title>Ie Problem</title>
<script type="text/javascript">
$(function(){
$(".edit").each(function(i){
setClickable(this, i);
})
})
function setClickable(obj,i){
$(obj).click(function(){
revert = "<tr>"+$(this).parent().parent().html()+"<\/tr>";
name = $(this).parent().prev().prev().prev().text();
age = $(this).parent().prev().prev().text();
comments = $(this).parent().prev().text();
editable = "<tr><td><input type='text' id='name' value='"+name+"'/><\/
td>";
editable += "<td><input type='text' id='age' value='"+age+"'/><\/
td>";
editable += "<td><input type='text' id='comments' value='"+comments
+"'/><\/td>";
editable += "<td><input type='button' class='save' value='Editar' /
>";
editable += "<input type='button' class='cancel' value='Cancelar' /><
\/td><\/tr>";
alert(revert);
$(this).parent().parent().after(editable).remove();
$('.save').click(function(){saveChanges(this, false, i);});
$('.cancel').click(function(){saveChanges(this, revert, i);});
});
}
function saveChanges(obj, cancel, n) {
if(!cancel) {
// do something
}
else {
alert(cancel);
$(obj).parent().parent().after(cancel).remove();
setClickable($(".edit").get(n), n);
}
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th><th>Age</th><th>Comments</th><th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lino</td>
<td>21</td>
<td>What can i say...</td>
<td><input type="button" class="edit" value="Edit" /></td>
</tr>
<tr>
<td>Sara</td>
<td>19</td>
<td>She is hot.</td>
<td><input type="button" class="edit" value="Edit" /></td>
</tr>
<tr>
<td>Vannesa</td>
<td>20</td>
<td>My gf.</td>
<td><input type="button" class="edit" value="Edit" /></td>
</tr>
</tbody>
</table>
</body>
</html>
The problem is with the variable revert.
When i alert it in IE i got this message:
<tr><TD>Lino</TD><TD>21</TD><TD>What can i say...</TD><TD
jQuery1190990656531="5"><INPUT class=edit type=button value=Edit
jQuery1190990656531="2"></TD></tr>
Look the attribute class: class=edit instead of class='edit' , and the
td with that jQuery1190990656531 ... what is that :S
So, when i try to edit again, i cant because the class edit cant be
found.
Here is in FF
<tr>
<td>Lino</td>
<td>21</td>
<td>What can i say...</td>
<td><input type="button" class="edit" value="Edit" /></td>
</tr>
With ff everithing work normally , i can edit again.
Any ideas?
Btw, sry for my english. It sucks.. i know.
