aliflux / seemly.js Goto Github PK

Everyone hates forms that reload the entire page on submission, they really screw up the UX. And converting these forms into dynamic ajax based forms is usually a headache as well. Seemly.js takes care of that seamlessly.

It automagically converts simple web forms (PHP, ASP.NET, Node, Rails, etc...) into dynamic ajax based forms without changing a single line of your JS code.

Simply add these two libraries to your page (besides jQuery).

<script type="text/javascript" src="/path/to/diffDOM.min.js"></script>
<script type="text/javascript" src="/path/to/seemly.min.js"></script>

Just add the attribute data-seemly-express to your script tag. Like this:

<script type="text/javascript" src="/path/to/seemly.min.js" data-seemly-express></script>

It would automatically upgrade all your forms.

Add data-seemly attribute to the forms you want to ajaxify. Then add data-seemly-preloader-text attribute to the elements that will show the preloading status.

<form data-seemly>
	<input type='textbox' />
	<input type='button' value='Submit' data-seemly-preloader-text='Loading...' />
</form>

You can also add data-seemly-preloader-class to an element to show a preloading animation (check out the example).

Only the elements within the form tag would be updated. This is a feature to prevent unwanted changes effecting the page.

• Incredibly simple way to upgrade forms.
• No need to customize your client or server side code.
• Works with any type of server (PHP, ASP.NET, Node, Java, Rails). You name it!
• Allows file uploads as well.
• Natural fallback. If JavaScript is disabled, it won't hurt a bit.
• Tiny, 3KB when minified (optional diffDOM, 12KB when minified).

• Without seemly
• With seemly (Express setup)
• With seemly (Customized setup + preloader)
• File upload without seemly
• File upload with seemly

• data-seemly [values: undefined|diff|replace]

  diff option would use the diff algo diffDOM.js to do the replacements. replace would trigger simple HTML replacement (not a good idea for JavaScript hooked elements).

• data-seemly-preloader-text [values: undefined|string]

  Used to mark the elements (divs, inputs, etc...) for showing the ajax status.

• data-seemly-preloader-class [values: undefined|string]

  This class would be activated to the element when the ajax is being carried out. Good for showing preloader animations (check out the example).

• Not thoroughly tested at this moment (status: beta).
• May cause issues with JavaScript heavy forms.

Please submit bug reports, suggestions and pull requests to the GitHub issue tracker.

Details changes for each release will be documented in the release notes.

For latest releases and announcements, check out my site: aliashraf.net

This software is released under the MIT License. Please read LICENSE for information on the software availability and distribution.

Copyright (c) 2015 Ali Ashraf