Mahantesh Mahantesh -4 years ago 76
jQuery Question

how to call ajax function once for each radio click

I made a custom drop down and given input type radio all is working fine but problem is. When i check a radio than sub list is attached to related radio div element than when i come back to check same radio again same thing happens. i want that don't happen means stop again calling of ajax for each radio.

And keep in mind i have 4 level of sub categories

call ajax once for each radio click\check.

This is a first drop down code

<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="religion">project Categary</label><br/>

<input type="button" class="form-control" id="relig" value="select Category">

<div id="religions" style="display:none;padding-left:17px">
<?php foreach($categories as $cat){ ?>
<div id="<?php echo $cat['code'] ?>">
<label><input type="radio" class="religions1" name="religion" id="religion" value="<?php echo $cat['code'] ?>">&nbsp;&nbsp;&nbsp;<?php echo $cat['Description'] ?></label><br/>
</div>
<?php } ?>
</div>
</div>
</div>


Getting the value of radio by this code

$('#relig').click(function(){
$('#religions').slideToggle("fast");
});

$(document).on('change','.religions1',function() {
maincat = $(".religions1:checked").val();
changeCategoryList(maincat);
});


Ajax calling function

function changeCategoryList(maincategory){
$.ajax({
url: '<?php echo site_url("trusts/getCategories"); ?>',
type: 'POST',
data: { maincategory:maincategory },
dataType: 'json',
success: function(data) {
$.each(data, function(key, value) {
var MoreTag='';
MoreTag += '<div id="'+value.code+'" Style="padding-left:20px">';
MoreTag += '<label ><input type="radio" class="religions1" name="religion" id="religion" value="'+value.code+'">&nbsp;&nbsp;'+value.Description+'</label><br/>';
MoreTag += '</div>';
$("#"+maincategory).append(MoreTag);
});
}
});
}


When i check Skill development cub category is attached and when i click Health the primary health which is sub cat of health is attached, this is fine

When again i click Skill development again once more time it is attaching the sub category this is happening for all radio.

Answer Source

You can try it like this:

Add div to your existing div :

<div id="religions" style="display:none;padding-left:17px">
                            <?php foreach($categories as $cat){ ?>
                                <div id="<?php echo $cat['code'] ?>">
                                    <label><input type="radio" class="religions1" name="religion" id="religion" value="<?php echo $cat['code'] ?>">&nbsp;&nbsp;&nbsp;<?php echo $cat['Description'] ?></label><br/>
                                    <!-- Add follwoing div to your code-->
                                    <div class="child_details"></div> 
                                </div>  
                            <?php } ?>
                        </div>

Then at time of radio change event you can check whether dov is emty or not according to it you can call ajax method

<script type="text/javascript">
     $('#relig').click(function(){
            $('#religions').slideToggle("fast");
        });

        $(document).on('change','.religions1',function() {
            maincat = $(".religions1:checked").val();
            child_details = "#"+maincat+" child_details";
            if ($(child_details).children().length == 0){ //check div is empty or not
                changeCategoryList(maincat);
            }

        });
</script>

EDIT

So as you say You have multilevel of child category, you can track record of which category id is already called by ajax using an array. The idea is to use an array in jquery to store is of categories which are clicked. Example:

<script type="text/javascript">
    traversed_ids = []; //globally decalre array outside function
     $('#relig').click(function(){
            $('#religions').slideToggle("fast");
        });

        $(document).on('change','.religions1',function() {
            maincat = $(".religions1:checked").val();
            if ($.inArray(maincat, traversed_ids) < 0) //check elment exist in array or not
            {
                //add element to array
                traversed_ids.push(maincat);
                //call ajax
                changeCategoryList(maincat);
            }

        });
</script>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download