jQuery Edit In Place (JEIP)

History

A few years back I wrote a Javascript library for editing content in place, that was based on Prototype. It was modeled after the Flickr UI/approach. Nothing amazing, but it worked well enough.

Fast forward a few years and the momentum in the Javascript library field has moved decidedly to jQuery. I’ve been meaning to write a port of the edit in place code to use jQuery, and now I finally have. To help confusion with the original code I’m calling it jQuery Edit In Place, or JEIP for short.

Downloads

Current Version: 0.2.0 (Change Log)
Download: jeip.js

You can fork JEIP at GitHub – https://github.com/josephscott/jeip

Demo

I’ve put together a very basic demo. Everything is done with templates and CSS classes, so if you don’t like the default look of the demo there are lots of methods for changing it.

Examples

Here’s the most basic example, it enables in line editing for the page element that has an id of content.

[sourcecode language=”javascript”]
$( "#content" ).eip( "save.php" );
[/sourcecode]

After editing is complete and the user clicks on the save button the script sends the url, form_type, element id, original value and new value data via HTTP post to save.php. The returned data is expected to be in JSON object, with the following values: is_error, error_text and html. The is_error field is a boolean, and error_text is used to provide information about the error condition. The html is a string that is used to replace the contents of the edited element.

If you’ve got a larger chunk of text to edit you’ll want to use a textarea form:

[sourcecode language=”javascript”]
$( "#content" ).eip( "save.php", {
form_type: "textarea"
} );
[/sourcecode]

And for those cases where you just need to provide options, there’s an easy way to do a select form:

[sourcecode language=”javascript”]
$( "#content" ).eip( "save.php", {
form_type: "select",
select_options: {
blue : "Blue",
green : "Green",
red : "Red",
black : "Black",
brown : "Brown",
white : "White"
}
} );
[/sourcecode]

For select forms two additional bits of data are passed to the save URL: the original option text and the new option text.

The eip function will also work on multiple elments, so if you select a class it will make all of the elements with that class editable:

[sourcecode language=”javascript”]
$( ".edit-class" ).eip( "save.php" );
[/sourcecode]

The Save XHR and Response

When the edit form is saved JEIP uses the jQuery AJAX function to send data to the save URL. It send the following fields via HTTP POST:

  • url – (string) URL that the edit form was on.
  • form_type – (string) The type of edit form that was used (text, textarea, select)
  • id – (string) The id of the DOM element that was edited.
  • orig_value – (string) The original value of the DOM element that was edited.
  • new_value – (string) The new value of the DOM element that was edited.
  • data – (object) Optional additional data that was passed along via the original eip call.

For select form edits two additional fields are sent:

  • orig_option_text – (string) The original option display text.
  • new_option_text – (string) The new option display text.

The response to the XHR needs to be a JSON object with three values:

  • is_error – (bool) When true indicates that there was some sort of error when the save URL processed the XHR. Under normal conditions this should be set to false.
  • error_text – (string) When is_error is true, this string is used to provide a plain text descriptive of what the error was.
  • html – (string) This string is used to replace the old value of the edited DOM element.

Options

There are a number of options that can be provided as part of the second parameter in the eip function. The defaults should fit for most, but if you want to tweak things I’ve tried to provide lots knobs.

  • save_on_enter – (bool) When true the save event is triggered when the enter key is pressed. Doesn’t apply for textarea edits.
  • cancel_on_esc – (bool) When true the cancel event is triggered when the escape key is pressed.
  • focus_edit – (bool) When true give the edit field focus when the edit form is shown.
  • select_text – (bool) When true select the text in the edit field.
  • edit_event – (string – event) What type of event (usually click or dblclick) to trigger the edit mode.
  • select_options – (object) Key/value pairs for the option fields in a select form. The key will be used as the option value and the value from the option will be used as the display option text.
  • data – (object) Additional data that will be passed in the XHR to the save URL.
  • form_type – (string) What type of edit form to use: text, textarea and select. The default is text.
  • size – (int) Value to use for the size attribute on the edit field. By default this is calculated at run time.
  • max_size – (int) Maximum value to allow when calculating the size value.
  • rows – (int) Value to use for the rows attribute in textarea edit forms. By default this is calculated at run time.
  • max_rows – (int) Maximum value to allow when calculating the rows value.
  • cols – (int) Value to use for the cols attribute in the textarea edit forms.
  • savebutton_text – (string) Text to use on the save button.
  • savebutton_class – (string – CSS class) CSS class to use on the save button. The default value is jeip-savebutton.
  • cancelbutton_text – (string) Text to use the on the cancel button.
  • cancelbutton_class – (string – CSS class) CSS class to use on the cancel button. The default value is jeip-cancelbutton.
  • mouseover_class – (string – CSS class) CSS class to apply when the mouse enters an element that is editable. The default value is jeip-mouseover.
  • editor_class – (string – CSS class) CSS class to apply to the edit form wrapper. The default value is jeip-editor.
  • editfield_class – (string – CSS class) CSS class used on the edit field element. The default value is jeip-editfield.
  • saving_text – (string) Text shown while the XHR is waiting for a response. The default value is ‘Saving …’.
  • saving_class – (string – CSS class) CSS class used on the saving_text string. The default value is jeip-saving.
  • saving – (string – template) Template string used to show the saving_text string.
  • start_form – (string – template) Template string used to start the edit form.
  • form_buttons – (string – template) Template string used to show the form buttons.
  • stop_form – (string – template) Template string used to end the edit form.
  • text_form – (string – template) Template string used to show the text edit forms.
  • textarea_form – (string – template) Template string used to show the textarea edit forms.
  • start_select_form – (string – template) Template string used to start a select edit form.
  • select_option_form – (string – template) Template string used to show options elements in select edit forms.
  • stop_select_form – (string – template) Template string used to edit a select edit form.
  • after_save – (function) Function that is called after the XHR completes. By default it just flashes the element a few times.
  • on_error – (function) Function that is called when the save URL returns an error (by setting is_error to true in the return JSON object). By default it calls the alert() function to show the error_text returned from the XHR.

307 replies on “jQuery Edit In Place (JEIP)”

Wonderful! I’d love to take a look at an example save.php, as well – this is exactly what I’ve been looking for!!!

Don’t worry, already done it adding inside “_editMode” funcion:

$( “#edit-” + self.id ).blur( function( e ) {
_cancelEdit( self );
} );

P.S.: I almost forgot to congratulate you for the script… it’s just great.

Hmmm, perhaps I should make than an option. I would probably default that feature to being disabled though, I think many would find having their edit field disappear because they clicked somewhere else more frustrating than helpful.

Great plug-in! I was actually just looking for something like this a couple of weeks ago, but the only solution I could find was quite specialized and wouldn’t fit my needs. I’m glad I did another quick search today and came across your work 🙂

Just as an aside, I was wondering if there is an easy way to trigger an edit from an event tied to another element. For example, have a button beside the editable field that says ‘Edit’ and have it trigger the edit when clicked.

Thanks again for contributing your work!

Hi!
Seems like a wonderful jQuery plugin…
I’ll try to implement it in my project 🙂
just one question – is it possible to implement it without the AJAX save feature?
I only want to use it to change text fields, and handle the save myself submitting the whole page

Thanks for your work!

Great plugin! But, I’ve written a local application, that doesn’t care anything about send data to a server, but only saving on the local machine. Can this plugin be adapted to this scenario?

How does your app save data locally? I’d imagine if there’s a Javascript interface to where you are storing data (like Google Gears) then you could adapt the code to send updates there instead.

Thanks for the useful script. I’m trying to implement it in a WordPress blog so that I can make post and page edits on-the-fly. Seems like everything is working though it doesn’t save. Instead, it says “Saving…” then the text vanishes. I assume it’s the JSON.php which I fetched from the PEAR site. Could you make JSON.php example available for a look over?

