Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: problem

  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    280
    Thanks
    25
    Thanked 9 Times in 9 Posts

    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
    Code:
    <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
    Code:
    <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*]?

    Code:
    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);
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Please follow http://www.codingforums.com/postguide.htm, especially #2
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Sep 2008
    Posts
    280
    Thanks
    25
    Thanked 9 Times in 9 Posts
    something on the lines of: (this is going to be a mix of AJAXandPHP, i call it PHAXJAP, lol)

    Code:
    obj.innerHTML = str_replace('<img scr="', "[img]", obj.innerHTML);
    obj.innerHTML = str_replace('" height="100" width="100" >', "[/img]" >');

  • #4
    Regular Coder
    Join Date
    Sep 2008
    Posts
    280
    Thanks
    25
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by abduraooft View Post
    Please follow http://www.codingforums.com/postguide.htm, especially #2
    and what would you call it?

  • #5
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Quote Originally Posted by snowysweb View Post
    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.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #6
    Regular Coder
    Join Date
    Sep 2008
    Posts
    280
    Thanks
    25
    Thanked 9 Times in 9 Posts
    any ideas?

  • #7
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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?

  • #8
    Regular Coder
    Join Date
    Sep 2008
    Posts
    280
    Thanks
    25
    Thanked 9 Times in 9 Posts
    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:
    PHP Code:
    $content str_replace("[img]"'<img src="'$content);
    $content str_replace("[/img]"'" 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.

    Code:
    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);
    	
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •