Categories
josephscott

Edit In Place, Version 0.3.3

Changes in version 0.3.3:

  • Remove trailing newline from edit form (Sheldon)
  • Minified version of EditInPlace.js included in distribution files
  • New option: ajax_data

I’ve tried to keep the size of EditInPlace reasonable, but as more bug fixes and features get added there is only so much you can do. So starting with version 0.3.3 I’m including a minified (via JSMin) version of EditInPlace.js. This brings the JavaScript source from 10,304 bytes to 6,751 bytes.

The new ajax_data option allows you to provided additional data. I’ve had a few requests for this feature, thanks to Joe Lion for reminding me about it. The example page has been updated to show to use this new feature. It’s simple enough:

EditInPlace.makeEditable({
  id: 'edit_this_thing',
  ajax_data: {
    database_id: 12345,
    other_data: 'Some Other String Data'
  }
});

As always, you can browse the Edit In Place files, play with the example page or download the version 0.3.3 release.

42 replies on “Edit In Place, Version 0.3.3”

Y’know, a handy option for select tags would be the ability to save the change when a new value is selected.

Also, on_blur: ‘cancel’ doesn’t work for me in Safari — I can’t ever save any changes, even by hitting enter.

-JF

Also, it would be nifty if you could incorporate Nick Dunn’s moo.fx patch as a toggle-able option.

-JF

How to get the value of ajax_data in php file?
I tried $_POST[‘ajax_data’], didn’t work
Again tried $_POST[‘ajax_data’][0] thinking its an array, but still didn’t work. How to get the values of ajax_data?

And
Yes, the on_blur text element doesn’t save when Save button is pressed in Firefox(1.5.0.3)

Sachin-

You can access the additional data by name. So the additional data is made available by name, like: $_POST[“database_id”]

Do you have an example up on the web where the on_blur and save button don’t work? I’ll add this to my to do list.

Jon Frisby-

Adding events that help with the select field would be helpful. I’ll add that to my to do list.

I’ll look around and see if there are known JavaScript event issues in Safari. I will note though that pressing enter is not the same as on_blur.

I’m still a bit on fence when it comes to integrating moo.fx. I have been seriously considering it (and looked at bringing in Nick’s changes), but haven’t committed to doing it yet.

@Sachin – I haven’t had a chance to even look at it yet. I’m open to suggestions for a fix, other wise it will have to wait until I get the time to figure it out.

I’m running a mySQL SELECT query in php that outputs a table of my data. it seems like it should be easy to use your edit plugin to allow easy editing of the generated table. I imagine I would use ajax. any ideas?


