jQuery and AJAX Tutorials 40 | Taking Advantage of AJAX Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

what's up guys my name is Elias and
welcome to your 40s tutorial and you
know we have only 11 tutorials left and
you guys well including this one of
course you guys did a awesome job
following along and you know already
through with almost 40 tutorials this is
a lot well if you are finished this
course you will be a jQuery expert of
course you don't know all the function
and all the things you can do with
jQuery but you know if you really
learned that much which we learned in
the previous tutorials you will be able
to learn the other stuff easily because
you know jQuery is a very simple thing
and this while is it's got very popular
right so you know in the last tutorial
we'll add some space right here for our
a Jaques requests so now our our our
purpose of this tutorial is to to write
the code which will send the contents of
this UL element called portfolio to the
server so to the server script which I
wrote called change that PHP and we'll
all read this change that PHP does it
just takes this post request and looks
for a variable called list in this post
request and then it just basically
rights or rewrites this data to the file
called with dot HTML and our list of
HTML which is basically the list of our
images right here so well the things
pretty simple and you don't have to
understand this PHP code well you know
but anyway it's very simple if you're
interested in yeah this is how I work
with their requests so it just uses post
array and then you look for it look for
a variable called list and stuff so this
is not so important well the most
important thing is going to happen right
here so first the first thing we have to
do is we have to get the contents of
this list
and if you look at the structure of our
HTML document you'll see that this UL ID
portfolio includes or contains these Li
elements so let's just go ahead and
create a new variable and store the
portfolio's contents in it and I'll just
call it a portfolio or no I don't think
portfolio is good name for it
I'll just say you'll list contents tant
right instead of co2 so I use this
jQuery selector for portfolio so now I
grab the portfolio itself but I need the
contents of it so I can use this HTML
function which returns the contents of
this portfolio so now we have it and now
we can perform a simple word not that
simple
MAGIX request done in jQuery and you
know there are lots of options we have
we can use a standard function called
Ajax but then we have to fill out all
the parameters and well to my mind the
best week to that to perform a post
request is to use the simple Booton
function in jQuery called post and make
sure you are place a dot before before
the word post and after the dollar sign
and this function post takes two
parameters in our case it will take on
two parameters the first parameter is a
path to the script which takes this data
so I call the script change dot PHP so
you can just go ahead and say change
that PHP and then you just put a comma
to split the parameter and in the curly
brackets we just have to define the
variable which will be said but you know
I call this variable list right here so
I'm expecting for a variable called list
to come with this post request so we
just say list and set it equal to the
content to this portfolio which we call
list contents so just go ahead and set
it to equal to list count
and well let's actually it then you just
put your semicolon and now what's gonna
happen every time a new release the
element after dragging it but when you
just drop it this code runs and what
this code does it just grabs the entire
contents of the portfolio and sends it
to a server using this data variable and
the server just stores it and that's it
well it's just very very simple but it
works so I'm gonna show it to you that
it works so let's just go ahead and test
it and you guys please make sure every
time before you test you reload the page
otherwise it won't take any effect so
now I'm just going to grab the first
image with this beach on it and I'll
just grab it somewhere right here so now
I'm dropping it and now something should
happen because well we don't see that
but in the background there's a
synchronic request which runs so now
when I reload the page I see that the
beach picture with the beach is still on
the right side so it means if you go to
our list of HTML we see the testing has
changed here well the server the server
script isn't that accurate by writing
but it just keeps the structure and we
see that picture with the beach is the
picture number four right here and it it
it was physically moved to this position
so this is how a Jaques works so you
just do something pretty much in the
background and you don't see that all
right guys I hope you had fun watching
this tutorial and I'll see you guys in
the next one where we are going to do
some more cool stuff so thanks for
watching guys and see you in the
forty-first tutorial