Changes are made at your own risk and are not guaranteed to work. Always make backups of the database and files prior to implementing hacks. Make a special backup of the file and/or template you are modifying so that you can roll back quickly.
Hacks are dangerous and can cause your site to stop working. They make later updates to ExpressionEngine more difficult; you should track your hacks for post-update re-implementation.
Most hacks are unnecessary, please review the Development Documentation for information on expanding ExpressionEngine via Modules, Extensions, and Plugins.
Hacks are never officially supported.
Here’s how to get inline editing in ExpressionEngine, using the standalone entry form, Solspace’s form helper plugin, and ajax.
How it works
When you click on the edit link for an entry, a javascript function is called, which retrieves a page with an edit form. The edit form is loaded in the place where the entry used to be. When you press the Update button, another javascript function is called, and it sends the form contents to EE, which then updates the entry. The page is refreshed automatically, showing the newly updated entry.
Steps
1. Download File:edit.js.txt and upload it onto your server. I didn’t write it entirely by myself, it was based on work by Dutchcelt and Matthew Eernisse.
Include it in the head of your template like so:
<script type="text/javascript" src="http://www.example.com/edit.js"></script>
2. Create a new template called edit. This template will hold the edit form. The id of the entry to be edited will be passed in via a URL segment. Here’s some sample code you can paste into this template - it has fields for the title, date, body, and category. It uses the form helper plugin, so you will need to download and install that plugin too.
You can edit the code as needed to add in more options. Just keep the return and preview parameters the same, as well as the javascript calls in the submit and cancel buttons.
There are three buttons in this form - the first is Update, which submits the changes, the second is Reset, which resets the form contents, and Cancel, which removes the form from the page.
Once you submit the edit form, it will return to the edit template with ‘success’ added onto the URL segment. The bottom part of the sample code checks for the word ‘success’ in the URL segment, and displays a message saying the entry has been updated. You can edit that to whatever you like too.
Note about Previews
Previews don’t exactly work. I’ve managed to get a preview of the submitted form, but the changes don’t stay in the form. Some Standalone Form-Hardcoding may fix that, but I haven’t figured out how yet. If you want to play around with previews, the code for the preview button is:
<input type="submit" name="preview" value="Preview" onclick="saveEntry('{path="{template_group_name}/edit"}{entry_id}','entry_id{entry_id}',this.form,false); return false;">
3. Within your
{exp:weblog:entries}
div
<div id="entry_id{entry_id}">
-- ENTRY CONTENTS --
</div>
4. Within the div tag, add in the edit link, like so:
{if member_group == 1}
<a href="http://www.example.com/system/index.php?S=0&C=edit&M=edit_entry&weblog_id={weblog_id}&entry_id={entry_id}"
onclick="editEntry('{path="{template_group_name}/edit"}{entry_id}','entry_id{entry_id}');
return false;">edit</a>
{/if}
You will need to change the link to the location of your control panel. Also, change the
{path="{template_group_name}/edit"}
Notes
I’ve tested this on both Firefox and Internet Explorer 6 on Windows. It works on both browsers, but IE works a little faster. Also, on IE, the success message isn’t shown. I do not know whether it works on any other browser.
Back up your database first before you try anything.
I am not sure what will happen if you try to submit non-english characters in the form. After reading this, I’ve used the editURIComponent() function in the javascript, which should handle unicode characters, but this hasn’t been tested thoroughly.
You can use this to submit any kind of form. For example, I’m using this inline editing to crosspost entries from EE into LiveJournal.
Category:Plugins Category:Templates