title: calling php page in a div onclick a button using ajax calls
body: <p>I am using ajax script to call a php page <code>"MAINPAGE.PHP"</code> by clicking on a button , that page contains an echo statement into a div whose id is <code>"YOURDIV"</code> but its not calling the <code>"MAINPAGE.PHP"</code> see the code below and directly run this on your <code>localhost</code>:</p>
  
  <p><strong>NEW UPDATE :</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;script&gt;
  
  
  
  
  
  
  
  function yourFunction($x)//passed $url as $x as you said 
  {
  
  var xmlhttp = new XMLHttpRequest();
  var url = "mainpage.php";// url to where to send
  var params = "url=&lt;?php echo $x;?&gt;"; // here we add the php var $url as an 'url' request         parameter
  xmlhttp.open("POST", url, true);
  
  //Send the proper header information along with the request
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.setRequestHeader("Content-length", params.length);// add the length into header
  xmlhttp.setRequestHeader("Connection", "close");
  
  xmlhttp.onreadystatechange = function() {//Call a function when the state changes.
  if(xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
  alert(xmlhttp.responseText); // or do some other stuff
  }
  }
  xmlhttp.send(params);// requesting with parameters. params contains value of url 
  
  var xmlhttp;
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  xmlhttp.open("POST","mainpage.php",true);
  xmlhttp.send();
  
  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
  {
  
   $('.container').html(xmlhttp.responseText);
  }
  }
  
  
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!--this is the main form,if we press submit button four divs are formed , basically designing         part--&gt;
  &lt;form method="POST" action="#"&gt;
  &lt;input type="text" name="search"&gt;&lt;input type="submit" name="submit"&gt;
  &lt;/form&gt;
  
  &lt;?php
  if(isset($_POST['submit']))
  { 
  $button = $_POST ['submit'];
  $search = $_POST ['search'];
  $con=mysql_connect("localhost","root","");//connecting from database
  if(!$con)
  {
  die("error:".mysql_error());
  }
  mysql_select_db("database",$con);
  $query="SELECT * FROM tablename ";
  $result=mysql_query($query);//tablename contains two fields of four records: 1-S.no, 2- URL like     www.google.com, yahoo, bing,rediff
  
  while($runrows = mysql_fetch_assoc($results))// runrows is array with all the table content
  {
  $url = $runrows ['URL']; //$url now contains url from the database
  echo"&lt;div class='main' style='position:relative;border:1px solid #A5BEBE;background-        color:#E7EFEF;width:84%;  '&gt; 
  &lt;b&gt; sometext:-&lt;/b&gt;&lt;a href='#'&gt;$url&lt;/a&gt;&lt;br&gt;
  &lt;/p&gt;
  &lt;!-- passed $url in yourfunction as you said--&gt;
  &lt;input type='submit' value='expand' class='myButton'  name='button1'     onclick='yourFunction($url);'            style='position:absolute;left:85%;top:4%;background:#B20000;color:white;width:70px;height:20px;font-            size:15px;' &gt;";
  echo "&lt;div  class='container' id='yourdiv' style='background:white; '&gt;&lt;/p&gt;";
  echo "&lt;/div&gt;";
  echo "&lt;/div&gt;";
  }
  mysql_close($con);
  }
  ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>heres how i am using $url in mainpage.php</strong></p>
  
  <pre><code>&lt;?php
  echo 'the response is ', $_POST['url'];//here i want the value of $url for further working
  $z=array("google","yahoo","bing","rediff");
  for($i=0;$i&lt;=3;$i++){
  if (ereg(".*($z[$i]).*", $url))
  {
  switch($i)
  {
  case 0:
  $a=fopen($url,"r");//opening google site
  echo "you have entered"$a;//you have entered www.google.com
  break;
  
  case 1:
  $a=fopen($url,"r");
  echo "you have entered"$a;
  break;
  
  case 2:
  $a=fopen($url,"r");
  echo "you have entered"$a;
  break;
  
  case 3:
  $a=fopen($url,"r");
  echo "you have entered"$a;
  break;    
  }
  }
  }
  ?&gt;
  </code></pre>
  
  <p>when you run above code you'll see four divs with four buttons on it, So  whenever i press on anyone of four buttons that mainpage.php must echo message into required div but its not . please suggest anyone what should i do .</p>
  
  <p>Thanx in advance.
    @igor if you dont understand anything i'll explain it to you .i've sent you this just for understanding the concept its lengthy but easy to understand . </p>
  
  <p><strong>Update1:</strong></p>
  
  <p>1.- I've tried this code in rough for passing $url and its working ::</p>
  
  <pre><code>&lt;script&gt;
  function sendValue(id){
  window.location='edit.php?ID=' + id;
  }
  &lt;/script&gt;
  &lt;?php $url="hello";?&gt;
  &lt;form method="POST" action="#"&gt;    
  &lt;input type="button" onclick="javascript:sendValue('&lt;?php echo $url; ?&gt;')&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>but my whole code is in php so, I tried this which is not working  ::</p>
  
  <pre><code>&lt;script&gt;
  function sendValue(id){
  window.location='mainpage.php?ID=' + id;
  }
  &lt;/script&gt;
  &lt;?php
  $url="jhdbvkjsbd";
  echo '&lt;form method="POST" action="#"&gt;
  &lt;input type="button" onclick="javascript:sendValue($url);"&gt;
  &lt;/form&gt;';
  ?&gt;
  </code></pre>
  
  <p>So kindly explain how to pass $url in right way but should be in php.</p>
  
  <p><strong>2.-</strong> secondly in mainpage.php the switch cases , ereg function and  $a=fopen($url,"r"); was working well when i directly load this mainpage.php in while loop by including it in php instead of loading it after clicking on button one by one see the code below :</p>
  
  <pre><code>while($runrows = mysql_fetch_assoc($results))// runrows is array with all the table content
  {
  $url = $runrows ['URL']; //$url now contains url from the database
  echo"&lt;div class='main' style='position:relative;border:1px solid #A5BEBE;background-        color:#E7EFEF;width:84%;  '&gt; 
  &lt;b&gt; sometext:-&lt;/b&gt;&lt;a href='#'&gt;$url&lt;/a&gt;&lt;br&gt;
  &lt;/p&gt;
  &lt;!-- passed $url in yourfunction as you said--&gt;
  &lt;input type='submit' value='expand' class='myButton'  name='button1'     onclick='yourFunction($url);'            style='position:absolute;left:85%;top:4%;background:#B20000;color:white;width:70px;height:20px;font-            size:15px;' &gt;";
  echo "&lt;div  class='container' id='yourdiv' style='background:white; '&gt;&lt;/p&gt;";
  
  include('mainpage.php'); //this statement directly loads mainpage.php and shows data in this div but i want the data to be shown after clicking the button
  
  echo "&lt;/div&gt;";
  echo "&lt;/div&gt;";
  }
  mysql_close($con);
  }
  </code></pre>
  
  <p>if you can access this $url variable in mainpage.php then hopefully it works.</p>
  
  <p><STRONG>UPDATE LATEST:</strong></p>
  
  <pre><code>function showRSS(str) 
  {
  
  $('#loading').html('&lt;img src="Preloader_1.gif"&gt; loading...');
  
  
  var xmlhttp = new XMLHttpRequest();
  var url = "mainpage.php?q=+str";// url to where to send
  var params = "url="; // here we add the php var $url as an 'url' request parameter
  xmlhttp.open("POST", url, true);
  
  //Send the proper header information along with the request
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.setRequestHeader("Content-length", params.length);// add the length into header
  xmlhttp.setRequestHeader("Connection", "close");
  
  xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
      alert(xmlhttp.responseText); 
    }
  }
  xmlhttp.send(params);
  
  var xmlhttp;
  if (window.XMLHttpRequest)
    {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
  else
    {
      // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  
    xmlhttp.open("POST","mainpage.php?q="+str,true);
    xmlhttp.send();
  
    xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
    {
       $('.container').html(xmlhttp.responseText);
    }
  }
  
  }
  </code></pre>
  
  <p>and i want to show that loading image in main div with class="main" till the contents are loading in container div and as they loaded once that image should automatically fadeout please tell me where am i doing wrong </p>
  
  <pre><code>echo"&lt;div class='main' style='position:relative;border:1px solid #A5BEBE;background-color:#E7EFEF;width:84%;'&gt;&lt;div id='loading'&gt;
  
  &lt;/div&gt; 
  &lt;b&gt; sometext:-&lt;/b&gt;&lt;a href='#'&gt;$url&lt;/a&gt;&lt;br&gt;
  &lt;/p&gt;
  &lt;!-- passed $url in yourfunction as you said--&gt;
  &lt;input type='submit' value='expand' class='myButton' name='button1' onclick='yourFunction($url);'style='position:absolute;left:85%;top:4%;background:#B20000;color:white;width:70px;height:20px;font-            size:15px;' &gt;";
  echo "&lt;div  class='container' id='yourdiv' style='background:white; '&gt;&lt;/p&gt;";
  echo "&lt;/div&gt;";
  echo "&lt;/div&gt;";
  
  
  &lt;style&gt;
  #loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.8;
  background-color: #000;
  z-index: 99;
  text-align: center;
  }
  #loading-image {
  position: absolute;
  top: 40%;
  left: 45%;
  z-index: 100;
  }
  &lt;/style&gt;
  </code></pre>