I have a MySQL table holding some events to be rendered and a couple PHP pages configured to return those events as JSON objects based on the dates passed to it. When you click or drag an event or calendar date, I have a bootstrap modal that pops up, pre-populated with the information stored in the event (if it was an event you clicked or dragged, otherwise it's just a blank form waiting to add a new event) and when I submit the form, it runs an AJAX query to add/update/delete the event in the MySQL table. Once the AJAX returns successfully, I either call 'removeEvent' and pass it the event id (in case of a delete), call a 'renderEvent' and pass it the object that was used to submit the AJAX query (in case of an add), or both (in case of an update).
For whatever reason, the event never renders correctly using this method. The removeEvent works, and grabs the right event, but the add and update don't render the new event with dates/times. I've tried formatting the start and end in a bunch of different ways, but the event is still rendered incorrectly. Basically, the problem with the rendered event is that it renders it on the correct day, and includes the extra data that I've added, which can be verified by clicking the event and opening the modal, but the start time defaults to midnight of that day, and the end time either doesn't exist, or defaults to midnight of the next day. When I reload the page and it gets the data from PHP, the event is rendered with the correct datetime values.
I've tried logging the event object to the console before rendering it, and I can't find anything that looks out of place, i.e. the output of the event in the console looks the same as the output of one of the JSON objects that are coming out of my PHP page.
Can anybody shine any light on this?
FullCalendar v3.0.1
Scheduler v1.4.0
JQuery v3.1.1
Bootstrap v3.3.7
bootstrap-datetimejs v4.17.43 (https://github.com/Eonasdan/bootstrap-datetimepicker)
The code that is actually rendering the event is in the sendrequest() function, but I'm going to include most of my .js page so you can see what I'm trying to do (I've clipped out a few things to shorten it up, but it's mostly all there)
window.onload = initializepage;
//Calendar documentation: http://fullcalendar.io/docs/
function initializepage()
{
//Build The jQuery Calendar
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives'
defaultView: 'month',
editable: true,
// When you click on an event, it will call the manageevent function and pass the event object to it
eventClick: function($event)
{
manageevent($event);
},
// When you drag an event, it will move it back to where you dragged it
// after this method executed, the eventClick method above is executed
eventResize: function($event, $delta, revertfunc)
{
manageevent($event);
revertfunc();
},
eventDrop: function($event, $delta, revertfunc)
{
manageevent($event);
revertfunc();
},
eventSources:
[
{
url: 'opscalendar_ajax.php',
},
{
url: 'oncall_ajax.php',
data: {
groupname: 'Ops'
}
}
],
fixedWeekCount: false,
header:
{
left: 'prev,next today',
center: 'title',
right: 'timelineDay,agendaWeek,month,basicYear',
},
height: 600,
resourceGroupField: 'Shifts',
resourceGroupText: 'Shifts',
resources:
[
<!-- deleted for brevity -->
],
selectable: true,
selectHelper: true,
// When you click on a date, or drag across dates, call the addevent function
select: function($start, $end)
{
addevent($start, $end);
$('#calendar').fullCalendar('unselect');
},
views: {
<!-- deleted for brevity -->
},
});
// End of JQuery Calendar
//Some jQuery to make it so that the date picked for end time cannot be before the
//date picked for the start time
$(function () {
$('#starttimepicker').datetimepicker();
$('#endtimepicker').datetimepicker({
useCurrent: false //Important! See issue #1075
});
$("#starttimepicker").on("dp.change", function (e) {
$('#endtimepicker').data("DateTimePicker").minDate(e.date);
});
});
// Now we assign some buttons to execute functions instead of submitting a form
document.getElementById('addEventBtn').onclick = executemanageevent;
document.getElementById('updateEventBtn').onclick = executemanageevent;
document.getElementById('deleteEventBtn').onclick = executemanageevent;
// Some JQuery to clear out and fields that are populated in the modal.
$("#manageevent").on('hidden.bs.modal', function()
{
// Reset form values
document.getElementById('hiddenid').value = '';
document.getElementById('shiftdropdown').value = '';
document.getElementById('starttime').value = '';
document.getElementById('endtime').value = '';
document.getElementById('name').value = '';
document.getElementById('alldayradio2').checked = 'checked';
document.getElementById('manageeventalert').innerHTML = '';
});
} // End initializepage function
/* function addevent($start, $end)
*
* Populates modal with the dates from user click or drag
* Enables the add and cancel buttons
* Opens the modal so user can see it
*/
function addevent($start, $end)
{
// Populate dates
$('#starttimepicker').data("DateTimePicker").date($start);
$('#endtimepicker').data("DateTimePicker").minDate($start);
$('#endtimepicker').data("DateTimePicker").date($end);
document.getElementById('alldayradio2').checked = 'checked';
// Show Buttons
$('#addEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
// Show Modal
$('#manageevent').modal({backdrop: 'static'});
return false;
}
/* function closemodal()
*
* Called after a successful request - just closes the modal
*/
function closemodal()
{
$('#manageevent').modal('hide')
}
/* function executemanageevent()
*
* When you click any of the buttons (except cancel) this is executed
* First: it creates an object (like an array, just different)
* Second: disable all the buttons so people can't keep clicking
* Third: take all the values from the modal and put them into the object
* Fourth: put an alert in the modal header (there's a div for it) and let them know we're trying their request
* Fifth: send the object to the sendRequest function
*/
function executemanageevent()
{
// First
var $datatopass = {};
$datatopass.mode = this.getAttribute('mode');
// Second
$('#addEventBtn').prop("disabled", true);
$('#updateEventBtn').prop("disabled", true);
$('#deleteEventBtn').prop("disabled", true);
$('#cancel').prop("disabled", true);
// Third
$titleindex = document.getElementById('name').selectedIndex;
$datatopass.title = document.getElementById('name').options[$titleindex].text;
$datatopass.login = document.getElementById('name').value;
$datatopass.start = document.getElementById('starttime').value;
$datatopass.end = document.getElementById('endtime').value;
$datatopass.resourceId = document.getElementById('shiftdropdown').value;
$datatopass.id = document.getElementById('hiddenid').value;
var $allday = document.getElementsByName('alldayradio');
for($i = 0; $i < $allday.length; $i++)
{
if($allday[$i].checked == true)
{
$datatopass.allDay = $allday[$i].value;
}
}
// Fourth
var $infoalert = "<div class='alert alert-info'><strong>Info: </strong>Attempting to submit your request</div>";
document.getElementById('manageeventalert').innerHTML = $infoalert;
// Fifth
$theresults = sendrequest($datatopass);
console.log($datatopass);
return false;
}
/* function manageevent($event)
*
* Manage event is called when you click on an event, or drag an event
* We assume you're going to update, delete, or copy an event and enable all buttons
* once we've set everything up, show the modal.
*/
function manageevent($event)
{
// Get data from event
$title = $event.title;
$login = $event.login;
$start = $event.start;
$end = $event.end;
$allday = $event.allDay;
$resourceId = $event.resourceId;
$id = $event.id;
// Populate modal fields
document.getElementById('hiddenid').value = $id;
document.getElementById('shiftdropdown').value = $resourceId;
$('#starttimepicker').data("DateTimePicker").date($start);
$('#endtimepicker').data("DateTimePicker").minDate($start);
$('#endtimepicker').data("DateTimePicker").date($end);
document.getElementById('name').value = $login;
if($allday == true)
{
document.getElementById('alldayradio1').checked = 'checked';
}
else
{
document.getElementById('alldayradio2').checked = 'checked';
}
// Enable all buttons
$('#addEventBtn').prop("disabled", false);
$('#updateEventBtn').prop("disabled", false);
$('#deleteEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
// Show the Modal
$('#manageevent').modal({backdrop: 'static'});
return false;
}
/* function sendrequest($thedata)
*
*/
function sendrequest($thedata)
{
var $formdata = "JSON=" + JSON.stringify($thedata);
var $xhttp;
$xhttp = new XMLHttpRequest();
$xhttp.onreadystatechange = function()
{
if($xhttp.readyState == 4 && $xhttp.status == 200)
{
$theresults = JSON.parse($xhttp.responseText);
if($theresults.status == 'failure')
{
var $warnalert = '<div id="warningAlert" class="alert alert-danger"><strong>' +
$theresults.status + '</strong> ' + $theresults.message + '</div>';
document.getElementById('manageeventalert').innerHTML = $warnalert;
if($thedata.mode == 'add')
{
$('#addEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
}
else if($thedata.mode == 'update')
{
$('#addEventBtn').prop("disabled", false);
$('#updateEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
}
else if($thedata.mode == 'delete')
{
$('#deleteEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
}
var $followup = document.createElement('DIV');
$followup.setAttribute('class','alert alert-info');
var $followuptext = document.createTextNode('You may retry your request');
$followup.appendChild($followuptext);
document.getElementById('manageeventalert').appendChild($followup);
}
else if($theresults.status == 'success')
{
var $okayalert = '<div id="warningalert" class="alert alert-success"><strong>' +
$theresults.status + '</strong> ' + $theresults.message + '</div>';
document.getElementById('manageeventalert').innerHTML = $okayalert;
$thedata.start = moment($thedata.start, 'MM/DD/YYYY hh:mm a');
$thedata.end = moment($thedata.end, 'MM/DD/YYYY hh:mm a');
if($thedata.mode == 'add')
{
$thedata.id = $theresults.dbkey;
console.log($thedata);
$('#calendar').fullCalendar('renderEvent', $thedata);
}
else if($thedata.mode == 'update')
{
$('#calendar').fullCalendar('removeEvents', $thedata.id);
console.log($thedata);
$('#calendar').fullCalendar('renderEvent', $thedata);
}
else if($thedata.mode == 'delete')
{
$('#calendar').fullCalendar('removeEvents', $thedata.id);
}
setTimeout(closemodal, 1500);
}
}
};
$xhttp.open("POST", "opscalendar_post.php", true);
$xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
$xhttp.send($formdata);
return false;
}
Related
I am landing on the first page of DataTable, make some changes.
Then I move to the second page.
Actually, confirmation popup is shown but it navigate to the second page.
Expected: confirm pop is shown but it still landing on the first.
Here is my code:
$('#dataTable-id').on( 'page.dt', function (event) {
if( change ){
bootbox.dialog({
title: "Confirmation",
message : "Discard changes?",
buttons :{
main: {
label : "Leave",
className : "btn-primary",
callback: function (){
// To avoid broking page/length controller
// move to other pages
return true; // cancel draw
}
},
cancel: {
label : "Stay",
className : "btn-default",
callback : function() {
// stay at current page.
return true;
}
}
},onEscape: function () {return true;}
});
}
});
How to show confirmation popup before page change?
The page.dt event is only informational, it can not be canceled.
You can workaround that restriction by writing a custom preDrawCallback like discussed here: https://datatables.net/forums/discussion/25507
EDIT: You have to cancel the redraw generally and do the paging manually in the bootbox callback (as it does not work as a real modal dialog like the native javascript confirm()). I modified the above example to incorporate a bootbox confirm dialog on paging: https://jsfiddle.net/bk4nvds5/
$(document).ready(function () {
var pageLen = 10;
var originalPage = 0;
var originalPageLen = pageLen;
var gotoPage = 0;
var gotoPageLen = originalPageLen;
var fromBootbox = false;
var table = $('#example').DataTable({
"pageLength": pageLen,
"preDrawCallback": function (settings) {
if(table){ // ignore first draw
if (!fromBootbox) {
// To avoid broking page/length controller, we have to reset the paging information
gotoPage = settings._iDisplayStart;
gotoPageLen = settings._iDisplayLength;
bootbox.confirm("Are you sure?", function(result) {
console.log("goto page" + gotoPage + " (result: " + result + ")");
if (result) {
fromBootbox = true;
table.page.len(gotoPageLen);
table.page(gotoPage / gotoPageLen).draw(false);
fromBootbox = false;
}
});
settings._iDisplayStart = originalPage;
settings._iDisplayLength = originalPageLen;
$('[name="example_length"]').val(originalPageLen);
return false; // cancel draw
}else{
originalPage = settings._iDisplayStart;
originalPageLen = settings._iDisplayLength;
}
}
}
});
});
I have hit a strange problem. I am using hammer.js to configure long-press events, and attaching the event watcher within the Template.onRendered() callback. This works perfectly on my local development machine. However, when I deploy to a server, it seems that onRendered() is being fired before the template is finished rendering in the browser. The jQuery selector is empty. I've had to resort to setting a timer to make sure the template is rendered before configuring the event handler. Alternatively, I've tried configuring the event handler within a Tracker.afterFlush() in place of setTimeout(), but the template is still not rendered when this fires.
It seems that I shouldn't have to use setTimeout() here. Am I doing something wrong or out of order?
Template.CATEGORIES.onRendered(function () {
Meteor.setTimeout(function () {
console.log('setting up hammer object', this.$('.collapsible'));
var h = this.$('.collapsible').hammer({domEvents:true});
h.on('tap press swipe pan', '.collapsible-header', function (ev) {
// get the ID of the shopping list item object
var target = ev.target;
var $target = $(target);
var type = ev.type;
var $header = $target;
if (Collapse.isChildrenOfPanelHeader($target)) {
$header = Collapse.getPanelHeader($target);
}
console.log('Firing ', type, ' on ', $header);
Kadira.trackError('debug', 'Firing ' + type + ' on ' + $header);
// handler for checkbox
if (type === 'tap' && $target.is('label')) {
var data = Blaze.getData(target);
var TS = data.checkedTS;
ev.preventDefault();
data.checked = !data.checked;
console.log('Checkbox handler', data);
if (data.checked && !TS) {
TS = new Date()
} else if (!data.checked) {
TS = null
}
// Set the checked property to the opposite of its current value
ShoppingList.update(data._id, {
$set: {checked: data.checked, checkedTS: TS}
});
} else if (type === 'tap' && $target.has('.badge')) {
// if the user taps anywhere else on an item that has a child with .badge class
// this item has deals. Toggle the expand.
console.log('badge handler');
$header.toggleClass('active');
Collapse.toggleOpen($header);
} else if (type === 'press' || type === 'swipe' || type === 'pan') {
// remove any selected deals
var itemID, item;
var $label = $header.find('label');
console.log('long press handler');
if ($label) {
itemID = $label.attr('for');
item = ShoppingList.findOne(itemID);
if (item && item.deal) {
Deals.update(item.deal._id, {$set: {'showOnItem': false}});
ShoppingList.update(itemID, {$set: {'deal': null}});
}
}
}
})
}, 2000);
});
Someone answered this the other day but must have withdrawn their answer. They suggested that the template was actually rendered, but that the data subscription had not finished replicating yet. They were right.
I was able to validate that I need to wait until the data subscription finishes prior to setting up my java script events.
i have an index page which asks for input. after submit button is clicked, the input is processed in another .php file (process includes using imagecreatefromjpeg and mysql queries). now, it needs to redirect to index again and show a modal popup saying thank you. i am able to redirect to index page again using this code:
if (!empty($name) && !empty($email) && !empty($office_id) && !empty($title) && !empty($story)) {
$save_sql = "INSERT INTO `tbl_amadeuscontest` (filename, name, email, office_id, title, story, time) VALUES ('$img_newname','$name','$email','$office_id','$title','$story','$sql_date')";
$query = mysql_query($save_sql,$con) or die(mysql_error("Could not write information to the database"));
if (mysql_affected_rows($con) !== 0) {
header('Location: ' . $uploadForm);
}
mysqli_close($con);
}
basically, it is the header('Location: ' . $uploadForm); that does the job. but how can i overlay a modal popup saying thank you on it at the same time? do i need to call the js. finction? or do i need to echo the HTML? where do i need to place the codes? thanks.
i have some HTML codes for modal popup here:
HTML
`
<div class="modal-inner">
<img src="http://mysite.com/modal/images/thanku-post.jpg" />
</div>
<!-- Use Hash-Bang to maintain scroll position when closing modal -->
<a href="#!" class="modal-close" title="Close this modal"
data-dismiss="modal">×</a>
</section>
<script src="js/modal.js"></script>`
EDIT 1
modal.js
`(function(global) {
'use strict';
// Storage variable
var modal = {};
// Store for currently active element
modal.lastActive = undefined;
modal.activeElement = undefined;
// Polyfill addEventListener for IE8 (only very basic)
modal._addEventListener = function (element, event, callback) {
if (element.addEventListener) {
element.addEventListener(event, callback, false);
} else {
element.attachEvent('on' + event, callback);
}
};
// Hide overlay when ESC is pressed
modal._addEventListener(document, 'keyup', function (event) {
var hash = window.location.hash.replace('#', '');
// If hash is not set
if (hash === '' || hash === '!') {
return;
}
// If key ESC is pressed
if (event.keyCode === 27) {
window.location.hash = '!';
if (modal.lastActive) {
return false;
}
// Unfocus
modal.removeFocus();
}
}, false);
// Convenience function to trigger event
modal._dispatchEvent = function (event, modal) {
var eventTigger;
if (!document.createEvent) {
return;
}
eventTigger = document.createEvent('Event');
eventTigger.initEvent(event, true, true);
eventTigger.customData = { 'modal': modal };
document.dispatchEvent(eventTigger);
};
// When showing overlay, prevent background from scrolling
modal.mainHandler = function () {
var hash = window.location.hash.replace('#', '');
var modalElement = document.getElementById(hash);
var htmlClasses = document.documentElement.className;
var modalChild;
var oldModal;
// If the hash element exists
if (modalElement) {
// Get first element in selected element
modalChild = modalElement.children[0];
// When we deal with a modal and body-class `has-overlay` is not set
if (modalChild && modalChild.className.match(/modal-inner/)) {
if (!htmlClasses.match(/has-overlay/)) {
// Set an html class to prevent scrolling
document.documentElement.className += ' has-overlay';
}
// Unmark previous active element
if (modal.activeElement) {
oldModal = modal.activeElement;
oldModal.className = oldModal.className.replace(' is-active', '');
}
// Mark modal as active
modalElement.className += ' is-active';
modal.activeElement = modalElement;
// Set the focus to the modal
modal.setFocus(hash);
// Fire an event
modal._dispatchEvent('cssmodal:show', modal.activeElement);
}
} else {
document.documentElement.className =
htmlClasses.replace(' has-overlay', '');
// If activeElement is already defined, delete it
if (modal.activeElement) {
modal.activeElement.className =
modal.activeElement.className.replace(' is-active', '');
// Fire an event
modal._dispatchEvent('cssmodal:hide', modal.activeElement);
// Reset active element
modal.activeElement = null;
// Unfocus
modal.removeFocus();
}
}
};
modal._addEventListener(window, 'hashchange', modal.mainHandler);
modal._addEventListener(window, 'load', modal.mainHandler);
modal.setFocus = function () {
if (modal.activeElement) {
// Set element with last focus
modal.lastActive = document.activeElement;
// New focussing
modal.activeElement.focus();
}
};
// Unfocus
modal.removeFocus = function () {
if (modal.lastActive) {
modal.lastActive.focus();
}
};
// Export CSSModal into global space
global.CSSModal = modal;
}(window));`
please note that $uploadForm means $uploadForm = 'http://' . $_SERVER['HTTP_HOST'] . $directory_self . 'index.php';
thanks in advance for your answer. hope you can help me to sort it out.
You can just pass a ?openModal=1 variable to your index page. In your view file, write a conditional that will show your modal. I don't know how your modal is working but either just make the css appear or run your js script that will toggle it on from there.
in your redirect php file
header('Location: ' . $uploadForm . '?modal=1');
in your html
<?php if($_GET['modal'] == 1){ ?>
do something to make your modal appear
<?php } ?>
Quick and dirty answer. Modify your other.php file to do something like this:
header('Location:' . $uploadForm . '?thanks=1');
Then in your index.php, at the bottom, near where the body tag closes, do this:
<?php if (isset($_GET['thanks']) && 1 == $_GET['thanks']) { ?>
<script type='text/javascript'>
alert('Thanks!');
</script>
<?php } ?>
</body> <!-- end of body -->
You can do whatever kind of fancy Javascript you want inside that script tag.
The idea here is simple: when your index.php is given thanks=1 in the query, it shows the modal pop-up. You engineer your other .php to be the only time you expect thanks=1 to be given.
I have a dataTable object on a page representing a list of releases I need to keep track of with the url /releases I want to add the following functionality
if /releases?query=<query>, the dataTable will initialized with the provided query
The query parameter is updated if the user changes the search term
The back and forward buttons in the browser go the appropriate query
So far I am able to do the first 2, but when I listen for the popstate event, redrawing the table triggers a pushState which I can't figure out how to prevent. Here's my code so far:
$(document).ready(function(){
var prevSearch;
var table = $('#releases').dataTable({
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"iDisplayLength" : 50,
"oSearch": {"sSearch": '#{params[:query]}'},
"fnDrawCallback": function(oSettings) {
var curSearch = oSettings.oPreviousSearch.sSearch;
if (!prevSearch) {
prevSearch = curSearch;
} else if (curSearch != prevSearch) {
console.log("changed to: " + curSearch);
history.pushState({query: curSearch}, "title", "releases?query=" + curSearch);
prevSearch = curSearch;
}
}
});
window.addEventListener("popstate", function(e) {
if (e.state) {
table.fnFilter(e.state.query);
}
});
});
Note, I am using a rails backend and this is inlined javascript being served in the page.
you have only 2 options here:
move pushState code out of drawCallback. There must be some other code that causes the datatables to draw when user enters something. put your pushState code there. This is the ideal solution
add a hack like this
$(document).ready(function () {
var prevSearch;
var saveState = true;
var table = $('#releases').dataTable({
"bJQueryUI":true,
"sPaginationType":"full_numbers",
"iDisplayLength":50,
"oSearch":{"sSearch":'#{params[:query]}'},
"fnDrawCallback":function (oSettings) {
var curSearch = oSettings.oPreviousSearch.sSearch;
if (!prevSearch) {
prevSearch = curSearch;
} else if (curSearch != prevSearch) {
console.log("changed to: " + curSearch);
if (saveState) {
history.pushState({query:curSearch}, "title", "releases?query=" + curSearch);
}
prevSearch = curSearch;
}
}
});
window.addEventListener("popstate", function (e) {
if (e.state) {
saveState = false;
table.fnFilter(e.state.query);
saveState = true;
}
});
});
The confirm box only has two options: ok and cancel.
I'd like to make one myself, so I can add a third button: save and continue. But the issue I currently don't know how to solve, is that: once the custom confirm dialog is up, how do I block the previously running script (or navigation) from running? and then how do I make the buttons return values for the confirmation?
my understanding of the confirm dialog box is this:
it's a visual boolean, that has the power to block navigation and scripts on a page. So, how do I emulate that?
If you want a reliable proven solution... Use jQuery... it'll work on every browser without worrying about crappy IE etc. http://jqueryui.com/demos/dialog/
In javascript, you don't stop while you're waiting for a user action : you set a callback (a function) that your dialog will call on close.
Here's an example of a small dialog library, where you can see how callbacks can be passed.
dialog = {};
dialog.close = function() {
if (dialog.$div) dialog.$div.remove();
dialog.$div = null;
};
// args.title
// args.text
// args.style : "", "error" (optionnel)
// args.buttons : optional : map[label]->function the callback is called just after dialog closing
// args.doAfter : optional : a callback called after dialog closing
dialog.open = function(args) {
args = args || {};
if (this.$div) {
console.log("one dialog at a time");
return;
}
var html = '';
html += '<div id=dialog';
if (args.style) html += ' '+args.style;
html += '><div id=dialog-title>';
html += '</div>';
html += '<div id=dialog-content>';
html += '</div>';
html += '<div id=dialog-buttons>';
html += '</div>';
html += '</div>';
this.$div=$(html);
this.$div.prependTo('body');
$('#dialog-title').html(args.title);
$('#dialog-content').html(args.text);
var buttons = args.buttons || {'Close': function(){return true}};
for (var n in buttons) {
var $btn = $('<input type=button value="'+n+'">');
$btn.data('fun', buttons[n]);
$btn.click(function(){
if ($(this).data('fun')()) {
dialog.close();
if (args.doAfter) args.doAfter();
}
});
$btn.appendTo($('#dialog-buttons'));
}
this.$div.show('fast');
shortcuts.on('dialog', {
27: function(){ // 27 : escape
dialog.close();
}
});
}
Two call samples :
dialog.open({
title: 'ccccc Protection Error',
text: 'There was an error related to cccc Protection. Please consult <a href=../cccc.jsp>this page</a>.',
style: 'error'
});
var ok = false;
dialog.open({
title: sometitle,
text: someHtmlWithInputs,
buttons: {
'OK': function() {
if (// inputs are valid) ok = true;
return true;
},
'Cancel': function() {
return true;
}
},
doAfter: function() {
if (ok) {
if (newvg) {
cccmanager.add(vg);
} else {
cccmanager.store();
}
if (doAfter) doAfter();
}
}
});
As specified by others, you may not need your own library if you just want to make a dialog.