How to make multiple jquery functions into just one function?

Question

i have a code like below:-

$(document).ready(function () {
    $("#tableA").on("click", function () {
         $.ajax({
         type: "POST",
         url: "Testing.ashx",
         success: function (output) {
            output = JSON.parse(output);
            DrawTableA(output);
            }
         })
    });

     $("#tableB").on("click", function () {
         $.ajax({
         type: "POST",
         url: "Testing.ashx",
         success: function (output) {
            output = JSON.parse(output);
            DrawTableB(output);
            }
         })
    });          

}

<table id=tableA>tableA</table>
<table id=tableB>tableB</table>

and im hoping to make it only into one function instead of using two function as the attributes are all the same

Rory McCrossan · Accepted Answer · 2020-07-30 08:45:36Z

2

Firstly you can join the selectors with a comma to combine the event handlers. The only difference from there is the function which gets called in the success function. Assuming the logic there is the same too you could pass the table as an argument:

$(document).ready(function () {
  $("#tableA, #tableB").on("click", function () {
     let $table = $(this);
     $.ajax({
       type: "POST",
       url: "Testing.ashx",
       success: function (output) {
         let output = JSON.parse(output);
         DrawTable($table, output);
       }
    })
  });
});

If, for whatever reason, you need to execute completely different logic on each table element, then you could store the function name in a data attribute on the table HTML. Then you can define the functions within an object, keyed by the value of that attribute:

let tableFuncs = {
  foo: () => console.log('tableA'),
  bar: () => console.log('tableB')
}

$(document).ready(function() {
  $("#tableA, #tableB").on("click", function() {
    let $table = $(this);
    
    // inside AJAX callback...
    tableFuncs[$table.data('func')]();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableA" data-func="foo">
  <tr>
    <td>tableA</td>
  </tr>
</table>
<table id="tableB" data-func="bar">
  <tr>
    <td>tableB</td>
  </tr>
</table>

Also, as pointed out by @PeterSH in the comments, it's better practice to use common classes on repeated elements to make the code easier to maintain. With your current pattern, if you add a #tableC in the future you would need to remember to amend the JS as well. If you select by a class you just need to remember to include the class in the HTML only.

edited Jul 30, 2020 at 8:45

answered Jul 30, 2020 at 8:39

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PeterSH Over a year ago

It might be better to have a class selector, if more tables are added in the future. $(".drawTable").on("click", function () {})

Rory McCrossan Over a year ago

Very good point, thanks. I added a note about it in the answer.

noobHere · Accepted Answer · 2020-07-30 08:46:10Z

0

i think something like this would work

$("#tableB, #tableA").on("click", function () {
    var targetTable = $(this);
         $.ajax({
         type: "POST",
         url: "Testing.ashx",
         success: function (output) {
            output = JSON.parse(output);
            if(targetTable.attr('id') === 'tableA') {
             DrawTableA(output);
            } else {
             DrawTableB(output);
            }
            }
         })
    });

just use , delimiter for each target element

Edit: use the attribute id on which table being clicked to and then call a function for that table for rendering

edited Jul 30, 2020 at 8:46

answered Jul 30, 2020 at 8:38

noobHere

2513 silver badges11 bronze badges

4 Comments

Rory McCrossan Over a year ago

DrawTableA() and DrawTableB(), though

Lee Wyncent Over a year ago

@noobHere the function in the ajax is different, its DrawTableA() and DrawTableB()

noobHere Over a year ago

you can check the attr.id and call the specific function for that.. see edited answer

Lee Wyncent Over a year ago

guys this is my new thread, stackoverflow.com/questions/63170853/…

Anil Singh · Accepted Answer · 2020-07-30 09:18:52Z

0

You can use this code for helpful 

$(document).ready(function () {
    $("#tableA, #tableB").on("click", function () {
         $.ajax({
         type: "POST",
         url: "Testing.ashx",
         success: function (output) {
            output = JSON.parse(output);
            DrawTableA(output);
            }
         })
    });

}

<table id=tableA>tableA</table>
<table id=tableB>tableB</table>

answered Jul 30, 2020 at 9:18

Anil Singh

654 bronze badges

Comments

Tushar Wasson · Accepted Answer · 2020-07-30 09:24:47Z

0

Will work for all ids starting with the table:-

 $(document).ready(function () {
$("[id^=table]").on("click", function () {
 let $table = $(this);
     $.ajax({
     type: "POST",
     url: "Testing.ashx",
     success: function (output) {
        output = JSON.parse(output);
        DrawTable($table,output);
        }
     })
});        }

answered Jul 30, 2020 at 9:24

Tushar Wasson

5546 silver badges13 bronze badges

Comments

Lee Wyncent · Accepted Answer · 2020-08-03 07:16:35Z

I did it this way and it works.

            $(".tableToggle").on("click", function () {
                var tableType = $(this).attr('data-tableid');
                var fName = "DrawTable" + tableType;
                $('body').append('<div id="loadingDiv"><div class="lds"><div></div><div></div><div></div></div></div>');
                if (($("#tb2" + tableType + " tr").length) > 0) {
                        $("#tb1" + tableType).toggleClass("accordion accordion2");
                        $("#tb2" + tableType).toggle();
                        $("#loadingDiv").remove();
                    
                }
                else {
                    $.ajax({
                        type: "POST",
                        url: "AccInfoTest.ashx",
                        data: { itemType : tableType},
                        success: function (output) {
                            try {
                                output = JSON.parse(output);
                                window[fName](output);
                            }
                            catch (ex) {
                                alert("error");
                                $('#tb2' + tableType).empty();
                            }
                        }
                        , complete: function (data) {

                                $("#tb2" + tableType).show();
                                $("#tb1" + tableType).addClass("accordion2").removeClass("accordion");
                                $("#loadingDiv").remove();
                            
                        }
                    })
                }
            });

Collectives™ on Stack Overflow

How to make multiple jquery functions into just one function?

5 Answers 5

2 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related