jQuery and AJAX Tutorials 8 | Adding more Chat Features Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Elias and
welcome to your aids tutorial on jQuery
and in this tutorial we are going to
continue working on our chat bot and as
you know in the previous tutorials we
created this simple interface for our
chat BOTS and we also added the central
enter function so that jQuery tracks
Enter key and you can you can prevent
creating a new line and stuff but uh you
know for now this chat but well this
interfaces web page it looks pretty
boring because I enter the text and I
press Enter or whatever I just click
send and nothing nothing is happening so
I don't see anything
and what are we going to do in this
tutorial
when I click send I want this text box
to get empty and I want this text which
I entered to appear right right here in
the dialog box and every time I
basically enter a new message I want
this new message to be appended to this
dialog so this is basically what we are
going to do now so now let's go back to
our code writing mode as I said one of
the things I want to implement as I want
the text box to get empty F after I
click send after I send a message so
let's just go ahead and do that um
before we continue we have to create and
kind of action listener for the send
button so we have to track this event
when the user clicks the send button so
let's just go ahead and create and you
take our selector for the create button
and let me check little quick it's ID
Sam Sann can just copy that and as you
remember it has an ID so I use this
route and just types and and then we can
use the jQuery click event which we
already used in the previous tutorials
so just clear
like function and within this curly
brackets you guys enter your code which
will execute when the send button is
clicked so what I want to happen is I
want to clear my textbox basically so
I'll just say textbox you know jQuery is
very easy to use you just use the simple
keywords and it does a lot of stuff for
you and so what I want to do is I think
I can just say Val and just path empty
value to it let's test it i'm not
actually I'm not sure about that
right let's just irlo the page make sure
you guys are all the page every time you
make some changes to into your own
document alright so I enter some text
and I click send
yes and it works so the textbox cut and
gets empty so the next step I want the
same to happen when I press the Enter
key and standard entry is checked so as
you remember in the last tutorial we did
this feature we made this feature I mean
so if event which equals 13 and 13
stands for enter if you are familiar
with other programming languages you
have to know that 13 stands for a fold a
Enter key
alright now let me get rid of this we
don't need it anymore and we use it in
class tutorial to check our
functionality and now we have two
options how to make the text box empty
when user when users press the Enter key
on the keyboard we can actually copy
this line of code we used in the send
click event and paste it right here
or we can do something better instead of
having same lines of code in the both
events we can just copy this event but
just don't copy function copy only a dot
click
and paste or write here like this and
then close close it with the semicolon
and now what j.crew does is is the
following if I press the Enter key and
the check box is checked in to check box
is checked jQuery will run the same code
as if a user would click the send the
send button with mouse so let's just go
ahead and check it tested on now I check
send on enter and I press enter and it
gets empty I'm afraid we can't make it
anymore in this tutorial in this video
to add this further functionality I was
talking about so we'll just do the next
tutorial and thanks for watching guys
and I hope you kind of learn new stuff
we actually didn't learn a lot of this
tutorial but I promise you guys in the
next tutorial we'll really learn
something some cool stuff so have a nice
eh guys I'll see you next tutorial