CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
user5536355
user5536355

Reputation:

Data not getting fetched through ajax

I have a page index.php that has the following code

<div class="form-group">
    <select name="assignto" id="assignid">
        <option value="">Choose</option>
        <option value="all">All</option>
        <option value="selective">Selective</option>
    </select>
</div>

<div class="form-group" id="displaydata"></div>

<div class="form-group" id="recruiter"></div>

Ajax code used on this page is

<script>
$(document).ready(function(){
    $('#assignid').change(function(){

        var assignid_id = $('#assignid').val();
        console.log($('#assignid'))
        if(assignid_id != 0)
        {

            $.ajax({
                type:'post',
                url:'a_fetchrecruiter_skill.php',
                data:{id:assignid_id},
                cache:false,
                success: function(returndata){
                    $('#displaydata').html(returndata);
                    console.log(returndata)
                }
            });
        }
    })
})
</script>

<script>
$(document).ready(function(){
    $('#areaid').change(function(){

        var areaid_id = $('#areaid').val();
        console.log($('#areaid'))
        if(areaid_id != 0)
        {

            $.ajax({
                type:'post',
                url:'a_fetchrecruiter.php',
                data:{id:areaid_id},
                cache:false,
                success: function(returndata){
                    $('#recruiter').html(returndata);
                    console.log(returndata)
                }
            });
        }
    })
})
</script>

When the value is selected from first dropdown the second dropdown gets fetched from a_fetchrecruiter_skill.php page with proper values.

Code on a_fetchrecruiter_skill.php page is

if($assignid_id=='selective')
    { ?>

        <label for="input01" class="col-sm-2 control-label" style="color:black; font-weight:bold; font-size:15px; margin-top: -8px;">Select area </label>
            <div class="col-sm-10">
                <?php
                    $sql="SELECT * FROM recruiter_skill group by recruiter_skill";
                    $result = mysqli_query($con,$sql);
                ?>
                <select name="assignto" class="form-control" id="areaid">
                <?php
                    if(mysqli_num_rows($result)>0)
                        {?>
                            <option value="">Choose</option>
                            <?php 
                                while($row=mysqli_fetch_assoc($result))
                                    {?>
                                        <option value="<? echo $row['recruiter_skill'];?>"><? echo $row['recruiter_skill'];?></option>
                                    <?}
                        }
                    else
                        {?>
                            <option value="">No value available</option>
                      <?}?>
                </select>
            </div>
    <?}
?>

Now the issue is that when the user selects value from second dropdown then the values should get displayed from a_fetchrecruiter.php page, but the second ajax is not working. it is not carrying the values to a_fetchrecruiter.php I tried to print data through console.log but nothing appears there.Can anyone plz point out the error

Upvotes: 0

Views: 100

Answers (3)

Gvidas
Gvidas

Reputation: 1964

You have to bind change event to #areaid after you have loaded it from ajax, not on $(document).load

Upvotes: 0

Edwin Krause
Edwin Krause

Reputation: 1806

The element with #areid does not exist after page is loaded and therefore the change event doesn't fire.

You have to use jquery's delegate function: http://api.jquery.com/delegate/

$('#displaydata').delegate('#areaid','change', function(){

    var areaid_id = $('#areaid').val();
    console.log($('#areaid'))
    if(areaid_id != 0)
    {

        $.ajax({
            type:'post',
            url:'a_fetchrecruiter.php',
            data:{id:areaid_id},
            cache:false,
            success: function(returndata){
                $('#recruiter').html(returndata);
                console.log(returndata)
            }
        });
    }
})

Upvotes: 0

Ashish Choudhary
Ashish Choudhary

Reputation: 2034

You are doing lazy loading of content. Whenever the content is loaded dynamically you need to bind the event to the child with respect to already existing parent.

For example:

$('#areaid').change(function(){

should change to

$('body').on('change', '#areaid', function(){

Upvotes: 4

Related Questions