Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2008-06-11
11
Medium Priority
?
1,971 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 2000 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 2000 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
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: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 2000 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 2000 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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

916 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