I Love PHPMaker

... because it gets even more powerful and flexible!!

I Love PHPMaker » Customize Template » Incorporating Alertify Code into Javascript Template Files of PHPMaker 10.0.1

Incorporating Alertify Code into Javascript Template Files of PHPMaker 10.0.1

This following customization will show you how to implement Alertify Code into Javascript Template Files that used by PHPMaker 10.0.1. There are some files that need to be modified so that we can use the Alert and Confirmation Dialog Box code from Alertify properly. In other words, we will not use the built-in alert and confirmation dialog box from the browser anymore. Let's use Alertify for displaying alert and confirmation dialog box.

Alertify Confirmation Dialog on List Page
Alertify Confirmation Dialog on List Page
Alertify Alert Dialog on List Page
Alertify Alert Dialog on List Page
Alertify Confirmation Dialog on Grid Edit Page
Alertify Confirmation Dialog on Grid Edit Page
Alertify Confirmation Dialog before Logout
Alertify Confirmation Dialog before Logout

I wrote this customization in this article just wanted to let you know about the changes that should be applied into the template. However, I strongly not recommend you to customize your PHPMaker template by following the changes in this article, as this customization has been handled nicely by MasinoFixedWidthSite10 extension. You should use this extension instead of customizing your PHPMaker template by yourself. I wrote this article in order to keep the documentation regarding the changes I made, since this is very useful for me if I want to make the next changes for the next release of PHPMaker.

I think, this might be useful for you to see how we can implement Alertify easily into PHPMaker template. That's why now I was sharing this to you, too.

[hidepost]

  1. Open \Script\ewp.js file, and find this code:

    // Submit selected records for update/delete/custom action
function ew_SubmitSelected(f, url, msg, action) {
	if (!f)
		return;
	if (!ew_KeySelected(f)) {
		alert(ewLanguage.Phrase("NoRecordSelected"));
	} else {
		if ((msg) ? ew_Confirm(msg) : true) {
			var $ = jQuery, $f = $(f);
			if (action)
				$("<input/>").attr({ type: "hidden", name: "useraction" }).val(action).appendTo($f);
			$f.prop("action", url).submit();
		}
	}
}

    then change it become:

    // Submit selected records for update/delete/custom action
function ew_SubmitSelected(f, url, msg, action) {
	if (!f)
		return;
	if (!ew_KeySelected(f)) {
		alertify.alert(ewLanguage.Phrase("NoRecordSelected")); // Modification Alertify by Masino Sinaga, October 14, 2013
	} else {
		var $ = jQuery, $f = $(f);
		//if ((msg) ? ew_Confirm(msg) : true) { 
		if ((msg) ) { //  ? ew_Confirm(msg) : true
			// Begin of modification Alertify by Masino Sinaga, October 14, 2013
			alertify.confirm(msg, function (ask) { // if confirm, then multiple-delete
				if (ask) {
					// begin of moved out					
					if (action)
						$("<input/>").attr({ type: "hidden", name: "useraction" }).val(action).appendTo($f);
					$f.prop("action", url).submit();
					// end of moved out
					return true;
				} else {
					return false;
			}});
			// End of modification Alertify by Masino Sinaga, October 14, 2013
			// moved out to above ...			
		} else {
			$f.prop("action", url).submit(); // no confirmation, then multiple-update
		}
	}
}
  2. Still in the \Script\ewp.js file, find again this code:

    // Submit selected records for export
function ew_SubmitSelectedExport(f, a, val) {
	if (!f)
		return;
	if (!ew_KeySelected(f)) {
		alert(ewLanguage.Phrase("NoRecordSelected"));
	} else {
		if (f.exporttype && val)
			f.exporttype.value = val;
		f.submit();
	}
}

    then change it become:

    // Submit selected records for export
function ew_SubmitSelectedExport(f, a, val) {
	if (!f)
		return;
	if (!ew_KeySelected(f)) {
		alertify.alert(ewLanguage.Phrase("NoRecordSelected"));  // Modification Alertify by Masino Sinaga, October 14, 2013
	} else {
		if (f.exporttype && val)
			f.exporttype.value = val;
		f.submit();
	}
}
  3. Still in the \Script\ewp.js file, find again this code:

    // Show error message
function ew_OnError(frm, el, msg) {
	alert(msg);
	if (frm) {
		if (frm.MultiPage) { // Multi-page
			frm.MultiPage.GotoPageByElement(el);
		} else if (frm.$Element.is("div")) { // Multiple Master/Detail
			var $pane = frm.$Element.closest(".tab-pane");
			if ($pane[0] && !$pane.hasClass("active"))
				$pane.closest(".tabbable").find("a[data-toggle=tab][href='#" + $pane.attr("id") + "']").click();
		}
	}
	jQuery.later(100, this, "ew_SetFocus", el); // Focus later to make sure editors are created
	return false;
}

    then change it become:

    // Show error message
