Inject PHP with javascript?

[EchoFool]

Hey,

 

I need help big time as my site has just completly buggered up lol!

 

I just made a JS script which laoads data into a div (ajax style) which means page refreshes are not required... but currently it loads a $pagename.php "contents" in to the div - but i cannot have this method.

 

What i need it to do - is generate a string with the $pagename.php and inject that to a variable into the div... heres what i got:

 

This works as its meant to - but needs to be changed to suit my new method:

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

 

With that and this below is how it all works on the site so far:

<a href="javascript:ajaxpage(login.php','contentarea');">Link to login</a><div id="contentarea"></div>[/i]

 

How ever i need to change this so instead of it just "loading the page contents" into the div i want the JS to do similiar idea of loading into the div but merely pass php into it so i can do this:

 

<a href="javascript:ajaxpage(login.php','contentarea');">Link to login</a>
<div id="contentarea">
<?php
include($name); 
//$name being "login.php" due to above href
//$name value needs to be made from the JS from getting the url in the HREF whilst not refreshing the page to do so.
?>
</div>

 

 

Can some one help me edit my JS to do what im trying to do ? I'm stuck at this point at trying to get it to do this final part.

[gerkintrigg]

In the Ajax include, you can do something like a read file which reads the php page as text and outputs it as a string. I think that's the only way to do it.

[Psycho]

I don't think you are understanding/utilizing AJAX correctly. You cannot dynamically "run" PHP code client-side. The format you have will work - assuming you implement the AJAX correctly.

 

Use a link such as you have above:

<a href="javascript:ajaxpage('login.php','contentarea');">Link to login</a>

 

Then, when you call the function ajaxpage(), it should make a request via AJAX to the provided page (i.e. the first parameter. That page should provide a response of the content you want displayed in the div. The javascript function should include an onreadystatechange() process to "capture" when the response is made. The javascript can then simply populate the div with the response. There are countless tutorials out there that can show you how to do this.