Page 1 of 1

AJAX PHP - how to pass value from link tag

Posted: Thu Jun 05, 2008 5:47 am
by crazytopu
:banghead: You can probably tell what I am going through.

OKAY, I need help!

and that's with AJAX and PHP.

Simple question but haven't found an answer. Spent hours.

Case:

Code: Select all

 <input id="name_txt" type="text" class="inputSquare" size="30" onkeyup="process()" /> 
I can pass any value from this text box as long as I assign a name (name_txt) to it. Next, all I have to do in my JS file is to read this value by document.elementbyid("name_txt") function. NO PROBLEM.

Question:

I don't know how to uniquely identify links coz you can't assign any name. I have a few links and obviously I need to pass some kind of value to track which link was clicked and display its content. I still don't know if I can do this or how to do this. As far as my knowledge goes a link tag is not a DOM object. This is what I tried:

Static way:

Code: Select all

 <a href="javascript : process(1);">click me 1  </a><br /><a href="javascript : process(2);">click me 2  </a> 
But how to identify it in my js? how to read the passed value?

Dynamic way:

If i can get the above technique work I would try to do something like this for each link

Code: Select all

 
<a href="javascript : process(<? echo $row['id'];  ?>);">click me <? echo $row['id'];  ?>  </a><br />
 
DOES it make any SENSE??

Re: AJAX PHP - how to pass value from link tag

Posted: Thu Jun 05, 2008 8:49 am
by vargadanis
It think I understand what you are trying to do. You want links and assign javascript functions to it when clicked right?

There are several ways of doing it. One of the simplest way is using div tags instead of a tags.

Code: Select all

<div id="link_to_click" style="color: blue; cursor: pointer;">link text</div>
It looks just like the a href tag. If you add float:left to the style the width of the div tag will be the width of the text. Because of this I often use span instead of div.
Now now comes the javascript part of it.
A very good reference:
http://developer.mozilla.org/en/docs/Ge ... _Reference

In order to get some response you need to specify what needs to happen when onclicked on the span or div tag.
For that you need an init function

Code: Select all

 function init(){
  var  link1 = document.getElementById("link_to_click");
  link1.onclick = showAlert();
}
 
function showAlert(){
  alert("Clicked");
}
 
Here is a link which explains it a little bit more:
http://developer.mozilla.org/en/docs/DO ... nt.onclick

Re: AJAX PHP - how to pass value from link tag

Posted: Thu Jun 05, 2008 8:50 am
by vargadanis
ohh yes... init must be called:

Code: Select all

<body onload="init();">

Re: AJAX PHP - how to pass value from link tag

Posted: Thu Jun 05, 2008 11:45 am
by crazytopu
Thank you for your reply but I don't if your solution will work

Code: Select all

 
function init(){
  var  link1 = document.getElementById("link_to_click");
  link1.onclick = showAlert();
}
 
This means all the links will have the same name which is "link_to_click". Remember, my links will look like as follows:

Code: Select all

 <a href="news.php?q=1"> news title 1 </a><br/><a href="news.php?q=2"> news title 2 </a><br/><a href="news.php?q=3"> news title 3 </a> 
So if I use your function all the time the value will be same.

I thought of this solution:

Code: Select all

 
<a href="javascript : process( <? echo $row['id']; ?> );" > echo $row['title']; </a><br />
<a href="javascript : process( <? echo $row['id']; ?> );" > echo $row['title'];  </a><br />
 
 
So it will look like this

Code: Select all

 
<a href="javascript : process(1);" > news title 1 </a><br />
<a href="javascript : process(2);" > news title 2</a><br />
 
 
Relevant section from my Javascript file looks liek this (test.js)

Code: Select all

 
 
function process(name)
{
  // proceed only if the xmlHttp object isn't busy
  if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
  {
    // execute the test.php page from the server
    xmlHttp.open("GET", "test.php?name=" + name, true);  
    // define the method to handle server responses
    xmlHttp.onreadystatechange = handleServerResponse;
    // make the server request
    xmlHttp.send(null);
  }
  else
    // if the connection is busy, try again after one second  
    setTimeout('process()', 1000);
}
 
 

Relevant PHP bit (test.php)

Code: Select all

 
 
<?php
 
// retrieve the user name
$name = $_GET['name'];
 
 
 
 
//include('includes/DbConnector.php');
mysql_connect ("localhost", "root", "")or mysql_error();
mysql_select_db("test");
 
//$connector= new DbConnector();
  
$check = "Select * FROM news where newsId = '".$name."' ";
 
 
    echo $check;
 
    $result = mysql_query($check); 
    $row= mysql_fetch_array($result);
        
    if(mysql_num_rows($result)>0){
    
        while($row = mysql_fetch_array($result))
        {
            
            
             echo "<span class=style1>".$row['title']."</span><br>";
             echo "<span class=style1>".$row['description']."</span><br>";
             
            
        }
        
   }
    
    else{
    
        echo "<span class='infoTxt'>Sorry no match found. Please try again. </span>";
    
    }
 
 
 
?>
 
 
 

So, now when I click on the first link it shows the sql statement correctly. I.e something like this

[sql] SELECT * FROM news WHERE newsId = 1 [/sql]
it waits 2/3 seconds then prints
[sql] SELECT * FROM news WHERE newsId = undefined  [/sql]

And displays no result at all.

I have copied the first statement ( Select * FROM news where newsId = 1 )and ran it in my phpmyadmin and it gives me row. So sql command is fine but for some reason it is not working. since I can see the value being changed in my sql means the js and php is working fine as long as parameter passing is concerned.

I will try out <body onload = process(); > but not sure why do you have to use it?

Any help appreciated.