Unable to load div using ajax

Question

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"

if you're getting an error then investigate the error. You can see it in your network tab - the HTTP status code will be there, and also if you click into the ajax request you can see the response body too. That will give you a clue as to what went wrong. But after that your workflow seems all wrong. What's the point of loading data from cont_boq.php, but then in the "success" you would immediately do window.location which will change the page to boq.php and refresh, thereby destroying everything you've just done in downloading the other data. — ADyson
– ADyson, Commented Jul 4, 2017 at 13:47
I see that you're opening another link i.e. boq.php in the ajax success callback. This will refresh browser and all your AJAX data will be lost. You need to insert the returned table data to DOM on the same page. — Junaid
– Junaid, Commented Jul 4, 2017 at 13:47
You're making an ajax request, but expecting the response to be json (dataType: 'json',), however the file contains HTML. You should consider using jQuery's .load(). Or change the dataType to html. Or import the file with PHP by using include 'boq.php'; — Lewk
– Lewk, Commented Jul 4, 2017 at 13:49

Ryosaku · Accepted Answer · 2017-07-04 13:48:28Z

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 ;)

Bhargav Chudasama · Accepted Answer · 2017-07-04 13:59:36Z

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>

Collectives™ on Stack Overflow

Unable to load div using ajax

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related