Author Topic: Save wysiwyg, code and wrapper without page reload  (Read 3459 times)

Offline imqqmi

  • Posts: 26
Save wysiwyg, code and wrapper without page reload
« on: July 23, 2013, 12:47:05 PM »
-- edit 26-07-2013 --

I've added support for form tokens and tabbed the wysiwyg editor. If you have multiple sections/blocks containing the wysiwyg editor, it will now group them together using tabs. When clicking a tab it will allow you to edit the section. Save all will save all sections within the tabs (no other sections like code or news will be saved however).

-- end edit --

I've been working on modifying the standard modules wysiwig, code and wrapper to save without page reloads. This is especially useful if you edit multiple sections on one page. Normally a page reload is required which will loose all changes in all the other sections. Saving dynamically is much faster too.
It uses JSON, jquery and javascript to accomplish this.

I've changed the code to support form tokens now.

Other ideas I might consider implementing is a 'save all' button, tabs for the section editors (without loading x number of fck editor fields, but just one, which could be faster and more efficient). This would require all modules to be JSON compatible though to keep it consistent.
It's possible to add an option to save all json compatible sections when a non compatible save button is pressed by redirecting the submit form to a javascript function. You'd still loose changes from other non json sections though but the user could be warned about this.

The form editor could be replaced with jquery ui dialogs called up dynamically, saving and adding fields that would appear without reload. Same goes for the news and gallery sections.

Please let me know what you think!

Download the file here:

Extract the zip file in the site root / folder or upload it to your root folder. It's based on version 2.8.3 SP1 WB code.

I've made changes to the way it all works, this is very much a work in progress. If you want to add support to your own modules let me know, I'll make a new guide.
« Last Edit: July 26, 2013, 01:36:05 PM by imqqmi »

Offline imqqmi

  • Posts: 26
Re: Save wysiwyg, code and wrapper without page reload
« Reply #1 on: July 26, 2013, 01:37:50 PM »
Updates the package.

- Added form tokens back into the package for security
- Added tabs for wysiwyg editor so just one editor gets loaded and you can switch between sections using tabs while retaining the dynamic save feature.
- Added a Save all button saving all wysiwyg sections at once.

Offline dbs

  • Betatester
  • **
  • Posts: 7977
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Save wysiwyg, code and wrapper without page reload
« Reply #2 on: July 28, 2013, 08:26:04 AM »
Hi, tested with clean 2.8.3 SP1.

No tabs visible. Firebug shows:
Code: [Select]
SyntaxError: missing ; before statement
ftoken = "&formtoken" value=a-1374999754-472";   
in .../admin/pages/modify.php?page_id=1#wb_1
Code: [Select]
TypeError: allsectionids is undefined
var sections = allsectionids.split(",");

Saving 1 section works.

Offline imqqmi

  • Posts: 26
Re: Save wysiwyg, code and wrapper without page reload
« Reply #3 on: July 28, 2013, 05:50:10 PM »
Thanks for testing dbs!

Could you please download

and extract the modify.php to /admin/pages

Could you see what the console says:

I suspect it forms a different string than expected.

If you can, could you please send me the source code of the html output of the page you're editing? In firefox hit ctrl+u and copy and paste the contents.


« Last Edit: July 28, 2013, 05:53:15 PM by imqqmi »