problem

Hi, i have a script for quick edit. I am making a "blogs page"/"short site" and im making it so when logged in, you can pretty much clck on anything and edit it.

The problem is i know nothing of AJAX. i have however managed to create a page, that brings down info from db, put it into boxes, you can add boxes to the page, click on them, edit the content and edit the title, now im wanting to be able to add pics.

The trouble is when using html tags in the click boxes corupts the script so i have to strip the tags from it. Therefore im trying to use the [*img*][*/img*]
method. So far (using PHP) if you input [*img*]pic.jpg[*/img*], it converts it quickly into <img scr="pic.jpg" height="100" width="100" />
which is what i wanted. But once you click on the box again, it displays it in the box as <img scr="pic.jpg" height="100" width="100" />
which is a problem if someone is going to put more than one image in due to they have to change it all or it gets stripped out.

I dont think i can reverse it via php or it will get displayed as [*img*]pic.jpg[*/img*]

so i was wondering if anyone knew how to edit the following so on click it converts back to [*img*]pic.jpg[*/img*]?

Event.observe(window, 'load', init, false);

function init(){
makeEditable('index_1');
makeEditable('index_2');
makeEditable('index_3');
makeEditable('index_4');
makeEditable('index_5');
makeEditable('index_6');
makeEditable('index_7');
makeEditable('index_1_TaBlE');
makeEditable('index_2_TaBlE');
makeEditable('index_3_TaBlE');
makeEditable('index_4_TaBlE');
makeEditable('index_5_TaBlE');
makeEditable('index_6_TaBlE');
makeEditable('index_7_TaBlE');
}

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 id="'+obj.id+'_save" type="button" value="SAVE" /> OR <input id="'+obj.id+'_cancel" type="button" value="CANCEL" /></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 = escape($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 = 'edit.php';
var pars = 'id='+obj.id+'&content='+new_content;
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);
}

Please follow http://www.codingforums.com/postguide.htm, especially #2

something on the lines of: (this is going to be a mix of AJAXandPHP, i call it PHAXJAP, lol)



obj.innerHTML = str_replace('<img scr="', "", obj.innerHTML);
obj.innerHTML = str_replace('" height="100" width="100" >', "" >');

Please follow http://www.codingforums.com/postguide.htm, especially #2

and what would you call it?

and what would you call it?

Well, anything's better than "problem". :) This is a rather hard question to summarize though, I'll give you that.

any ideas?

couldn't you use a regular expression or something to do a find and replace on the tags you want? i mean... that's what it's doing to put them there in the first place, right?

all i want to do is revers what i did in php before it gets saved to the database.
If i didnt use the [*img] or [*a] tags then the AJAX script wont function. So when the AJAX script sends the info to the save.php file, just before it saves i convert it back into html using simply:

$content = str_replace("", '<img src="', $content);
$content = str_replace("", '" height="100" width="100" >', $content);

now all i want is because the db data is in html, i want the AJAX script to convert it back when the edit box is up.

somewhere in here im guessing.


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 id="'+obj.id+'_save" type="button" value="SAVE" /> OR <input id="'+obj.id+'_cancel" type="button" value="CANCEL" /></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);

}