while (($row = mysql_fetch_array($myguestlist,MYSQL_ASSOC)) && ($i
" valign="top">

Joseph,

Just getting back into the swing of things but still very much enjoying working with EIP!! The new ajax_data option really makes this easy. Anyway, today’s issue is with “orig_text”. It’s in the defaults area with a comment saying “options that are managed for you”. I was thinking that “orig_text” would be passed along with “content” so I could compare content to orig_text and if they are the same I wouldn’t write to the database but it doesn’t seem to work that way. I could do it with ajax_data and just make an option called “oldcontent” but after I update the text once, the “oldcontent” isn’t right for the next update. I know this is all very confusing and the point of “orig_text” is so you can put it back into the new “input type=text” you create and also get the length from it so you know the size of the box it is in but I think it would be nice to have access to it as well as the “content” at the save_url.

Thanks again.

Sheldon

@Sheldon- Sending orig_text in the XHR seems reasonable. Keep in mind that the scope is pretty limited though, perhaps describing it as previous text would be better.

It doesn’t seem able to process + symbols, they get converted to spaces. Any idea how to solve this?

Hi,

I am wondering if it’s somehow possible to initialise EditInPlace in a div-layer loaded with Ajax.Updater from an external page?
Event.observe(window, ‘load’, init, false) does not seem to work. Perhaps some other event should be observed?

@KImmo- I think that as long as the browser will process JavaScript when your update is sent you could include an EditInPlace.makeEditable() call in your new layer that should work. Make sure that your makeEditable() call happens after your new layer gets added though. Can you setup an example test page somewhere so we can see exactly what is failing?

@Sheldon
Instead of sending double data back, you could use prepared statements. At least using PEAR’s MDB2 with MySQL, only ‘real’ changes are comitted to the database. I would think that any decent database has this facility. It also helps securing against XSS type attacks.

My problem is with newlines. The example page has a textarea but doesn’t display any newlines on save. I fixed that using nl2br in my PHP script, but then on any consecutive edit the ‘s are in the text… Which would freak the hell out of my users. Any idea how I can circumvent this? It’s the same for any htmlspecialchars.

thanks – script is neat.

but how to use this for eip of tables?
lets say i want to edit row 2, column 4: i wonder how to assign those ids to make the appropriate mysql update.
use something like “editfield_2_4” as id? i dont know. please give advise or show a little example for an editable table.

Hey,
Amazingly useful tool! Just had a quick suggestion. Since EIP seems to take over the element pretty well, it’d be nice to have some way to run a javascript function after it finishes saving. So, for instance, if you eip a number, you can fire off the javascript to do some math elsewhere on the page. Of course, that adds a suggestion for data type validation (numeric, date, etc etc) but the former seems much more useful than the latter. Anyway, again great work. Thanks again!

checking this out now – but wanted to let you know the d/l link on the example page includes the .gz extension and the file doesnt…

thanks for the hard work.

yeah it would be great to call another function after the AJAX call finishs. Also an example of the ajax_data would be useful

Sorry to be a bit clearer:

It would be great if you could call from the ‘action’ page a JS function. Imagine you have a validation script on edit.php and you want to pass an error back to the calling page if the value passed in isn’t correct.

as a quick fix i added in defaults:

error_message: ‘Error with field’,
error_message_class: ‘message-bad-small’,
error_id: ‘Error’,

and

if (t.responseText.match(“Error:”)) {
error_id = id_opt[‘error_id’];
Element.addClassName(error_id, id_opt[‘error_message_class’]);
$(error_id).innerHTML = id_opt[‘error_message’];
}

to the successful AJAX request (in the else).

then called it like:

EditInPlace.makeEditable( {
type: ‘text’,
id: ‘city’,
save_url: ‘edit.cfm’,
max_size: ’20’,
error_message: ‘there has been an error with ‘city”,
error_id: ‘cityError’
} );

NOTE: this requires you have:
on the calling page if you’ve not specifed the error_id in the JS EIP call (this is the default).

If you want a inline error use somehting like:

Hove

I wonder if there is a way to make 3 fields editable on one click. For example say i have a phone number and the user clicks on it to edit. What i would then like is 3 boxes to appear: international code, area code and number. Then when they click the save button it saves all 3 fileds?

Any ideas, suggestions?

TIA

Being able to edit more than one field as a concept is certainly doable. However the current EditInPlace code is designed around editing one field at a time.

Joseph – any tips hints? I’ve created an extra id_opt[‘type’] that loops over a number sent in but i feel this is a hack?

Well, that works for one record. But what if I have more than one records to be edited in place (one after another…like a grid)?

How can I diferentiate which is which to be updated?? (for the example “You can edit this line with a single click.”)

Any ideas? Thanks.

Hi! First sorry for my very bad English.
I’m enjoying your beautiful library and I’ve just added a small piece of code to perform validation of data before submitting to server.
It just consists of a new option in defaults:
verify_func: false
and a little bit of code in _saveClick function just after the var id_opt = EditInPlace._getOptionsReference(id); line:

//Verify data
if (id_opt[‘verify_func’] && typeof id_opt[‘verify_func’]==’function’) {
if (!id_opt[‘verify_func’]($F(id + ‘_edit’),$(id+ ‘_edit’)))
return;
}

If A ‘verify_func’ is found, it will be called passing the current field value and the current element. The function has to return true or false: if false the submitting is interrupted. The verify_func can display any error message, etc to the user.

Hope you will find this little modification useful and you will include (even similar/better) in future versions of your EIP library.

Fabrizio

line 248:
var id_opt = EditInPlace.getOptionsReference(id);
change to
var id_opt = EditInPlace._getOptionsReference(id);

line 261
if(id_opt[‘is_empty’] == true) {
can be simplified to
if(id_opt[‘is_empty’]) {

Lavi Avigdor,

for example, by adding:
header(“Content-Type: application/xhtml+xml; charset=iso-8859-1”);
on a line above:
$id = $_POST[“id”];
in edit.php from the example files i would get support for Norwegian characters.

I hope this helps you out a bit.

field += ‘onfocus=”this.select();”‘;

lack a space

field += ‘ onfocus=”this.select();”‘;

What about save the field when return is pressed?

After line 149 add

Event.observe(id + ‘_edit’, ‘keypress’, function(event) {
if (event.keyCode == Event.KEY_RETURN)
EditInPlace._saveClick(false, id);
});

Thanks for a very useful script.
But how can I get it to save the text that users typed or selected?
Every time I reload the example page, it goes back to how it was.

ps. is there any how-to instructions for that great script?

sallam-

The example page doesn’t save the changes anywhere, it just sends back the text it was provided. In production you’d save those changes in a database.

For the client side view the source of the example page. The server side is pretty basic and there is a link on the example page to the PHP script that the example page uses. You can extend it from there.

I am having a little trouble with this. I did get it working fine on my own website I run at home. But now I am trying to get this implemented in our helpdesk website at my work because it would make editing inventory much easier.

Everything works until I hit save, at that point for some reason the new text that gets displayed in place of the old is a copy of the entire page container and all. For some reason it thinks the innerHTML of the span is the html of the entire page.

My boss used code igniter to design the site and I am not sure if that is causing the problem. Any ideas where to start looking for the solution?

Leave a Reply

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