Loading Effect using JS and PHP

Question

I am working on a project in PHP and AIML where the bot replies to the user queries asked by a user through a microphone. I am new to jQuery and JS so I need help in implementing loading effect in between the user input and final output.

<?php
  $display = "";
  $thisFile = __FILE__;
  if (!file_exists('../../config/global_config.php'));
  require_once ('../../config/global_config.php');
  require_once ('../chatbot/conversation_start.php');
  $get_vars = (!empty($_GET)) ? filter_input_array(INPUT_GET) : array();
  $post_vars = (!empty($_POST)) ? filter_input_array(INPUT_POST) : array();
  $form_vars = array_merge($post_vars, $get_vars); // POST overrides and overwrites GET
  $bot_id = (!empty($form_vars['bot_id'])) ? $form_vars['bot_id'] : 1;
  $say = (!empty($form_vars['say'])) ? $form_vars['say'] : '';
  $convo_id = session_id();
  $format = (!empty($form_vars['format'])) ? $form_vars['format'] : 'html';
?>
<!DOCTYPE html>
<html>
  <head>
    <title>Interact With Sia</title>
        <script src="jquery.js"></script>
        <script type="text/javascript" src="talk.js"></script>
  </head>
  <body onload='document.getElementById("say").focus(); document.getElementById("btn_say").style.display="none";'>
  <center>
    <h3>Talk to Sia</h3>
    <form id="chatform1" name="chatform" method="post" action="index.php#end" >
        <!-- <label for="say">Say:</label> -->
        <input type="text" name="say" id="say" size="70" onmouseover="startDictation()" style="color:red" />
        <input type="submit" class="say" name="submit" id="btn_say" value="say" />
        <script>
          $('#say').trigger('mouseover');
        </script>
        <input type="hidden" name="convo_id" id="convo_id" value="<?php echo $convo_id;?>" />
        <input type="hidden" name="bot_id" id="bot_id" value="<?php echo $bot_id;?>" />
        <input type="hidden" name="format" id="format" value="<?php echo $format;?>" />
    </form>
    <br/><br/>
      <?php echo $display; ?> //THIS DISPLAYS THE OUTPUT TO THE QUERY
      </center>
  </body>
</html>

As soon as the page loads, the microphone in the user's browser is activated [via talk.js_startDictation()] and after the user finishes the voice input, the query is sent to the scripts and then the result is diplayed by <?php echo $display; ?>.

How can I implement a loading effect in place of <?php echo $display; ?> until the script returns the result of the query and updates the $display variable on the page?

I just want to achieve the loading effect, I just don't know how to implement it! — Neeraj Singh
– Neeraj Singh, Commented Apr 9, 2016 at 10:50

JP. Aulet · Accepted Answer · 2016-04-09 11:44:08Z

You could use AJAX to archieve this, like:

1 - Load jquery.js (you could use CDN or download it).

2 - Create a div with a loader (usually a gif is fine, there are a lot). Hidde it with css: display:hidden;

3 - Add at the bottom of your page:

<script>
// Attach a submit handler to the form
$( "#chatform1" ).submit(function( event ) {
  // Start the loader
  $('#loader').show();

  // Stop form from submitting normally
  event.preventDefault();

  // Get some values from elements on the page:
  var data = $(this).serialize();
  var url = "urlToYourPhpFile.php";

  // Send the data using post
  var posting = $.post( url, { data: data } );

  // Put the results in a div
  posting.done(function( dataResponse ) {
    //do something with dataResponse
    $('#loader').hide();
  });
});
</script>

When the form is sumitted, jquery 'catch' the request, process the .submit() functions and send the data via post to a .php file (you should create it) and receive the params with $_POST. Something like:

yourPhpFile.php

<?php 

    $convo_id = $data['convo_id'];
    //do something
    ...    
?>

Collectives™ on Stack Overflow

Loading Effect using JS and PHP

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related