Solved

Combine JS and PHP to fill a div with XSLT

Posted on 2012-03-17
9
390 Views
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"
onclick="buildSubmenu('submenu2');">Research-main</a></li>

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?

Thanks.
0
Comment
Question by:VieleFragen
  • 5
  • 3
9 Comments
 
LVL 9

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?
0
 
LVL 1

Author Comment

by:VieleFragen
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?
0
 
LVL 9

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
http://code.jquery.com/jquery-1.7.1.js
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
	document.getElementById(div).style.display='';
	// the following uses the jQuery function to load the called url into the variable data
	var newHTML = $.get(new_loc, function(data) {
	  $('.result').html(data);
	  // here I replace the loading animation with the page called from the ajax call
	  document.getElementById(div).innerHTML = data;
	});	
	
}
</script>

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.
0
 
LVL 1

Author Comment

by:VieleFragen
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.

Alan
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 108

Expert Comment

by:Ray Paseur
ID: 37737745
I use this link to the latest "minified" jQuery.
http://code.jquery.com/jquery-latest.min.js

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.
0
 
LVL 1

Author Comment

by:VieleFragen
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.
0
 
LVL 1

Author Comment

by:VieleFragen
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?
0
 
LVL 9

Accepted Solution

by:
Shaun McNicholas earned 200 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.
0
 
LVL 1

Author Closing Comment

by:VieleFragen
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!
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now