vb.org Archive - New Posting Features - Message auto-save/drafts

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.8 Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=235)

- - New Posting Features - Message auto-save/drafts (https://vborg.vbsupport.ru/showthread.php?t=270236)

Message auto-save/drafts

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 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:

HTML Code:

<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.

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!

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!

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.

Quote:

Originally Posted by MoMan (Post 2246510)

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?

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.

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.

Quote:

Originally Posted by Max Taxable (Post 2246571)

Same link to click to get the updated version?

Yup, same link.

I'll try it again with the update .js and report back.

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.

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)?

Perfect Mod.. installed...

Quote:

Originally Posted by viper357 (Post 2247773)

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 :)

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...
Attachment 133267

it ads #.. instead of the original url...
and after clicking on this button happens nothing...

even users can not click on the notifications...

anyone else has this thing happen on their board?

I also get the # but the link still works fine.

but for me, sometime links work, mostly does not work..

in Firefox 6.0.2

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!

Yes.. i fix it.. that was due to conflicting some ads code .. i have remove the ads now it is working fine.. sorry :S

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.

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 :)

Is there a way to show text when it happens like vB4?

Quote:

Originally Posted by RTMdotORG (Post 2258658)

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 :)

Anyone have this running successfully on 3.7?

This is a better mousetrap than the one I know runs ok on 3.7.

Should work fine on 3.7, as it's client-side and I don't think the editor templates were changed.

it didnt work for me. tried on ff and chrome

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:

Code:

$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&amp;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>&nbsp;&nbsp;</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">&nbsp;$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>&nbsp;<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">&nbsp;$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>

excuseme,please answer me,i need the answer !

Quote:

Originally Posted by ali_ahr7 (Post 2300151)

excuseme,please answer me,i need the answer !

Put it at the bottom after $footer

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>

Great mod, thanks. But it doesn't work for me on IE9. Any idea why?

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?

only firefox
chrom and edge not workin

need more support

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01312 seconds Memory Usage 1,886KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_code_printable (1)bbcode_html_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (39)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: