View Full Version : New Posting Features - Message auto-save/drafts
MoMan
09-13-2011, 10:00 PM
An auto-save feature was recently added to vB4, so I figured it would be nice if we vB3 users could also get something similar ;)
While this this isn't a server-side solution, I think that it's still pretty solid, as it relies on the localStorage system in your browser, which is supported by Safari, FF 3.5+, Opera, Chrome, and IE8+.
I have tested this on FF6, the latest Safari and Chrome, and IE9. I wrote it with IE8 in mind, but haven't tested IE8 as my forum skin doesn't support it (yup, it's a terrible browser).
For now, I am marking this as a beta release until we're sure it works in all browsers that support localStorage and there aren't any outstanding bugs.
Where does this work?
Quick reply
New reply/New thread
PM quick reply
New PM
PM regular reply
Anywhere else you want, given that the page contains a form named "vbform" and a textarea named "message" (or the vbulletin wysiwyg editor)
How does this work?
You can start typing a post, close your browser, open the same page, and the post will still be there. Note that this mod keys data by URL in order to avoid collisions.
The mod automatically and silently restores posts when possible. However, if the editor already contains something when you load the page (i.e. PM quick reply), then you will receive a prompt asking you whether or not you want to work with the recovered text.
This mod works even if you disable the WYSIWYG editor and it will quite likely work with older versions of vB all the way down to 3.5.
Installation
Installation is simple.
[1]Download the attached file (or download the file directly (http://www.pentaxforums.com/forums/clientscript/vbulletin_autosave.js) and skip step 2)
[2]Change the extension to .js from .js.txt
[3]Upload it to your forum's clientscript directory
[4]Add the following code to the bottom of your forum templates* wherever you want this mod to work:
<script type="text/javascript" src="$vboptions[bburl]/clientscript/vbulletin_autosave.js"></script>
If you don't care about http overhead, you can put this code in your footer template as it will die gracefully on pages without an editor. However, I recommend only putting it in templates that use it. On my forum, I've added it to the following templates: SHOWTHREAD, newreply, newthread, pm_showpm, pm_newpm On top of that, if you don't allow guests to post, wrap the code in a member-only conditional: <if condition="$show['member']">...</if>
*the script tags must be placed after the editor text area element; this doesn't necessarily have to be the very end of the template, although it's good practice to do so
License:
You are free to use, modify, re-post and re-distribute the code as long as you credit me in the script comments. Improvements and derivatives are welcome!
Note: This is a CLIENT-SIDE mod. Please be sure that any issues you may report aren't related to the fact that a. your browser is misconfigured or b. you are using an old/unsupported browser.
Max Taxable
09-14-2011, 07:10 AM
No worky.... FF 7.
Max Taxable
09-14-2011, 01:53 PM
UPDATE!
This mod Works great on my board (3.8.6) and with my browser (FF 7).
Reason I didn't think it did before was, I use Cloud Flare and changes such as this aren't immediately visible! Takes awhile for such changes to propagate through the system!
EddyMaxx
09-14-2011, 10:41 PM
Great mod!! Thanks.
MoMan
09-15-2011, 12:04 AM
I've uploaded an updated version of the file in which I fixed PM quick reply compatibility in firefox and added better support for IE8.
Glad to hear you guys like it!
MoMan
09-15-2011, 09:36 PM
I've upload version 0.3 which fixes a potential issue with data keys. I recommend that everyone updates their js file to guarantee correct URL association with the saved data.
EddyMaxx
09-15-2011, 11:01 PM
Cool, thanks man.
Max Taxable
09-16-2011, 01:20 AM
I've upload version 0.3 which fixes a potential issue with data keys. I recommend that everyone updates their js file to guarantee correct URL association with the saved data.Same link to click to get the updated version?
EddyMaxx
09-16-2011, 03:59 PM
This started causing some issues. A few folks kept getting their browser closed whenever they went to showthread or PM box. It would just close out when they tried to open a thread or PM.
I removed the script tags from all areas and its back to normal.
Any ideas?
I uploaded the latest javascript file as well.
MoMan
09-16-2011, 06:42 PM
Version 0.4 is up, with improvements to data clearing when a post is submitted as well as slightly shorter code.
This script shouldn't cause anyone's window to close. What browser were they using? Users of my site haven't observed this.
MoMan
09-16-2011, 06:43 PM
Same link to click to get the updated version?
Yup, same link.
EddyMaxx
09-16-2011, 08:34 PM
I'll try it again with the update .js and report back.
MoMan
09-17-2011, 10:16 PM
I've uploaded version 0.5. This introduces some efficiency fixes: if a user erases their post while typing it, it will now be completely removed from the browser storage (instead of being replaced by an empty string).
Also, an auto-save is no longer triggered simply by hovering your mouse over the text. This introduced some issues with quick reply, as you could technically submit your post and then get the auto-save system to store it after it had been submitted.
viper357
09-19-2011, 07:54 AM
Awesome, will install this on 3.8.5, quick question first, will this cause any significant increase in server load on a biggish forum (over 500 000 posts)?
NAZIA
09-19-2011, 03:43 PM
Perfect Mod.. installed...
MoMan
09-21-2011, 12:47 AM
Awesome, will install this on 3.8.5, quick question first, will this cause any significant increase in server load on a biggish forum (over 500 000 posts)?
It's a client-side script, doesn't involve the server at all :)
chiplove.9xpro
09-25-2011, 02:15 AM
thank :D,
good mod
NAZIA
09-28-2011, 07:03 AM
hi
this mod is really helpful
but unfortunatly it has 1 disadvantage that , it disabled Links in vb Ajax dropdown menu..
you can understand by image below...
133267
it ads #.. instead of the original url...
and after clicking on this button happens nothing...
even users can not click on the notifications...
NAZIA
09-28-2011, 02:12 PM
anyone else has this thing happen on their board?
viper357
09-28-2011, 02:33 PM
I also get the # but the link still works fine.
NAZIA
09-28-2011, 03:35 PM
but for me, sometime links work, mostly does not work..
in Firefox 6.0.2
MoMan
09-28-2011, 05:58 PM
Make sure you're including the JS file on all the pages you want it to work on.
If it's still not working, you can uncomment the console.log statements in the code and trace the execution in firebug. If you find any issues then, let me know how to reproduce them and I'll look in to fixing them!
NAZIA
09-28-2011, 10:11 PM
Yes.. i fix it.. that was due to conflicting some ads code .. i have remove the ads now it is working fine.. sorry :S
drsli
10-03-2011, 04:29 PM
Thank you for this very useful addon! :)
The need for it was proved, when I worked on this reply for the first time. Meanwhile I was kicked out by vbulletin.org with my idle-time and after hitting submit the text was gone.
The mod works like a charm with my live-forum. Thus far I could test Firefox and Chrome on MacOSX.
Perhaps I didn?t catch the description above accurately, but I don?t get any prompt to consent to the saved text or not.
MoMan
10-03-2011, 04:44 PM
Glad to hear you like it and that it works! The prompt only shows up in the PM quick reply interface, as there, a quote of the PM is inserted into the editor by default, and you might not notice that the saved text had been inserted otherwise :)
RTMdotORG
10-18-2011, 04:35 PM
Is there a way to show text when it happens like vB4?
MentaL
10-19-2011, 02:50 PM
Works good.
MoMan
10-26-2011, 10:48 PM
Is there a way to show text when it happens like vB4?
Since this fires as soon as you start typing and for every character you enter, it would have to work differently. For a future release I'm planning to have it work differently :)
bitwise2000
01-02-2012, 10:30 PM
Anyone have this running successfully on 3.7?
This is a better mousetrap than the one I know runs ok on 3.7.
MoMan
01-19-2012, 01:45 AM
Should work fine on 3.7, as it's client-side and I don't think the editor templates were changed.
navarro
02-03-2012, 05:20 AM
it didnt work for me. tried on ff and chrome
ali_ahr7
02-14-2012, 07:02 AM
hello.
i installed it , and doesnt work at all
can u tell me , where can i exactly use this code in my template.
for example its my temp code in showthread:
$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
$headinclude
<title>$vboptions[bbtitle] - $vbphrase[post_new_thread]</title>
</head>
<body$onload>
$header
$navbar
$postpreview
<form action="newthread.php?do=postthread&f=$forumid" method="post" name="vbform"<if condition="!is_browser('webtv')"> onsubmit="return vB_Editor['$editorid'].prepare_submit(this.subject.value, $vboptions[postminchars])"</if>>
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="tcat">
<span class="smallfont" style="float:$stylevar[right]"><strong>$vbphrase[forum]</strong>: <a href="forumdisplay.php?$session[sessionurl]f=$foruminfo[forumid]">$foruminfo[title]</a></span>
$vbphrase[post_new_thread]
</td>
</tr>
<tr>
<td class="panelsurround" align="center">
<div class="panel">
<div style="width:$stylevar[formwidth]" align="$stylevar[left]">
$usernamecode
$human_verify
<!-- subject field -->
<table cellpadding="0" cellspacing="0" border="0" class="fieldset">
<tr>
<if condition="$prefix_options">
<td class="smallfont">$vbphrase[prefix]:</td>
<td class="smallfont" colspan="3">$vbphrase[title]:</td>
<else />
<td class="smallfont" colspan="4">$vbphrase[title]:</td>
</if>
</tr>
<tr>
<if condition="$prefix_options">
<td style="padding-right: 1px">
<select name="prefixid" class="bginput">
<option value="">$vbphrase[no_prefix_meta]</option>
$prefix_options
</select>
</td>
</if>
<td>
<input type="text" class="bginput" name="subject" value="$subject" size="40" maxlength="$vboptions[titlemaxchars]" tabindex="1" />
</td>
<td> </td>
<td><img id="display_posticon" src="$selectedicon[src]" alt="$selectedicon[alt]" /></td>
</tr>
</table>
<!-- / subject field -->
<!-- message area -->
<div class="smallfont">$vbphrase[message]:</div>
$messagearea
<!-- / message area -->
<if condition="$show['tag_option']">
<fieldset class="fieldset" style="margin-top: $stylevar[cellpadding]px">
<legend>$vbphrase[tags]</legend>
<div style="padding:$stylevar[formspacer]px">
<div>$vbphrase[separate_tags_using_comma]</div>
<span id="tag_add"><input type="text" class="bginput" name="taglist" id="tag_add_input" value="$newpost[taglist]" size="40" tabindex="1" /></span>
<if condition="$show['tags_remain']"><div><phrase 1="$tags_remain">$vbphrase[you_may_add_x_tags_to_thread]</phrase></div></if>
</div>
<if condition="$show['popups']">
<div id="tag_add_menu" class="vbmenu_popup" style="display:none"></div>
<script type="text/javascript" src="clientscript/vbulletin_ajax_tagsugg.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript">
<!--
vbmenu_register('tag_add', true);
tag_add_comp = new vB_AJAX_TagSuggest('tag_add_comp', 'tag_add_input', 'tag_add');
tag_add_comp.allow_multiple = true;
tag_add_comp.set_delimiters('$tag_delimiters');
//-->
</script>
</if>
</fieldset>
</if>
$posticons
</div>
</div>
<div style="margin-top:$stylevar[cellpadding]px">
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" name="f" value="$forumid" />
<input type="hidden" name="do" value="postthread" />
<input type="hidden" name="posthash" value="$posthash" />
<input type="hidden" name="poststarttime" value="$poststarttime" />
<input type="hidden" name="loggedinuser" value="$bbuserinfo[userid]" />
<input type="submit" class="button" name="sbutton" id="{$editorid}_save" value="$vbphrase[submit_new_thread]" accesskey="s" tabindex="1" />
<input type="submit" class="button" name="preview" value="$vbphrase[preview_post]" accesskey="r" tabindex="1" />
</div>
</td>
</tr>
</table>
<if condition="$show['additional_options']">
<br />
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('newpost_options')"><img id="collapseimg_newpost_options" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_newpost_options].gif" alt="" border="0" /></a>
$vbphrase[additional_options]
</td>
</tr>
</thead>
<tbody id="collapseobj_newpost_options" style="$vbcollapse[collapseobj_newpost_options]">
<tr valign="top">
<td class="panelsurround" align="center">
<div class="panel">
<div style="width:$stylevar[formwidth]" align="$stylevar[left]">
<if condition="$show['podcasturl']">
<!-- podcast stuff -->
<fieldset class="fieldset">
<legend>$vbphrase[podcast_options]</legend>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td class="smallfont">$vbphrase[podcast_url]:</td>
<td class="smallfont"> $vbphrase[filesize_bytes]:</td>
</tr>
<tr>
<td><input type="text" class="bginput" name="podcasturl" value="$podcasturl" size="50" maxlength="255" tabindex="1" title="$vbphrase[podcast_url]" /></td>
<td> <input type="text" class="bginput" name="podcastsize" value="$podcastsize" size="10" tabindex="1" title="$vbphrase[podcast_size]" /></td>
</tr>
<tr>
<td class="smallfont">$vbphrase[subtitle]:</td>
<td class="smallfont"> $vbphrase[explicit]:</td>
</tr>
<tr>
<td><input type="text" class="bginput" name="podcastsubtitle" value="$podcastsubtitle" size="50" maxlength="255" tabindex="1" title="$vbphrase[subtitle]" /></td>
<td><input type="checkbox" name="podcastexplicit" value="1" tabindex="1" $explicitchecked title="$vbphrase[explicit]" /></td>
</tr>
<tr>
<td class="smallfont">$vbphrase[keywords]:</td>
<td class="smallfont">$vbphrase[author]:</td>
</tr>
<tr>
<td><input type="text" class="bginput" name="podcastkeywords" value="$podcastkeywords" size="50" maxlength="255" tabindex="1" title="$vbphrase[keywords]" /></td>
<td><input type="text" class="bginput" name="podcastauthor" value="$podcastauthor" size="25" maxlength="255" tabindex="1" title="$vbphrase[author]" /></td>
</tr>
</table>
</fieldset>
<!-- / podcast stuff -->
</if>
<if condition="$show['misc_options']">
<fieldset class="fieldset">
<legend>$vbphrase[miscellaneous_options]</legend>
<div style="padding:$stylevar[formspacer]px">
<if condition="$bbuserinfo['signature'] != ''"><div><label for="cb_signature"><input type="checkbox" name="signature" value="1" id="cb_signature" tabindex="1" $checked[signature] />$vbphrase[show_your_signature]</label></div></if>
<if condition="$show['parseurl']"><div><label for="cb_parseurl"><input type="checkbox" name="parseurl" value="1" id="cb_parseurl" tabindex="1" $checked[parseurl] />$vbphrase[automatically_parse_links_in_text]</label></div></if>
$disablesmiliesoption
</div>
</fieldset>
</if>
$attachmentoption
<if condition="$show['member']">
<fieldset class="fieldset">
<legend>$vbphrase[thread_subscription]</legend>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td>$vbphrase[notification_type]:<br /><select name="emailupdate" tabindex="1">
<option value="9999" $emailchecked[9999]>$vbphrase[do_not_subscribe]</option>
<option value="0" $emailchecked[0]>$vbphrase[no_email_notification]</option>
<option value="1" $emailchecked[1]>$vbphrase[instant_email_notification]</option>
<option value="2" $emailchecked[2]>$vbphrase[daily_email_notification]</option>
<option value="3" $emailchecked[3]>$vbphrase[weekly_email_notification]</option>
</select></td>
<if condition="$show['subscribefolders']"><td>$vbphrase[folder]:<br /><select name="folderid" tabindex="1">$folderbits</select></td></if>
</tr>
</table>
</fieldset>
</if>
<if condition="$show['poll']">
<fieldset class="fieldset">
<legend>$vbphrase[post_a_poll]</legend>
<div style="padding:$stylevar[formspacer]px">
<div><label for="cb_postpoll"><input type="checkbox" name="postpoll" value="yes" id="cb_postpoll" tabindex="1" $checked[postpoll] />$vbphrase[yes_post_a_poll_thread]</label></div>
<div><label for="polloptnum">$vbphrase[number_of_poll_options]: <input type="text" class="bginput" size="5" name="polloptions" value="$polloptions" id="polloptnum" tabindex="1" /></label> <if condition="$vboptions['maxpolloptions']">($vbphrase[maximum]: $vboptions[maxpolloptions])</if></div>
</div>
</fieldset>
</if>
$threadmanagement
</div>
</div>
<div style="margin-top:$stylevar[cellpadding]px">
<input type="submit" class="button" name="sbutton" value="$vbphrase[submit_new_thread]" accesskey="s" tabindex="1" />
<input type="submit" class="button" name="preview" value="$vbphrase[preview_post]" accesskey="r" tabindex="1" />
</div>
</td>
</tr>
</tbody>
</table>
</if>
</form>
<br />
$forumrules
$footer
</body>
</html>
ali_ahr7
02-16-2012, 05:43 AM
excuseme,please answer me,i need the answer !
BR_Advocate
02-18-2012, 05:03 PM
excuseme,please answer me,i need the answer !
Put it at the bottom after $footer
tommydamic68
02-19-2012, 11:02 AM
first, how do you know if it works, i have it installed, went to close browser (safari) in the middle of a post as you said to do and i get this message see attachment. Here is the code i put in all threads you mentioned and i placed the code after &footer in all templates you suggested. Also changed the .txt to .js and uploaded the file to the client script folder. Am i doing something wrong?
Thanks in advanced.
<if condition="$show['member']"><script type="text/javascript" src="$vboptions[bburl]/clientscript/vbulletin_autosave.js"></script></if>
quitsmoking
03-11-2012, 11:09 AM
Great mod, thanks. But it doesn't work for me on IE9. Any idea why?
dknelson
07-09-2014, 06:22 PM
I as excited about this mod but it doesn't seem to do anything on 3.8.7 PL4
I installed it and get no errors but it just doesn't seem to do anything. Started typing a new thread, saved the URL and then closed the browser. Went to the link that I had save and there was nothing there. Am I misunderstanding how it works and/or how to test it?
DRIVER1ksa
03-25-2016, 09:31 PM
only firefox
chrom and edge not workin
need more support
vBulletin® v3.8.12 by vBS, Copyright ©2000-2025, vBulletin Solutions Inc.