6 Replies Latest reply on May 12, 2016 11:08 PM by yogesh.r

    In HTML Widget form to get the Place ID and Post discussion using ajax.

    yogesh.r

      Hi All , Pawan Shah Lea Reznik Shipra Singh Siddhartha Deshpande

       

      I have created the HTML widget form, the form submit create a discussion in place/ group using the ajax call.

      This HTML widget form I'm capture the  all the entries and posting in to current group. on submit function the page will re directing in to created discussion.

       

      The implementation  code below:

      <div class="jive-html-text-widget">

      <!DOCTYPE html>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.css">

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>

       

       

        <div class="container">

      <form id="contactForm">

          <div class="row">

              <div id="wrapper" class="col-md-6 well">

        <div class="form-group">

                      <label for="enter your name">

                          Account Name:

                      </label>

        <input class="form-control" type="text" id="txtname" name="customername" value ="" />

                  </div>

        <div class="form-group">

                      <label for="enter the message">

                          Account Name:

                      </label>

        <input class="form-control" type="text" id="txtmessage" name="message" value ="" />

                  </div

      </div>

      </form>

      <script type="text/javascript">

      var baseUrl   = "https://mysite.demo.com" ;

           var placeid   = "727089";

       

           var $j = jQuery.noConflict();

      $j("#submit").click(function() {

      var  customerName= $j("#wrapper input[id='txtname']").val();

      var  message= $j("#wrapper input[id='txtmessage']").val();

      var subject= "Customer Entry"

        var body="<p>" +

        "Customer  Name : " +customerName+"<br/>" +

        "Customer Mesage : " +message+"<br/>" ;

      var jsonData = {

                  "content":{

                      "type": "text/html",

                      "text": body

                  },

                  "subject": subject,

                  "type": "discussion"

              };

      $j.ajax({

                  type:"post",

                  contentType:"application/json",

        headers: {

        'Authorization': "Basic " + btoa("adminuserqton" + ":" + "123456")

         },

                  url : baseUrl + '/api/core/v3/places/'+placeid+'/contents',

                  data : JSON.stringify(jsonData),

                  dataType: "json",

                  complete: function(data) {

                      _data = JSON.parse(data.responseText);

        console.log(_data.id);

      window.location.assign(baseUrl + '/thread/'+_data.id);

                  }

              });

          });

       

      I have facing the few challenges here. Please find below challenges :

      • To get the placeId dynamically in javaScript of HTML widget form.
      • Make a ajax call as authorized with token in html widgets. Currently i have hard coded the header part in code.
      • in the form i have implemented functionality show and hide the form elements. when the form elements are less i was able to see full contents of the form.when the form elements are more on change of drop-down  iframe contents are  not auto re-sized .

           please find the attached form of not auto resized in Iframe.