Fix #3347: "Run Code" reloads page in Matlab Problem

Instead of refreshing only the necessary parts,
"Run Code" reloads the whole page.

This commit fixes this behaviour, by refreshing the
specific elements belonging to the Problem instead.

Also tidies up indentation.
This commit is contained in:
dragonfi
2014-05-03 19:15:23 +02:00
parent c07b360528
commit 8430be3d18
2 changed files with 45 additions and 21 deletions

View File

@@ -39,7 +39,7 @@
<div class="external-grader-message" aria-live="polite">
${msg|n}
</div>
<div class="external-grader-message" aria-live="polite">
<div class="external-grader-message ungraded-matlab-result" aria-live="polite">
${queue_msg|n}
</div>
@@ -55,13 +55,11 @@
if($(parent_elt).find('.capa_alert').length) {
$(parent_elt).find('.capa_alert').remove();
}
var alert_elem = "<div>" + msg + "</div>";
alert_elem = $(alert_elem).addClass('capa_alert');
var alert_elem = $("<div>" + msg + "</div>");
alert_elem.addClass('capa_alert').addClass('is-fading-in');
$(parent_elt).find('.action').after(alert_elem);
$(parent_elt).find('.capa_alert').css({opacity: 0}).animate({opacity: 1}, 700);
}
// hook up the plot button
var plot = function(event) {
var problem_elt = $(event.target).closest('.problems-wrapper');
@@ -72,7 +70,7 @@
// since there could be multiple codemirror instances on the page,
// save all of them.
$('.CodeMirror').each(function(i, el){
el.CodeMirror.save();
el.CodeMirror.save();
});
var input = $("#input_${id}");
@@ -81,33 +79,39 @@
answer = input.serialize();
// setup callback for after we send information to plot
// a chain of callbacks, each querying the server on success of the previous one
var get_callback = function(response) {
var new_result_elem = $(response.html).find(".ungraded-matlab-result");
new_result_elem.addClass("is-fading-in");
result_elem = $(problem_elt).find(".ungraded-matlab-result");
result_elem.replaceWith(new_result_elem);
console.log(response.html);
}
var plot_callback = function(response) {
if(response.success) {
window.location.reload();
$.postWithPrefix(url + "/problem_get", get_callback);
} else {
gentle_alert(problem_elt, response.message);
}
}
var save_callback = function(response) {
if(response.success) {
// send information to the problem's plot functionality
Problem.inputAjax(url, input_id, 'plot',
{'submission': submission}, plot_callback);
}
else {
gentle_alert(problem_elt, response.message);
}
}
var save_callback = function(response) {
if(response.success) {
// send information to the problem's plot functionality
Problem.inputAjax(url, input_id, 'plot',
{'submission': submission}, plot_callback);
}
else {
gentle_alert(problem_elt, response.message);
}
}
// save the answer
$.postWithPrefix(url + '/problem_save', answer, save_callback);
}
$('#plot_${id}').click(plot);
});
</script>
</section>

View File

@@ -241,3 +241,23 @@
@-webkit-keyframes video-appear { @include video-appear-keyframes; }
@-moz-keyframes video-appear { @include video-appear-keyframes; }
@keyframes video-appear { @include video-appear-keyframes; }
// quick fade-in animation to get user attention
//************************************************************************//
.is-fading-in {
@include animation(fade-in-animation 0.8s);
}
@mixin fade-in-keyframes {
0% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
@-webkit-keyframes fade-in-animation{ @include fade-in-keyframes; }
@-moz-keyframes fade-in-animation{ @include fade-in-keyframes; }
@keyframes fade-in-animation{ @include fade-in-keyframes; }