Ajax does not work without giving an alert

Question

This is a somewhat crazy situation for me. Because my AJAX code does not execute without an alert. If alert is disabled, data will not be added to the select box on table data.

Jquery Code

$(document).ready(function () {
 x=0;
    $(document).on('click', '.add', function () {
        var grade = $('#txt-class-search').val();
        var subgrade = $('#txt_sub_class_search').val();
        var exam_index=$('#exam-index1').val();
        var html = '';
        html += '<tr class="append-class"  >';
        html += '<td><select id="id_'+x+'" title="stu_name" name="stu_index[]" class="form-control stu_name" style="height:35px"></select></td>';
        html += '<td><input type="text" name="marks[]" class="form-control stu_marks" style="height:35px" /><input type="hidden" name="exam_index" class="exam" value="'+exam_index+'"></td>';
        html += '<td style="text-align:center">\n\
                <button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td>\n\
                </tr>';
         $('#item_table').append(html);

        $.ajax({
            url: "../../../svr/student/exam-stu-name-search.php",
            method: "POST",
            data: {grade: grade, subgrade: subgrade},
            dataType: "text",
            success: function (data) {
                $('#id_'+x+'').html(data);
                //$('#hello').html(data);
            }
        });
      alert();
        x++;
    });

});

This is the HTML code that is related to jquery. Dynamically rows are added by jquery. First table data contain select box and retrieve data from database using AJAX. It does not need alert at all. But if the alert is removed, AJAX part will not be executed.

<div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                    <form method="post" id="marks-form">
                        <div class="table-repsonsive">
                            <span id="error"></span>
                            <table class="table table-bordered" id="item_table">
                                <thead>
                                    <tr>
                                    <th style="text-align:center">Student Name</th>
                                    <th style="text-align:center">Marks</th>

                                    <th style="text-align:center"><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
                                </tr>
                                </thead>
                                <tbody class="tbody-class">

                                </tbody>

                            </table>
                            <div align="center">
                                <input type="submit" name="submit" class="btn btn-info" value="Insert" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-2"></div>
            </div>

Can u please put the ajax call inside a timeout with timeout time and tell me if it works. — Osakr, Jul 11 '18 at 08:55

score 1 · Accepted Answer · answered Jul 11 '18 at 09:09

1

x++; executes before your ajax returns, so when $('#id_'+x+'').html(data); executes, x has a value that makes '#id_'+x not exist.

So, move x++; right after $('#id_'+x+'').html(data);

answered Jul 11 '18 at 09:09

Wizard

2,961
2
13
22

score -1 · Answer 2 · edited Jul 12 '18 at 08:10

-1

You can put async: false in your ajax call, the default value is true

Reference: http://api.jquery.com/jQuery.ajax/#example-3

edited Jul 12 '18 at 08:10

Rory McCrossan

331,213
40
305
339

answered Jul 11 '18 at 08:59

user1531038

266
1
6

1

Never ever do this... Setting this to false blocks the UI thread. This will make your page unresponsive. There's also literally no need to do this if you use [ajax correctly](https://stackoverflow.com/a/14220323/542251) – Liam Jul 11 '18 at 08:59
2

Noooo stay away from this! a) Using ajax in-sync defeats the sole purpose of ajax b) It is already (or will be in the near future ) deprecated and not supported – MKougiouris Jul 11 '18 at 09:03
but This answer is ok for me. My problem is solved. – serverAdmin123 Jul 11 '18 at 09:05
1

@RuwanPradeep also bear in mind that this is deprecated and will be removed from later versions of jQuery [*"As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done()."*](http://api.jquery.com/jquery.ajax/) – Liam Jul 11 '18 at 09:07
1

@RuwanPradeep your problem will be solved when you start using this correctly... Having a headache is bad... chopping your head off solves the headache, but its not a good way to do it, is it? – MKougiouris Jul 11 '18 at 09:08
Actually i am new for programming, that is a problem.i don't have good understand about ajax – serverAdmin123 Jul 11 '18 at 09:10

Ajax does not work without giving an alert

2 Answers2