[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now


Combine JS and PHP to fill a div with XSLT

Posted on 2012-03-17
Medium Priority
Last Modified: 2012-03-29
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?

Question by:Alan Varga
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3

Expert Comment

by:Shaun McNicholas
ID: 37733181
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?

Author Comment

by:Alan Varga
ID: 37733874
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?

Expert Comment

by:Shaun McNicholas
ID: 37734789
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.
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

by:Alan Varga
ID: 37735860
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.

LVL 111

Expert Comment

by:Ray Paseur
ID: 37737745
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.

Author Comment

by:Alan Varga
ID: 37761229
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.

Author Comment

by:Alan Varga
ID: 37777229
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?

Accepted Solution

Shaun McNicholas earned 800 total points
ID: 37784526
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.

Author Closing Comment

by:Alan Varga
ID: 37784973
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!

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question