How ajax work in dynamically generated div

Question

I am doing sales of product in which I use AJAX to capture data based on a selection from a dropdown to another one. When I dynamically create a field it works only once i want it to work N number of time.

Here is my HTML & PHP Code:

    <div class="row col-md-12 mrg-top-20">
<h4 class="card-title" style="color:#ff0033">Sales Details</h4><br>


    <div class="col-md-12"></div>
    <div class="row col-md-12" data-duplicate="add">

        <div class="col-md-4">
        <label>Select <strong>Installation Date</strong></label>
                <div class="form-group">
                    <div class="timepicker-input input-icon form-group">
                        <i class="ti-time"></i>
                        <input type="text" name="ins_date" class="form-control datepicker-1" placeholder="Datepicker" data-provide="datepicker">
                    </div>  
                </div>
        </div>
        <div class="col-md-4" id="sel_dynamic">
                <div class="form-group">
                <label>Select <strong>Manufacturer</strong></label>
                <select name="manu" id="manu" class="form-control" style="width:100%"> 
                    <option disabled="disabled" selected="selected">Select Manufacturer</option>
                    <?php
                        $data = mysqli_query($conn,"SELECT * FROM manufacturer_details");
                        while($itemcat = mysqli_fetch_array($data))
                        {
                    ?>
                    <option value="<?php echo $itemcat['MANUFACTURER_ID']; ?>"><?php echo $itemcat['MANUFACTURER_NAME'];?></option>
                    <?php
                        }
                    ?>
                </select>
                </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label>Select <strong>Modal</strong></label>
                <select name="modal" id="modal" class="form-control" style="width:100%"> 
                    <option value="" selected disabled="disabled">Select Modal...</option>

                </select>
            </div>
        </div>

        <div class="col-md-4">  
            <div class="form-group">
                <label>Ser<strong>ial</strong></label>
                <input type="text" name="serial" placeholder="Enter Serial No" class="form-control">
            </div>
        </div>


        <div class="col-md-4">
            <label>Select <strong>AMC Start Date</strong></label>
            <div class="form-group">
                <div class="timepicker-input input-icon form-group">
                    <i class="ti-time"></i>
                    <input type="text" name="amc_date" class="form-control datepicker-1" placeholder="Datepicker" data-provide="datepicker" data-date-format="mm/dd/yyyy">
                </div>  
            </div>
        </div>


        <div class="col-md-4">
            <label>Select <strong>AMC End Date</strong></label>
            <div class="form-group">
                <div class="timepicker-input input-icon form-group">
                    <i class="ti-time"></i>
                    <input type="text" name="amc_edate" class="form-control datepicker-1" placeholder="Datepicker" data-provide="datepicker" data-date-format="mm/dd/yyyy">
                </div>  
            </div>
        </div>  

    </div>  

    <div>
        <input type="button" id="add" data-duplicate-add="add" class="btn btn-info" value="+"/>
    </div>
    <div >
        <input type="button"  data-duplicate-remove="add" class="btn btn-info" value="-"/>
    </div>
</div>

Here is My Js Script to Call Ajax Each Time

