Hi -- I'm looping through items from a database via PHP, attempting to call in an external form to edit each item when clicked. I've written Javascript based on the Prototype framework that gets me mostly there. However, when attempting to select the parent element of the clicked item, after the first successful edit, subsequent edits fail and the first edited element's content is replaced with the last item clicked.
In otherwords, I have a list like this:
A B C
After clicking "A" and changing it to "1" via my external form, subsequently selecting "B" and changing it to "2" results in the following:
2
C
With the contents of the second item (B or 2) replacing the contents of the first item (a or 1.)
Please note that this is not a problem with my PHP external form (refreshing the page will display all of my updated values properly.) My issue is with javascript selecting the correct parent element in which to display the results of my post.
(As an interesting side note, when I click through and change my elements starting at the bottom of the list, none of the elements are overwritten and the page functions as it should.)
function inlineEditor() {
$$('div.form span.status').each(function(elm){
elm.observe('click',function(evt){
Event.stop(evt);
var block = this.up('div.form');
var item = block.id;
new Ajax.Updater(block,'status_types_edit.php',{
parameters:{id:item},
evalScripts:true
});
});
});
}
<body onload="inlineEditor();">
<?php do { ?>
<div class="form" id="<?php echo $row_GetStatus_Types['id']; ?>">
<span class="status"><?php echo $row_GetStatus_Types['status_name']; ?></span>
</div>
<?php } while ($row_GetStatus_Types = mysql_fetch_assoc($GetStatus_Types)); ?>