Click here to Skip to main content
Click here to Skip to main content

DumpYard (A Recycle Bin for webpages)

, 26 Mar 2014 MIT
Rate this:
Please Sign up or sign in to vote.
Ths jquery plugin helps to store the values that are being changed in the DOM input elements of a webpage for future reference and restoration.

Introduction

DumpYard JQuery plug-in is like a recycle bin for web pages, fully written in JQuery and advanced JavaScript. This free plug-in is released under the MIT license. Have fun with it. Smile | :)

What Can It Do?

This will store the values of input DOM elements on the event set by developer like on focus out.

  • All information is stored at browser local storage (i.e. HTML LocalStorage)
  • It will help the user to retrieve the input data that she/he has used in the past
  • User will not lose information even if she/he closes the browser
  • It can be a best helper for application tester to track the testing inputs
  • It will help user to go back and see any information they have provided in the past.

Using the Code

Using this plug-in is so easy. Just include the JavaScript file (jquery.dumpYard.js) and you have to write a single line of jquery code (i.e,. jQuery('body').setDumpYard();) in your document ready event. we need jquery library as it uses jquery.

Make sure you have placed all required images and CSS. All these files are available on github at https://github.com/AkshyaDash/DumpYard.

This will show a mouse button on the right top corner of your page. When you click that, a floating box will appear with two buttons on top.

If you have made any changes in any input field of your webpage, then go and just click that field. It will show you the change history of that field on that floating box. It shows date time and the value of the field at that time.

If you want to restore the value of that field, then just click the restore button at the far right end of the date time and value shown.

Field that Gets Stored

  • TextBox
  • TextArea
  • Check Box
  • Radio button
  • File Upload
  • Dropdown List
    <script src="jquery-1.7.1.js"></script>
    <script src="jquery-1.7.1.min.js"></script>
    <script src="jquery.dumpYard.js"></script>
    <link rel="stylesheet" type="text/css" href="../DumpYard.css" />

    <script type="text/javascript">
           
  $(document).ready(function () {     
<pre lang="C++">      jQuery('body').setDumpYard();// this will initiate the required methods and classes 
        });

    </script>

How to use?

The above code will add a mouse button to the right top corner of web page

If you click that mouse image, the dumpYard box will be shown with two buttons.

If you have already made any changes in that input fields and want to see the history. then simply click on that input field. The change history will be shown as a list on the dumpyard box. each item will show the date time and the value at that time.

If you want to restore any value then just click the restore button ( indicated with a small arrow in the below image), this will restore the value(as shown).

User can delete all history by clicking the big delete button on that dumpyard box.

Points of Interest

I got a thought and implemented that in jquery so that anyone can use it. This plugin will be helpful for users as well as testers. It just uses HTML local storage so it will only work on the browser that supports HTML local storage. Don't worry, most of the browsers support it.

I did not find any plugin that works like this.

License

This article, along with any associated source code and files, is licensed under The MIT License

Share

About the Author

Akshya Dash
Software Developer (Senior) SVAM International
India India
No Biography provided
Follow on   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 26 Mar 2014
Article Copyright 2014 by Akshya Dash
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid