Jump to content

Including a PHP in a HTML via JS


Humpty

Recommended Posts

I really wasn't sure if I should use a PHP forum or JS Forum for this one.

What I want to know is:

Is it possible to use JS to include a PHP?     I know that PHP is SS and JS is CS but if the JS calls a file from the server to 'include' will that server parse the php file and spit out the html?  ...just like it does if you go direct to the PHP file in your browser?

Let me know if should really be asking this in a JS forum.    ...it does seem more like a PHP question though.

...sorry guys forgot to mention: The file that I was going to have the JS in to call the PHP is itself a PHP file, (which I wouldn't think would matter really)
Link to comment
Share on other sites

One obvious question is "what happened when you tried it?"

The JS isn't going to execute until it hits the client browser.  I'm not sure why you want/need to use such an apparently convoluted technique and can't help wondering if some minor code/logic changes would allow a simpler approach to achieve the end result you want.
Link to comment
Share on other sites

[quote author=AndyB link=topic=104996.msg419117#msg419117 date=1156115201]
One obvious question is "what happened when you tried it?"[/quote]
I haven't tried it yet I'm still trying to find my code and syntax for the JS include, and then how to change that on the fly :D

[quote author=AndyB link=topic=104996.msg419117#msg419117 date=1156115201]...can't help wondering if some minor code/logic changes would allow a simpler approach...[/quote]

OK, I'll spill the beans and maybe some better logic will come out.

It's for letting a user add an item to a database where there is a category, sub-category and sub-sub category. 

There could be a lot of variables depending on the category, so for example I wanted a user to select thier category, from that I can initiate JS to include the appropriate PHP file that lists all the sub categories of that category.  and same for the sub-sub categories depending on what sub category they selected.

There are 2 ways i know to do this:
1) Multiple PHP pages, 1 page lists the categories, select what you want, submit, the next page uses that to display the available sub categories, and so on and so forth.
2) Load all the possible variations into 1 file and use JS to hide everything, only showing what is needed as the user clicks  (this could be VERY large and VERY messy)

hope that helps, (and AndyB, good to see you and barnard still helping people like me, I havne't been in since before they changed the forum layout  (...oh.. i was in last week))
Link to comment
Share on other sites

Thanks Barnard,

You have succesfully confused me without even comming into the post :D

AndyB:  I think I'll go with the ol' multi page thing, Still wanna know if can include a PHP using JS.  Will be handy at a later date (see I'm not real smart with this stuff, so for me it is best to have 5 times the code and still be able to understand it)
Link to comment
Share on other sites

HUMPTY what you are looking for is AJAX. That is what you described...

The only things you need is a script that will accept the value of the cat/subcat and select all the cats beneath that.  I have a bit of ajax that does a similar job AND has the js to create the next select box in IE (IE6< doesn't like using innerHTML for select inputrs!!!!!)

If you need it just holla
Link to comment
Share on other sites

But how does it work?

Does it load all the data to start with and display the appropriate bit, or does it query the database a second time based on the info in the list?   

if it queries the database a second time does it query it using JS or PHP?
Link to comment
Share on other sites

OK...

the ajax controller....
[code]
function GetXmlHttpObject(handler)
{
var objXmlHttp=null

if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert("Error. Scripting for ActiveX might be disabled")
return
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
}[/code]

I have this in its own .js file and include it on every page driven by ajax.....

In this eaxmple I have a select group like so

[code]
<div id="sections">
<select name="cat" id="cat" onChange="getInfo(this.value,'cat');">
<option value="0"></option>
<option value="1">Sec 1</option>
<option value="2">Sec 1</option>
</select>
</div>
[/code]

Ok the call....

When that selectbox changes the getInfo function is called..

[code]
function getInfo(sec,id)
{
var url= "/admin/includes/ajax/ssscripts/sections.php?sec=" + sec + "&id=" + id;
xmlHttp=GetXmlHttpObject(getInfoDone);
xmlHttp.open("GET", url , true);
xmlHttp.send(null);
}
[/code]

This calls a script (located at the specified url) and passes the parameters to it for processing. Now ajax handles what the script prints out. So the php scritp selects all the sub categories of that cat and generates a single string that can be split by js one it is returned...

Now the php is from My own script so you will have to modify accordingly...

[code]
<?php
require_once($_SERVER['DOCUMENT_ROOT'] . '/admin/includes/config/cmsconfig.php');
require_once($_SERVER['DOCUMENT_ROOT'] . '/admin/connection/dbcon.php');

function getSecs ()
{
$qry = "
SELECT
*
FROM
`section_management`
ORDER BY
`table_driver` ASC,
`section_root` ASC,
`section_par` ASC,
`section_title` ASC
";
$qry = mysql_query($qry);
$secarr = array();
while ($row = mysql_fetch_assoc($qry))
{
foreach ($row as $key => $val)
{
$secarr[$key][] = $val;
}
}
return $secarr;
}

$action = $_GET['action'];

if (
!isset (
$_GET['sec']
)
)
{
exit();
}
$id = $_GET['id'];
$secarr = getSecs();

$sec = $_GET['sec'];
$secstring = NULL;


if (
$sec > 0
)
{
$nextsec = $sec;
$key = array_keys($secarr['section_id'],$nextsec);
$root = $secarr['section_root'][$key[0]];
$par = $secarr['section_par'][$key[0]];
if (
$type == 'new'
)
{
$title = NULL;
$root = $secarr['section_root'][$key[0]] != 0 ? $secarr['section_root'][$key[0]] : $secarr['section_id'][$key[0]];
$par = $secarr['section_id'][$key[0]];
$temp = array_keys($secarr['section_par'],$sec);
}
else
{
$title = stripslashes($secarr['section_title'][$key[0]]);
$root = $secarr['section_root'][$key[0]];
$par = $secarr['section_par'][$key[0]];
}



$i = 0;
do
{
$tkey = array_keys($secarr['section_id'],$nextsec);
$tkey = $tkey[0];
$tpar = $secarr['section_par'][$tkey];
$troo = $secarr['section_root'][$tkey] == 0 ? $secarr['section_id'][$tkey] : $secarr['section_root'][$tkey];
$nextsec = $tpar;
} while ($tpar != 0);


}
else
{
$sec = 0;
$root = 0;
$par = 0;
$key = 0;
$title = NULL;
}
//create list of subsections.

$options = "\r\n\t\t<option value=\"" . $sec . "\"></option>";
$optionsie6 = $sec . ":";
$keys = array_keys($secarr['section_par'],$sec);

foreach ($keys as $key => $value)
{
$options .= "\r\n\t\t<option value=\"" . $secarr['section_id'][$value] . "\">" . stripslashes($secarr['section_title'][$value]) . "</option>";
$optionsie6 .= "##" . $secarr['section_id'][$value] . ":" . stripslashes($secarr['section_title'][$value]);
}


echo $sec . "||"
. $root . "||"
. $par . "||"
. $options . "||"
. $optionsie6 . "||"
. $title . "||";

}
?>[/code]

Now i have edited a bit that you won't need hopefully it won't confuse too much, BUT the part you are really intersted in is how $options and $optionsie6 is generated. My script actually only updates one select box and places links to the previous levels - a breadcrumb. I did this to aide building the slect box and to prevent a few things happening that I am not going to tell as the solutios where far to cleaver to divulge ;)

BUT

the output of the $options is just html to build a selectbox and $optionsie6 look like this. SEC_ID:SEC_TITLE##SUBSEC_ID:SUBSEC_TITLE ad nauseaum..... they are parameters 4 and 5 in the '||' separated string i produce (just so you can see where I grab them in the js)

Bakc to the js. The response handler declared as getInfoDone in our function so here it is (I have removed thebits you don't need - you will have to build the new select box - but that will be easy - this shows you how to populate it)

[code]
function getInfoDone()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
params=xmlHttp.responseText.split('||');
if (
browserName == "Microsoft Internet Explorer"
&&
browserVer <= 6
)
{
document.getElementById("cat").options.length = 0;
opts = params[5].split('##');
i = 0;
for (x in opts)
{
val = opts[x].split(':');
document.getElementById("cat").options[i] = new Option(val[1],val[0]);
i++;
}
}
else
{
document.getElementById("cat").innerHTML=params[4];
}
}
}
[/code]

Again that shows you how to populate a selectbox - and that is the 'hardest' part.

You can figure how to generate the new select boxes - but if you get stuck feel free to bounce some ideas of me.



Link to comment
Share on other sites

I can't concentrate enough to follow that ATM, will look at it and trial it out tomorrow (asking any questions as required if required).

Although it is more code than Barnard's it seems somewhat a lot easier to follow (the bits i looked at so far)

Thankyou very much for that.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.