gistfile1.html

<style type="text/css" media="screen">

  body {
    padding: 10px;
  }

  #content {
    width: 400px;
    margin: 20px auto 0;
  }

  input {
    font-size: 15px;
    width: 300px;
  }
  .new-btn {
    padding-left: 8px;
    padding-right: 8px;
  }

  .watermark {
    color: lightGrey;
  }

  #message {
    margin: 5px 95px 5px 5px;
    color: grey;
    font-size: 90%;
  }
  #message img {
    vertical-align: text-bottom;
    float: none;
    margin: 0;
    padding: 0;
  }
  #message.error {
    color: red;
    font-weight: bold;
  }

</style>

<div id="content">
  <form action="javascript:void(0)">
    <label for="title">Question</label>
    <input type="text" id="title" >
    <button type="submit" class="new-btn">Add</button>
    <p id="message"></p>
  </form>
</div>

<script type="text/javascript" src="https://d116kjvcha6xvt.cloudfront.net/jquery.watermark-3.0.5/jquery.watermark.min.js"></script>

<script type="text/javascript">

  function init() {
    yam.connect.init();
  };

  window.onload = function () {
    setTimeout(init, 1000);
  };

  jQuery(document).ready(function($) {
    
    // Set question title if question parameter is present
    if (ymodule.params.question){
      $('#title').val(ymodule.params.question);
    };
    
    // Set default attachment progress
    var attachmentInProgress = false;
    
    // Adding watermark to title field
    $('#title').watermark('Enter your question here.');
    
    // Focus on the title field
    $('#title').focus();    
    
    // Attach create action to button
     $('form').submit(function() {
       
       if (attachmentInProgress) {
         return; //I'm already attaching.
       } else {
         attachmentInProgress = true; // Attachment is now in progress
       }
       
       // Function to trim out white-spaces
       var trimString = function (string) {
         return string.replace(/^\s+|\s+$/g, "");
       };

       // Clear out existing messages
       clearMessage();
       
       // Get the question title
       var title = trimString($('#title').val());
  
       // Validate the question title
       if (!title) {
         displayError("Question must not be blank");
         $('#title').focus();
         attachmentInProgress = false; // exiting the attachment flow
         return;
       }
       
       // Instance the question
       question = QuestionAttachment.create({ title : title });

       // Display the loading spinner
       displayLoading("Adding question");
       
       // This view is also used to create questions from the directory view but we need to treat it differently.
       if (ymodule.params.directory_question){         
         saveDirectoryQuestion(question);
       } else {
         // save the question, and then create the attachment, and close the lightbox as a callback
         ymodule.createAttachAndCloseNewAttachment(question);
       };
       
       // saves the question then creates a message and associates the question with the message
       function saveDirectoryQuestion(question){
         
         // construct the callback for directory questions
         var createMessageCallback = function (resp){
           var questionId = resp;
           var dataObj    = { 
               body                   : question.title
             , ymodule_attachment_ids : questionId
             , authenticity_token     : yam.connect.token 
           };
           var connectOpts = {
               url        : ymodule.site + "/api/v1/messages"
             , data       : dataObj
             , method     : 'post'
             , success  : function(data){
                // redirect to canvas view

                // close lightbox
                ymodule.msg.postParent('close-lightbox');
               }
             , error : function(data){
                alert('error!');
               }
           };
          console.log("createMessageCallback: connectOpts => ");
          console.log(connectOpts);
          // make API call
          yam.connect.send(connectOpts);
           
         };
          // Finally save the question and then invoke the callback        
         question.save(createMessageCallback);
       
       };
            
     });
    
    // Message handlers
    var displayError = function (message) {
      displayMessage(message);
      $('#message').addClass("error");
    };
    var displayMessage = function (message) {
      clearMessage();
      $('#message').text(message);
    };
    var displayLoading = function (message) {
      clearMessage();
      $('#message').removeClass("error").append("<img src='/images/small-spinner.gif' /> ").append($("<span>").text(message));
    };
    var clearMessage = function () {
      $('#message').removeClass("error").empty();
    };
    
     
  });
</script>