A couple months ago, I wrote a post on how to use AJAX to edit content inline – without accessing the control panel and without a page refresh.
Since then, I’ve found a much cooler and more practical way of editing content inline: by using a modal box. The result is the same: authorized users can update certain content blocks without control panel access and without any knowledge of HTML.
In fact, I think this method is far more robust, flexible, and user friendly than the AJAX one I shared with you a while back.
Let’s get started.
What is a modal box?
If you already know what a modal box is and why you would use it with ExpressionEngine, feel free to skip ahead to the implementation.
A modal box is a JavaScript driven dialogue box that “pops over” a page’s content. It is not a separate popup window, so it won’t be blocked by a user’s browser. Perhaps most importantly, a modal box requires the user to interact with it before the user can do anything else on the page.
A simple modal box
Why use a modal box for inline editing?
Usability. A modal box does not require the user to leave the current page, which means a user can interact with the dialogue (or series of dialogues) while still seeing the same page in the background.
For ExpressionEngine users in particular, not having to leave the page you want to edit is a big bonus, since finding a particular weblog entry in the control panel can be time consuming.
Can I see a demonstration?
Here is the end result of this tutorial. Feel free to make some changes – these are posting to an actual EE database so you can see how this method works.
You can also go to Wildbit’s Modal Box page and check out the demos.
Getting a modal box to work with ExpressionEngine
The goal for this tutorial is to implement a modal box that allows us to edit the content of an ExpressionEngine weblog entry inline; that is, without control panel access.
Step 1: Create a new weblog, custom fields, and template group
To be as comprehensive as possible, I’ll assume that you’re starting with a fresh EE install. If you already have weblogs set up, skip to the next step.
Create a new weblog (in a flash of brilliance, I named mine “ModalBox Test” and gave it a short name of modalbox_test).
Create a new custom field group (or use the default one). Make sure it has at least one text input field type and one textarea field type. I set the formatting for my fields to “none,” but you don’t have to.
Use the short names above if you plan to follow this tutorial to a T.
Assign your field group to your modalbox_test weblog.
Create a new template group. I called mine modalbox_test, the same as the weblog.
Step 2: Grab the ModalBox files
Visit Wildbit’s site and download the latest version of ModalBox (I’m using 1.6.0 for this tutorial).
Extract the zip file on your computer, then upload the modalbox1.6.0 folder to your web server. For this tutorial, I renamed my modalbox1.6.0 folder to modalbox and uploaded it to my system/scripts folder (this folder does not exist by default, so you will have to create it).
For the visually inclined.
The system folder is EE’s default system folder. You may have renamed it to something else.
Step 3: Link the ModalBox files to your template
I’ve prepared the following code block that you can use in your new template. If you’re using my custom field names from Step #1, you don’t need to change anything. Otherwise, be sure to replace my custom field names with your own.
Copy and paste the following code into your modalbox_test/index template (the calls to the ModalBox files are in red boldface):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Inline Editing with Modal Boxes</title>
<link rel="stylesheet" type="text/css" href="{stylesheet=weblog/stylesheet}" />
<!-- Modalbox files -->
<script type="text/javascript" src="{scripts}/modalbox/lib/prototype.js"></script>
<script type="text/javascript" src="{scripts}/modalbox/lib/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="{scripts}/modalbox/modalbox.js"></script>
<link rel="stylesheet" type="text/css" href="{scripts}/modalbox/modalbox.css" media="screen" />
<!--// Modalbox files -->
</head>
<body>
<h1>An example of inline editing with ExpressionEngine and Modal Boxes</h1>
<ul>
{exp:weblog:entries disable="categories|member_data|pagination|trackbacks" weblog="modalbox_test"}
<li>
<h2>{title}</h2>
<p><strong>{modalbox_input}</strong></p>
<p>{modalbox_textarea}</p>
</li>
{/exp:weblog:entries}
</ul>
</body>
</html>
Notice the {scripts} variable. That is a global variable I set up in EE that contains the path to my scripts folder (e.g., http://www.yoursite.com/system/scripts).
Step 4. Add an “Edit” link
Before you go any further, add some test entries, then preview your template to make sure everything is hooked up correctly.
Once that’s done, add the following line of code to your template. Place it where you’d like the “Edit” link to appear (I placed mine right below the <h2> tags in the sample code).
{if logged_in}<a onclick="Modalbox.show($('modalbox-content-{entry_id}'), {title: this.title, width: 800}); return false;" title="Edit this weblog entry" href="#">Edit</a>{/if}
This line of code tells the ModalBox script to load a DIV with an ID of modalbox-content-XX (where XX is the entry’s ID) into a ModalBox that is 800 pixels wide with a heading of “Edit weblog entry.”
Step 5. Create the DIV
In the previous step, we told ModalBox to find and display a DIV with a particular ID. This DIV will contain a SAEF (stand alone edit form), which allows us to easily and safely post our changes to the EE database.
Grab the SAEF code here and paste it wherever you like in your main template, so long as it is within the {exp:weblog:entries} tags.
The only thing you’ll need to change in the SAEF are the custom field ID numbers associated with each of your custom fields.
What?
When you created custom fields for your weblog, ExpressionEngine assigned each of them a unique ID number. We need to know what these numbers are in order to pull the correct information from the database.
To find these numbers, go to Admin › Weblog Administration › Custom Weblog Fields, then click “Add/Edit Custom Fields” next to the field group you created for this tutorial. Mouse over each of your custom fields and note the number that appears in the bottom left of your browser:
How to find a field ID for each of your custom fields
Here are my field IDs:
- modalbox_input: 73
- modalbox_textarea: 74
In your SAEF, find any references to these field IDs. They will look like field_id_XX, where XX is the field ID. For example, I would change my SAEF to look like this (my changes are in red):
<label for="amount">Modalbox Input</label> <input type="text" name="field_id_73" id="amount" value="{modalbox_input}" /> <input type="hidden" name="field_ft_73" value="none" /> <label for="details">Modalbox Textarea</label> <textarea name="field_id_74" id="details">{modalbox_textarea}</textarea> <input type="hidden" name="field_ft_74" value="none" />
The field_ft_XX lines control the formatting for a particular field. You can leave them set to “none” to remove all HTML formatting.
Step 6. Test your ModalBox
Save and preview your template, then click an “Edit” link to call the ModalBox. If you’ve followed along closely, you’ll see a form populated with your weblog entry’s content.
The results of our hard work
Make some changes and click “Save” and you should be sent to the location specified in the “return” parameter of your SAEF. If this is the same page you just came from, you should see your changes.
Step 7. Add a success message
If you make a change and get dumped back on a page without any visual cues that something changed, you (or your client) may not have a clue what just happened.
That’s why I suggest adding a success message.
First, alter the return parameter in your SAEF to include the following:
return="modalbox_test/index/?updated=true"
You can set “updated” to be anything you like; it’s just a variable name.
Next, in the page you are returning to (modalbox_test/index), add the following lines of PHP:
<?php
if(stristr($_SERVER['REQUEST_URI'], 'updated=true')) { $updated = 1; }
if(isset($updated)) {
echo "<div>Your weblog entry was successfully updated.</div>";
}
?>
This snippet checks the URL for the segment we just added; if it finds it, then it displays a success message.
Step 8. Add a dropdown menu
In my last tutorial on inline editing, I didn’t touch the subject of dropdowns, since trying to get them to work with that script was impossible.
Luckily, we can use the SAEF with a bit of PHP to get what we need. Add the following where you’d like your dropdown to appear in the SAEF, being sure to replace the field IDs as needed:
<label for="dropdown">Dropdown List</label> <select name="field_id_XX"> {exp:query sql="SELECT field_list_items FROM exp_weblog_fields WHERE field_id = 'XX' "} <?php $items ="{field_list_items}"; $items = explode("\n", $items); $howmany = count($items); $i = 0; do { $item_id = $items[$i]; ?> <option value="<?=$item_id?>"><?=$item_id?></option> <?php $i++; } while ($i < $howmany); ?> {/exp:query} </select>
This bit of code will loop through all of your manually entered dropdown items, then display them.
Step 9. Enjoy!
Feel free to share your own experiences, or to suggest ways to improve the code I’ve presented here. Have a question? Got stuck and need help? Let me know!
Postscript: Streamlining your implementation
I was fortunate enough to receive some feedback from Markus Stolpmann, a fellow EE user, on how to improve the modalbox implementation. The steps above are fine if you don’t mind including hidden divs in your code – but what if this isn’t your cup of tea?
It’s far easier to maintain your code if you include the SAEF in a separate template.
To begin, create a new template group (something like modalboxes works well). This new group will hold all of the content shown in your modal boxes. Our company intranet, for example, has templates like:
- modalboxes/add_prospect
- modalboxes/add_invoice
- modalboxes/edit_prospect
- modalboxes/edit_invoice
Each of these templates contains a SAEF with fields specific to the task (i.e., I won’t have an “invoice number” input box in my edit_prospect template). Here is an example of what my modalboxes/edit_prospect template looks like:
{exp:weblog:entry_form weblog="prospects" return="prospects/prospect_added"}
<ul>
<li>
<label for="title">Prospect Name<em>*</em></label>
<input type="text" name="title" id="title" value="{title}" maxlength="100" onkeyup="liveUrlTitle();" />
</li>
<li>
<label for="email">Email</label>
<input type="text" name="field_id_4" id="email" />
</li>
...
<li>
<input type="submit" name="submit" value="Edit prospect" /> or <a href="#" title="Close window" onclick="Modalbox.hide()">Cancel and close window</a>
<input type="hidden" name="status" value="Prospect" />
<input type="hidden" name="url_title" value="{url_title}" maxlength="75" />
<input type="hidden" name="entry_date" value="<?php echo date("Y-m-d h:i"); ?>" />
<input type="hidden" name="allow_comments" value="y" {allow_comments} />
</li>
</ul>
{/exp:weblog:entry_form}
Go ahead and remove the divs we created in step 5, transferring them to your new template group. Then find your “edit” link (step 4) and replace it with the following:
<a onclick="Modalbox.show('{path=modalboxes/edit_prospect}{entry_id}', {title: this.title, width: 800}); return false;" title="{title} – Edit details" href="#">
This line of code passes each weblog entry’s ID to the “modalboxes” template group, where it’s picked up automatically and used to populate your SAEF.
You can now enjoy modalboxes without cluttering your main templates with hidden divs. Enjoy!
11 Comments
Great tutorial, Ryan. Thanks for sharing the infos and especially the hint in the P2 thread.
Could you elaborate a bit why you use external PHP scripts to access the EE database instead of an PHP enabled template and EEs functions like query or the SAEF tag? Seems that would lower the risk, but most likely you tried and ran into some troubles?
Thanks again!
Markus (ms)
Markus,
You bring up a great point, and your timing couldn’t have been better. I received a comment on a related thread in the EE forums about using EE custom variables instead of mucking about with PHP scripts. This led me to discover that you can, in fact, easily use the SAEF with ModalBox instead of external PHP files.
You can view my quickie walkthrough on how to do this here; I’ll be updating this tutorial shortly to include my findings.. Update: The tutorial now includes the improved changes. No PHP required (unless you want to display a success message).I just checked out the demo and the modalboxes launched but didn’t have any content in them.
Hi John,
Thanks for pointing that out. The problem was that I am using a SAEF to show the edit form, and by default a SAEF is only visible to logged-in members. You can get around this limitation, as I did, by using the brilliant LogMeIn plugin, available here.
Would it be worth wrapping the script files in the same if statements?
It seems unnecessary to load them in for the average user.
Secondly, will there be any conflicts with jQuery?
Lastly, it’s worth noting that this won’t work with the Structure module as it doesn’t like SAEF too much!
Steven,
Thanks for your comments. It’s definitely worth wrapping the scripts in the same conditionals – anything to reduce server load. You can also use the {if member_group} and {if logged_in} conditionals.
There are conflicts with jQuery out of the box, but you can read this article to learn how to circumvent them. I have successfully used the second method (Including jQuery before other libraries) to get both the jQuery accordion script and modal boxes working on the same page.
Basically, you’ll (1) call your jQuery functions first and (2) replace all instances of $ with jQuery.
I don’t have any experience with Structure, so unfortunately can’t offer any comments on that. Too bad though!
It is worth pointing out that the “Postscript: Streamlining your implementation” part of this tutorial is incomplete and does not work in its current form.
In the modalboxes/edit_ templates, the exp:weblog:entry_form tag does not know which entry to edit so we must specify it by adding a exp:weblog:entries tag at the beginning (and closing it at the end) and passing the segment_3 to the entry_id by adding this at the very beginning:
{exp:weblog:entries weblog=”prospects” entry_id=”{segment_3}”}
and add this at the very end:
{/exp:weblog:entries}
Dale,
Thanks for your comment. Adding the following line just after the opening exp:weblog:entry_form tag should also do the trick; it seems I omitted it above:
< input type="hidden" name="entry_id" value="{entry_id}" />@Steven
If you’re simply using the field ID values it shouldn’t matter that that you are using Structure. You may need a custom query to submit the date directly into the Structure table which is titled exp_structure, but really all you’re doing here is updating date within the database tables so it doesn’t matter what modules/extensions/plugins you might be using.
this would be excellent as a plugin!
will dig into this soon!
I have a blog that is ordered by date. When I use this method, it updates the entry date of the post as well so an old post that gets edited now gets treated as a new post. Any way to fix this?
The link for “Grab the SAEF code here” doesn’t work, which makes me (as the noob I am) unable to finish your otherwise awesome tutorial.
Hey Pontus,
I’m the total n00b here…the URL is now fixed.
Thanks!
Post a Comment