Features

• Starts boostrap dialog
• Loads dialog content via ajax / submit form data and handle responses
• As soon as boostrap dialog dont support Overlapping modals, handles that situation
  1) script saves and restores previous dialog form data
  2) offerAPI to return to previous dialog
  3) offer API for multi-step dialogs
• On 'dialog closed' event updates containers of parent page (parent dialog don't use the feature, as it reloads completely)
• New dialog can be opened from current dialog

Bugs fixed

1. runCustomJSFunction="cutomExampleFunction()" used with control-item-edit to execute custom JS scripts on load window. When you click on button with data-submit-next, in opened dialog click button with control-item-edit class and open new dialog - js scripts do not work here

Updates

1. skip-one[-step] - value for button options allows to return workflow 2 steps back

1. data-form-action is obsolete. Specify form action in your form action attribute <form action="">
2. data-dialog-for / data-blockname added. Intended to reduce number of ajax queries. An example is profile image at the website header. In that case it's both updatable container and button that triggers dialog window. In general this attributes willl be in differnet dom elements

Usage

API

Classes for buttons/links

.control-item-add - to trigger add item dialog

.control-item-edit - to trigger edit item dialog

.control-item-load - loads a piece of html to container

Attributes for buttons/links:

data-item-id - to specify item id to edit/load

data-form-url - to specify url to get add item form (to override default url if we have several forms)

data-form-action - to specify url that updates db on form submit (to override default url if we have several forms)

data-dialog-for - to specify what container at parent page will be updated. it works together with data-blockname

data-form-options="custom_buttons,return_to_dialog"

Options:

custom_buttons - to disable standart buttons in dialog

return_to_dialog - if we want to return to current dialog

redirect - redirect to url returned by submit ajax request.

Example

Classes for containers to update via ajax

.control-updatable - container that will be updated

.control-updatable[-ID] - container with item id (in case we have several items at the page)

Attributes for conatiners to update via ajax

data-load-url - to specify where to get data

data-update-varname (OPTIONAL) - using this attribute we can get different pieces of data

data-blockname (OPTIONAL) - to specify which dialog updates the container

TODO rename data-load-url => data-update-url TODO rename content_type=>varname at server side

Init:

 SiteControl.setOptions({
 'edit_form_url'		:	'/news/edit.php', //return edit form
 'add_form_url'			:	'/news/add.php',  //return add form
 'ajax_url'				:	'/news/ajax.controller.php', //handles db updating, html requesting
 'multi'				:	true,    //if we have list of editable items at the page. Use with .control-updatable-ID  class
 }); 

Classes and atributes to use in modal dialog

.control-submit-button

.control-cancel-button

Example of button

 <button class="btn btn-primary control-submit-button" data-submit-next="/admin/profilepic.php" data-submit-control="current-window">Use Uploaded File </button>
 

data-submit-next - url to load INTO DIALOG after form data submited to server

data-submit-action - url to send form data (you can override form action attribute here)

data-submit-control - options for submit action:
--   current-window (says: do not current dialog)
--   confirm-action (you can use data-confirm-message="" to set message or assign object variable SiteControl.session.confirmActionMsg = "" )
--   skip-one (for submit-button or cancel button it allow to return back for 2 steps) (NEW FEATURE)

Form Validation.

 	$('.modal-dialog').on('click', '.control-submit-button', function () {
		
		var validator = $(".modal-body .form-horizontal").validate({
			errorClass: 'error',
			//hidden elements are validated now
			ignore: [],
			rules: {
				companyname: {
					required: true,
					minlength: 3
				},

				validate_checkboxes: {
					sections_selected: true
				}
			},
			//this scrolls up to error position 
			focusInvalid: false,
			invalidHandler: function (form, validator) {

				if (!validator.numberOfInvalids())
					return;


				$('.modal-body').animate(
						{scrollTop: $(validator.errorList[0].element).focus().top},
						1000,
						'swing',
						function () {

							$(validator.errorList[0].element).blur();
						}
				);

			}
		});
		var result = validator.form();

		if (result === false) {

			SiteControl.validationFailed = true;
			return;
		} else {
			SiteControl.validationFailed = false;
		}
	});

 

		$("#sendNote").click( function() {
			var company_id = $("#company_id").val();
			var subject = $("#subject").val().trim();
			if(subject == '') {$("#result").empty().append("<div class='alert alert-error'>Subject can't be empty.</div>"); SiteControl.validationFailed = true; return; }
			SiteControl.validationFailed = false;

		});
 

Server Side.

You can check all the data coming to server in Firefox Firebug Console (at least its easy to view there)

1) when modal dialog opens
$_GET[id] id of item passed if we open edit window

2) when updating containers with .control-updatable classes
$_POST['load'] = 1
$_POST['content_type'] stores value of data-update-varname="" attribute

3) when we submit form from bootsrap dialog window we just submit form data

Cases

Dialog form, warning for duplicates on saving and success modal

1)Form

<form action="/conflicts//save_conflict.php"
....
<button 
data-submit-next="/conflicts//add_edit_conflict.php?added=1" 
data-submit-control="current-window" 
data-form-options="return_to_dialog"
class="btn btn-primary control-submit-button">Save Conflict</button>

2) Warning modal

 <form action="/conflicts//save_conflict.php"
....
 
<a data-submit-next="/conflicts//add_edit_conflict.php?added=1" 
 data-submit-control="current-window"
 class="btn btn-primary control-submit-button" >Continue and Save</a>
 
<button class="btn control-cancel-button">Cancel and Make Changes</button>
 

3) Success Modal

 <button class="btn control-cancel-button">Add Similar</button>
<a href="#"  class="btn control-cancel-button" data-submit-control="skip-restore" >Add New</a>
 <a href="#"  class="btn control-cancel-button" data-submit-control="last-step" >Return To List</a>
 

4)If we want to return 2 steps back

 <button class="btn control-cancel-button" data-submit-control="skip-one">Add Similar</button>