Added AJAX updating error handling.
* Splits the AJAX complete method into complete, success, and error. * Cleans up 404 (e.g. gone/deleted) handling. * Adds 5XX error handling. * Adds client-side alert message templating. * Adds client-side conf (debug and static_url) loaded from backend. Fixes bug 957461. Change-Id: I5114430d35e2d20603e817651540b2db1f8a4d07
This commit is contained in:
Gabriel Hurley
parent
9ba9d97419
commit
3a6ffe81d8
@ -47,7 +47,7 @@ var Horizon = function() {
|
||||
$("form").live("change", "#id_source_group", function(evt) {
|
||||
var $sourceGroup = $(this).find('#id_source_group');
|
||||
var $cidrContainer = $(this).find('#id_cidr').parent().parent();
|
||||
if($sourceGroup.val() == "") {
|
||||
if($sourceGroup.val() === "") {
|
||||
$cidrContainer.removeClass("hide");
|
||||
} else {
|
||||
$cidrContainer.addClass("hide");
|
||||
@ -78,8 +78,45 @@ var Horizon = function() {
|
||||
var $row = $(this),
|
||||
$table = $row.closest('table');
|
||||
$.ajax($row.attr('data-update-url'), {
|
||||
complete: function (jqXHR, status) {
|
||||
var $new_row = $(jqXHR.responseText);
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
switch (jqXHR.status) {
|
||||
// A 404 indicates the object is gone, and should be removed from the table
|
||||
case 404:
|
||||
// Update the footer count and reset to default empty row if needed
|
||||
var $footer = $table.find('tr:last'),
|
||||
row_count, footer_text, colspan, template, params, $empty_row;
|
||||
|
||||
// existing count minus one for the row we're removing
|
||||
row_count = $table.find('tbody tr').length - 1;
|
||||
footer_text = "Displaying " + row_count + " item";
|
||||
if(row_count !== 1) {
|
||||
footer_text += 's';
|
||||
}
|
||||
$footer.find('span').text(footer_text);
|
||||
|
||||
if(row_count === 0) {
|
||||
colspan = $footer.find('td').attr('colspan');
|
||||
template = horizon.templates.compiled_templates["#empty_row_template"];
|
||||
console.log(template);
|
||||
params = {"colspan": colspan};
|
||||
empty_row = template.render(params);
|
||||
console.log(empty_row);
|
||||
$row.replaceWith(empty_row);
|
||||
} else {
|
||||
$row.remove();
|
||||
}
|
||||
break;
|
||||
default:
|
||||
if (horizon.conf.debug) {
|
||||
horizon.alert("error", "An error occurred while updating.");
|
||||
}
|
||||
$row.removeClass("ajax-update");
|
||||
$row.find("i.ajax-updating").remove();
|
||||
break;
|
||||
}
|
||||
},
|
||||
success: function (data, textStatus, jqXHR) {
|
||||
var $new_row = $(data);
|
||||
$new_row.find("td.status_unknown").prepend('<i class="icon-updating ajax-updating"></i>');
|
||||
// Only replace row if the html content has changed
|
||||
if($new_row.html() != $row.html()) {
|
||||
@ -87,30 +124,13 @@ var Horizon = function() {
|
||||
// Preserve the checkbox if it's already clicked
|
||||
$new_row.find(':checkbox').prop('checked', true);
|
||||
}
|
||||
if($new_row.length == 0) {
|
||||
// Update the footer count and reset to default empty row if needed
|
||||
var $footer = $table.find('tr:last');
|
||||
|
||||
// remove one row from existing count
|
||||
var row_count = $table.find('tbody tr').length -1;
|
||||
var footer_text = "Displaying " + row_count + " item";
|
||||
|
||||
if(row_count > 1) { footer_text += 's'; }
|
||||
$footer.find('span').text(footer_text);
|
||||
|
||||
if(row_count == 0) {
|
||||
var colspan = $footer.find('td').attr('colspan'),
|
||||
template = horizon.templates.compiled_templates["#empty_row_template"],
|
||||
params = {colspan: colspan},
|
||||
empty_row = $(template.render(params));
|
||||
|
||||
$new_row = $(empty_row);
|
||||
}
|
||||
}
|
||||
$row.replaceWith($new_row);
|
||||
$table.removeAttr('decay_constant');
|
||||
}
|
||||
// Revalidate the button check for updated table
|
||||
},
|
||||
complete: function (jqXHR, textStatus) {
|
||||
// Reset decay constant.
|
||||
$table.removeAttr('decay_constant');
|
||||
// Revalidate the button check for the updated table
|
||||
horizon.datatables.validate_button();
|
||||
}
|
||||
});
|
||||
@ -130,6 +150,7 @@ var Horizon = function() {
|
||||
setTimeout(horizon.datatables.update, next_poll);
|
||||
}
|
||||
},
|
||||
|
||||
validate_button: function () {
|
||||
// Disable form button if checkbox are not checked
|
||||
$("form").each(function (i) {
|
||||
@ -189,7 +210,7 @@ var Horizon = function() {
|
||||
|
||||
/* Namespace for core functionality related to client-side templating. */
|
||||
horizon.templates = {
|
||||
template_ids: ["#modal_template", "#empty_row_template"],
|
||||
template_ids: ["#modal_template", "#empty_row_template", "#alert_message_template"],
|
||||
compiled_templates: {}
|
||||
};
|
||||
|
||||
@ -214,6 +235,21 @@ var Horizon = function() {
|
||||
return modal;
|
||||
};
|
||||
|
||||
/* Utilities for common needs which aren't JS builtins. */
|
||||
horizon.utils = {
|
||||
capitalize: function(string) {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
}
|
||||
};
|
||||
|
||||
horizon.alert = function (type, message) {
|
||||
var template = horizon.templates.compiled_templates["#alert_message_template"],
|
||||
params = {"type": type,
|
||||
"type_capitalized": horizon.utils.capitalize(type),
|
||||
"message": message};
|
||||
return $(template.render(params)).prependTo("#main_content .messages");
|
||||
};
|
||||
|
||||
return horizon;
|
||||
};
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
}, opt);
|
||||
|
||||
$(this).bind(options.trigger, function(e) {
|
||||
options.container.find( options.selector + $(this).attr(options.retrieve) ).toggleClass(options.selected_class)
|
||||
options.container.find( options.selector + $(this).attr(options.retrieve) ).toggleClass(options.selected_class);
|
||||
});
|
||||
};
|
||||
} (jQuery, this, document));
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
{% load i18n %}
|
||||
<div class="messages">
|
||||
{% for message in messages %}
|
||||
{% if "info" in message.tags %}
|
||||
<div class="alert alert-block alert-info fade in">
|
||||
@ -25,3 +26,4 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
13
horizon/templates/horizon/client_side/_alert_message.html
Normal file
13
horizon/templates/horizon/client_side/_alert_message.html
Normal file
@ -0,0 +1,13 @@
|
||||
{% extends "horizon/client_side/template.html" %}
|
||||
{% load horizon %}
|
||||
|
||||
{% block id %}alert_message_template{% endblock %}
|
||||
|
||||
{% block template %}
|
||||
{% jstemplate %}
|
||||
<div class="alert alert-block fade in alert-[[type]]">
|
||||
<a class="close" data-dismiss="alert" href="#">×</a>
|
||||
<p><strong>[[type_capitalized]]: </strong>[[message]]</p>
|
||||
</div>
|
||||
{% endjstemplate %}
|
||||
{% endblock %}
|
||||
9
horizon/templates/horizon/client_side/conf.html
Normal file
9
horizon/templates/horizon/client_side/conf.html
Normal file
@ -0,0 +1,9 @@
|
||||
<script type='text/javascript' charset='utf-8'>
|
||||
/* Storage for backend configuration variables which the frontend
|
||||
* should be aware of.
|
||||
*/
|
||||
horizon.conf = {
|
||||
debug: {{ debug|yesno:"true,false" }},
|
||||
static_url: "{{ STATIC_URL }}"
|
||||
}
|
||||
</script>
|
||||
3
horizon/templates/horizon/client_side/templates.html
Normal file
3
horizon/templates/horizon/client_side/templates.html
Normal file
@ -0,0 +1,3 @@
|
||||
{% include "horizon/client_side/_modal.html" %}
|
||||
{% include "horizon/client_side/_table_row.html" %}
|
||||
{% include "horizon/client_side/_alert_message.html" %}
|
||||
@ -12,9 +12,13 @@
|
||||
|
||||
{% comment %} Horizon-specific JS {% endcomment %}
|
||||
<script src='{{ STATIC_URL }}horizon/js/horizon.js' type='text/javascript' charset='utf-8'></script>
|
||||
{% include "horizon/client_side/conf.html" %}
|
||||
<script src='{{ STATIC_URL }}horizon/js/tabs.js' type='text/javascript' charset='utf-8'></script>
|
||||
<script src='{{ STATIC_URL }}horizon/js/plugins.js' type='text/javascript' charset='utf-8'></script>
|
||||
<script src='{{ STATIC_URL }}horizon/js/tables.js' type='text/javascript' charset='utf-8'></script>
|
||||
<script src='{{ STATIC_URL }}horizon/js/modals.js' type='text/javascript' charset='utf-8'></script>
|
||||
<script src='{{ STATIC_URL }}horizon/js/forms.js' type='text/javascript' charset='utf-8'></script>
|
||||
<script src='{{ STATIC_URL }}horizon/js/form_examples.js' type='text/javascript' charset='utf-8'></script>
|
||||
|
||||
{% comment %} Client-side Templates {% endcomment %}
|
||||
{% include "horizon/client_side/templates.html" %}
|
||||
|
||||
@ -26,8 +26,6 @@
|
||||
</div>
|
||||
{% block js %}
|
||||
{% include "_scripts.html" %}
|
||||
{% include "horizon/client_side/_modal.html" %}
|
||||
{% include "horizon/client_side/_table_row.html" %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user