• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1978
  • Last Modified:

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

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
Daniish
Asked:
Daniish
  • 6
  • 5
5 Solutions
 
neeraj523Commented:
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
 
DaniishAuthor Commented:
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
 
neeraj523Commented:

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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 
DaniishAuthor Commented:
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
 
neeraj523Commented:
document.getElementById("[iw]").innerHTML = title+"<br>"+date;
=
document.getElementById("iw").innerHTML = title+"<br>"+date;
0
 
DaniishAuthor Commented:
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
 
DaniishAuthor Commented:
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
 
neeraj523Commented:
try this

marker.openInfoWindowHtml("<div id='iw' style='padding:5px'>" + title + "<br><br>" + date + "</div>",{maxContent: html, maxTitle: infotitle, noCloseOnClick: true});
0
 
DaniishAuthor Commented:
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
 
neeraj523Commented:
that is your AJAX related issue.. u need to check if AJAX is returning correct data..
0
 
DaniishAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now