Unknown error

HTML & CSS
1

Why submitted text not appear in white box and getting auto response?

Here is my code please tell me what’s my mistake…

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script>var 
  $send = $('.wchat-send'),
  $input = $('.wchat-input'),
  $messages = $('.wchat-messages'),
  sendable = true;

function addMessage(msg, kind){
  var replyClass = '';
  
  if (kind == 'reply'){ 
    replyClass = 'wchat-message-reply';
  }
  
  if (kind == 'wait'){ 
    replyClass = 'wchat-message-reply wchat-message-reply wchat-message-wait';
  }
  
  msg = '<div class="wchat-message '+replyClass+'"><div>'+msg+'</div></div>';
  
  $messages.append(msg);
  $messages.animate({ scrollTop: $messages.prop("scrollHeight")}, 1000);

}function turnSendable(onoff){
  if( onoff == 'on' ){
    sendable = true;
    $send.css('opacity','1');
  }else{
      sendable = false;
      $send.css('opacity','.5');
  }
}

function sendMessage(){
    var msg = $input.val();
    if(msg != '' && sendable){
      addMessage(msg,'send');
      turnSendable('off');
      addMessage('...','wait');
      
      setTimeout(function(){
        $('.wchat-message-wait').remove();
        addMessage('I dont know what you are talking about','reply');
        turnSendable('on');
      }, 1000);
      
      $input.val('');
    }
}

$send.on('click', function(){
  sendMessage();
});

$(document).keypress(function(e) {
    if(e.which == 13) {
        sendMessage();
    }
});</script>


<style>html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.wchat{
  width: 350px;
  background-color: lightblue;
  padding: 20px;
  
}

.wchat-messages{
  width: 100%;
  height: 300px;
  background-color: white;
  padding-left: 10px;
  padding-right: 10px;
  overflow: auto;
  
  
}.wchat-makemessage{
  margin-top: 20px;
  clear: both;
}
.wchat-input{
  width: 75%;
}
.wchat-send{
  width: 20%;
}

.wchat-message{
  width: 100%;
  padding-top: 7px;
  padding-bottom: 7px;
  
  div{
    background-color: pink;
    color: maroon;
    padding: 10px;
    margin-left: 25%;
    border-radius: 7px;
  }
}

.wchat-message-reply{

  div{
    background-color: lightgreen;
    color: green;
    margin-left: 0;
    margin-right: 25%;
  }
}</style>
<div class="wchat">
  <div class="wchat-messages">
    
  </div>
  
  <div class="wchat-makemessage">
    <input class="wchat-input" name="wchat-input" />
    <button class="wchat-send">SEND</button>
  </div> 
</div>

Online preview: https://codepen.io/larryarmstrong/pen/JRBGxm then it work

2

What do you mean by “Unknown error”? Do you mean it is not working and no error is showing?

It works for me using FireFox and Vivaldi.

What have you tried to find why it is not working?

Edit:

This is the script that I tried locallly:

<?php 
  declare(strict_types=1);
  ini_set('display_errors', 'true');
  error_reporting(-1);


?><!DOCTYPE HTML>
<html lang="en">
<head>
<title> goes here </title>
<style>
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.wchat{
  width: 350px;
  background-color: lightblue;
  padding: 20px;
  
}

.wchat-messages{
  width: 100%;
  height: 300px;
  background-color: white;
  padding-left: 10px;
  padding-right: 10px;
  overflow: auto;
  
  
}

.wchat-makemessage{
  margin-top: 20px;
  clear: both;
}
.wchat-input{
  width: 75%;
}
.wchat-send{
  width: 20%;
}

.wchat-message{
  width: 100%;
  padding-top: 7px;
  padding-bottom: 7px;
  
  div{
    background-color: pink;
    color: maroon;
    padding: 10px;
    margin-left: 25%;
    border-radius: 7px;
  }
}

.wchat-message-reply{

  div{
    background-color: lightgreen;
    color: green;
    margin-left: 0;
    margin-right: 25%;
  }
}
</style>
</head>
<body>

<div class="wchat">
  <div class="wchat-messages">
    
  </div>
  
  <div class="wchat-makemessage">
    <input class="wchat-input" name="wchat-input" />
    <button class="wchat-send">SEND</button>
  </div> 
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script type="text/javascript">
var 
  $send = $('.wchat-send'),
  $input = $('.wchat-input'),
  $messages = $('.wchat-messages'),
  sendable = true;

function addMessage(msg, kind){
  var replyClass = '';
  
  if (kind == 'reply'){ 
    replyClass = 'wchat-message-reply';
  }
  
  if (kind == 'wait'){ 
    replyClass = 'wchat-message-reply wchat-message-reply wchat-message-wait';
  }
  
  msg = '<div class="wchat-message '+replyClass+'"><div>'+msg+'</div></div>';
  
  $messages.append(msg);
  $messages.animate({ scrollTop: $messages.prop("scrollHeight")}, 1000);

}

function turnSendable(onoff){
  if( onoff == 'on' ){
    sendable = true;
    $send.css('opacity','1');
  }else{
      sendable = false;
      $send.css('opacity','.5');
  }
}

function sendMessage(){
    var msg = $input.val();
    if(msg != '' && sendable){
      addMessage(msg,'send');
      turnSendable('off');
      addMessage('...','wait');
      
      setTimeout(function(){
        $('.wchat-message-wait').remove();
        addMessage('I dont know what you are talking about','reply');
        turnSendable('on');
      }, 1000);
      
      $input.val('');
    }
}

$send.on('click', function(){
  sendMessage();
});

$(document).keypress(function(e) {
    if(e.which == 13) {
        sendMessage();
    }
});  
</script>

</body>
</html>
4

@John_Betong thank you sir,
Could have a look at this page for a minute and please help us…

Integration to Wordpress, Is it possible

5

Sorry I am not familiar with WordPress.

What happened to your Original Post?

Was it solved?

If it was solved then please supply the solution for the benefit of others (especially me who took time to test the script on my localhost).

1 Like
6

The code was correct … It solved!!! Thanks

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.