The dotCMS RESTful API supports JSONP for Cross Domain calls, in order to use it you can add an extra parameter to the RESTful url request along with the type parameter: callback.
The parameter callback allows to specify the name of the javascript method that will be call it after the request is executed, the callback parameter is not mandatory for jsonp calls as if a callback parameter is not provided the default callback method will be use: dotJsonpCall.
Example usage:
/api/content/type/jsonp
/api/content/type/jsonp/callback/myCustomCallback
When a jsonp request is found the API will wrap the regular response within a javascript callback method ( callback parameter) generating a JSONP response (mime type: application/javascript).
Example - submit content via JSONP
Place this code in a simple widget on dotCMS page to create a contentlet of the Content (Generic) Content Type, the moment the page loads.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
//Example function to log the content of the response
function myFunction(message) {
console.log("Calling the function named myFunction");
console.log(message);
}
$(document).ready(function(){
//You can get the values the way you prefer
//For this example the values are hardcoded
var dataObj=JSON.stringify({'stName':'webPageContent',
'contentHost': 'demo.dotcms.com',
'title': 'TEST Title JSONP',
'body': 'Test Body JSONP',
});
$.ajax({
url: "/api/content/save/1/type/jsonp/callback/myFunction",
type: 'POST',
contentType: "application/json",
data: dataObj,
//It will call the function that we sent as parameter
//In this case myFunction
success: function (response) {},
});
})
</script>
</head>
<body>
<div></div>
</body>
</html>
Save content from a form
Place this code in a simple widget on dotCMS page to create a contentlet of the Content (Generic) Content Type when the user hits the submit button. Note that to make this work, the form needs to come before the javascript that attachs to the form post and we do not include contentType: "application/json" in the jquery request becuase we are sending a JSON object by default, rather than a String.
<div>
<form id="webup">
<div class="form-group">
<label for="title" class="required">Title</label>
<input type="text" class="form-control" id="title" name="title" value="Here is a title">
</div>
<div class="form-group">
<label for="body" class="required">Body</label>
<textarea id="body" name="body" >Here is some texttest</textarea>
</div>
<div class="form-group">
<input type="submit" value="Give 'er a go" />
</div>
</form>
</div>
<script>
//Example function to log the content of the response
function myFunction(message) {
alert("success:\n inode=" + message.inode + " \n id=" + message.identifier);
console.log(message);
}
$("#webup").submit(function(e) {
e.preventDefault();
var dataObj=JSON.stringify({
'title': 'TEST Title JSONP',
'body': 'Test Body JSONP',
'contentHost': 'demo.dotcms.com',
'stName':'webPageContent'
});
//console.log(dataObj);
dataObj= {
'title': $('#title').val(),
'body': $('#body').val(),
'contentHost': 'demo.dotcms.com',
'stName': 'webPageContent'
};
console.log(dataObj);
$.ajax({
url: "/api/content/save/1/type/jsonp/callback/myFunction",
type: 'POST',
data: dataObj,
beforeSend: function (request){
request.setRequestHeader("DOTAUTH", window.btoa("admin@dotcms.com:admin"));
},
//It will call the function that we sent as parameter
//In this case myFunction
success: function (response) {
},
});
})
</script>
]]#
