When you are theming the create queue page (queue.inc.php) you will notice moving or adding elements on the page will break the preview tab as in it won't show any table. This is because the script for that tab uses a custom 'afterShow' event which can be found in the scp.js file which would like this:
// Add 'afterShow' event to jQuery elements,
// thanks http://stackoverflow.com/a/1225238/1025836
jQuery(function($) {
var _oldShow = $.fn.show;
// This should work with jQuery 3 with or without jQuery UI
$.fn.show = function() {
var argsArray = Array.prototype.slice.call(arguments),
arg = argsArray[0],
options = argsArray[1] || {duration: 0};
if (typeof(arg) === 'number')
options.duration = arg;
else
options.effect = arg;
return this.each(function () {
var obj = $(this);
_oldShow.call(obj, $.extend(options, {
complete: function() {
obj.trigger('afterShow');
}
}));
});
}
});
But since the tab's script relies on this custom event it just breaks which I have not figured out why but the fix is just to comment out or remove the function as that is the only page that uses this custom event and then in the tabs script code which looks like:
<div class="tab_content" id="preview-tab">
<div id="preview">
</div>
<script>
$(function() {
$('#preview-tab').on('afterShow', function() {
$.ajax({
url: 'ajax.php/queue<?php if (isset($queue->id)) echo "/{$queue->id}"; ?>/preview',
type: 'POST',
data: $('#save').serializeArray(),
success: function(html) {
$('#preview').html(html);
}
});
});
});
</script>
</div>
You should change it to the following if you just want the tab to work regardless of weather the tab is currently active or not:
$(document).ready(function() {
$.ajax({
url: 'ajax.php/queue<?php if (isset($queue->id)) echo "/{$queue->id}"; ?>/preview',
type: 'POST',
data: $('#save').serializeArray(),
success: function(html) {
$('#preview').html(html);
}
});
});
But if you want something a bit less resource incentive that would only load the script when the preview tab is active then you should use the following:
$(document).ready(function() {
if ($('#preview-tab').is(':visible')) {
$.ajax({
url: 'ajax.php/queue<?php if (isset($queue->id)) echo "/{$queue->id}"; ?>/preview',
type: 'POST',
data: $('#save').serializeArray(),
success: function(html) {
$('#preview').html(html);
}
});
}
});
Hopefully this helps out people that have not been able to figure out how why it has been broken for them while theming osTicket. (osTicket Awesome's developer would be really happy about this 😄)
