how to retrieve data from database without refreshing page using ajax

Question

i having a drop down box, it have two client(ex:client a,client b),i have more then 2000 data in each client table ,when selecting client i want to retrieve all data from database and show it in front end with out refreshing,now i am refresh window.location this refresh the page.can any one help me how to do that thanks

Ajax

<script>
$(function() {    document.ready
    $("#client").on("change", function() {
        var ID=$(this).attr('id');
        var clientid=$("#client").val();
        $.ajax({

            type: "POST",
            data: {
                clientselect: $(this).val()
            },
            success: function(data) {
                $("#display").html(data);
                window.location = '?action=clientnetworkpricelist&clientid='+clientid+'';
                $("#flash").hide();
            }
        });
    });
});

</script>

Select Box

 <select name="client" id="client" style="margin:-24px 0 0 1px;background-color:#E8E8E8;width:104px;position: absolute;"> 
   <option value="">Select Client</option>
<?php

$sql=mysql_query("select * from client_list");

$clientid=$_GET['clientid'];



while($row=mysql_fetch_assoc($sql))

{


    if(strlen($_GET['clientid'])>0 && $_GET['clientid']==$row['clientid']){
    print' <option id="client" name="client" value="'.$row['clientid'].'" selected>'.$row['clientid'].' </option>';}

    else{

            print' <option id="client" name="client" value="'.$row['clientid'].'" >'.$row['clientid'].' </option>';
    }

   }



   ?>


</select>

Answer 1

$.ajax({
                    async: false,
                    cache: false,
                    url: "your_web_address?action=clientnetworkpricelist&clientid="+clientid,
                    scriptCharset: "utf-8",
                    dataType: "html",
                    success: function (data) {
                        $("#display").html(data);
                        $("#flash").hide();
                    },
                    error: function (request, ajaxOptions, thrownError) {

                    }
                });

change url to:

url: "http://www.yourpage.com/your_subpage?action=clientnetworkpricelist&clientid="+clientid

Answer 2

Couple of mistake you have done in your code. First, you set a ID for multiple element in your while loop. Please remove ID attr from all option tag and keep the attr for only select tag as following:

<select name="client" id="client" style="margin:-24px 0 0 1px;background-color:#E8E8E8;width:104px;position: absolute;"> 
   <option value="">Select Client</option> 
   <option value="1">value 1</option> 
   <option value="2">value 2</option>
   ...
</select>

Second, you used the clientid variable in your script but did not collect value. Set value for clientid as following:

var clientid = $('#client').find(':selected').attr('value');

now please check, it should work now. thanks

Answer 3

I have tried your code, actually what you are doing, you change your url, so that is why you get refresh on each and every time when you change your drop down selection.

I have little bit change your selection code, i.e. I remove select keyword from if option section, secondly i have added a div after finishing of selection, as you should see in below.

SELECTION CODE

<select name="client" id="client" style="margin:-24px 0 0 1px;background-color:#E8E8E8;width:104px;position: absolute;"> 
<option value="">Select Client</option>
<?php
$sql=mysql_query("select * from client_list");
$clientid=$_GET['clientid'];
while($row=mysql_fetch_assoc($sql))
{
if(strlen($_GET['clientid'])>0 && $_GET['clientid']==$row['clientid'])
{
print' <option id="client" name="client" value="'.$row['clientid'].'">'.$row['clientid'].' </option>';
}
else{
print' <option id="client" name="client" value="'.$row['clientid'].'">'.$row['clientid'].' </option>';
}
}
?>
</select>
<div id="result"></div>

Now I have change your ajax code. which is given below. You need to create one more file yourfile.php, this file contain data which you want to display.

AJAX CODE

<script>
$(function() { document.ready
    $("#client").on("change", function() {
      var clientid=$("#client").val();
    $.ajax({
            type:"post",
            url:"yourfile.php",
        data:"title="+clientid,
        success:function(data){
             $("#result").html(data);
        }
    }); 
    });
});
</script>

For your understanding, i added yourfile.php that you can easily understand.

yourfile.php

mysql_connect("localhost","root","");
mysql_select_db("yourdbname");

$value  = $_POST['title'];
$query  = mysql_query("SELECT * from client WHERE id=$value");
$result = mysql_fetch_array($query);
echo $result['clientdata'] ;

That's it.

I think it should help you.

Thanks