function ew_OnError(frm, el, msg) {
	alertify.alert(msg);  // Modification Alertify by Masino Sinaga, October 14, 2013
	if (frm) {
		if (frm.MultiPage) { // Multi-page
			frm.MultiPage.GotoPageByElement(el);
		} else if (frm.$Element.is("div")) { // Multiple Master/Detail
			var $pane = frm.$Element.closest(".tab-pane");
			if ($pane[0] && !$pane.hasClass("active"))
				$pane.closest(".tabbable").find("a[data-toggle=tab][href='#" + $pane.attr("id") + "']").click();
		}
	}
	jQuery.later(100, this, "ew_SetFocus", el); // Focus later to make sure editors are created
	return false;
}
  4. Still in the \Script\ewp.js file, find again this code:

    		alert("Server Error " + o.status + ": " + o.statusText);

    then change it become:

    		alertify.alert("Server Error " + o.status + ": " + o.statusText); // Modification Alertify by Masino Sinaga, October 14, 2013
  5. Still in the \Script\ewp.js file, find again this code:

    	if (oArg.sel && !ew_KeySelected(oArg.f)) {
		alert(ewLanguage.Phrase("NoRecordSelected"));
		return;
	}

    then change it become:

    	if (oArg.sel && !ew_KeySelected(oArg.f)) {
		alertify.alert(ewLanguage.Phrase("NoRecordSelected")); // Modification Alertify by Masino Sinaga, October 14, 2013
		return;
	}
  6. Still in the \Script\ewp.js file, find again this code:

    // Show message dialog
function ew_ShowMessage(msg) {
	var $ = jQuery, $div = $("div.ewMessageDialog:first");
	var html = msg || ($div.length ? (EW_IS_MOBILE ? $div.text() : $div.html()) : "");
	if ($.trim(html) == "")
		return;
	if (EW_IS_MOBILE) {
		alert(html);
	} else {
	var $dlg = $("#ewMsgBox");
	$dlg.find(".modal-body").html(html);
	$dlg.modal("show");
}
}

    then change it become:

    // Show message dialog
function ew_ShowMessage(msg) {
	var $ = jQuery, $div = $("div.ewMessageDialog:first");
	var html = msg || ($div.length ? (EW_IS_MOBILE ? $div.text() : $div.html()) : "");
	if ($.trim(html) == "")
		return;
	if (EW_IS_MOBILE) {
		alertify.alert(html); // Modification Alertify by Masino Sinaga, October 14, 2013
	} else {
	var $dlg = $("#ewMsgBox");
	$dlg.find(".modal-body").html(html);
	$dlg.modal("show");
}
}
  7. Still in the \Script\ewp.js file, find again this code:

    		if ($.isNumber(cnt) && ar.length > cnt) {
			alert(ewLanguage.Phrase("UploadErrMsgMaxNumberOfFiles"));
			return false;	
		} 
		var l = parseInt($fs.val(), 10);
		if ($.isNumber(l) && l > 0 && ar.join(",").length > l) {
			alert(ewLanguage.Phrase("UploadErrMsgMaxFileLength"));
			return false;	
		}

    then change it become:

    		if ($.isNumber(cnt) && ar.length > cnt) {
			alertify.alert(ewLanguage.Phrase("UploadErrMsgMaxNumberOfFiles")); // Modification Alertify by Masino Sinaga, October 14, 2013
			return false;	
		} 
		var l = parseInt($fs.val(), 10);
		if ($.isNumber(l) && l > 0 && ar.join(",").length > l) {
			alertify.alert(ewLanguage.Phrase("UploadErrMsgMaxFileLength")); // Modification Alertify by Masino Sinaga, October 14, 2013
			return false;	
		}
  8. Still in the \Script\ewp.js file, find again this code:

    // Delete a row from grid
function ew_DeleteGridRow(el, infix) {
	var $ = jQuery, $grid = $(el).closest("." + EW_GRID_CLASSNAME),
		$row = $(el).closest("tr"), $tbl = $row.closest("." + EW_TABLE_CLASSNAME);
	if (!el || !$grid[0] || !$row[0] || !$tbl[0])
		return;
	var rowidx = parseInt($row.data("rowindex"), 10);	
	var $form = $grid.find("div.ewForm[id^=f][id$=grid]");
	if (!$form[0])
		$form = $grid.find("form.ewForm[id^=f][id$=list]");
	var frm = $form.data("form");
	if (!$form[0] || !frm)
		return;
	var suffix = ($form.is("div")) ? "_" + $form.attr("id") : "";
    var keycntname = "#key_count" + suffix;
    var $elkeycnt = $form.find(keycntname);
	var cf = ($.isFunction(frm.EmptyRow)) ? !frm.EmptyRow(infix) : true;
	if (cf && !confirm(ewLanguage.Phrase("DeleteConfirmMsg")))
		return;
	$row.remove();
	ew_SetupTable(-1, $tbl[0], true);
	if (rowidx > 0) {
		var $keyact = $form.find("#k" + rowidx + "_action" + suffix);
		if ($keyact[0]) {
			$keyact.val(($keyact.val() == "insert") ? "insertdelete" : "delete");
		} else {
			$form.find(keycntname).after($("<input>").attr({
				type: "hidden",
				id: "k" + rowidx + "_action" + suffix,
				name: "k" + rowidx + "_action" + suffix,
				value: "delete"
			}));
		}
		return true;
	}
	return false;
}

    then change it become:

    // Delete a row from grid