Thanks!!

[…] plugin that does exactly as the title says. You can edit content in place and save it as well. JEIP is now in version 0.1.2, you can download it from its official website (you can find information about how to save data through XHR) and view a demo as well. Spread […]

Is it possible to handle the case that the editable div is empty? For now, I could not edit at all.

Thanks.

I want to use your inline routine to edit a label under a thumbnail from a set of thumbnails on a horizontal filmstrip, update the page to show the new entry, then send that new entry to a database to update for later viewing. I do not have access to run .PHP on the system I am with. I can use C# and JavaScript. Does your routine offer the ability to run a function instead of running the SAVE.PHP file?

It just sends the data to a URL, so you can use any server side language, PHP just happens to be the one I used. The response needs to be JSON encoded, which isn’t specific to a particular language either. I suspect most languages have a library for encoding/decoding data in JSON.

Thanks for your great work on this plug-in. Was wondering, how can I specify a string which will be displayed for the empty string? Something like “Click Here to Edit”.

just a quick question I’m hoping you can help me out with…I have everything set up as seen on this site…everything seems to be working except that the data doesn’t get switched…it just stays on the “saving…” part and only if I refresh does it show the new data in its place…not sure if its the JSON file that isn’t properly functioning or if there is something else I’m missing…do I need PEAR running to use the JSON file?

I love the plugin…just hoping I can get it to work…

First thing I’d do is debug on the server side and make sure that your script is getting the data correctly. If that then look at the response you script is sending back and make sure that it looks correct.

I can’t understand when I try this on my own server, when I click save, the icon gif displays, but it never disappears and saves the text that I just typed! Help?

Two things to look at when debugging this, first make sure that your script is getting the request and the correct data. If that’s working then make sure that your script is returning the correct data, JSON encoded, etc.

Hi, How would i make use of this if I had multiple divs that needed this, yet only calling it once, ie…

data
data
data

I would think i would have jeip call from the class and use the id to reference the div. Is this functionality in place now?

These are created using jquery and are inserted on the fly and are coming from the database on page load.

Thanks,

-TOM

The last comment diddn’t show my full message

ie…
div id=”div_1″
div id=”div_2″
div id=”div_3″

How could I pass additional data to eip from within the editing div. Lets say I have a extra attribute like this

div extra=”home” I need to pass something like this so that only a section in the database where page = home is updated.

Thanks

To send additional data when the save event happens take a look at the ‘data’ option. This doesn’t gather up attributes from the element, but it does allow you send what arbitrary data as part of the save XHR.

I’m trying to use the ‘data’ option, but I’m having trouble getting it to respond. I’m putting the values into data in key/value pairs:

data: {key : 'value'}

and I’m trying to read it in my php with:

$var = $_POST['key'];

Is this not the structure I should use?

Go back and take a look at the documentation on this page, under the section indicating what fields are sent in the XHR. The ‘data’ field is called ‘data’ in the POST.

Ok, I think I’ve solved my problem. I ended up using this jquery-json plugin, which I then modified my lines to look like this:

data: $.toJSON({key1:"value1", key2:"value2"})

and

$data = json_decode(stripslashes($_POST['data']));

This places it into a PHP object of $data->key1. If you do the following line it will place it into an array of $data[‘key1’]:

$data = json_decode(stripslashes($_POST['data']), true);

Wanted to thank you for an EXCELLENT plug-in. It came highly recommended, and has not disappointed.

I’m trying to implement some client side validation prior to transmitting the new value, and potentially triggering an alert box if it fails.

Is this something that has been addressed or considered?

Strike my last comment, the is_error option in the JSON results already create an alert.

What more could someone ask for? Thanks again.

Would it be possible to show how to add custom input types? I am looking to attach the jquery datepicker to a text field containing a date value. In other words, when the text field is clicked on, the jquery date picker will show to select a date which will then fill the text field.

I hadn’t really thought about it that way, but you could probably do that by overriding the default form templates. Take a look at the ‘text_form’ variable, it’s the template that’s used when editing a simple string. You can override it when calling .eip() on your element and provide the datapicker hooks inside the form.

Let me know how that works out, would make an interesting example for others who want to do something similar.

Thanks for all the great information. We use JQuery and PHP on the custom web pages for our customers.

I was able to add a new datepick_form to the jeip.js, and hooked it in from a separate js file.

I am now struggling to bind the datepicker jquery function to the text field created by jeip.js.

For example, i may have a field (id=’field_A’) and when jeip is called, it replaces it with id=’edit-field_A’. Since the new field is not created until that point, what do you recommend I do to bind the datepicker function to that new field after its creation by jeip.js?

This is day 2 for me playing with jquery, so I apologize for the questions and if I am not being clear.

My guess is you’ll need a way to re-bind the datepicker code to the id/class of the form field because it’s added dynamically to the page later on. The other possibility is that the datepicker code needs to watch for new fragments being added to the page to see if it needs to bind events to them. Don’t know if there’s anything other that supports that right now.

What the mostly likely leaves us with is having to adding something to JEIP that can optionally call user defined functions after each editing event.

I managed to get a date picker field working and figured I would pass on the info if you wished to add it. Plus it might prove useful for others looking to dynamically add/bind functions to jeip.

In this example I used jquery datepicker and livequery to get it working as intended.

In my javascript that is called as part of the document.ready loading I used live query to bind to a new class. Example:

$(“.jeip-datefield”)
.livequery(function(){
$( this ).datepicker({ showOn: ‘both’ });
});

In my javascript that binds jeip to my fields I wish to edit, I forced it to use a new form_type. Example:

$( “#datefield” ).eip( “save.php”, {
form_type: “datepick”
});

In jeip.js I changed the following:

1. Added a new class:

editdate_class : “jeip-datefield”,

2. Added a new form template:

datepick_form : ‘ ‘

3. Added a new form field:

if( opt.form_type == ‘datepick’ ) {
form += _template( opt.datepick_form, {
id : self.id,
editdate_class : opt.editdate_class,
value : value
} );
} // date form

And I think that is it.

I use jquery ajax to query a database and return a form through php. On the success of the ajax response, I call a function that binds eip to the new fields returned from php. The livequery allows me to then trigger the datepicker in the newly inserted fields.

Hope this helps and wasn’t too confusing.

Evan

Excellent script!

I’m a jQuery newbie but loving it already!

I needed to restrict text field length to X characters, and obvious way to do it is to burn it into code

text_form : ‘ ‘,

How can I make maxlenght=”250″ a setting?

Also, there is a class “missing” in

form_buttons : ‘…

I added

and with

.jeip_buttons {
position: relative;
float: left;
margin: -50px 0px 0px 0px;
}

placed buttons above text input.

If you just want to include the maxlength=’250′ into the form then I’d suggest including a new form template with the .eip() call.

Ahh, you want to move just the form buttons around with CSS. Sounds reasonable.

Awesome implementation! 🙂

Could there be a way to unbind/suspend ‘eip’ from a selector?

It would be nice to enable and disable ‘edit in place’ depending on what else is happening on the page.

Clicking to edit is USUALLY intended, but if I’m moving blocks around a page it interferes. I’d like to have a button that would toggle between the sortable and edit in place functionality. Sortable can be bound and unbound. This looks close…

I’ll look into it some more…

Get looking script, I am just trying to get around it (This is my first look into javascript really!) This would be perfect for what I need however is it possible to use this if you have variable text items on a page? For example (my data is retrieved dynamically) My PHP displays a list of names of people (which need to be editable) Obviously this list is ever changing. You mentioned above that you could use a .edit-class but then when it comes to updating the data of the MySQL table (your save.php) how would you be able to make sure you update the right table and row as wouldn’t it just pass the value of the first class? Sorry if that doesn’t make sense, I am kind of banging my head together

