Clever Geek Handbook

Saving edited values ​​with Jeditable

I was looking for a really nice, well documented jquery plugin that will allow me to edit values ​​when another button is clicked.

Jeditable is the closest I've found yet, but I'm not sure how to store it, even when testing, Something really fast that returns a value.

I am using this for my php script:

function editprofile()
{
    $this->input->post('value');
}

This is my JS script:

$("a.edit").live('click', function(){

     $(this).parent("li").find("span.detail").editable('profile/editprofile', 
     {
         indicator : 'Saving...',
         submit  : 'OK',
         tooltip   : 'Click to edit...'
     });    
});

This is my HTML:

<span id="city" class="detail">Philadelphia</span>
<a href="javascript:;" class="edit">Edit</a>

Fixed: php should be:

echo $this->input->post('value');
+2


source to share


2 answers


Jeditable ,

From the Jeditable example:

In this example load.php should return the markup source not rendered by xhtml. However, save.php should return rendered xhtml. On save the browser will display what the script returns. There is also another option. You can pass the markup source to the data parameter.

So, save.php

should return (print to the page) text (not html) to be displayed in the edited location. It should also save changes to the database or any other server work that you have to do.



You post the javascript and echo the response back to the client. http://img34.imageshack.us/img34/3412/savephp.png

In save.php

whatever you do, you store the new value.

You have another tutorial here for the jQuery built-in editor .

+3


source


toggledit has a simple callback mechanism (onpreview, onedit) and a simple public api method (edit, view).

To save, you should write your own ajax function that will fire when these or some other events fire ... for example. if the save button is pressed.

The listener for switching to edit mode is also configurable - you can go to your button selector:

$ (form) .find ('input, select'). toggleEdit ({
    listeners: {
        edit: '#your_button'
    }
});


also you can manually trigger editing and preview using buttons using open events:

$ (el) .toggleEdit ('edit');
$ (el) .toggleEdit ('preview');

also see https://stackoverflow.com/questions/708801/whats-the-best-edit-in-place-plugin-for-jquery/ :>

+1


source






More articles:


All Articles