Saving edited values using Jeditable

Question

I have been looking for a really good, well documented jquery plug-in that will let me edit values on click of another button.

Jeditable is the closest I've found yet, However I am not sure how to get it to save, even in testing. Something really quick that returns the 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');

Could you expand on the server-side code? – Esteban Küber Aug 18 '09 at 19:38 — Esteban Küber, Aug 18 '09 at 19:38

Esteban Küber · Accepted Answer · 2009-08-18T19:49:17.090

3

Jeditable,

From Jeditable's example:

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

So save.php should return (print to the page) the text (not the html) that is going to be showed in the edited place. It should also save the changes on the database or any other serverside work that you should do.

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

On save.php you do anything you store the new value.

Here you have another tutorial for the in-line editor for jQuery.

edited Aug 18 '09 at 19:49

answered Aug 18 '09 at 19:30

Esteban Küber

36,388
15
79
97

The first 2 links are the 2 I found, I am using the first one, and the tutorial leaves out the part I am not sure how to do, which is the php aspect. – matthewb Aug 18 '09 at 19:36
I think I got it: forgot one word on my php function echo $this->input->post('value'); – matthewb Aug 18 '09 at 19:42
Right, I am just working on client side server side is beyond my knowledge, I have another developer who I work with who does all of that, I am just getting the data preped to be sent correctly. Thanks. Now if only I can figure out how to call the change with a link. But that's another question. – matthewb Aug 18 '09 at 19:53

score 1 · Answer 2 · edited May 23 '17 at 12:19

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

To save, you would write your own ajax function that would fire when these or some other events are triggered... e.g. if a save button gets clicked.

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

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

also, you could manually trigger edit and preview from your button using public events:

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

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

Saving edited values using Jeditable

2 Answers2