Damyon: Replaced content with "{{obsolete}} This page has been removed because it contained inaccurate out of date information. To see the original text of this page check the history."

2016-12-02T05:29:19Z

Replaced content with "{{obsolete}} This page has been removed because it contained inaccurate out of date information. To see the original text of this page check the history."

Show changes

Kevinslondon: /* Javascript Custom Modal Window */

2011-08-05T16:13:07Z

Javascript Custom Modal Window

← Older revision		Revision as of 16:13, 5 August 2011
Line 5:		Line 5:
	Sometimes you might to use a custom modal window to do a quick update of a form value to save having to go on to another page. This one allows you to use the TinyMCE editor in a modal popup. Note that the TinyMCE editor seems to be a little buggy in a modal popup so might need further work.		Sometimes you might to use a custom modal window to do a quick update of a form value to save having to go on to another page. This one allows you to use the TinyMCE editor in a modal popup. Note that the TinyMCE editor seems to be a little buggy in a modal popup so might need further work.

	This implementation is fully HIJAX compliant, it should with or without JavaScript enabled.		This implementation is fully HIJAX compliant, it should work with or without JavaScript enabled.

	The view PHP page		The view PHP page

Kevinslondon: Created page with "== Javascript Custom Modal Window == There are custom popup windows in Moodle and there is M.util.show_confirm_dialog in lib/javascript-static.js if you want to use it. Sometim..."

2011-08-05T16:11:25Z

Created page with "== Javascript Custom Modal Window == There are custom popup windows in Moodle and there is M.util.show_confirm_dialog in lib/javascript-static.js if you want to use it. Sometim..."

New page

== Javascript Custom Modal Window ==

There are custom popup windows in Moodle and there is M.util.show_confirm_dialog in lib/javascript-static.js if you want to use it.

Sometimes you might to use a custom modal window to do a quick update of a form value to save having to go on to another page. This one allows you to use the TinyMCE editor in a modal popup. Note that the TinyMCE editor seems to be a little buggy in a modal popup so might need further work.

This implementation is fully HIJAX compliant, it should with or without JavaScript enabled.

The view PHP page

<code php>
//We need the tiny mce lib to get the version
require_once($CFG->libdir . '/editor/tinymce/lib.php');

//YUI 3 at the this time of writing didn't have modals that actually worked
$PAGE->requires->yui2_lib('container');

//Your js file
$PAGE->requires->js('your_js_file.js');

//include the tiny mce editor so that the view page can load a form with the editor in it.
$tiny_mce = new tinymce_texteditor();
$PAGE->requires->js('/lib/editor/tinymce/tiny_mce/' . $tiny_mce->version . '/tiny_mce.js');

//The link to the custom form you want to show in a modal pop up.
$your_link = new moodle_url('/custom_form_handler.php',
array('id' => $id),
array('class'=>'pop_up_selector_link'));

//We need an element on the page which will handle the output from the form.
echo '<p id="feedback_text"> </p>';

echo html_writer::link($your_link, 'Link text');

</code>

The form PHP page.

I haven't shown the form class, it will be a standard class extending moodleform

<code php>

//includes
require('../../config.php');
global $CFG, $USER, $DB;
require_once($CFG->libdir . '/adminlib.php');
require_once $CFG->libdir . '/formslib.php';

//usual $PAGE stuff here ....

require_login();

//Note if the $ajax flag isn't set, it will output a normal page
if (!$ajax) {
echo $OUTPUT->header();
}

echo $OUTPUT->heading('Your form heading');

$f = new your_custom_form();

//$f->handle() is a custom update method in your form class
if($f->handle()) {
echo 'Your custom update success message';
}else {
$f->display();
}

//Note if the $ajax flag isn't set, it will output a normal page
if (!$ajax) {
echo $OUTPUT->footer();
}
</code>

The JavaScript:

<code php>
//event handlers
YUI().use('node-base', function(Y) {
function init() {
//We need to create a hidden div to act as the container for the modal popup
var yui_act_sel_dialog = Y.one('#yui_act_sel_dialog');
if (!yui_act_sel_dialog) {
var el = document.createElement('div');
el.id = 'yui_act_sel_dialog';
el.style = 'display:none;';
document.getElementsByTagName('body')[0].appendChild(el);
}

//links which have the pop_up_selector_link class will be turned into modal form windows
Y.all(".pop_up_selector_link").on('click', function(e) {
var a = new com.uol.PopupHandler(e.currentTarget.get('href'), false);
a.ajax();
//e.stopPropagation works only in Firefox,Safari etc, not ie.
if (e.preventDefault) {
e.preventDefault();
}
return false;
});

//links which have the pop_up_selector_link_cancel_only class will be turned into modal display only windows
Y.all(".pop_up_selector_link_cancel_only").on('click', function(e) {
var a = new com.uol.PopupHandler(e.currentTarget.get('href'), true);
a.ajax();
//e.stopPropagation works only in Firefox,Safari etc, not ie.
if (e.preventDefault) {
e.preventDefault();
}
return false;
});
}

Y.on("domready", init);

});
</code>

