i have a <p> attribute which on click is changed to AJAX-EDIT-IN-PLACE <textarea> FORM
here is this <p> tag
[CODE]
<p id=”desc”>”.$row[‘description’].”</p>
everything forks fine:
but in my case $row[‘description’] is the Title of some information, and sure its Dinamycaly Genereted..
so when i edit This description using AJAX-edit-in-place form after this javascript starts working:
it grabs some information from <p> tag and sends it to update.php file
these are two strings:
1. is [B]$ID2. and [B]$conten
after these strings passed to php file… php must go to db and update specified row[title]
but there no information which row to be updated
so i wanted to change id = “desc” to id = “$cat_id” but in this case javascript false and no more edit-in-place is possible
becaus in js there is CODE LIKE THIS:
[CODE]
function init(){
makeEditable(‘desc’);
}
so i decided to add name attribute to <p> tag and did it this way
[code=php]<p name=’$cat_id’ style=’font-family:BPG Glaho Arial V5; font-size:12px;’ id=”desc”>”.$row[‘description’].”</p>
but now i can`t make js file to grab name=”content” to php file
can someone help me? thank you:
HERE IS JS FILE WHICH GRABS AND SENDS ALL DATA TO PHP FILE
[CODE]
<script type=”text/javascript”>
Event.observe(window, ‘load’, init, false);
function init(){
makeEditable(‘desc’);
}
function makeEditable(id){
Event.observe(id, ‘click’, function(){edit($(id))}, false);
Event.observe(id, ‘mouseover’, function(){showAsEditable($(id))}, false);
Event.observe(id, ‘mouseout’, function(){showAsEditable($(id), true)}, false);
}
function edit(obj){
Element.hide(obj);
var textarea = ‘<div id=”‘+obj.id+’_editor”><textarea id=”‘+obj.id+’_edit” name=”‘+obj.id+'” rows=”4″ cols=”60″>’+obj.innerHTML+'</textarea>’;
var button = ‘<div><input style=”border:1px #fff solid; background-color:#F1F1F1; font-family:Tahoma; text-transform:uppercase; font-size:10px;” id=”‘+obj.id+’_save” type=”button” value=”save changes” /> <input style=”border:1px #fff solid; background-color:#F1F1F1; font-family:Tahoma; text-transform:uppercase; font-size:10px;” id=”‘+obj.id+’_cancel” type=”button” value=”Forget Changes” /></div></div>’;
new Insertion.After(obj, textarea+button);
Event.observe(obj.id+’_save’, ‘click’, function(){saveChanges(obj)}, false);
Event.observe(obj.id+’_cancel’, ‘click’, function(){cleanUp(obj)}, false);
}
function showAsEditable(obj, clear){
if (!clear){
Element.addClassName(obj, ‘editable’);
}else{
Element.removeClassName(obj, ‘editable’);
}
}
function saveChanges(obj){
var new_content = ($F(obj.id+’_edit’));
obj.innerHTML = “Saving…”;
cleanUp(obj, true);
var success = function(t){editComplete(t, obj);}
var failure = function(t){editFailed(t, obj);}
var url = ‘./inc/UpdateGalleryTitle.php’;
var pars = ‘id=’+obj.id+’&content=’+new_content+’&name=’+obj.name;
var myAjax = new Ajax.Request(url, {method:’post’, postBody:pars, onSuccess:success, onFailure:failure});
}
function cleanUp(obj, keepEditable){
Element.remove(obj.id+’_editor’);
Element.show(obj);
if (!keepEditable) showAsEditable(obj, true);
}
function editComplete(t, obj){
obj.innerHTML = t.responseText;
showAsEditable(obj, true);
}
function editFailed(t, obj){
obj.innerHTML = ‘Sorry, the update failed.’;
cleanUp(obj);
}
</script>
THANK YOU !