Solved

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

Posted on 2008-06-11
11
1,964 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
  • 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

 

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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.

839 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