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

so let's have a look down make sure
everything there's okay yep
let's just have another try of
refreshing the page oh I think it
actually did work yeah okay I think
there was just a slight delay in loading
the data in so I think yeah it did work
so you can see now we've just retrieved
this value and what's more important
you've obviously noticed that by
clicking submit the page hasn't
refreshed itself at all
so click Submit the page doesn't refresh
yourself it just loads in the contents
of the contents of including PHP okay so
now what happens if we want to make this
load function a bit more dynamic so for
example I will might want to load in a
specific file into a specific div so I
need to specify some arguments in my
load function so the first one I might
want to specify is the div that I want
to load the data into so this in this
case it would be a div and then the
second parameter or argument I want to
give it is the file that I want to load
into this div so that might be including
dot PHP now this function would be a lot
better because it means you could reuse
it over and over again and it would be
really really useful if you had a page
where you wanted to insert some dynamic
data into many different divs and wanted
to do this using lots of different
buttons or in actual fact when the mouse
was moved or something like that so we
are going to use this to our advantage
and create a fully rounded function
that's going to allow us to do this so
we want to load into a diff this is the
first argument and in and load this file
into a div which is the second argument
so let's go ahead and make the change
first of all in this load part of the
function if you're used to functions
then this will be pretty straightforward
but I'm going to go through it anyway
just so we know what we're doing so the
first one is the div
and the second one is the file okay so
we've got the div which we're loading it
into and the file so all we need to now
do is go down and make the changes so
the div here is specified as a div but
we want this to be dynamic depending on
what we pass through this function so
this is just going to be the div now
let's go down this again needs this this
file here needs to be dynamic so this is
the file so it's really as simple as
that now what we've done is we've
created ourselves a dynamic function
that's going to load any file into any
div so let's go ahead and change the
name of this div so another div for
example we've just changed the name of
it to demonstrate the use of this
function so now let's change this to
another div and we'll keep the include
file as it is but we'll change the
content so hello everyone okay so let's
go ahead and come onto our page when we
click Submit what this is going to do
let's just go to our page source om chap
translating it to English all right
let's go to page source and go down so
it's a loading into another day of and
it's loading this file here into another
div so let's go ahead and click Submit
and you can see that hello every one has
been loaded into the div another div
let's go down and have a look there and
we've got div ID equals another div now
because of the nature of Ajax and the
way it works you can see at the moment
that there's nothing contained within
this div even though in here we have the
text hello everyone so there's no need
to worry about this if you're looking at
a source file thinking oh nothing's in
there it won't actually modify the HTML
because it's a synchronous and it does
it without refreshing the page we're not
going to be updating the HTML code as
well so you won't find your text that
you are putting into your div actually
within your dear it's just going to be
done on the page itself to the people
that are viewing it so it's not actually
going to be put into here
so what we've done in this tutorial is
we've looked at creating a function that
loads in two arguments and this is on
the click of a button but this could be
on any HTML state so it could be when
you start typing in a text field so
we're going to look at tutorials later
on that deal with more complex PHP that
is going to put values onto our page
depending on what we type or when we
move the mouse etc etc so we've gone
through and we've checked for certain
things set this HTML XML HTTP variable
we've checked for the state change and
upon the state change we've modified the
contents of the div and then here what
we've done is we've specified the file
that we want to open and we've used this
send to send the data so that's
basically simply opening a file using
Ajax this is pure Ajax so we're not
using anything like jQuery here and
jQuery is easier however I do recommend
you do learn this and learn how to do
this because it's going to be really
useful later on when you want to write
in pure JavaScript and use Ajax as it
should be as its as its intended to be
so that's it for including a file using
Ajax without refreshing the page