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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    AJAX Inline editing - query

    Hi,

    I'm looking to add the functionality of 'inline editing' with AJAX. I have found a good piece of code from a website (http://www.yvoschaap.com/weblog/ajax...pdate_text_20/) which does it well but I want to improve it slightly.

    I have a span tag with text in it which turns into an input box when a user clicks on the text. The user edits the input box and then click away from the input box in order to save the change and the input box turns back into regular text. How do i make it so when the person clicks on the text the input box appears but also an 'Update' and 'Cancel' link appears to the side of it so that the user can only update or cancel that field by clicking on the links.

    The code that does this is as follows:

    HTML CODE:

    Code:
    <span id="userName" class="editText">John Doe</span>
    JAVASCRIPT - controls when text is clicked for input to appear:
    Code:
    //edit field created
    function editBox(actual) {
    	//alert(actual.nodeName+' '+changing);
    	if(!changing){
    		width = widthEl(actual.id) + 20;
    		height =heightEl(actual.id) + 2;
    
    		if(height < 40){
    			if(width < 100)	width = 150;
    			actual.innerHTML = "<input id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" maxlength=\"254\" type=\"text\" value=\"" + actual.innerHTML + "\" onkeypress=\"return fieldEnter(this,event,'" + actual.id + "')\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\" />";
    		}else{
    			if(width < 70) width = 90;
    			if(height < 50) height = 50;
    			actual.innerHTML = "<textarea name=\"textarea\" id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\">" + actual.innerHTML + "</textarea>";
    		}
    		changing = true;
    	}
    
    		actual.firstChild.focus();
    }
    JAVASCRIPT - Initiated the update of the field.

    Code:
    function fieldBlur(campo,idfld) {
    	if (campo.value!="") {
    		elem = document.getElementById( idfld );
    		remotos = new datosServidor;
    		nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars,"");
    		elem.innerHTML = nt;
    		changing = false;
    		return false;
    	}
    }
    I tried playing around to do it myself by adding an <a> link with an onclick event handler in the editBox() function ie.

    Code:
    onlick="noLight(this); return fieldBlur(this,'" + actual.id + "');"
    But i realise that the two values passed to the function need to be changed as i cannot use (this) if it's not within the input box?

    If anyone could help me with this query it would be greatly appreciated. I hope Ive given enough info and have expressed my problem clearly. If you have any questions let me know and I'll answer them ASAP. If you would like to see the whole source please go to the original website where i got it from - http://www.yvoschaap.com/weblog/ajax...pdate_text_20/

    Thanks in advance

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I'm a little sleepy at the moment but what happens if you just replace this with document.getElementById('" + actual.id + "') in your anchor tag?

    It seems like that should work.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    Livtech (07-07-2010)

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Tried it but the it wasn't passing the input field value...

    Any other suggestions?

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    After time time of playing around with your advice ive managed to get it working. You were right Thanks!


  •  

    Posting Permissions

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