function ew_DeleteGridRow(el, infix) {
	var $ = jQuery, $grid = $(el).closest("." + EW_GRID_CLASSNAME),
		$row = $(el).closest("tr"), $tbl = $row.closest("." + EW_TABLE_CLASSNAME);
	if (!el || !$grid[0] || !$row[0] || !$tbl[0])
		return;
	var rowidx = parseInt($row.data("rowindex"), 10);	
	var $form = $grid.find("div.ewForm[id^=f][id$=grid]");
	if (!$form[0])
		$form = $grid.find("form.ewForm[id^=f][id$=list]");
	var frm = $form.data("form");
	if (!$form[0] || !frm)
		return;
	var suffix = ($form.is("div")) ? "_" + $form.attr("id") : "";
    var keycntname = "#key_count" + suffix;
    var $elkeycnt = $form.find(keycntname);
	var cf = ($.isFunction(frm.EmptyRow)) ? !frm.EmptyRow(infix) : true;
	//if (cf && !confirm(ewLanguage.Phrase("DeleteConfirmMsg")))
	//	return;
	// Begin of modification Alertify by Masino Sinaga, October 14, 2013
	if (cf) {
		alertify.confirm(ewLanguage.Phrase("DeleteConfirmMsg"), function (ask) {
			if (ask) {
				$row.remove();
				ew_SetupTable(-1, $tbl[0], true);
				if (rowidx > 0) {
					var $keyact = $form.find("#k" + rowidx + "_action" + suffix);
					if ($keyact[0]) {
						$keyact.val(($keyact.val() == "insert") ? "insertdelete" : "delete");
					} else {
						$form.find(keycntname).after($("<input>").attr({
							type: "hidden",
							id: "k" + rowidx + "_action" + suffix,
							name: "k" + rowidx + "_action" + suffix,
							value: "delete"
						}));
					}
					return true;
				}
				return false;
			} else {
				return; 
		}});
		return; // <-- old still used?
	}
	// End of modification Alertify by Masino Sinaga, October 14, 2013
	// start without confirm below ...
	$row.remove();
	ew_SetupTable(-1, $tbl[0], true);
	if (rowidx > 0) {
		var $keyact = $form.find("#k" + rowidx + "_action" + suffix);
		if ($keyact[0]) {
			$keyact.val(($keyact.val() == "insert") ? "insertdelete" : "delete");
		} else {
			$form.find(keycntname).after($("<input>").attr({
				type: "hidden",
				id: "k" + rowidx + "_action" + suffix,
				name: "k" + rowidx + "_action" + suffix,
				value: "delete"
			}));
		}
		return true;
	}
	return false;
}
  9. Open \Script\ew_addon.js file, and find this code:

    		alert(ewLanguage.Phrase("NoFieldSelected"));

    then change it become:

    		alertify.alert(ewLanguage.Phrase("NoFieldSelected")); // Modification Alertify by Masino Sinaga, October 14, 2013
  10. Still in the \Script\ew_addon.js file, find again this code:

    		alert(ewLanguage.Phrase("NoAddRecord"));

    then change it become:

    		alertify.alert(ewLanguage.Phrase("NoAddRecord")); // Modification Alertify by Masino Sinaga, October 14, 2013
  11. Open \Script\info.php file, and find this code:

    			return "javascript:alert(ewLanguage.Phrase('InvalidRecord'));";

    then change it become:

    			return "javascript:alertify.alert(ewLanguage.Phrase('InvalidRecord'));"; // Modification Alertify by Masino Sinaga, October 14, 2013

[/hidepost]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Demo Website

Another Demo

The following template are not available in this site (must be purchased separately)

Demo Explanation

Stock Inventory Management is the good project for your reference, since it uses the real example in the real world. Many useful features you can use from this project, such as how to add the Thousand and Decimal separator character, and also how to calculate multiple row in Grid-Add when End-Users are entering data into the Grid-Add mode.

Categories

Articles based on version