Solved

How to call a PHP script using a Javascript onClick event?

Posted on 2008-06-11
11
1,967 Views
Last Modified: 2011-10-19
Hello,

Having see this tutorial on calling a PHP script from a Javascript onClick:
http://www.peoplecnc.com/java_php.html

I would like to know how i can call a php script called 'poi_info.php' from the attached Javascript snippet in the place of the text:
"This is where i want a random image, title & date"

Mnay thanks
GEvent.addListener(marker, "click", function() {
map.setCenter(marker.getPoint(),maxZoom,G_SATELLITE_MAP);
marker.openInfoWindowHtml("<div style='padding:5px'>This is where i want a random image, title & date</div>",{maxContent: html, maxTitle: infotitle, noCloseOnClick: true});

Open in new window

0
Comment
Question by:Daniish
[X]
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
  • 6
  • 5
11 Comments
 
LVL 22

Accepted Solution

by:
neeraj523 earned 500 total points
ID: 21758518
Hello

You need to use AJAX for this purpose..

Call php page using AJAX and update the innerHTML property of the traget div where u can to display php file content.

neeraj523
0
 

Author Comment

by:Daniish
ID: 21758899
I understand i might need something like this:
var title = marker.getElementsByTagName("title").firstChild.nodeValue;
var date = marker.getElementsByTagName("date").firstChild.nodeValue; document.getElementById.innerHTML = title+"<br>"+date;

...using this function:
function doHttpRequest() {  // This function does the AJAX request
  http.open("GET", "poi_info.php", true);
  http.onreadystatechange = getHttpRes;
  http.send(null);
}

Am I on the right track/ can you help me formulate this?

Cheers
0
 
LVL 22

Assisted Solution

by:neeraj523
neeraj523 earned 500 total points
ID: 21758978

yes... you need to write response from the AJAX request to your div..

something like this

document.getElementById("[divName]").innerHTML = [ajaxResponse]

where [divName] is the name of the div u want to display php content.. and [ajaxResponse] is the response you got from the php file..
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

Author Comment

by:Daniish
ID: 21759075
You mean like this:

var title = marker.getElementsByTagName("title").firstChild.nodeValue;
var date = marker.getElementsByTagName("date").firstChild.nodeValue;
document.getElementById("[iw]").innerHTML = title+"<br>"+date;

..
function doHttpRequest() {  // This function does the AJAX request
  http.open("GET", "poi_info.php", true);
  http.onreadystatechange = getHttpRes;
  http.send(null);
}

.. where this is the div i'm trying to update:

marker.openInfoWindowHtml("<div id='iw' style='padding:5px'>This is where i want a random image, title & date</div>",{maxContent: html, maxTitle: infotitle, noCloseOnClick: true});
0
 
LVL 22

Assisted Solution

by:neeraj523
neeraj523 earned 500 total points
ID: 21759244
document.getElementById("[iw]").innerHTML = title+"<br>"+date;
=
document.getElementById("iw").innerHTML = title+"<br>"+date;
0
 

Author Comment

by:Daniish
ID: 21759484
OK i have tried to implement it as per the attached code snippet, but Firebug is reporting the following error:
missing ) after argument list
http://www.globexposure.net/index.php
Line 100

..which relates to this line:
marker.openInfoWindowHtml("<div id='iw' style='padding:5px'>"document.getElementById("iw").innerHTML = title+"<br><br>"+date+"</div>",{maxContent: html, maxTitle: infotitle, noCloseOnClick: true});

What have i missed?
else{
  GEvent.addListener(marker, "click", function() {
  map.setCenter(marker.getPoint(),maxZoom,G_SATELLITE_MAP);
  var title = marker.getElementsByTagName("title").firstChild.nodeValue;
  var date = marker.getElementsByTagName("date").firstChild.nodeValue;
  marker.openInfoWindowHtml("<div id='iw' style='padding:5px'>"document.getElementById("iw").innerHTML = title+"<br><br>"+date+"</div>",{maxContent: html, maxTitle: infotitle, noCloseOnClick: true});
		        });
			}

Open in new window

0
 

Author Comment

by:Daniish
ID: 21759534
I already have the attached AJAX (?) request a little further down in my code, which already connects to the file i need. Will this be usable by the code i'm trying to implement now...?

I have attached a copy of my complete script if thats any easier.
var request = GXmlHttp.create();
  request.open("GET", "http://www.globexposure.net/includes/read.php", true);
  request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
 
..

Open in new window

index.php.txt
0
 
LVL 22

Assisted Solution

by:neeraj523
neeraj523 earned 500 total points
ID: 21759658
try this

marker.openInfoWindowHtml("<div id='iw' style='padding:5px'>" + title + "<br><br>" + date + "</div>",{maxContent: html, maxTitle: infotitle, noCloseOnClick: true});
0
 

Author Comment

by:Daniish
ID: 21759730
It got a little further, but now Firebug reports:

marker.getElementsByTagName is not a function
http://www.globexposure.net/index.php
Line 98

any ideas?
0
 
LVL 22

Assisted Solution

by:neeraj523
neeraj523 earned 500 total points
ID: 21759741
that is your AJAX related issue.. u need to check if AJAX is returning correct data..
0
 

Author Comment

by:Daniish
ID: 21759830
If it's using the AJAX request that i already use, that i referred to in my post above...
.. this does return the correct data because it's already used to display some of the same data later on.

Alternatively, how can i confirm this?
0

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
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…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

623 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