Skip to content

Commit 92b317b

Browse files
lawson89lawson89
committed
Clean up javascript in main_new (move ajax functions to goatUtil)
Make ajaxify links safe to call multiple times
1 parent 7ebb354 commit 92b317b

File tree

4 files changed

+98
-104
lines changed

4 files changed

+98
-104
lines changed

‎src/main/java/org/owasp/webgoat/lessons/AbstractLesson.java

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,7 @@
1919
import org.apache.ecs.ElementContainer;
2020
import org.apache.ecs.StringElement;
2121
import org.apache.ecs.html.Body;
22-
import org.apache.ecs.html.Center;
2322
import org.apache.ecs.html.Form;
24-
import org.apache.ecs.html.H1;
2523
import org.apache.ecs.html.Head;
2624
import org.apache.ecs.html.Html;
2725
import org.apache.ecs.html.IMG;

‎src/main/webapp/WEB-INF/pages/main_new.jsp

Lines changed: 2 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -287,80 +287,14 @@
287287
<!--main content end-->
288288

289289
</section>
290-
<script>
291-
//Load global functions
292-
293-
// set this to true if you want to see form submissions
294-
// set to false once we get all the kinks worked out
295-
var DEBUG_FORM_SUBMISSION = false;
296290

291+
<script>
297292
$(document).ready(function() {
298293
//TODO merge appliction.js code into other js files
299294
app.init();
300295
});
301-
// make all forms ajax forms
302-
var options = {
303-
target: '#lesson_content', // target element(s) to be updated with server response
304-
beforeSubmit: showRequest, // pre-submit callback, comment out after debugging
305-
success: showResponse // post-submit callback, comment out after debugging
306-
307-
// other available options:
308-
//url: url // override for form's 'action' attribute
309-
//type: type // 'get' or 'post', override for form's 'method' attribute
310-
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
311-
//clearForm: true // clear all form fields after successful submit
312-
//resetForm: true // reset the form after successful submit
313-
314-
// $.ajax options can be used here too, for example:
315-
//timeout: 3000
316-
};
317-
// pre-submit callback
318-
function showRequest(formData, jqForm, options) {
319-
if (DEBUG_FORM_SUBMISSION) {
320-
// formData is an array; here we use $.param to convert it to a string to display it
321-
// but the form plugin does this for you automatically when it submits the data
322-
var queryString = $.param(formData);
323-
324-
// jqForm is a jQuery object encapsulating the form element. To access the
325-
// DOM element for the form do this:
326-
// var formElement = jqForm[0];
327-
328-
alert('About to submit: \n\n' + queryString);
329-
}
330-
331-
// here we could return false to prevent the form from being submitted;
332-
// returning anything other than false will allow the form submit to continue
333-
return true;
334-
}
335-
336-
// post-submit callback
337-
function showResponse(responseText, statusText, xhr, $form) {
338-
// for normal html responses, the first argument to the success callback
339-
// is the XMLHttpRequest object's responseText property
340-
341-
// if the ajaxForm method was passed an Options Object with the dataType
342-
// property set to 'xml' then the first argument to the success callback
343-
// is the XMLHttpRequest object's responseXML property
344-
345-
// if the ajaxForm method was passed an Options Object with the dataType
346-
// property set to 'json' then the first argument to the success callback
347-
// is the json data object returned by the server
348-
if (DEBUG_FORM_SUBMISSION) {
349-
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
350-
'\n\nThe output div should have already been updated with the responseText.');
351-
}
352-
// JASON - SEE THIS HOOK
353-
// update lesson cookies and params
354-
// make any embedded forms ajaxy
355-
goat.utils.showLessonCookiesAndParams();
356-
goat.utils.makeFormsAjax();
357-
// links are hooked with each lesson now (see Java class Screen.getContent())
358-
//goat.utils.ajaxifyAttackHref(); //TODO find some way to hook scope for current menu. Likely needs larger refactor which is already started/stashed
359-
//refresh menu
360-
angular.element($('#leftside-navigation')).scope().renderMenu();
361-
}
362-
363296
</script>
297+
364298
<!-- About WebGoat Modal -->
365299
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
366300
<div class="modal-dialog modal-lg">