You need to make sure that there was a unique ID for each element that you are making editable. You could do this by having your PHP script generate a unique ID attribute value for instance.

Chocula: I agree with Joseph. To expand upon his point, on the server side, I would put the table and row id (or a suitable mapping), into the class or id.

Examples:
class=”edit-class students” id=”1234″
It would take some fancy javascript to retrieve the info and pass it back to the server, but it’s entirely possible.

class=”edit-class” id=”students_1234″

using .split(‘_’) on the id, you’ll be able to retrieve both students (table) AND 1234 (id). You should be able to do something similar on the server side, which would probably be better.

How can I have a simple link to activate the edit, for example:

TEXT TO EDITClick here to Edit

I want to edit the text inside the span “text-edit” from the link “link2Edit”. Thanks.

I’ve implemented the alternative edit-in-place plugin called ‘Jeditable’ (http://www.appelsiini.net/projects/jeditable) but because it lacks some basic features (like hover effect) I decided to drop it and look around for a similar plugin. Now I’ve bumped into JEIP and I wonder what the advantages are over Jeditable. Joseph, did you look into that plugin? If so, what are your findings?

Do the save and cancel button HAVE to be under the text box, or can then come after the textbox (like in your drop down box example)

What I’m trying to do is click a button (say, an edit button) and all the fields a certain class become editable and automatically go to their editable state.. so, in other words, I have a table, I want to click Edit on the side of a row and all the columns in that row become editable immediately (not once you mouseover the individual text in that column and click it). Is this possible?

Exactly what I want to do. I have several elements I’d like to make editable by clicking one button. Then, I’d like to have one Save/Cancel button for all. I would also like the option to bypass submitting to server, and use my own form “save” button to submit all at once when I’m done editing several objects. Anyone know of anything that does this?

Hello Joseph
Have you implemented this functionality in latest update?
If yes,where can I find that.
I need the same functionality.

Thanks
Ashish

Hey, this is an amazing script and I thank you for it greatly.

There’s just one thing that I can’t quite get to work, and that is viewing the edited content right away.

The way I have it working, is I put some logic into the save.php to update a mysql database. And it works.

However, I need to manually refresh the page after editing to view the changes made.

I believe a similar problem was posted above on December 5th. The edited area just remains stuck on “Saving…” until I manually refresh. And if I keep clicking save, it creates a string of “Saving…Saving…Saving…” and cancel just shows the initial value as well, even though it actually has been changed in my database.

I’m pretty new to this stuff, so please bare with me 😛

Thanks,
Alex

Double check to make sure that your script is returning the properly formatted JSON response. I suspect that if the Saving… never goes away then the reply for the XHR either didn’t happen or it didn’t get back what it expected to.

Thanks for the reply Joseph.

After some toiling about and learning more about XHRs I wondered how to put the value I needed into the JSON response. I then re-read the instructions at the top of this page and realized that I needed to put the response into the html = “” at the bottom of save.php. I replaced the “” with $new_value and it works perfectly now 🙂 (though there is a bit of a delay that I wonder if I can shorten…but that might be server lag.)

Oh, and just looking through JEIP.js I stumbled across something on line 67 that might be a typo. In the class for the start_select_form it is: editfield_clas which might need that second s. 🙂

Again, huge thanks 🙂
Alex

Hi Joseph,

This is very useful stuff.
I just wanted to know if its possible to validate my component before ajax request is sent to the server. I mean to say i want to check on the client side if the the text is empty or not and prevent from sending data to the server if the text is empty.

Hi Joseph!
Thanks for this awesome plugin! I’m currently considering using it to allow a user to update particular sections of a single page by wrapping certain content in editable divs which change to textboxes on click, which I assume jeip will do.

I’m wondering: If I have more than one of these editable areas on the page, is there a way I can disable all of the other areas while the current one is clicked so that a user can only edit one at a time, and then re-enable all of them again on a submit of the current area?

Much thanks, sir!

Nice job. Looks great. I managed to get it happening only to find it won’t work with my repeating regions. About the third time I’ve found this problem.

So I have a php loop that brings a value in for multiple records in the database and I want to be able to edit each one of these using this. It seems only the first field will be editable. Anyone have any thoughts why?

Thanks

Hello there!
this is a great plugin… i was wondering where do i get JSON.php?

can i create without json in save.php
what a variable was send to save.php
and what a variable i can send back to html with JEIP

maybe can you create a sample… hehe…
🙂 sory for my english…

You can use anything your want to process the data, as long as returns the expected JSON response. Take a look at the examples, it’s pretty basic to make this work with any back end code.

Hi there, this script is awesome thanks! Does exactly what I need. Although I am running into the following error: window is null
withinElement()()jquery-latest.js (line 2869)
proxy()()jquery-latest.js (line 2762)
handle()()jquery-latest.js (line 2693)
(?)()()jquery-latest.js (line 2468)
[Break on this error] try { parent = parent.parentNode; } ”

Any ideas what this means?

Hi Joseph, first of all… excellent script! 🙂

Now I begin to describe what my problem.
In my page I have 2 dropdownlist edit in place make with library.
When page load both dropdownlist load great, now I want to change the value of the dropdownlist 2 depending on what is selected in the dropdownlist 1

when dropdown 1 is created in the option after_save I call another function. This function rewrite the dropdownlist 2 with your library, but the old values can not replace with new values, there is some way to reset what is above and write again from the beginning?

(sorry for my poor level of English)

Regards.

you think of a way to do this? I have to do this urgently, can you give me an idea of how to solve this problem? Comes from the side of the jQuery or jeip.js library?
Thank you so much.

I’m making good progress with your code Joseph but I seem to have run into another issue that you may be able to suggest a way forward on.

Numbers with a period (or decimal point as we refer to it in Aus) in them appear to be erroring out the code.

I can get the values to alert and appear in the firebug console but they don’t seem to be getting through jquery into the database. I had a look at the offending lines from the firebug report but I couldn’t see anything I understood to be a problem.

Firebug is giving me this response.

data is null
anonymous()jeip.js (line 304)
success()jquery-1….6.min.js (line 29)
anonymous()jquery-1….6.min.js (line 28)
[Break on this error] if( data.is_error == true ) {njeip.js (line 304)

Hi Joseph,
I tried two “edit in place” scripts from two authors and as far as i can see only your “version” has what I need. BUT, I dont even manage to install it. I think problem is in save.php file. I saw your save.php file but there is some JSON.php file to be required, which isnt mentioned here, actually it isnt mentioned where to download it from (if neccessary). I’ve managed to come to this point:
When I click on text, input field and buttons appear but when subbmitting there is no effect.
I read comments from other users and I saw that few have the same problem as I do:
– How to apply editing to a particular content which is loaded from database. On page, there are many records displayed, each has its own id. Can you please explain more detail how to solve this problem.
I know how to display id and content values, but where to “put” id and how to process it via POST method to save.php
Thank you in forward!

Regards,
Ile

The response to the XHR needs to be in JSON format. Modern versions of PHP5 have built in JSON functions, the JSON.php is a pure PHP version that does essentially the same thing. If you are having errors in the request you need to make sure the response is being received by the browser. Firebug in Firefox is helpful for this.

The element ID is sent as part of the XHR so you don’t need to do anything extra to get that.

Hi Joseph, how to change this sctipt to get select_options from ajax in:
form_type: “select”,
select_options: ?
Regards.

the script works great, except when i am using ajax elsewhere to load the div containing the editable fields, then they arent becoming editable — it works the first time, but not after the refresh. ive tried using jquery.live to bind the function permanently but it doesnt work … am i missing something?
thanks!

actualy i think i got it working by putting a seperate $(document).ready() on the ajax page (the one being re-loaded) and puttnig the eip in there. but other than that, im not sure how to do it from the main page or the main js include. just ends up making my code ugly (the random javascript call ends up being in the middle of the file) but if thats the only way to do it …

Hi Joseph, this is a plug in that I was looking for. I have used it sometime and liked it very much. Now I am implementing a another program that has a table with 2 columns. First colums is version number of a software and second column is the target date to release the software. For example:

Version Number
Target Date

1.0
2007-09-30

The contain of the table will be dynamically insert so no way I will know the id of any beforehand. In the javascript file I have the code:
$( “tbody td” ).eip( “save.php”,{ select_text: true } );
When I click on the first cell of a row, the two cells of that row just merge into one and the first cell disappeares.
Do you know how to go about to fix that?
Thank you.

Hi Joseph, it is me again. Thank you for your promt answer last time. This time I have another question. I have a form which has a table:

Version Number
Target Date

I also have a javascript function which will dynamically populate the table tbody with data. I dont have problem to use jeip.js with data of the first column. But with the second column after I edit it, it display new value outside of the table. If I edit it the second time but hit cancel button, it moves back to the right place. Do you know how to make new edited data not jumping around?

Thank you in advance.

Im getting a blank data area after i save it. I input the data, the saving thing comes up and then it goes away and the new data never shows up. What am i doing?

This is my save.php file im using

encode( array(
"is_error" => false,
"error_text" => "Ack! Something broke!",
"html" => ""
) ); ?>

and this is my JSON.php code

self::$maxRecursionDepthAllowed) {

throw new Zend_Json_Exception(
"Function _processXml exceeded the allowed recursion depth of " .
self::$maxRecursionDepthAllowed);
}

if ($recursionDepth == 0) {

$callerProvidedSimpleXmlElementObject = $simpleXmlElementObject;
}

if ($simpleXmlElementObject instanceof SimpleXMLElement) {

$copyOfSimpleXmlElementObject = $simpleXmlElementObject;

$simpleXmlElementObject = get_object_vars($simpleXmlElementObject);
}

if (is_array($simpleXmlElementObject)) {

$resultArray = array();

if (count($simpleXmlElementObject) $value) {

if(($ignoreXmlAttributes == true) && (is_string($key)) && ($key == "@attributes")) {
continue;
}
$recursionDepth++;
$resultArray[$key] = self::_processXml ($value, $ignoreXmlAttributes, $recursionDepth);

$recursionDepth--;
}

if ($recursionDepth == 0) {

$tempArray = $resultArray;
$resultArray = array();
$resultArray[$callerProvidedSimpleXmlElementObject->getName()] = $tempArray;
}

return($resultArray);
} else {

return (trim(strval($simpleXmlElementObject)));
}
}
}

