GO button does nothing (AIML rails 5)

Question

I have installed programr. I followed tutorial from this site http://dreamingechoes.github.io/bot/ruby/rails/conversational-bot-ruby-on-rails/

bot.rb

require 'programr'

brains = Dir.glob("lib/bot/*")

BOT = ProgramR::Facade.new
BOT.learn(brains)

application_controller.rb

def ask_bot
  reaction = BOT.get_reaction(params[:query])
  render json: { response: reaction.present? ? reaction : "I don't have an answer to that"  }
end

bot.aiml

<?xml version="1.0" encoding="UTF-8"?>

 <aiml version="1.0" xmlns="http://alicebot.org/2001/AIML-1.0.1"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://alicebot.org/2001/AIML-1.0.1 http://aitools.org/aiml/schema/AIML.xsd">

<category>
  <pattern>Hello *</pattern>
  <template>
    Hey, how can I help you?
  </template>
</category>

<category>
  <pattern>*bye</pattern>
  <template>
    Always here for you!
  </template>
</category>

<category>
  <pattern>What payment methods do you accept?</pattern>
  <template>
    We accept Visa, MasterCard and American Express.
  </template>
</category>

</aiml>

view:

<div class="alert alert-info">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Info!</strong> Type something on the text input and hit the <strong>GO</strong> button to get a response.
</div>

<div class="bs-callout bs-callout-info bot-response hide" id="callout-alerts-no-default">
 <h4>Bot says:</h4>
 <p id="bot-response"> </p>
</div>

<div class="row home-row">
  <div class="col-lg-12">
    <div class="input-group">
      <input id="query" type="text" class="form-control" placeholder="Say something to the bot...">
     <span class="input-group-btn">
      <button id="ask" class="btn btn-default" type="button">GO</button>
     </span>
   </div>
 </div>
</div>

application.js

$(document).ready(function(){

  $('#ask').on('click', function(event) {
    $.ajax({
    url: '/ask_bot',
    type: 'json',
    method: 'get',
    data: { query: $('#query').val() },
    success: function(data) {
    $('.bot-response').removeClass('hide');
    $('#bot-response').html(data['response']);
    $('#query').val('');
   }
  });
 });

});

If i copy a pattern and paste in the form, the GO button does nothing. Please help...thanks!

Is there something in the browser console?, the network tab?, the rails server when you hit the button to make the request? — Sebastián Palma, Jun 13 '17 at 14:45
I meant, that if you make an AJAX request, you could see in the browser console if there are errors, can you? — Sebastián Palma, Jun 13 '17 at 18:53
two errors: Uncaught TypeError: Cannot read property 'getContext' of null Uncaught Error: Bootstrap tooltips require Tether — JohnnyDevv, Jun 13 '17 at 19:11
That's when you click the button?, have you integrated jQuery? what does the rails server in the terminal print? — Sebastián Palma, Jun 13 '17 at 19:13
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146569/discussion-between-johnnydevv-and-sebastian-palma). — JohnnyDevv, Jun 13 '17 at 19:13

score 0 · Accepted Answer · answered Jun 14 '17 at 17:25

0

Most probably what you'll have to use is the DOMContentLoaded in order to check when the DOM has finished loading, this way you can wrap the listener for the #ask button and the AJAX function, without having to modify your "requires" in the application.js file, nor to have to include them as script tags in your views.

You could try with something like:

document.addEventListener('DOMContentLoaded', function () {
  ...
});

And inside to put your JS code, which would remain as:

document.addEventListener('DOMContentLoaded', function () {
  $('#ask').on('click', function(event) {
    $.ajax({
      url: '/ask_bot',
      type: 'json',
      method: 'get',
      data: { query: $('#query').val() },
      success: function(data) {
        $('.bot-response').removeClass('hide');
        $('#bot-response').html(data['response']);
        $('#query').val('');
      }
    });
  });

  $('[data-toggle="tooltip"]').tooltip();
});

Also you could add the specific custom.js for the specific controller and action in which is being used, that's the reason of the Uncaught TypeError: Cannot read property 'getContext' of null error, because such elements barChart and barChart2 are in the back_office#index.

answered Jun 14 '17 at 17:25

Sebastián Palma

32,692
6
40
59

but the "Bot says" is not hidden on page load – JohnnyDevv Jun 14 '17 at 17:40
i want to to appear when i ask a question – JohnnyDevv Jun 14 '17 at 17:40
Do you mean the `div#callout-alerts-no-default`? Something faster would be to hide it when the dom has been loaded, then show it when the ajax has been succeded, something like [this](https://gist.github.com/vnhnhm/57d4a4d450d829e0e7e7d1b1b5183647). – Sebastián Palma Jun 14 '17 at 17:46
did that and it worked but the chat bot is not working again – JohnnyDevv Jun 14 '17 at 17:53
Then instead hidding it with jQuery, apply a css class with display:none as value, then on the success ajax callback, remove that class. – Sebastián Palma Jun 14 '17 at 17:54
Hey if you know something about mailgun, please look up my recent question...Thanks!!! – JohnnyDevv Jun 14 '17 at 18:12

GO button does nothing (AIML rails 5)

1 Answers1