Combine JS and PHP to fill a div with XSLT

Can anyone tell me how to accomplish the following Javascript behavior in PHP 5?  I understand that events are not supported in PHP, but it does the XSL transformation I am after.

This reference is in my HTML <head> section:

<script src="change_visibility.js"></script>

Open in new window

and this is in the <body> section:

<li><a title="primary records and research aids, e.g. groups, translators"

Open in new window

With Sarissa.js available on my local machine to do the XML transformation, if I click on the link in an unordered list (a menu), a function in the JS file is called, which does the transformation to populate a div with another unordered list with submenu items, then changes the z-index of that div so that it displays to the right of the original menu.

I know how to do an XML transformation with PHP, but only in two specific cases:

1) A div in the middle of the HTML page contains a PHP script which runs and performs an XML transformation to populate persistent data.
2) A form on one HTML page has an external Javascript file with a button handler, which in turn loads another page.  When the second page is initially loaded, the PHP script does the transformation.

My specific questions are:

1) How do I trigger a PHP script from an onclick event that is not on a form button?
2) Can I store the PHP script in an external file to keep the original HTML page less cluttered?

Alan VargaAccess DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Shaun McNicholasSenior Marketing TechnologistCommented:
It sounds like you want to do a combination of things. One setup the on click trigger using javascript. Are you wanting the php to fire at the on click anywhere on the page or just on a specific image or location within the page?

second you want the php script to fire without disrupting the view of the current page and then from the results of that script you want to fill in a section within your current page being viewed. Is that correct?

If so then you're wanting to fire what everyone is calling AJAX - basically you can do everything you want from jQuery if you are at all familiar with it. Do you have or are you familiar with jQuery at all?
Alan VargaAccess DeveloperAuthor Commented:
Thanks for your quick reply.  In answer to your questions:

1) I want the PHP to fire when a link is clicked, as shown in the <a onclick...> code inside the <li> above.

2) Yes, I want it to fire without disrupting the view of the current page.  My script will fill a "hidden" <div> on the current page with a z-index of 0, then change the z-index to 2 to put it on top.  (When one of the links in the new submenu is clicked, there is corresponding code to change the z-index back to 0 and "hide" the <div>.)

3) I have heard about jQuery, and I will check with my website administrator to see if we can put it on our server.  I have experimented with Ajax in my pages on my local computer, but not yet involving a server.  Any hints about which methods might be the first to read?
Shaun McNicholasSenior Marketing TechnologistCommented:
jQuery is just a script library, its been developed over the years into a very mature set of tools. Just download the most recent js file
Copy that page and save it as jQuery.js somewhere on your server as a regular file.

Then on any page where you want to use a jQuery tag just include the library and then reference the jQuery functions using the jQuery scripting references.
<script src="/yourScriptFolder/jquery.js"></script>

The function you will want to use to call another page and load it into a div is this one
<script language="javascript" type="text/javascript">
function change_divLoc(div,new_loc){
	// div is the div on the page I want to load with my data from the url I am calling using the ajax call
	// new location is the url that I'll be calling into that div 
	// in this first line I'm just filling the div with a loading message and animated circle so people know something is happening if the page I'm calling might take a few seconds to load
	document.getElementById(div).innerHTML = '<table width="100%" height="100%" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0"><tr valign="middle"><td width="100%" height="100%" align="center"><img src="/images/loading_bars/large_loading_circle_blue.gif" border="0" /></td></tr></table>';
	// since is most cases on the divs that I want to call using ajax are set with a display='none'; then I change that here to '' so that it is now showing in the page
	// you can also add the zindex here if you'd like to use the zindex reference
	// the following uses the jQuery function to load the called url into the variable data
	var newHTML = $.get(new_loc, function(data) {
	  // here I replace the loading animation with the page called from the ajax call
	  document.getElementById(div).innerHTML = data;

Open in new window

Then somewhere in the page I use the onclick="change_divLoc('divIDname','/somewhereOnMyServer/somePage.php'');"
This can be called from a link, image, or any other location in the DOM where on click events can be handled.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Alan VargaAccess DeveloperAuthor Commented:
I'm making progress, but I have uncovered a bug in Firefox trying to get and display my JSON data.  (My mini-test works fine in IE9 and Opera 11.61).  I filed bug report 736906 with Bugzilla, and I will have to resume testing this with IE tomorrow night.

Thanks for your help so far; I'll keep you posted on my progress.

Ray PaseurCommented:
I use this link to the latest "minified" jQuery.

You could make the case for using a specific release level, on the theory that if my code works with a given release, why take the risk that it might break in a future release, but in practice with jQuery I have never seen this happen.
Alan VargaAccess DeveloperAuthor Commented:
Well, the response from Bugzilla was:

For file:// URIs we will always attempt to parse them as XML, since there is no MIME information for local files.  It sounds like whatever you're doing in your jquery code is trying to pick up the responseXML instead of the responseText for some reason.

So, now on to your code.  I really appreciate how simple you made your example; I understand how to populate a <div>, treating it as innerHTML, if I want to pull in another URI.

I experimented with using PHP code in a separate file, but with passing parameters from HTML to Javascript to PHP to XSL and getting back the result in my <div>, I think it will take more work on my part.

I looked at a jQuery plugin called Transform, which looks like a much easier interface.  Would this be a more elegant solution?

To get an idea of what I'm after, visit my beta web page which uses JSON and the jQuery function $getJSON, instead of XML.

If I'm still not understanding what to do, please let me know.  Otherwise, we can close this
question so I can award you your points.  I really appreciate the code you provided, as well as the minified jQuery link, which I have updated in my HTML tests.
Alan VargaAccess DeveloperAuthor Commented:
After more reading, I still have two remaining questions:

1) Can you confirm my understanding that PHP will simply deliver an XMLHttpRequest response, and my Javascript does the work of populating the div on my web page?

2) How do I run the PHP from inside JS, rather than from the web page?
Shaun McNicholasSenior Marketing TechnologistCommented:
You are correct the php simply retrieves the data. You have to use the javascript to fill the div with that data. This tag retrieves the php data and puts it into the variable called data... $.get(new_loc, function(data)

This tag uses javascript to fill the div with the data from the php script
document.getElementById(div).innerHTML = data;

But keep in mind it retrieves the formatting from the php script so if its coming in it should already be formatted within the php page as html format that gets called using the get.

So the php script that gets retrieved should return an html formatted table of data that's already formatted, and its being filled within a page that already has css styling so it will inherit the css of the parent page its placed into.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Alan VargaAccess DeveloperAuthor Commented:
Perfect; thanks for your clear explanation and your patience.  Your simple and concise example helped me understand how simple replacing content is.  (Looking at XSL translation, I see your basic elements).  And I needed validation of server data retrieval.  It is much appreciated.  Great job!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.