Hi Joseph,
Thank you very much for this, it is very well explained, cleanly written and hence easy to use.
🙂 Having said that………
Two quick questions
Is it possible to do multiple selects?
” ” ” ” ” checkboxes or radio buttons?
If not, I will still use your script on text fields and simple selects, but it would be brilliant to have those as well 🙂

Best,
Rob

Hello,
just wanted to say thank you for a wonderful script and ask something about a small problem I have.
Everything works find including a dynamically populated select form I’m using in my pages except that the field with the select doesn’t get highlighted when you put the mouse over it, although clicking and editing works perfectly.
Am I missing some option?
The code is like this :
$( “#physical_rack_” ).eip( “admin/modify.php”, {
form_type: “select”,
select_options: {

}
} );

which generates something like this :
$( “#physical_rack_1472” ).eip( “admin/modify.php”, {
form_type: “select”,
select_options: {
1 : “1”,
10 : “10”,
11 : “11”,
12 : “12”,
18 : “18”
}
} );

Again thank you for the time you devoted to this project

I just noticed I forgot to use the correct tag and the code that’s being displayed isn’t correct…. here we go again.


$( "#physical_rack_" ).eip( "admin/modify.php", {
form_type: "select",
select_options: {

}
} );


$( "#physical_rack_1472" ).eip( "admin/modify.php", {
form_type: "select",
select_options: {
1 : "1",
10 : "10",
11 : "11",
12 : "12",
18 : "18"
}
} );

Hi Joseph,

I don’t know if you remember, but I had lunch with you at the 2009 SF WordCamp.

nice looking plugin. In fact, it is exactly what I am looking for for a project I am currently working on. Unfortunately, I am not very familiar with JSON, so I will have to read up on it to figure out how exactly to update my mySQL database with the results in the save.php file.

One question though. In your demo, the fields themselves don’t update, yet rather it says saving and then it goes blank. Is this because the new changes are now in the save.php file and your demo is not connected to a database?

JSON is fairly minimal markup for data, PHP and virtually every other language out there has libraries reading/writing JSON data.

Thanks for pointing out the demo was broken, I’ve fixed it now.

Hi Joseph,

Thanks for this great plugin! It’s exactly what i was looking for!
I have a question though. At the text which will be edited, there is a possibility to have an image in it. Currently, when i click at the text to change it, the image is shown as:
How can we modify it so to show its alt attr (or title attr) ??
Thanks!

Hi,
It seems that after the post, a small text was cut.
Look, when i click at the text (which will be edited), the images are shown as: img src=”” . What i want is instead of showing this (which contains the path of the image) to show only the alt or title attr of each image.
Is this possible?
Thanks.

Hm, ok then.
I’ve thought to do something else as an alternative.
Thanks for your reply 🙂

If someone needs it, I added fckEditor support and here is how I did it. I have also created a ASP version of the save.php if anyone needs it.


========================================
var opt
========================================
Right Under:
textarea_form : '#{value} ',

Add:
wysiwyg_form : '#{value} ',

========================================
var _editMode
========================================
Right Under:
// textarea form

Add:
//added the fckeditor here with form type wysiwyg
else if( opt.form_type == 'wysiwyg' ) {
form += _template( opt.wysiwyg_form, {
id : self.id,
value : value
} );
} // wysiwyg form

Right Under:
if( opt.focus_edit ) {
$( "#edit-" + self.id ).focus( );

Add:
//replace the textarea with fckEditor
if( opt.form_type == 'wysiwyg' ) {
var oFCKeditor = new FCKeditor("edit-"+self.id) ;
oFCKeditor.BasePath = '/fckeditor/' ; //this is the path to your fckEditor Folder.
oFCKeditor.ReplaceTextarea() ;
}//end fckEditor

REMEMBER: change the oFCKeditor.BasePath to the path on your server.

========================================
var _saveEdit
========================================
Right Under :

var new_value = $( "#edit-" + self.id ).attr( "value" );

Add the Following Line :

if( opt.form_type == 'wysiwyg' ) {
new_value = FCKeditorAPI.GetInstance("edit-" + self.id).GetHTML();
}

Replace:

var ajax_data = {
url : location.href,
id : self.id,
form_type : opt.form_type,
orig_value : orig_value,
new_value : $( "#edit-" + self.id ).attr( "value" ),
data : opt.data
}

With:
var ajax_data = {
url : location.href,
id : self.id,
form_type : opt.form_type,
orig_value : orig_value,
new_value : new_value,
data : opt.data
}

@Joseph Scott could you delete my comments from above. It did not show up correctly. What I did was add support for fckEditor and created a save.asp for people wanting to use this for classic asp and wanted to share it with anyone that might want it.

I’ve implemented tinyMCE but I’m having a hard time figuring out where the final save result occurs. I need to disconnect the editor when this occurs.

This is a very nice and useful little script. Thank you!

I had a hard time figuring out what the data option does and how it’s supposed to be used, though. However, it seems that the backend gets the data as a parameter called data.

My backend needs several parameters that are needed to make sure the user is authenticated and the backend needs to know which module has to do the processing. Essentially, I needed to have two extra parameters that are posted along with the rest of the data: session_id and node.

Here’s a little patch that made this possible for me:


--- jeip.js 2009-12-21 11:42:36.000000000 +0100
+++ tmp/jeip.js 2009-12-21 11:57:18.000000000 +0100
@@ -44,6 +44,8 @@
max_rows : 10,
cols : 60,

+ extra_params : {},
+
savebutton_text : "SAVE",
savebutton_class : "jeip-savebutton",
cancelbutton_text : "CANCEL",
@@ -283,6 +285,12 @@
ajax_data.new_option_text = $( "#edit-option-" + self.id + "-" + new_value ).html( );
}

