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>

because i want to retrieve data from database for the selected client .i tried this what you said "$("#display").append(html);" and removed the window.location but its not displaying data from database for the selected client,can you write down code — Xavi
– Xavi, Commented Nov 20, 2013 at 7:38

Lucky Lefty · Accepted Answer · 2013-11-20 08:52:55Z

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

edited Nov 20, 2013 at 8:52

answered Nov 20, 2013 at 8:13

Lucky Lefty

3471 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Xavi Over a year ago

thanks for my reply can you please see my updated ajax code it shows error ReferenceError: invalid assignment left-hand side ...//xxxxxxx.com+ "?action=clientnetworkpricelist&clientid='+clientid+'""

Xavi Over a year ago

thanks but now its like this GET webpage.com/… its not takeing the selected client id also its repeating twice

Lucky Lefty Over a year ago

whats repeating twice? try alert(clientid); to see what do you have inside clientid var

Muhammad Rizwan Kaim Khani · Accepted Answer · 2013-11-20 08:33:46Z

0

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

answered Nov 20, 2013 at 8:33

Muhammad Rizwan Kaim Khani

2,1003 gold badges30 silver badges38 bronze badges

3 Comments

Xavi Over a year ago

thanks for your answer but it showing error Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /data/data/www/fms/docs/clientnetworkpricelist/yourfile.php on line 11

Muhammad Rizwan Kaim Khani Over a year ago

I think you are doing same mistake, remove your window.location and use my given code, make another file which takes your client data on behalf of your client id, and then echo it on your desired position.

Muhammad Rizwan Kaim Khani Over a year ago

Supplied argument is not valid mean you are giving something wrong in query where clause that is why it do not get any result and showing warning. you should debug your code.

itskawsar · Accepted Answer · 2013-11-20 08:35:26Z

0

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

answered Nov 20, 2013 at 8:35

itskawsar

1,2421 gold badge19 silver badges30 bronze badges

Collectives™ on Stack Overflow

how to retrieve data from database without refreshing page using ajax

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related