Solved

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

Posted on 2008-06-11
11
1,963 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
ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

 

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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
where is team.js? 3 26
how to use Initialization Vector for openssl_encrypt() 5 28
Decrypt string by php 7 32
display balance of stars as greyed out 8 15
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
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 …
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

803 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