make forms ajax for basic lessons
This commit is contained in:
parent
bef50d22b9
commit
c306e338db
@ -63,7 +63,7 @@ public class HttpBasics extends LessonAdapter {
|
|||||||
person = new StringBuffer(s.getParser().getStringParameter(PERSON, ""));
|
person = new StringBuffer(s.getParser().getStringParameter(PERSON, ""));
|
||||||
person.reverse();
|
person.reverse();
|
||||||
|
|
||||||
Input input = new Input(Input.TEXT, PERSON, person.toString()+"RICK");
|
Input input = new Input(Input.TEXT, PERSON, person.toString());
|
||||||
ec.addElement(input);
|
ec.addElement(input);
|
||||||
|
|
||||||
Element b = ECSFactory.makeButton(WebGoatI18N.get("Go!"));
|
Element b = ECSFactory.makeButton(WebGoatI18N.get("Go!"));
|
||||||
|
@ -204,7 +204,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() {
|
||||||
return (content == null) ? "" : content.toString();
|
String makeFormsAjax = "<script> $(document).ready(function() { makeFormsAjax(); });</script>";
|
||||||
|
return (content == null) ? "" : content.toString() + makeFormsAjax;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -191,6 +191,10 @@
|
|||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||||
<script src="http://malsup.github.com/jquery.form.js"></script>
|
<script src="http://malsup.github.com/jquery.form.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
// set this to true if you want to see form submissions
|
||||||
|
// set to false once we get all the kinks worked out
|
||||||
|
var DEBUG_FORM_SUBMISSION = false;
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
// bind to click events on menu links
|
// bind to click events on menu links
|
||||||
$('.menu-link').bind('click', function(event) {
|
$('.menu-link').bind('click', function(event) {
|
||||||
@ -199,6 +203,8 @@
|
|||||||
$("#lesson_content").html(reply);
|
$("#lesson_content").html(reply);
|
||||||
}, "html");
|
}, "html");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
});
|
||||||
// make all forms ajax forms
|
// make all forms ajax forms
|
||||||
var options = {
|
var options = {
|
||||||
target: '#lesson_content', // target element(s) to be updated with server response
|
target: '#lesson_content', // target element(s) to be updated with server response
|
||||||
@ -217,6 +223,7 @@
|
|||||||
};
|
};
|
||||||
// pre-submit callback
|
// pre-submit callback
|
||||||
function showRequest(formData, jqForm, options) {
|
function showRequest(formData, jqForm, options) {
|
||||||
|
if (DEBUG_FORM_SUBMISSION) {
|
||||||
// formData is an array; here we use $.param to convert it to a string to display it
|
// formData is an array; here we use $.param to convert it to a string to display it
|
||||||
// but the form plugin does this for you automatically when it submits the data
|
// but the form plugin does this for you automatically when it submits the data
|
||||||
var queryString = $.param(formData);
|
var queryString = $.param(formData);
|
||||||
@ -226,6 +233,7 @@
|
|||||||
// var formElement = jqForm[0];
|
// var formElement = jqForm[0];
|
||||||
|
|
||||||
alert('About to submit: \n\n' + queryString);
|
alert('About to submit: \n\n' + queryString);
|
||||||
|
}
|
||||||
|
|
||||||
// here we could return false to prevent the form from being submitted;
|
// here we could return false to prevent the form from being submitted;
|
||||||
// returning anything other than false will allow the form submit to continue
|
// returning anything other than false will allow the form submit to continue
|
||||||
@ -244,13 +252,14 @@
|
|||||||
// if the ajaxForm method was passed an Options Object with the dataType
|
// if the ajaxForm method was passed an Options Object with the dataType
|
||||||
// property set to 'json' then the first argument to the success callback
|
// property set to 'json' then the first argument to the success callback
|
||||||
// is the json data object returned by the server
|
// is the json data object returned by the server
|
||||||
|
if (DEBUG_FORM_SUBMISSION) {
|
||||||
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.');
|
||||||
}
|
}
|
||||||
// bind form using 'ajaxForm'
|
}
|
||||||
$("form[name='form']").ajaxForm(options);
|
function makeFormsAjax() {
|
||||||
});
|
$("form").ajaxForm(options);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user