CODEWITHSUNDEEP
jqueryajax
Kashif
Kashif

Reputation: 15

Unable to load div using ajax

I am using a select box to navigate to a new page but the table div data will be received from another data based on the select box. Here is my code

html page

<select id="works" class="btn btn-default" style="text-align:left; background-color:#FFF" onchange="getboq(this)">
<option value=""> Select Work Name</option>
<option value="1" style="text-align:left"><?= 1 ?>
<option value="2" style="text-align:left"><?= 2 ?>
</option>
</select>

Js file

function getboq(work)
{
var boq = work.value;
$.ajax({
            url: 'data/cont_boq.php',
            type: 'post',
            dataType: 'json',
            data: {
                boq:boq,
            },
            success: function (data) {
            window.location = 'boq.php'
                $('#boq').html(data);
            },
            error: function(){
                alert('error');
            }
        });
}

Cont.php

Its a normal table based on select box value, How ever even i made a simple table as well to check if it works but my efforts bore no fruit

boq.php

is a simple php page having the required div

<div id="boq"></div>

Interestingly i can see the response on firebug but getting alert "error"

Upvotes: 0

Views: 73

Answers (2)

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7165

try this code

PHP and Script Code

add letest .js library:letest .js library

<select id="works" class="btn btn-default" style="text-align:left; background-color:#FFF">
<option value=""> Select Work Name</option>
<option value="1" style="text-align:left"><?=1?>
<option value="2" style="text-align:left"><?=2?>
</option>
</select>
<div id="boq"></div>
<script type="text/javascript" src='.js library path'></script>
<script type="text/javascript">
$(document).ready(function(){
    $('select').change(function(){
            var boq = $('select option:selected').val();
            $.ajax({
                url: 'data/cont_boq.php',
                //url: 'cont_boq.php',
                type: 'post',
                data: {boq:boq},
                success: function (data) {
                   $('#boq').html(data);
                },
                error: function(){
                    alert('error');
                }
            });
    });

});
</script>

cont_boq.php code

<table border="2">
    <tr>
        <td>test</td><td><?=$_POST['boq'];?></td>
    </tr>
</table>

Upvotes: 0

Ryosaku
Ryosaku

Reputation: 465

You are wrongly using the ajax functionality. In the success callback you are doing two things that are not compatible between them.

Choose your action:

  • Redirect to another page that already contains all the data that you need
  • Render a new element div#boq based on your ajax returned data

If you are getting the alert with "error" message add an argument to your error callback, that will contains the return data, with the error.

error: function(data) { console.log(data); }

You are parsing the return data as JSON string, this means the return data is a broken, unparsable, json string ;)

Upvotes: 1

Related Questions