<!--
(c) 2003-2022 MuleSoft, Inc. This software is protected under international
copyright law. All use of this software is subject to MuleSoft's Main
Services Agreement (or other Terms of Service) separately entered
into between you and MuleSoft. If such an agreement is not in
place, you may not use the software.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- JQuery will be required for this demo -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<!-- Import Twitter bootstrap libs + css -->
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.js"></script>
</head>
<body>
<!-- Keep this simple ... define CSS for this simple webpage in the same file -->
<style>
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.demo-form {
max-width: 500px;
padding: 15px;
margin: 0 auto;
}
.demo-form .demo-heading,
.demo-form .checkbox {
margin-bottom: 10px;
}
.demo-form .checkbox {
font-weight: normal;
}
.demo-form .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.demo-form .form-control:focus {
z-index: 2;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
var operationOneForm = $('#operationOneForm');
handleSubmit = function(e) {
form = $(this);
$.ajax({
type: 'GET', // Submit an HTTP POST request
url: form.data('url'), // The URL where your endpoint is listening
data: form.serialize(), // Serialized form URL-encoded input
success: function(data) { // Success function called if request succeeds
alert("Operation Response : " + JSON.stringify(data));
if (form.data('ref-target')) {
const fieldName = form.data('ref');
const target = form.data('ref-target');
$(target).html(data[fieldName]);
}
},
error: function(request, status, error){ // Error function is executed if an exception occurs in the flow
alert(request.responseText); // Alert the user of any errors
}
});
return false; // Let jQuery handle the form submission
};
operationOneForm.submit(handleSubmit);
});
</script>
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title demo-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#operationOne">List Items</a>
</h2>
</div>
<div id="operationOne" class="panel-collapse collapse in">
<div class="panel-body">
<form id="operationOneForm" class="demo-form" role="form" data-url="/items">
<input class="btn btn-lg btn-primary btn-block" type="submit" value="List"><br>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>