render lesson content using jquery

This commit is contained in:
lawson89 2014-08-18 13:18:42 -04:00
parent 30f3c3a95f
commit f3092a2344
5 changed files with 41 additions and 24 deletions

View File

@ -205,6 +205,8 @@ public abstract class Screen {
// TODO we could hook all forms here with javascript call to ajax forms plugin // TODO we could hook all forms here with javascript call to ajax forms plugin
public String getContent() { public String getContent() {
String makeFormsAjax = "<script> $(document).ready(function() { makeFormsAjax(); });</script>"; String makeFormsAjax = "<script> $(document).ready(function() { makeFormsAjax(); });</script>";
// handle this on the page with js
makeFormsAjax = "";
return (content == null) ? "" : content.toString() + makeFormsAjax; return (content == null) ? "" : content.toString() + makeFormsAjax;
} }

View File

@ -129,7 +129,7 @@ public class WebSession {
/** /**
* Description of the Field * Description of the Field
*/ */
public final static String SESSION = "Session"; public final static String SESSION = "websession";
public final static String SHOWSOURCE = "ShowSource"; public final static String SHOWSOURCE = "ShowSource";

View File

@ -2,7 +2,7 @@
errorPage=""%> errorPage=""%>
<%@page import="org.owasp.webgoat.session.WebSession"%> <%@page import="org.owasp.webgoat.session.WebSession"%>
<% <%
WebSession webSession = ((WebSession) session.getAttribute("websession")); WebSession webSession = ((WebSession) session.getAttribute(WebSession.SESSION));
%> %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
@ -84,9 +84,9 @@
<section id="main-content"> <section id="main-content">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="panel"> <div class="panel" >
<div class="panel-body" id="lesson_content"> <div class="panel-body" id="lesson_content" ng-controller="goatMenu">
<p ng-model="lessonUrl"> {{lessonUrl}}</p>
<h1>About WebGoat</h1> <h1>About WebGoat</h1>
<hr /> <hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque volutpat feugiat nunc, non vulputate urna dictum ut. Nam consectetur porttitor diam ut ultricies. Aenean dolor dolor, congue sed ornare non, elementum in mauris. Phasellus orci sem, rhoncus eu laoreet eu, aliquam nec ante. Suspendisse sit amet justo eget eros tempor tincidunt vel quis justo. Sed pulvinar enim id neque pellentesque, eu rhoncus lorem eleifend. Morbi congue tortor sit amet pulvinar posuere.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque volutpat feugiat nunc, non vulputate urna dictum ut. Nam consectetur porttitor diam ut ultricies. Aenean dolor dolor, congue sed ornare non, elementum in mauris. Phasellus orci sem, rhoncus eu laoreet eu, aliquam nec ante. Suspendisse sit amet justo eget eros tempor tincidunt vel quis justo. Sed pulvinar enim id neque pellentesque, eu rhoncus lorem eleifend. Morbi congue tortor sit amet pulvinar posuere.</p>
@ -184,8 +184,10 @@
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.'); '\n\nThe output div should have already been updated with the responseText.');
} }
makeFormsAjax();
} }
function makeFormsAjax() { function makeFormsAjax() {
//console.log("Hooking any lesson forms to make them ajax");
$("form").ajaxForm(options); $("form").ajaxForm(options);
} }
</script> </script>

View File

@ -7,34 +7,47 @@
* prepares and updates menu topic items for the view * prepares and updates menu topic items for the view
*/ */
goat.controller('goatMenu', function($scope, $http) { goat.controller('goatMenu', function($scope, $http) {
//TODO: implment via separate promise and use config for menu //TODO: implement via separate promise and use config for menu
$http({method: 'GET', url: 'service/lessonmenu.mvc'}).then( $http({method: 'GET', url: 'service/lessonmenu.mvc'}).then(
function(menuData) { function(menuData) {
var menuItems = goat.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data)); var menuItems = goat.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
$scope.menuTopics = menuItems; $scope.menuTopics = menuItems;
}, function(error) { },
var foo = error; function(error) {
} // TODO - handle this some way other than an alert
alert("Error rendering menu: " + error);
}
); );
$scope.lessonUrl = "hi!";
$scope.renderLesson = function(url) { $scope.renderLesson = function(url) {
console.log(url + ' was passed in'); console.log(url + ' was passed in');
// use jquery to render lesson content to div
jQuery.get(url,
{},
function(reply) {
jQuery("#lesson_content").html(reply);
// hook any forms
makeFormsAjax();
},
"html");
}; };
}) })
.animation('.slideDown', function() { .animation('.slideDown', function() {
var NgHideClassName = 'ng-hide'; var NgHideClassName = 'ng-hide';
return { return {
beforeAddClass: function(element, className, done) { beforeAddClass: function(element, className, done) {
if(className === NgHideClassName) { if (className === NgHideClassName) {
jQuery(element).slideUp(done); jQuery(element).slideUp(done);
} }
}, },
removeClass: function(element, className, done) { removeClass: function(element, className, done) {
if(className === NgHideClassName) { if (className === NgHideClassName) {
jQuery(element).hide().slideDown(done); jQuery(element).hide().slideDown(done);
} }
}
} }
} });
});
//TODO add recursion to handle arr[i].children objects //TODO add recursion to handle arr[i].children objects
// ... in case lower-level's need classes as well ... don't right now // ... in case lower-level's need classes as well ... don't right now
@ -42,8 +55,8 @@ goat.addMenuClasses = function(arr) {
for (var i = 0; i < arr.length; i++) { for (var i = 0; i < arr.length; i++) {
var menuItem = arr[i]; var menuItem = arr[i];
//console.log(menuItem); //console.log(menuItem);
if (arr[i].type && arr[i].type === 'CATEGORY') { if (menuItem.type && menuItem.type === 'CATEGORY') {
arr[i].class = 'fa-angle-right pull-right'; menuItem.class = 'fa-angle-right pull-right';
} }
} }
return arr; return arr;

View File

@ -2,7 +2,7 @@
import="org.owasp.webgoat.session.*, org.owasp.webgoat.lessons.GoatHillsFinancial.GoatHillsFinancial" import="org.owasp.webgoat.session.*, org.owasp.webgoat.lessons.GoatHillsFinancial.GoatHillsFinancial"
errorPage="" %> errorPage="" %>
<% <%
WebSession webSession = ((WebSession)session.getAttribute("websession")); WebSession webSession = ((WebSession)session.getAttribute(WebSession.SESSION));
// int myUserId = getIntSessionAttribute(webSession, "GoatHillsFinancial." + GoatHillsFinancial.USER_ID); // int myUserId = getIntSessionAttribute(webSession, "GoatHillsFinancial." + GoatHillsFinancial.USER_ID);
%> %>
<br><br><br>An error has occurred. <br><br><br>An error has occurred.