Skip to content

Instantly share code, notes, and snippets.

@stevewithington
Created February 26, 2018 23:02
Show Gist options
  • Save stevewithington/fa731e3f215a177e39d1c80499a5e390 to your computer and use it in GitHub Desktop.
Save stevewithington/fa731e3f215a177e39d1c80499a5e390 to your computer and use it in GitHub Desktop.
Mura: example illustrating how to use a custom form and post the data to a .CFC and then update the display with the results.
<!---
save this file somewhere under your theme (e.g, custom/tracking-form.cfm),
then use [m]$.dspThemeInclude('custom/tracking-form.cfm')[/m] to display it
--->
<form id="trackingform" method="post">
<div class="form-group">
<label for="trackingnumber">Tracking Number</label>
<input type="text" name="trackingnumber" class="form-control" placeholder="Enter tracking number ..." />
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
<hr/>
<div id="message" class="alert alert-info">
<p>The result will display here.</p>
</div>
<script>
jQuery(document).ready(function($) {
$('#trackingform').on('submit', function(e) {
e.preventDefault();
var txtTrackingNumber = $('input[name="trackingnumber"]').val();
var jqPost = $.ajax({
method: 'POST',
url: '/temp/tracking.cfc?method=getTrackingInfo',
data: {trackingnumber: txtTrackingNumber}
})
.done(function(data, textStatus, jqXHR) {
// success!
console.log(data);
console.log(textStatus);
console.log(jqXHR);
// for example, you could simply update the HTML with the result
$('#message').html(data);
})
.fail(function(jqXHR, textStatus, errorThrown) {
// error
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
});
});
});
</script>
// Save this file under /temp/tracking.cfc
component {
remote string function getTrackingInfo(trackingnumber='') returnformat='plain' {
// you could do something with the tracking number here
var result = '<p>The tracking number you entered is:<br/><strong>' & arguments.trackingnumber & '</strong></p>';
// then return the result
return result;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment