Praxis Test Suite

The HTML resource plugin allows creating free-form HTML content that will be embedded in Praxis. Two variables are automatically injected into the content:

• podResourceId: the ID of this pod resource. (Required for data persistence.)
• podData: any previously-saved data associated with this pod resource or null.

Warning: there is inherent risk in allowing users to insert free-form HTML into the application in this way (see cross-site script attacks). This should only be used for very basic (ideally, script-free) HTML content embedding.

The following example demonstrates how to capture user input via a form and display that data back to the user.

<!-- 
===============================
A sample Freeform HTML resource
===============================
In this example, the user can submit form data, which is then saved
in the POD resource.
-->
<style>
body, input, td, th, button {
    font-family: verdana !important;
    font-size: 12px;
}
button {
 margin: 5px;
 padding: 5px;
}
input {
    border-radius: 4px;
    padding: 4px;
}

.help {
    margin-bottom: 10px; 
    padding: 4px; 
    border: 1px solid #c0c0c0; 
    border-radius: 4px;
}
</style>
<script src="/js/dependencies/jquery/jquery.min.js"></script>

<form class="ff-form">
<div class="help">Fill in the the form and click Submit. You'll be brought back to the POD start page. Then open
this resource again. You'll see the form data you submitted. You can then click the Clear Submitted Data button
to reset the data.</div>
<div><label for="given_name">Given name:<br/><input id="given_name" name="given_name" size="30"/></label></div>
<div><label for="surname">Surname:<br/><input id="surname" name="surname" size="30"/></label></div>
<div><button type="submit" onclick="return doSubmit()">Submit</button></div>
</form>

<table class="ff-submitted-data">
<tr><td>Given name:</td><td class="data-given-name"></td></tr>
<tr><td>Surname:</td><td class="data-surname"></td></tr>
<tr><td colspan="2"><button type="button" onclick="return clearSubmittedData()">Clear Submitted Data</button></td></tr>
</table>

<script>
var form = jQuery('form.ff-form');
var submittedFormData = jQuery('table.ff-submitted-data');

if(podData){
  form.hide();
  submittedFormData.show();
  submittedFormData.find('.data-given-name').text(podData.given_name);
  submittedFormData.find('.data-surname').text(podData.surname);
}
else{
  form.show();
  submittedFormData.hide();
}

var doSubmit = function(){
  data = {
    given_name : form.find('#given_name').val(),
    surname : form.find('#surname').val()
  };
  jQuery.ajax({
    method: 'POST',
    type: 'POST',
    url : '/podresource/pod_resource_data',
    data : {
      podResourceId : podResourceId,
      data : JSON.stringify(data)
    }
  })
  .fail(function(jqxhr, status, err){
    alert('Error!');
  })
  .done(function(data){
    alert('Success!');
    window.frames.top.location = '/ng/pod';
  });
  return false;
};

var clearSubmittedData = function(){
jQuery.ajax({
  method: 'POST',
  type: 'POST',
  url : '/podresource/pod_resource_data',
  data : {
    podResourceId : podResourceId,
    data : null
  }
})
.fail(function(jqxhr, status, err){
  alert('Error!');
})
.done(function(data){
  alert('Success!');
  window.frames.top.location = '/ng/pod';
});
};
</script>