ModalBox insight

Modal Examples

There are some cool stuff I have attempted with modal updating existing form, so it may come in useful if you need some good examples of how to load up a pop ups that update existing form values without any refreshes.

views/mailingListEmail/contactclients

This page has 4 buttons on the top of an existing form that do several different types of calls to modal pop up boxes.

views/mailingListModal/*

This folder contains some of the inner workings of modal calls from above gsp

New Sender?

This calls on a grails remote form through _modalcreate.gsp which then calls _modalForm.gsp to load up the remoteForm, it itself contains a grails java script that holds on to dynamic labelled CloseModal() function. This script closes model loads up existing div that contains the modal form with the actual form that was cloned in contactclients. Finally refreshes the DIV that contains the select form for Senders Email Address and appends new value.

There are no refreshes on the main page through all of this. The only downside is if user inputs bad email or existing email, the site will just close modal box and refresh select box which will have not changed.

Upload CSV?

Ok This now calls on a totally new method since uploading a file does not work too well with javascript serialization or JSON etc. So how to get around this was to write a new _modaliframe.gsp which simply loads up the upload form as a url wihin an iframe on the modal segment that would normally load the form The actual response is as per normal i.e. if it was outside of modal, so it posts and shows the show page for record, to close this modal two close buttons provided at top and bottom. These call dynamicCloseModal() function which like above actually now close this modal and as above the information produced on first go for producing iframe data is cloned and put back after is cloned. As above the actual div containing the list of CSV files (checkboxes is now updated)

UploadAttachments?

Refer to Upload CSV

Upload Template?

This is very similar to New Sender but decided to use a different technique whilst I was playing around, its always good to show alternative methods. This process calls on _modalbasicSelfPost.gsp which is a self posting form.

It calls on mailingListTemplates/_formAjax.gsp which has <g:form name="${formId }" id="1" which at the very bottom also has another java script to update ckeditor value to what was last in the form. When posted it hits $('#${formId}').submit(function() {, this then serliazes form posts back to itself, upon success shows update on the page and then calls on dynamicCloseModal() function below it. This like above closes the div, updates the form div that contains templates select box with the new template value.

No actual page refreshing occurs in any of the above functions, all return results and update a div on contactclients.gsp

Whilst the above process should work on standard form self posts, the above method did not work worked out too well for ckeditor. In short ckeditor loads up an instance and mixing it up in the current modal pop up + cloning turned out to be a real pain. The issue was after closing modal page and recloning object the form turned out to be read only or not editable. To fix this a wrapper call was added to modalBasicSelfPost.gsp to firstly kill off ckeditor or remove its components and then replace the content clone with a http get of the ajaxupload.gsp within templates which simply just loads up a clean copy of the ckeditor modal form.

phew.... thats over.. that all took a long time to put correctly.