Search code examples
javascriptjquerytwitter-bootstrapx-editable

X-editable combodate returns "Script error."

I'm trying to make an X-editable "combodate" that users can click on, which instantly updates the database via AJAX.

The first two examples work, but once I change the type to "combodate" I get "Script error.".

$(document).ready(function() {
  //ajax emulation
  $.mockjax({
    url: '/post',
    responseTime: 200,
    response: function(settings) {
      if (settings.data.value) {
        this.responseText = '{"success": true}';
      } else {
        this.responseText = '{"success": false, "msg": "required"}';
      }
    }
  });

  // This one works
  $('#username').editable({
    type: 'text',
    url: '/post',
    pk: 1,
    title: 'Enter username',
    ajaxOptions: {
      dataType: 'json'
    },
    success: function(response, newValue) {
      if (!response) {
        return "Unknown error!";
      }

      if (response.success === false) {
        return response.msg;
      }
    }
  });

  // This one works too
  $("#date1").editable({
    /* type: 'combodate', */
    url: '/post',
    pk: 490,
    title: 'Enter date',
    ajaxOptions: {
      dataType: 'json'
    },
    success: function(response, newValue) {
      if (!response) {
        return "Unknown error!";
      }

      if (response.success === false) {
        return response.msg;
      }
    }
  });

  // This one doesn't work...
  $("#date2").editable();
  /* $("#date2").editable({
      type: 'combodate',
      url: '/post',    
      pk: 490,    
      title: 'Enter date',
      ajaxOptions: {
          dataType: 'json'
      },
      success: function(response, newValue) {
          if(!response) {
              return "Unknown error!";
          }          
    
          if(response.success === false) {
               return response.msg;
          }
      }        
  }); */

  // This one doesn't work either
  // $("#date3").editable();
});
<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js">
  </script>
</head>

<body>
  <p>X-editable: process JSON response.</p>
  <p>The username field works, and so does #date1, but once I change the type to "combodate", I get "Script error."</p>

  <div style="margin: 5px">
    <ol>
      <li>
        <a id="username" href="#">awesome</a>
      </li>
      <li>
        <a id="date1" href="#">2021-01-01</a>
      </li>
      <li>
        <a id="date2" href="#" data-type="combodate">2021-01-02</a>
      </li>
      <li>
        <a href="#" id="date3" data-type="combodate" data-value="1984-05-15" data-format="YYYY-MM-DD" data-viewformat="DD/MM/YYYY" data-template="D / MMM / YYYY" data-pk="1" data-title="Select Date of birth" class="editable editable-click editable-open" data-original-title=""
          title="">2021-01-03</a>
      </li>
    </ol>

  </div>
</body>

Solution

  • I needed to include moment.js

    <script 
  src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" 
  integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" 
  crossorigin="anonymous" 
  referrerpolicy="no-referrer">
</script>