+ if ( opt.extra_params ) {
+ for ( var key in opt.extra_params ) {
+ ajax_data[ key ] = opt.extra_params[ key ];
+ }
+ }
+
$.ajax( {
url : opt.save_url,
type : "POST",

I can now make anything editable with a little code that looks like this:


$( ".editable" ).eip( 'backend.pl', { extra_params: { node: 'Change', session_id: '1234' } } );

Not quite. With the data option, I get a parameter “data” that gets posted to my application. Unless I managed to use it in a very strange way and completely mis-read the documentation.

The only difference between your patch and what already happens is that yours creates new top level POST variables. The same information is still be passed, it’s just referenced in a slightly different way.

A slightly different way that makes all the difference to me. Don’t get me wrong, but I am not going to change my backend for a ui-nicety like JEIP.

Alex –

I am also trying to use JEIP to update a mysql database. I have JEIP working great with static text, but I’m having difficulty getting it to update my database. If you could post an excerpt of your version of save.php to allow for updates to a database, I know that I (and possibly others) would appreciate your insight. Thanks in advance.

Joseph –

Great script and excellent instructions for all us n00bs out there! Thank you.

Hi there..
is there any reason why the saving action on asp servers wouldn’t preserve spaces or line brakes?
Thank you

Where did you place the third part of modifications of JEIP?

3. Added a new form field:

I’m very interested in your jeip.js source code, because i’m coding same functionality of JEIP and datepicker.

Thanks in advance!

I dont undestand de use of the save.php , I’m new using php I dont know where you get these values, I hope you can help me =)
$url = $_POST[‘url’];
$form_type = $_POST[‘form_type’];
$id = $_POST[‘id’];
$orig_value = $_POST[‘orig_value’];
$new_value = $_POST[‘new_value’];

if( $form_type == ‘select’ ) {
$orig_option_text = $_POST[‘orig_option_text’];
$new_option_text = $_POST[‘new_option_text’];

$new_value = $new_option_text;
}

I tested your solution and it didnt work, it only says saving…. and doesn’t show anything, I have all the elements that are needed but It doesn’t work, sorry for my english

Hi,

I look a problem.
My content generated by AJAX request. After generated content append to div, but in browser in source code this content not showing, only visual in browser.

When content added from AJAX request EIP not working ((( working only if i manualy in file create code

Can you help me ?

Not updated, all content generated “on fly” i see this content only if using FireBug “Inspect Element”.

I don’t know how can update physical content in browser document.

sorry for my English (

Hi, Joseph Scott !

I found some problem.
If i click on first time… nothing reaction, but if i click second time and other times.. it’s working )
It’s first problem.
Second problem with sending data, i must send to post additional field with my parameters, how can i do this ??

Thanks.

Have you tried it with the basic example? Remember that the server needs to send back valid JSON.

You can send additional information in the AJAX request via the data parameter. It’s listed in the docs on this page.

i am using it in my final year project. my script consists of a table which is displayed by a server side php script. i want to make it possible for users to edit records by just clicking the record and then it turns into an editable field. however, i want the fields to be validated before it is saved into the database. can you please help me with a complete client and php server side script on this. i need it urgently. Please help

i use data:{‘tpl’:’false’} for sending additional data.. it’s true ?

hi there everyone!
i’ve tried to change the script to update my mysql database but i think i’m pretty noob to do this. i really need an ‘edit-in-place select box’ thing and i can’t convert this to database. can anybody help me with this?
thanks in advance.
Kamil

Hello Joseph, thx for your support 🙂

I would like to see an exemple of usage for the optional data object (data – (object) Optional additional data that was passed along via the original eip call.)

I unsuccessfully tried:


data: {
param1 : "Blue",
param2 : "Green"
}

but the data passed are [object Object]

How do i pass extra parameters? I need to pass extra parameters to indicate to save.php the data type (text needs ”, int doesnt) and in witch table the data must be saved.

Now i can do the work using the data object like that:

data: “tableID-dataType”

then the save.php will recive via post the parameter data=tableID-dataType and splitting it i make it work.

Uh, just brilliant … just started to code some xsl + xml monkey business for editing one simple xml document … but this one saved my ass … thank you!

A couple of changes to allow edit on table cells in-line.

If you make a td editable then the line
$( self ).after( form );
puts the new edit in line field after the end of td which will mess up your table (see posts James 16th & 23 Sep 2009). I didn’t want to use another element [div|span] as they may be empty and thus unclickable.

A suggested change to options to make things work
start_form : ”,
stop_form : ”,

and add default node_type to the options
node_type : “span”,

you can then override the node type from within your jquery call.
$(‘td.editible’).eip( “/admin/jsasset_admin.php”, {
node_type: “td”
} );

Now your td.editable gets faded out and the new edit field is inserted wrapped in a lovely td. On save or cancel it gets swapped back out.

Thanks for the plugin Joseph. Nice and compact.

Doh! Try again
start_form : ‘>#{node_type} id=”editor-#{id}” class=”#{editor_class}” style=”display: none;”<‘,
stop_form : ‘>/#{node_type}<‘,

Is there a way I can dynamically fill in the select options? Depending on which element was clicked to edit?

I have a page with several entities that can be clicked to edit. Each of these entities features a select box. However, the contents of those select boxes depends on which of the entities is edited.

So either I let the back-end produce the select options and let it produce different class names or ids for each and provide an extra eip function for each of those. Or I come up with some clever Javascript that does all this dynamically.I just don’t have a clue how I would do that.

Anyone?

Yes, but that call would need a parameter, e.g. the ID of the element being clicked. And where would I get that from?

how do i apply the click event to more than one form element. anytime i try this example $(“#savepres”).click(function(){
var illness = $(“#illness”).attr(“value”);
var symptoms = $(“#symptoms”).attr(“value”);
$.post(“saveprescription.php”,{illness: “”+illness+””,symptoms: “”+symptoms+””},function(data){
$(“#showprescription”).html(data);
});
});
$(“#cancel”).click(function(){
var illness = $(“#illness”).attr(“value”);
var symptoms = $(“#symptoms”).attr(“value”);
$.post(“cancelperscription.php”,{illness: “”+illness+””,symptoms: “”+symptoms+””},function(data)
$(“#showprescription”).html(data);
});
});
only one of the functions works at a time. if i put them in two different pages they work but not on the same page.
is there any misunderstanding on how the click event is applied to multiple form elements on the same page? how can i apply the click event to several form elements at a time performing different functions

Was trying to implement this into a HUGE project that I was assigned to, but after failing to understand the data objects (extra info being passed via POST). I had to remove it from the project.

This would have been perfect though, and I would guess the credit giving from the project would’ve helped too.

hi,

how can I make code which edit text(txt1) after click on link?

test test

click

function func()
{
$( “#txt1” ).eip( “save.php” );
}

what is wrong?

Very nice example but when I have saved the cahnges and is saved in the database it will not disappear the save and cancel button.

I am using it in ASP MVC

Hi Joseph, thanks for assistance but the problem was that i was returning my Partialview instead of
return Json(new { is_error = false, error_text = “”, html = formValues[“new_value”] });

Hi Joseph,

this is really a nice Script but I have problems with JSON because I didn’t work with it until this time. I took your Save.php and try to modify it, so that I can take the variables e.g. $new_value and put it in a mysql_database. But it didn’t work like I imageined. Can you help me in this case ? I want to change the values on the website and save it in a mysql db buti don’t get any of the variables read.

thanks for your help

yours

eren

thanks for your reply but my question is how can i use that variables because an INSERT INTO or an UPDATE with that variables don’t work 🙁

That should be some basic PHP, I recommend making it work as stand alone page and then add in the edit in place functionality. That way you can be sure the basic features, like INSERTING/UPDATING into the database is working correctly, instead of trying to debug multiple things at once.

sorry didn’t work. can anyone help with a small piece of srccode? how do I add eip functionality in my save.php??

Would be a Great work if only i could make it work – what about ‘save.phps’ – in first comments “html”=> $new_value is really still missing, ok but even fixit it on localhost i’m getting error Ack! Something broke! (under firebug-console) the same happens on demo here, I assume, that original file (save.php) has got more saving routines? Due to many interested people getting this up to work – could you explain in a example – how this changes can be saved..

Great Job, Scott! I was looking for a plugin that was similar to how Google allows you to edit contacts in Gmail. If you hover over a field, it becomes editable (no need to click on it) and when you press tab, enter or otherwise remove focus from a field, it saves your results. There are no save or cancel buttons (escape cancels the edit). Is this possible with your plugin?

Cheers!

Jim

The save.phps and the demo links are both dead. Perhaps a zip containing both and link next to the download js.

Hi Joseph.

I’m trying to get the demo working, from your link above.

If I copy all the files in your link, and the jeip.js file into a directory on my server, it doesn’t seem to do anything other than display the examples page as a static web page. I’ve tried this in a number of browsers. The javascript element isn’t doing anything.

Am I missing something?

Having some trouble with EIP in IE8. The text just disappears and no input-box is displayed. Works great in FF though. Anyone else had this issue ?

I took a second look at it and it works now. For some reason it didn’t work on tables, so i replaced the table with a list instead.

the link to your demo is broken.
the link to your save.phps is broken.
also some examples of tag call, and build of element, would have been lovely.

cheers,
JJ

Love it!!! Thanks for the awesomeness, customize-ability (hm, that a word?), and easy install. Well, took me a while, but the demo was essential for helping me make it work. Thanks! IMAO, there was a lot of missing things that could have been more explicitly stated for us relatively newbies. But copying and pasting the demo, and editing from there worked well.

On the google code page, instead of form_type it says field_type. But for me, both work. I don’t mind! Again, thanks for your contribution to open source!

Cheers!

Wow Joseph,

Quite the support you’re giving for the plugin!
From others’ comments it sounds like the plugin as is doesn’t save the changes, to mysql or an arbitrary file, is that right? It’s up to use to save the changes?

I need to go learn that or just switch to another edit in place. Thank you though!

And you have to add this code
$( ‘.jeip-cancelbutton’ ).trigger( “click”, function( e ) {
_cancelEdit( self );
} );
after line
var _editMode = function( self ) {

Thanks for the Plugin, it’s really easy to use 🙂

I have the same requirement as Christian. Is it implemented in the meantime? Or do you have a hint to do it?

Thanks and Regards, Patrick

Hi,

The link to see the example’s save.php file doesn’t work anymore. If you have a moment, would you please fix it? Thanks!

Really nice plugin. I hate JS and I always love when someone does it for me 🙂

I am storing my table name & record ID in the tag attribute of the div so I can identify what to update in PHP.

So the plan was to use $(this).attr('tag') in the JS to send it back to the server in the data parameter, but this sends false to the server:


$( ".edit" ).eip( "http://blah/command.php?cmd=saveContactField", {
data: $(this).attr('tag')
});

What am I missing in referencing the object? Or is there a better way to let PHP know which record to update?

BTW the reason I want to pass “Table Name” back too is in case I have information from two tables on one page.

Any help greatly appreciated.

I may be wrong, but I think there may be a typo at lines 108-110


var safevalue = value.replace( //g, ">" );
safevalue = value.replace( /"/g, "&qout;" );

Shouldn’t that go:


var safevalue = value.replace( //g, ">" );
safevalue = safe_value.replace( /"/g, "&qout;" );

Then again – is safe_value used anywhere?

I am trying to figure out how to allow my BR codes appear on the rendered bit, but then get changed to \n codes when editing. I can hack the JS, but is there another way?

I looked at the demo and it did not work for me. I was double clicking on elements and seeing what happened. I don’t know if I am doing something wrong, or if it just doesn’t work in my browser – I am on a Mac using Safari. I just wanted to give you a heads up about it.

Sorry about that, I had a WP plugin that altered some of the post content and it made the javascript invalid. Should be fixed now ( you may need to force a refresh to avoid using a cached version of the page in Safari ).

By Post Author

Hi Joseph!
Have you got any example using Django?
First I had to change your javascript adding a new function to use request header “X-CSRFToken” for django security posting. I’m able to get the id and value in my views.py but not sure how do I return json as you did at PHP. Actually it update the data in the database but in the website the message “saving…” never disappear.
Thank you in advanced!
Sérgio

I would like to integrate your script with jquery DataTables script. I have some problem, maybe do you plan to write some tutorial (work with DataTables)? Sorry for my english

Hi Joe,

First, thanks for a great plugin…very handy!

Second, I think I’m returning the JSON correctly, because JEIP is flashing the field afterward, but the text doesn’t change to what I have in the ‘html’ value in my JSON.

Here’s an example of what’s sent back:
{“j”:[{“is_error”:”false”,”error_text”:””,”html”:”test data (12)”}]}

Not sure what I’m doing wrong here (I also had a version that had a _type element to the JSON response, but since it wasn’t mentioned here, I removed it; that version had the same results…flashing the field, but not updating the text)

When something like this happens I usually end up using Firefox + Firebug to see if there are any Javascript errors/warnings. It is also handy to add break points to the Javascript to make sure things are happening the way you expect them to.

By Post Author

And…sorry for calling you “Joe”…I had just posted something on another blog where I was replying to a Joe. End-of-day Brain = no good!

You may have to just step through each part of the process until you find out exactly where it is having problems. And when you find it, be sure to share so that others who might have the same problem can benefit.

By Post Author

Ok, my JSON was wrong. For anybody else who’s had the same issue (or who will in the future), here’s an example of what’s expected back. I had some extra stuff in there that was copied / pasted from another script (in my previous JSON that I posted). Here’s what works instead:

{“is_error”:”false”,”error_text”:””,”html”:”test data (12)”}

By the way, the easiest way to see if you’re sending back JSON, and what it is, is to add this line to jeip.js right above the line where it’s supposed to set the text to what you sent back:

alert(‘JSON is ‘ + data.html);

I’m having trouble understanding the “data” option. I’ve read the docs and comments but they don’t help.

In my JavaScript I have the following:

$( ‘.editable’ ).eip( ‘edit.php’, {
form_type: ‘textarea’,
data: { user: 1 }
} );

In my edit.php I have the following:

$data = $_POST[‘data’];

I am pretty sure I need to use PHP’s json_decode to get the value out of the object, but when I add that to my code, your script does not work — it just sits and says “Saving…”

In short…how do I get the data out of that object in my PHP script?

The script is terrific, thanks. I’m trying to force the width of the text input to increase (some of the input text is getting cut off) but I can’t see where to set that – in the script file it seems to set it automatically. Did I miss something?

Thanks in advance for your help.

Thanks for this script… I have only one problem… If you enter in a textarea line breaks, I save it in the DB with n – to display the text again, I use nl2br()

Then the problem occurs: When you click to edit the text, it takes the tags inside the textarea… These should be replaced with n or something…

What needs to be adapted in jeip.js to accomplish this?
I could do a preg replace to change all occurences, but jeip.js is not a php file…

#{value}

Is there any way to do it?

Anyone reading this?

Still have this problem… when a text contains an empty line in html, it gets rendered as – but when you then click to edit that text, the tags also show up in the edit field… They should be replaced by n somehow – anyone knows how to?

Have you tried editing the html before passing it back to the ajax call? If you edit the JSON response to send back different information, you should be able to format it however you want. I’m pretty bad with strings, but I would try something like this with your “save.php” file

1. get all the values
2. do your db insert
3. modify the “new value” to be formatted how you want it to be formatted (ie remove tags)
4. send the new value back via the response

Hi Frank,
I had the same Problem, and solved it with this code-snippet:

value = value.replace( /(]+)>)/gi, “” );

Insert this into the jeip.js-file above the line “form += _template(opt.textarea_form, {”

It will replace all the HTML-Tags (exactly everything like “”).
If you just want to replace the s insert
value = value.replace( //gi, “” );
instead.

Same process if you want to do the same for textfields!

I hope I could help you!

Felix

This worked awesome. I had to slightly modify the PHP and JSON to meet my needs. Took about 30mins to test and about 90mins to push inside of my project. Thanks much Joseph!!!

I just would like to say that your control is perfect: simple to use, small weight (js) and in general is very good. In other words, thank you very very much!!!

got same problem, with table and with list and with simple paragraph,
kind of display toggling issue:
orginal editable element is switched to ‘none’ and .jeip-editor is added but has display value set to ‘none’
i’ve got 2 editable elements in each table cell (or or ) this seem to be couse although i don’t know why?

Thanks Joseph! This works great.

As of PHP 5.2.0 json_encode is included in php, so I didn’t have to use json.php

I changed line 21 to:

print json_encode( array(

This worked fine.

Thanks again!

I may have found a bug.

I have two spans with the class “text-edit”

I click on the first one and the text becomes editable and the Save and Cancel buttons appear.

Before clicking Save or Cancel, I click on the second span and it disappears.

Using Chrome’s developer console I can see that the second span gets a style=”display: none;”

I’m thinking that I should listen for the first text field to lose focus and cancel that edit before continuing on. Does that sound right?

Hello Joseph,
your script is great, and the editing works as described – but unfortunately I doesnt seem to be able to get the save-URL posted! nothing happens, and the ‘saving’ text stays forever.
I work in an ASP.NET environment und so there is no ‘save.php’ but a save.aspx page I call – but is there actually something I have to modify in your code to merely call a ASP save-page instead of php?

Thanks,
D.

Scott,

thanks a lot für your reply. I guess I have to analyse the problem a bit more. One further remark: on May, 15th 2009 some Alex pointed to a typo on line 67 where you wrote ‘editfield_clas’ instead of ‘editfield_class’.
Unfortunately this typo still exists …

D.

Hi…I´m coding a project using codeIgniter (I am new programming), so..I have a table(which return a table of a DB) in one of my views…I need to be able to change the value of any cell (td) in my table, except TH cells ( from the header) and those cells which belong to the first column ´cause it is for show the ID of every record and I am not interested in chaged its values, just the others values corresponding to the TD cells of the table.
I would like to use your plugin but I dont know how…I have downloaded jeip.js and I´ve linked it to my view….so what come next?
I haven´t the class save.php I dont know how to use it anyway ´cause…I think I must modify my model and controller classes corresponding to the views which I am showing this table…I need help with that…Sorry my english. Thanks.

Hi,
I used your plugin and its working great. Thanks for your excellent work.
I have a problem. Using your plugin, if the user updates some value in the database then I need to refresh some other part of the page. Refresh should happen only i there is a successfull change in the value. How come I identify if there is a successfull change???Is there a way to do that??

You can do that via Javascript on the page. If the XHR for saving the change comes back with a success then you can do what ever you need to on other parts of the page at that point.

By Post Author

Can you elaborate this in detail? I am currently working on a project, where application is going to sit locally on users machine as html pages, where i want the inline edit capability. I want to catch the data and store in XML (most probably) using javascript. My question is instead of eip( “save.php”, can i pass it to javascript function? if yes how?

Thanks a bunch in advance.

I’m thinking to modify this script so only one instance can be edit at a one time. If multiple instance was open, I will close the others first. Can you guide me which part should I start looking? Thanks.

Correction:
I’m thinking to modify this script so only one instance can be edit at a one time. If multiple instance was open, it will close the others first. Can you guide me which part should I start looking? Thanks.

I noticed that if I put a js script into the textarea, it runs it. Is that supposed to happen?

OK, came up with a dirty fix, if anybody’s interested:

new_value : $( “#edit-” + self.id ).attr( “value” ).replace(//ig,”),
in
var ajax_data {…}
Obviously, you need to use something like striptags in php as backup.

Darn…
REGEX snipped – here’s the regex with a space in between each character:
/ / i g , ‘ ‘

Just a question about the button template: I’m trying to rplace the OR word between the Send and Cancel button with a variable, tried #{or_text}, but it doesn’t work since the or_text variable is not displayed. Thanks for any help and congrats for the great script.

Hi Joseph, thanks for reply.

Do you mean to use a template instead replacing the OR word in the default template code?
I tried to do that using the following code, but I got an issue since the custom class wasn’t applied to the template.
$( “.result-row” ).eip( “rci/save.php”, {
saving_text : “”,
savebutton_text : “”,
cancelbutton_text : “”,
form_buttons : ‘ ‘,
editor_class : ‘editform’,
savebutton_class : ‘button’,
cancelbutton_class : ‘button’,
data : {
test : ‘prova’,
voce : ‘vocus’
}
} );
Thanks for any help, sorry for the bad english

Ops, the commen form has replaced some code….in the form_buttons line I wrote a template copied and pasted from the jeip js file, I’ve just replaced the OR word with a PHP variable.

I just tried out this one. I need to knoe what are all the required files for using this code.

$(document).ready(function(){
$( “#content” ).eip( “save.php”, {
form_type: “textarea”
} );
} );

Edit Here

Is it correct?

Hi Joseph,

Any plans to update this plugin? I noticed the last entry in your change log was November 15th, 2008.

The problem that we have is when you edit two elements at the same time, one of the elements disappears completely and doesn’t come back until the page refreshes. Do you know what would cause this and how to resolve?

Thanks,
James

Any way to get this to work to inline edit a wordpress post content? That would be awesome 🙂 And also for custom meta fields, etc. Any instructions or leads? Thx a lot!

Best “edit in place” plugin I’ve found for JQuery so far and I think I’ll stick with it. I was using “jquery-edit-in-place” but it lacked certain things.

This appears to work great except the XHR response doesn’t appear to trigger anything. I can change a textarea and it gets inserted into my db fine. I return a JSon array on success with is_error equal false and html variable set to the new value. I was assuming (perhaps wrongly) that JEIP would set my div contents to the new value. If I do a page reload I see the new value and Firebug shows me a successful JSON return.

I return a JSON array whether or not there was an error. If an error, I set is_error to true, set my error_text appropriately…but no alert() or anything. I even put in a on_error function with an explicit alert() and still no joy.

Could you show an example of handling the return from the server ‘save’ php program?

Am I missing a parameter perhaps?

thanks!

Note: Here is my javascript:

$( “#editnews” ).eip( “savenews.php”, {
form_type: “textarea”,
select_text:true,
rows:5,
cols:25,
on_error: function(iserror,errortext,html)
{
alert(errortext);
},
} );

Also tried:

// edit in place news
$( “#editnews” ).eip( “savenews.php”, {
form_type: “textarea”,
select_text:true,
rows:5,
cols:25,
on_error: function(data)
{
for(var i =0;i<data.length;i++)
{
var item = data[i];
alert(item.error_text);
}
},
} );

but nothing.. *sob*

Fixed! Perhaps there was a jQuery version problem or something. I’m using 1.5.1 on this project. This fix should work for any version though.
Just replace the entire ajax function at line 271 with this:

$.ajax( {
url : opt.save_url,
type : “POST”,
dataType: “json”,
data : ajax_data,
success : function( data ) {
for(var i =0;i<data.length;i++)
{
var item = data[i];
}

$( "#editor-" + self.id ).fadeOut( "fast" );
$( "#editor-" + self.id ).remove( );

if( item.is_error == true ) {
opt.on_error( item.error_text );
}
else {
$( self ).html( item.html );
}

$( "#saving-" + self.id ).fadeOut( "fast" );
$( "#saving-" + self.id ).remove( );

$( self ).bind( opt.edit_event, function( e ) {
_editMode( self );
} );

$( self ).addClass( opt.mouseover_class );
$( self ).fadeIn( "fast" );

if( opt.after_save != false ) {
opt.after_save( self );
}

$( self ).removeClass( opt.mouseover_class );
} // success
} ); // ajax
}; // _saveEdit

Note: If anyone wants the CSS classes that are referenced within the jeip.js file, these are the defaults from the demo:

.jeip-saving {
background-color: #903;
color: #fff;
font-size: 20px;
padding: 3px 20px 3px 20px;
}

.jeip-mouseover, .jeip-editfield {
background-color: #ffff99;
padding: 5px;
}

.jeip-savebutton {
background-color: #6c0;
color: #fff;
}

.jeip-cancelbutton {
background-color: #ccc;
color: #fff;
}

Scott, I’m wondering if and how I can add a watermark into empty input fields so the users can get info about the data that can be used by the save.php file. Of course the watermark should be ignored if the user press the save button without editing the field.
Thanks for any feedback

Thanks for a great script! I haven’t found any way to add some jQuery or other Javascript after the edit mode has been initiated, which I think would be great. I needed to dynamically change the edit field width depending on the parent div (which can be resized), so I made a quick n dirty hack as follows:

1. A change to the template:
textarea_form : ‘#{value} ‘,

2. An addition to the textarea rendering:
style : “width: “+$(this).parent().width()+”px; “,

Obviously it would be much appreciated with a neater solution that wont need core editing. Just an idea.. 🙂

Thanks again!

Very nice plugin… tks!!!

For those who are using CodeIgniter, on your controller just have to code something like this:

$id = htmlentities($this->input->post(‘id’, TRUE),ENT_QUOTES, ‘UTF-8’);
$new_value = htmlentities($this->input->post(‘new_value’, TRUE),ENT_QUOTES, ‘UTF-8’);
$result = array(
‘is_error’=>false,
‘error_text’=>’No hay error’,
‘html’=> $new_value,
);
echo json_encode( $result );

This is a pretty little javascript.
But I found a strange bug.
When two users update at the same time the server mixes things and a user updates de values of the other user!
Example: User A changes value from A1 to A2 and User B changes from B1 to B2.
but User A got B2 and User B got A2.
This happens randomly when users update at the very same time.
Ajax error?

This would be a really nice feature. To force a page call means its not really usable for those of us looking to keep edits client side until a submit point, or?

Hi… Its a great plug in. At present I am implementing this with my website. Every thing works fine. But.

On loading of page, plug in allows me to save only once after that it will stop working.

Check the Javascript console in your browser for errors, an the web server side as well. The demo page has multiple edit fields that work for editing multiple times.

By Post Author

Why do not add an optional load_url? Sometimes the text you want to edit is different from the text that is actually shown.

Yes, but in place. Anyway I made some modifications:

1. I added an optional load_url to behave exactly I suggested. Thinh about something require a specific syntax like wikis or bbcode.

2. moreover, I modified the code to have also a customizable general-edit. In such a case the load_url parameter is mandatory to return an entire set of inputs.

Obviously this is a mere test since my knowledge in jquery or javascript is definitely low:

http://numismatica-italiana.lamoneta.it/jeiptest/index.php

Joseph –

Great plugin. Having an interesting issue.

When my web app creates a new element it adds your plugin by calling
$(‘.elementclass’).eip(‘ajax.php’);

Everything works great until I create the second new element. When I call the above again the second element edits just fine, but the first element now pops up
with two editing windows and two save buttons and two cancel buttons when I click it to edit it.

If I add another element and call it again, the first one has three sets, the second one now has two sets and the last one works properly when editing.

What am I missing? Binding the element with the ID doesn’t seem to work with newly created elements, which is why I decided to use the class.

Any ideas? Is it possible to cancel prior calls and then reset all with the correct
class so I don’t end up with multiple sets of editing elements?

Jeff

Hi Joseph, I find this plugin very useful and working fine as expected.

Recently one one of project need dimension of product ie 2″x4″x2″ is a string to edit.

But when try to edit (when click on highlighted text ) string breaks at ” (double colon).

Any solution for this issue?

Great and awesome work Joseph,

Just a quick question, i have set up the plugin locally and it worked like a charm except that when i refresh, it goes back to the native text that were before editing!
And when i uploaded it to the server, it gets stuck on “Saving”, i have checked everything back and forth, everything looks pretty clear but STILL NOT WORKING!
Please i would appreciate some feedback!

Thank you!

DONE but still when i refresh the page, the native text comes back! Do i have to edit something in the save.php file? I have to say i’m a newbie to PHP Joseph, any help would be greatful!

You need to save it some where on the server side and use that stored value in the original page. The PHP file is just an example, you can use any backend you want.

By Post Author

In other words Joseph 😀 ?
Should i edit something here:

$url = $_POST[‘url’];
$form_type = $_POST[‘form_type’];
$id = $_POST[‘id’];
$orig_value = $_POST[‘orig_value’];
$new_value = $_POST[‘new_value’];

The original value is a

In other words if you are familiar with another language besides PHP you can go ahead and use that. If you want stick with using PHP, but have no experience with it yet, then you should go through a few getting started articles or books, then come back to the edit in place code.

By Post Author

Is there a way to check if the origin value matches on of the select options? I’d like to have the right option selected upon initiating the plugin.

Your in-place editor is amazing, but I didn’t see an option for a callback function instead of an AJAX callout. Is there any reason to not give the user more control over their I/O and simply have them return a string after they’re done (the String would represent the HTML you would use as if the AJAX response had returned in your other examples).

Np, you’ve done all of the heavy lifting; I can just add it in myself. Thanks for building this and posting it online!

Thanks for such an awesome feature! I’m aware you haven’t worked on this code for a while which is totally fine – I have a very newbie question (I’ve only been coding for a couple of years and am just entering the JQuery world).

I included the jeip.js file in my code and added the simple tag just to try to out ($(“#username”).eip(“save.php”); ) in the of the html file but the console spits the error ‘ReferenceError: jQuery is not defined on jeip.js 323’. Am supposed to write my jquery on jeip.js?

It is, I’m actually importing it from a local file and from the Google APIs

// Fall back to a local copy of jQuery if the CDN fails
window.jQuery || document.write(”))

Oops I should have known better than putting script tags on my comment. I’m importing the following in this order:
“//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”

window.jQuery || document.write(‘scripting tag src=”../assets/js/jquery.min.js” scripting tag’))

and then I include jeip.js and I double checked the directories and paths are correct.

Leave a Reply

Your email address will not be published. Required fields are marked *