‎src/main/webapp/js/goatControllers.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,10 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
8282
);
8383
//TODO encode html or get angular js portion working
8484
$("#lesson_content").html(reply.data);
85-
//hook forms
86-
goat.utils.makeFormsAjax();// inject form?
85+
//hook forms and links (safe to call twice)
8786
// links are hooked with each lesson now (see Java class Screen.getContent())
88-
//goat.utils.ajaxifyAttackHref();
87+
goat.utils.makeFormsAjax();// inject form?
88+
goat.utils.ajaxifyAttackHref();
8989
$('#leftside-navigation').height($('#main-content').height() + 15)//TODO: get ride of fixed value (15)here
9090
//notifies goatLesson Controller of the less change
9191
$scope.$emit('lessonUpdate', {params: curScope.parameters, 'showControls': showControls});

‎src/main/webapp/js/goatUtil.js

Lines changed: 93 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,76 @@ goat.utils = {
1111
}
1212
return arr;
1313
},
14+
debugFormSubmission: false,
15+
// pre-submit callback
16+
showRequest: function(formData, jqForm, options) {
17+
if (goat.utils.debugFormSubmission) {
18+
// formData is an array; here we use $.param to convert it to a string to display it
19+
// but the form plugin does this for you automatically when it submits the data
20+
var queryString = $.param(formData);
21+
22+
// jqForm is a jQuery object encapsulating the form element. To access the
23+
// DOM element for the form do this:
24+
// var formElement = jqForm[0];
25+
26+
alert('About to submit: \n\n' + queryString);
27+
}
28+
// here we could return false to prevent the form from being submitted;
29+
// returning anything other than false will allow the form submit to continue
30+
return true;
31+
},
32+
// post-submit callback
33+
showResponse: function(responseText, statusText, xhr, $form) {
34+
// for normal html responses, the first argument to the success callback
35+
// is the XMLHttpRequest object's responseText property
36+
37+
// if the ajaxForm method was passed an Options Object with the dataType
38+
// property set to 'xml' then the first argument to the success callback
39+
// is the XMLHttpRequest object's responseXML property
40+
41+
// if the ajaxForm method was passed an Options Object with the dataType
42+
// property set to 'json' then the first argument to the success callback
43+
// is the json data object returned by the server
44+
if (goat.utils.debugFormSubmission) {
45+
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
46+
'\n\nThe output div should have already been updated with the responseText.');
47+
}
48+
// update lesson cookies and params
49+
// make any embedded forms ajaxy
50+
goat.utils.showLessonCookiesAndParams();
51+
// forms and links are now hooked with each standard lesson render (see Java class Screen.getContent())
52+
// but these are safe to call twice
53+
goat.utils.makeFormsAjax();
54+
goat.utils.ajaxifyAttackHref(); //TODO find some way to hook scope for current menu. Likely needs larger refactor which is already started/stashed
55+
//refresh menu
56+
angular.element($('#leftside-navigation')).scope().renderMenu();
57+
},
1458
makeFormsAjax: function() {
59+
// make all forms ajax forms
60+
var options = {
61+
target: '#lesson_content', // target element(s) to be updated with server response
62+
beforeSubmit: goat.utils.showRequest, // pre-submit callback, comment out after debugging
63+
success: goat.utils.showResponse // post-submit callback, comment out after debugging
64+
65+
// other available options:
66+
//url: url // override for form's 'action' attribute
67+
//type: type // 'get' or 'post', override for form's 'method' attribute
68+
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
69+
//clearForm: true // clear all form fields after successful submit
70+
//resetForm: true // reset the form after successful submit
71+
72+
// $.ajax options can be used here too, for example:
73+
//timeout: 3000
74+
};
1575
//console.log("Hooking any lesson forms to make them ajax");
1676
$("form").ajaxForm(options);
1777
},
18-
displayButton: function(id,show) {
19-
if ($('#'+id)) {
78+
displayButton: function(id, show) {
79+
if ($('#' + id)) {
2080
if (show) {
21-
$('#'+id).show();
81+
$('#' + id).show();
2282
} else {
23-
$('#'+id).hide();
83+
$('#' + id).hide();
2484
}
2585
}
2686
},
@@ -52,17 +112,17 @@ goat.utils = {
52112
$('#lesson_plan_row').show();
53113
goat.utils.scrollToHelp();
54114
},
55-
scrollToHelp:function() {
56-
$('#leftside-navigation').height($('#main-content').height()+15)
115+
scrollToHelp: function() {
116+
$('#leftside-navigation').height($('#main-content').height() + 15)
57117
var target = $('#lessonHelpsWrapper');
58118
goat.utils.scrollEasy(target);
59119
},
60120
scrollToTop: function() {
61121
$('.lessonHelp').hide();
62-
var target= $('#container');
122+
var target = $('#container');
63123
goat.utils.scrollEasy(target);
64124
},
65-
scrollEasy:function(target) {
125+
scrollEasy: function(target) {
66126
$('html,body').animate({
67127
scrollTop: target.offset().top
68128
}, 1000);
@@ -73,7 +133,7 @@ goat.utils = {
73133
}
74134
var params = url.split('?')[1].split('&');
75135
var paramsArr = [];
76-
for (var i=0;i< params.length;i++) {
136+
for (var i = 0; i < params.length; i++) {
77137
var paramObj = {};
78138
paramObj.name = params[i].split('=')[0];
79139
paramObj.value = params[i].split('=')[1];
@@ -84,33 +144,35 @@ goat.utils = {
84144
highlightCurrentLessonMenu: function(id) {
85145
//TODO: move selectors in first two lines into goatConstants
86146
$('ul li.selected').removeClass(goatConstants.selectedMenuClass)
87-
$('ul li.selected a.selected').removeClass(goatConstants.selectedMenuClass)
88-
$('#'+id).addClass(goatConstants.selectedMenuClass);
89-
$('#'+id).parent().addClass(goatConstants.selectedMenuClass);
147+
$('ul li.selected a.selected').removeClass(goatConstants.selectedMenuClass)
148+
$('#' + id).addClass(goatConstants.selectedMenuClass);
149+
$('#' + id).parent().addClass(goatConstants.selectedMenuClass);
90150
},
91-
makeId: function (lessonName) {
92-
return lessonName.replace(/\s|\(|\)|\!|\:|\;|\@|\#|\$|\%|\^|\&|\*/g,'');//TODO move the replace routine into util function
151+
makeId: function(lessonName) {
152+
return lessonName.replace(/\s|\(|\)|\!|\:|\;|\@|\#|\$|\%|\^|\&|\*/g, '');//TODO move the replace routine into util function
93153
},
94-
ajaxifyAttackHref: function () {
154+
ajaxifyAttackHref: function() {
95155
/* Jason I commented this implementation out
96156
* I think we should show the attack link on the lessons that need it by modifying the lesson
97157
* itself or we could add a new button up top for "show lesson link"
98-
$.each($('a[href^="attack?"]'),
99-
function(i,el) {
100-
var url = $(el).attr('href');
101-
$(el).attr('href','#');
102-
$(el).attr('link',url);
103-
//TODO pull currentMenuId
104-
$(el).click(
105-
function() {
106-
var _url = $(el).attr('link');
107-
$.get(_url, {success:showResponse});
108-
}
109-
)
110-
}
111-
);
112-
*/
113-
// alternate implementation
158+
$.each($('a[href^="attack?"]'),
159+
function(i,el) {
160+
var url = $(el).attr('href');
161+
$(el).attr('href','#');
162+
$(el).attr('link',url);
163+
//TODO pull currentMenuId
164+
$(el).click(
165+
function() {
166+
var _url = $(el).attr('link');
167+
$.get(_url, {success:showResponse});
168+
}
169+
)
170+
}
171+
);
172+
*/
173+
// alternate implementation
174+
// unbind any bound events so we are safe to be called twice
175+
$('#lesson_content a').unbind('click');
114176
$('#lesson_content a').bind('click', function(event) {
115177
event.preventDefault();
116178
$.get(this.href, {}, function(response) {

0 commit comments

Comments
 (0)