The custom JavaScript class which will create the popup

<code php>
if (typeof com == 'undefined') {
com = {};
}

if (typeof com.uol == 'undefined') {
com.uol = {};
}
(function() {
/**
* Constructor for the PopupHandler class
* @param url
* @param cancel_button_only
* @param width
*/
this.PopupHandler = function(url, cancel_button_only, width) {
this.url = url;
//add the ajax flag into the url
this.url += '&ajax=1';
this.cancel_button_only = cancel_button_only;
this.width = width;
if (this.width == null) {
this.width = 650;
}
this.tiny_mce = false;
},

/**
* We need to set up a tiny mce instance if the form has a rich text element on it
*/
this.PopupHandler.prototype.html_editor = function() {
if (this.tiny_mce) {
return;
}
this.tiny_mce = true;
tinyMCE.init({
mode : "textareas",
theme : "advanced",
skin : "o2k7",
"width": 300,
skin_variant : "silver",
plugins : "advimage,safari,table,style,layer,advhr,advlink,emotions,inlinepopups,searchreplace,paste,directionality,fullscreen,moodlenolink,nonbreaking,contextmenu,insertdatetime,save,iespell,preview,print,noneditable,visualchars,xhtmlxtras,template,pagebreak,spellchecker,dragmath,moodlemedia",
theme_advanced_buttons1 : "fontselect,fontsizeselect,formatselect,|,undo,redo,|,search,replace,|,fullscreen",
theme_advanced_buttons2 : "bold,italic,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,|,cleanup,removeformat,pastetext,pasteword,|,forecolor,backcolor,|,ltr,rtl",
theme_advanced_buttons3 : "bullist,numlist,outdent,indent,|,link,unlink,moodlenolink,|,image,moodlemedia,dragmath,nonbreaking,charmap,table,|,code,spellchecker,|,anchor",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_fonts : "Trebuchet=Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia,times new roman,times,serif;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times,serif;Verdana=verdana,arial,helvetica,sans-serif;Impact=impact;Wingdings=wingdings",
relative_urls : "false",
apply_source_formatting : "true",
remove_script_host : "false",
entity_encoding : "raw",
theme_advanced_resize_horizontal : "true"
});
};

/**
* Method to call load the form
*/
this.PopupHandler.prototype.ajax = function() {
//Assignment call to solve the scope problem in ajax_callback
this.ajax_callback.argument[0] = this.cancel_button_only;
this.ajax_callback.argument[1] = this.width;
this.ajax_callback.argument[2] = this.html_editor;
//make the ajax call
YAHOO.util.Connect.asyncRequest('GET', this.url, this.ajax_callback, null);
},

this.PopupHandler.prototype.ajax_callback = {
success: function(e) {
document.getElementById('yui_act_sel_dialog').innerHTML = e.responseText;
var html = e.argument[2];
html();

var activity_dialog = new YAHOO.widget.Dialog('yui_act_sel_dialog', {
modal: true,
width: e.argument[1] + 'px',
top:'200px',
iframe: false,
zIndex: 2000,
fixedcenter: true,
visible: false,
close: true,
constraintoviewport: false,
postmethod: 'async',
hideaftersubmit:true
});

activity_dialog.cancel_button_only = this.cancel_button_only;

var onSuccess = function(o) {
document.getElementById('feedback_text').innerHTML = o.responseText;
window.setTimeout("window.location.reload(true);", 2000);

};
var onFailure = function(o) {
alert("Your submission failed. Status: " + o.status);
};
activity_dialog.callback.success = onSuccess;
activity_dialog.callback.failure = onFailure;

var handleCancel = function() {
this.cancel();
};
//add a submit button if required
if (!e.argument[0]) {
var handleSubmit = function() {
this.submit();
};
}

var myButtons = [];
if (!e.argument[0]) {
myButtons.push({ text: "Submit", handler: handleSubmit, isDefault: true });
}
myButtons.push({ text: "Cancel", handler: handleCancel });
activity_dialog.cfg.queueProperty("buttons", myButtons);
activity_dialog.render();
activity_dialog.show();
}
,
failure: function(e) {

},
argument: [this.cancel_button_only]
}

}).call(com.uol);
</code>

Javascript Custom Modal Window - Revision history

Damyon: Replaced content with "{{obsolete}} This page has been removed because it contained inaccurate out of date information. To see the original text of this page check the history."

Kevinslondon: /* Javascript Custom Modal Window */

Kevinslondon: Created page with "== Javascript Custom Modal Window == There are custom popup windows in Moodle and there is M.util.show_confirm_dialog in lib/javascript-static.js if you want to use it. Sometim..."