Beginner PHP Tutorial - 172 - Loading in file Contents to a DIV Part 1 Video Lecture | PHP for Absolute Beginners: From Novice to PHP Master - Web Development

hi this is Alex from PHP academy' de org
and this is a video tutorial for the new
Boston now in this tutorial we're going
to be looking at opening up a another
file using Ajax so I've got my file over
here called including PHP and this
contains PHP code because we're talking
about Ajax relative to PHP we have
created this one I've created this PHP
document called include Inc PHP which
has PHP code inside it so eventually as
we progress through the Ajax series what
we're going to look at is opening a file
that's going to say maybe grab some
values from a database or something like
that and eventually we'll learn how to
produce dynamic content so when a user
say moves the mouse button we update em
say index dot PHP page with relevant
data or when we type something we update
with it with relevant data from a
database but before we do this what we
need to think about is how we're
actually going to open a file without
refreshing the page so as you know in
PHP we can use things like include and
then we can include a specific a
specific fast which will include Inc dot
PHP but this is useless to us because
it's only including the contents of the
file we're not triggering anything what
we could do is we could create a form
under here or a button under here which
would take us to the page so we could
say input type equals submit and then we
could say on click and then we can
incorporate some JavaScript in here so
we could say window dot location equals
index dot PHP show equals include for
example and then what we could do is we
could come down and we can say if is set
dollar underscore get because we're
passing a get variable called show the
get variable show could go in there then
we could say include oh sorry
it's a combination of including echo the
include dollar underscore get
so so what we can do is we can well we
can pass that including geography there
so we're passing a variable through when
we click on a button
including pH P is then going to be
checked to see if something anything
exists and then it's going to include
the relevant file so here what we can do
is if we go back to our page we can
click on submit and that'll include our
file however we want to do that without
refreshing the page you notice if we go
back and we click on submit you see that
we refresh the page and we've come up
with we've would Betty gone on to index
dot PHP again but with this show
variable here so what we want to do is
we want to achieve a similar effect to
this however we don't want to refresh
the page and we're going to be dealing
with divs as well so we're going to have
a div and this is going to be filled
with some content from including dot PHP
so the first thing I'm going to do is
I'm going to create a standard outline
from HTML document so I'm going to
create some head tags and body tags here
and obviously our route HTML tags at the
end inside head we're going to be
putting all the JavaScript inside body
we're going to insert the button and the
div itself so we're not actually writing
any PHP in this file but the point of
the tutorial is to show you how we can
use Ajax to UM load in this include file
which is a PHP document and has PHP code
inside of it so the first thing we want
to do is create what we want to show on
the website on the page rather so I'm
going to put another input button and
that's going to be submit like we just
like I've just shown you in the previous
example however this time I'm going to
say on click equals load and this is
going to call a function that we're
going to write up here in a minute in
our head in inside some script tags so
we're going to declare that we want to
write some JavaScript code and then
we're going to call this function when
we when we click the button so we'll
test this out in just a moment but for
now as well I want to put an ID and I'm
going to give it the div sorry I'm going
to give it the ID a
and then we're going to close it there
we're not going to write any content in
here okay so we're not writing any
content in here we're going to rely on
us clicking this button load function up
here loading content into this div and
we're going to do that without
refreshing the page at all so you may
have gone onto a website where it says
maybe click here or there's a column of
options and you click it and it
instantly gives you the content on to
the right of it this is a very similar
thing that we're doing here but we're
loading in this include ink dot PHP into
this div again without refreshing the
page so let's come up here and create
our script tag so script type equals and
that's text forward slash JavaScript so
we can tell our browser that we've got
JavaScript code in here now let's give
this a test so I want to test when we
click on this button here that we
execute or call a function called load
let's just set up our load function here
so we've got function load here we're
not giving it any parameters but what we
are going to do is just alert work so we
know that everything works so when we
click on this button we've got this on
click event here then we're going to
call the function load we're going to
come up here call this function and
we're going to create an alert so let's
go back to our index dot PHP page okay
so we've got our submit button we click
it and we get a message saying works so
we know that everything works now what
we can do is get on with creating our
Ajax code now we need to do a variety of
checks this is pretty standard code and
I'm not going to explain exactly how it
works and what each function does and
but follow along the example and you'll
generally get an idea of what's
happening I will explain most elements
as much as I can possibly explain in the
video without confusing myself and we'll
go along and we'll write this out