JSONP Support

Last Updated: Jul 16, 2020
documentation for the dotCMS Content Management System
Deprecated

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>

]]#

On this page

×

We Dig Feedback

Selected excerpt:

×