<script type="text/javascript">
    $(document).ready(function()
    {
        $("#sel_dynamic").on("change","#manu",(function() //just try to use on change
        {
            var id = $("#manu").val();
            var dataString = 'id='+ id;
            $.ajax
            ({
                type: "POST",
                url: "ajax_modal.php",
                data: dataString,
                cache: false,
                success: function(html)
                {
                    $("#modal").html(html);
                } 
            });
        });
    });
</script>

Here is my Ajax File

    <?php
include('script/db.php');
if($_POST['id'])
{
    $id=$_POST['id'];
    $sql=mysqli_query($conn,"select * from modal_details where MANUFACTURER_ID='".$id."'");
?>

    <option selected disabled="disabled">Select Modal Name</option>
<?php
    while($row = mysqli_fetch_assoc($sql))
    {
        $id = $row['MODAL_ID'];
        $data = $row['MODAL_NAME'];
        echo '<option value="'.$id.'">'.$data.'</option>';
    }
}
?>

Whenever I create a new field dynamically my AJAX is not working.

Just to clarify. You want the modal details to generate a select box that has the results from your query in it? — Joseph_J, Apr 06 '18 at 05:40
`Whenever I create new field dynamically`-> which field you are creating dynamically?Also if you are creating multiple dynamically then `id` will become useless due to repetition. — Alive to die - Anant, Apr 06 '18 at 05:40
try to use add id `id="dynamic_select"` in parent div of this select box and use `$("#dynamic_select").on('change','#manu',(function()` or simply use `$(document).on('change','#manu',(function()` — PHP dev, Apr 06 '18 at 05:41
@SupunPraneeth no i am not getting any error but dropdown not working second time — Ayan Shaikh, Apr 06 '18 at 05:47
@PHPdev this is not working please show me your answer by editing in my code — Ayan Shaikh, Apr 06 '18 at 05:48
@SupunPraneeth here modal is not a popup modal here modal is modal number of battery — Ayan Shaikh, Apr 06 '18 at 05:51
@AyanShaikh can you check whether ou getting the correct html here: `success: function(html)` — Supun Praneeth, Apr 06 '18 at 05:54
@SupunPraneeth when i used drop down 1st time it is working when i create same div dynamically it is not working in it — Ayan Shaikh, Apr 06 '18 at 05:56

score 1 · Answer 1 · answered Apr 06 '18 at 05:58

1

Try this :

<script type="text/javascript">
    $(document).ready(function()
    {
        $(document).on('change','#manu',function()
        {
            var id = $("#manu").val();
            var dataString = 'id='+ id;
            $.ajax
            ({
                type: "POST",
                url: "ajax_modal.php",
                data: dataString,
                cache: false,
                success: function(html)
                {
                    $("#modal").html(html);
                } 
            });
        });
    });
</script>

answered Apr 06 '18 at 05:58

abrar

480
7
10

it works only on first div if i change manufacturer in secind div its change modal of first div – Ayan Shaikh Apr 06 '18 at 05:59
use the multi selectors like this $(document).on('change','#manu,#manu2 ',function() and use the $(this).children('#modal') – abrar Apr 06 '18 at 06:08
show me how to use it?? i have less knowledge of ajax – Ayan Shaikh Apr 06 '18 at 06:09
show me how you change the second div. Need some explanation. – abrar Apr 06 '18 at 06:18
i used add / remove button in which i duplicate the whole div second time – Ayan Shaikh Apr 06 '18 at 06:19
if i click add one div add or click remove one div is remove – Ayan Shaikh Apr 06 '18 at 06:20
How do you duplicate your DIV? I think the problem are duplicate IDs. – alexP Apr 06 '18 at 06:26
Do you duplicate the DIV "sel_dynamic"? In this DIV are many ID's. if you duplicate it, the IDs are second time on your site and your jQuery-Event won't work anymore. – alexP Apr 06 '18 at 06:33

score 1 · Answer 2 · answered Apr 06 '18 at 06:41

1

The comments made it clear that you are duplicating your form. I think you have duplicate IDs on your page and your jQuery event will not work anymore. An ID may only occur once.

Take a look here: Clone form and increment

answered Apr 06 '18 at 06:41

alexP

3,672
7
27
36

score 0 · Answer 3 · answered Apr 06 '18 at 06:38

Add the class to select as shown below: 

<select name="manu" id="manu" class="form-control manuClass" style="width:100%">

And use the below script

<script type="text/javascript">
    $(document).ready(function()
    {
        $(document).on('change','.manuClass',function()
        {
            var id = $(this).val();
            var dataString = 'id='+ id;
            $.ajax
            ({
                type: "POST",
                url: "ajax_modal.php",
                data: dataString,
                cache: false,
                success: function(html)
                {
                    $(this).parent().parent().next().children().children("#modal").html(html);
                } 
            });
        });
    });
</script>

How ajax work in dynamically generated div

3 Answers3