locked
Jquery function sometimes works some time doesn't work with same data RRS feed

  • Question

  • User1052662409 posted

    Hello All,

    This time I am going through a very strange problem with jquery function. Below is my function.

    <script>
            $(function () {
                $("#Approved_Diesel_bill td").each(function () {
                    if ($(this).text().trim() == 'Total') {
                        $(this).parent().css('background-color', 'yellow');
                        $(this).parent().css('font-weight', 'bold');
                    }
                });
            });
    
        </script>

    The problem is that this function sometimes works and sometime doesn't work.

    I tried to put a alert between the function like below.

    <script>
            alert(1);
            $(function () {
                alert(2);
    
                $("#Approved_Diesel_bill td").each(function () {
                    alert(3);
                    if ($(this).text().trim() == 'Total') {
                        $(this).parent().css('background-color', 'yellow');
                        $(this).parent().css('font-weight', 'bold');
                    }
                });
            });
    
        </script>

    alert 1 & 2 always comes but sometimes alert 3 comes and sometime doesn't.

    I tried it with same data bounded with Approved_Diesel_bill  table.

    What would be the cause? any idea?

    Thanks

    Wednesday, May 19, 2021 4:45 PM

Answers

  • User475983607 posted

    As I suspected the HTML is dynamic.  Wrap the each loop in a function and call the function from the AJAX success handler.  AJAX is asynchronous.  Your design only produces results is when the AJAX response and success handler code runs before the each loop executes which I assume is very rare.

    Also you have two nested ready handlers which is odd.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 19, 2021 7:26 PM

All replies

  • User475983607 posted

    I tried it with same data bounded with Approved_Diesel_bill  table.

    What would be the cause? any idea?

    There is a problem with the selector, HTML design, or JavaScript/jQuery design. 

    The jQuery each loop executes when the page loads.  My best guess is "#Approved_Diesel_bill td" does not exist when the loop executes.  It could be a timing issue with dynamically populated HTML or a misunderstanding.

    Share all the relevant code to reproduce this issue along with the steps if you want a community code review.

    Wednesday, May 19, 2021 6:43 PM
  • User1052662409 posted

    mgebhard

    Share all the relevant code to reproduce this issue along with the steps if you want a community code review.

    <script>
            $(document).ready(function () {
               
                Approved_dieselReports();
                
                function Approved_dieselReports() {
                    $.ajax({
                        url: "/diesel_Log.asmx/Get_Approved_DieselReports",
                        dataType: "json",
                        method: "POST",
                        contentType: 'application/json; charset=utf-8',
                        success: function (data, success) {
                            var result = $.parseJSON(data.d);
                            var employeeTable = $('#Approved_Diesel_bill tbody');
                            employeeTable.empty();
                            for (var i in result) {
                                var dtbill = "";
                                if (result[i].Bill_Front_Copy == '' || result[i].Bill_Front_Copy == null) {
                                    dtbill = "<td>No Bill</td>";
                                } else {
                                    dtbill = "<td><a href=https://XXXXXXXXXX/" + result[i].Bill_Front_Copy + " alt='Bill Front' target='_blank' class='btn-download'>Bill</a></td>";
                                }
                                employeeTable.append(`<tr>
    <td>${[Number(i) + 1]}</td >
     <td>${result[i].Location}</td>
                                        <td >${result[i].user_name}</td>
                                       
                                        <td >${result[i].Date}</td>
                                        <td>${result[i].No_of_Trailers_Unloading}</td>
                                        <td>${result[i].No_of_Trailers_Loading}</td>
                                        <td>${result[i].Total_No_of_Trailers}</td>
                                        <td>${result[i].Diesel_In_Ltrs}</td>
                                        <td>${result[i].Diesel_In_Amount}</td>
                                     
                                        <td>${result[i].supervisor_comments}</td>
                                      
                                       
                                         ${dtbill}
    
                                    </tr>
                                `);
    
                            }
    
                        },
                        error: function (err) {
                           
                            console.log(err);
                        }
                    });
                }
                $(function () {
    
                    $("#Approved_Diesel_bill td").each(function () {
                        if ($(this).html() == 'Total') {
                            $(this).parent().css('background-color', 'yellow');
                            $(this).parent().css('font-weight', 'bold');
                        }
                    });
                });
               
            });</script>
    
      <table class="table table-striped table-sm table-bordered mytbl" id="Approved_Diesel_bill">
                        <thead class="bg-warning text-white font-weight-bold">
                            <tr>
                                <th>S.no.</th>
                                <th>Location</th>
                                <th>Name</th>
    
                                <th>Date</th>
                                <th>Unloading Trailers</th>
                                <th>Loading Trailers</th>
                                <th>Total Trailers</th>
                                <th>Diesel (Ltr.)</th>
                                <th>Amount</th>
                               
                                <th>Supervisor<br />
                                    Comments</th>
                               
                                <th>Bill Copy</th>
    
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>

    Wednesday, May 19, 2021 7:06 PM
  • User475983607 posted

    As I suspected the HTML is dynamic.  Wrap the each loop in a function and call the function from the AJAX success handler.  AJAX is asynchronous.  Your design only produces results is when the AJAX response and success handler code runs before the each loop executes which I assume is very rare.

    Also you have two nested ready handlers which is odd.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 19, 2021 7:26 PM
  • User1052662409 posted

    mgebhard

    Wrap the each loop in a function and call the function from the AJAX success handler. 

    Thank you mgebhard

    Wednesday, May 19, 2021 7:44 PM