CODEWITHSUNDEEP
phpjavascript
Bibu
Bibu

Reputation: 201

make refresh without refreshing the all page

I made 2 dropdownlists which are filled from my database. In the first drop are countries and in the second are cities. When a user selects a country automatically in the second drop down appears all the cities from that country. The problem is that when I select another country all the page is refreshing and I want just that 2 drop down lists to do the refresh. I'm using Javascript and PHP. Here are the codes:

@$cat=$_GET['cat']; 




$quer2=mysql_query("SELECT DISTINCT category,cat_id FROM category order by category"); 

if(isset($cat) and strlen($cat) > 0){
$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory where cat_id=$cat order by subcategory"); 
}else{$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory order by subcategory"); } 




echo "<select name='cat' onchange=\"reload(this.form)\"><option value=''>Select one</option>";
while($noticia2 = mysql_fetch_array($quer2)) { 
if($noticia2['cat_id']==@$cat){echo "<option selected value='$noticia2[category]'>$noticia2[category]</option>"."<BR>";}
else{echo  "<option value='$noticia2[cat_id]'>$noticia2[category]</option>";}
}
echo "</select>";
echo "&nbsp&nbsp";
echo "<select name='subcat'><option value=''></option>";
while($noticia = mysql_fetch_array($quer)) { 
echo  "<option value='$noticia[subcategory]'>$noticia[subcategory]</option>";
}
echo "</select>";

and this is the Javascript code:

function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='index.php?cat=' + val ;
}

I want that when I change the country the all page doesn't refresh only those 2 drop down lists. Any help will be much appreciated.

Upvotes: 0

Views: 1842

Answers (4)

EM-Creations
EM-Creations

Reputation: 4301

Yep you're going to need to use AJAX in order to just update part of the page. The easiest way to use AJAX is through JQuery. Here's their API for AJAX.

Upvotes: 0

Rakesh
Rakesh

Reputation: 2790

Try this

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function()
 {
 $(".Select1").change(function()
 {
var id=$(this).val();
var dataString = 'your_param='+ your_param;
$.ajax
({
    type: "POST",
    url: "select_2.php",
    data: dataString,
     cache: false,
     success: function(html)
    {
   $(".Select2").html(html);
   } 
   });

    });
  });
    </script>

     <title>Untitled Document</title>
   </head>

   <body>
  <?php
  include("config.php");
  $sql="SELECT * FROM your_table";
  $result2 = mysql_query($sql);
     ?> 
  <select class="Select1">
  <option value=""></option>
     <?php  
  while($row2 = mysql_fetch_array($result2))
  {
    ?>
  <option value="<?php echo $row2['your_value']?>"><?php echo $row2['your_value']?>    </option>

     <?php  
  }             
  ?>
  </select><br />
  <select class="Select2"></select>
 </body>
</html>

And in select_2.php

<?php
 include('config.php');
 if($_POST['your_param'])
  {
     $your_param=$_POST['your_param'];
    $sql = mysql_query("SELECT * FROM  yortable WHERE param = '".$your_param."'") or die(mysql_error());

 while($row=mysql_fetch_array($sql))
{
 $your_value=$row['your_param'];
 echo '<option></option>';
  echo '<option value="'.$your_value.'">'.$your_value.'</option>';

   }
    }

     ?>

Upvotes: 1

Gopesh
Gopesh

Reputation: 3950

U can use Ajax for acheving this.

Pls check this link Populate select list

If U are using jquery use .ajax(). Example of jquery ajax select list populate is Jquery Ajax Select List Populate

Upvotes: 3

Explosion Pills
Explosion Pills

Reputation: 191749

You need to use ajax. A very rudimentary suggestion would be:

//self.location = '...' - removed
ajax('index.php?cat=' + val).done(function (result) {
   //update select boxes
});

Upvotes: 2

Related Questions