list out ways to call jQuery Ajax when clicking a button

Using ID Selector
Using ID Selector with parameter
Using Class Selector
Using Class Selector with parameter
Using Attribute Selector data-action
Using Attribute Selector with multiple parameter data-action, data-id,data-other-param
Using Element Selector: button
Using onclick Attribute ajaxButtonClick function:
Using onclick Attribute ajaxButtonClick function with multiple Parameters
Combining Classand Element Selector(button and class ajaxButton4)
Using Event Delegation(when click container)
Using Event Delegation with parameter:(when click container and particular ajax button)
Using .on() method with event data

Using ID Selector:

<button id="ajaxButton1">Click me</button>

<script>
    $("#ajaxButton1").click(function() {
        // Your Ajax code here
    });
</script>

Using ID Selector with parameter

<button id="ajaxButton1" data-id="{{ $item->id }}">Click me</button>

<script>
    $("#ajaxButton1").click(function() {
        // Extract the data-id attribute value
        var itemId = $(this).data('id');

        // Your Ajax code here with the dynamic parameter (itemId)
        console.log("Clicked with data-id:", itemId);
    });
</script>

Using Class Selector

<button class="ajaxButton2">Click me</button>

<script>
    $(".ajaxButton2").click(function() {
        // Your Ajax code here
    });
</script>

Using Class Selector with parameter

<button class="ajaxButton2" data-id="{{ $item->id }}" data-other-param="{{ $item->otherParam }}">Click me</button>

<script>
    $(".ajaxButton2").click(function() {
        // Extract the data attributes values
        var itemId = $(this).data('id');
        var otherParam = $(this).data('other-param');

        // Your Ajax code here with the dynamic parameters (itemId and otherParam)
        console.log("Clicked with data-id:", itemId);
        console.log("Clicked with other param:", otherParam);
    });
</script>

Using Attribute Selector

<button data-action="ajaxButton3">Click me</button>

<script>
    $("[data-action='ajaxButton3']").click(function() {
        // Your Ajax code here
    });
</script>

Using Attribute Selector with parameter

<button data-action="ajaxButton3" data-id="{{ $item->id }}" data-other-param="{{ $item->otherParam }}">Click me</button>

<script>
    $("[data-action='ajaxButton3']").click(function() {
        // Extract the data attributes
        var itemId = $(this).data('id');
        var otherParam = $(this).data('other-param');

        // Your Ajax code here with the dynamic parameters (itemId and otherParam)
        console.log("Clicked with data-id:", itemId, "and otherParam:", otherParam);
    });
</script>

Using Element Selector:

<button>Click me</button>

<script>
    $("button").click(function() {
        // Your Ajax code here
    });
</script>

Using Element Selector with Parameters:

<button data-id="{{ $item->id }}" data-other-param="{{ $item->otherParam }}">Click me</button>

<script>
    $("button").click(function() {
        // Extract the data attributes
        var itemId = $(this).data('id');
        var otherParam = $(this).data('other-param');

        // Your Ajax code here with the dynamic parameters (itemId and otherParam)
        console.log("Clicked with data-id:", itemId, "and otherParam:", otherParam);
    });
</script>

Using onclick Attribute:

<button onclick="ajaxButtonClick(5)">Click me</button>

<script>
    function ajaxButtonClick(parameter) {
        // Your Ajax code here with the parameter
    }
</script>

Using onclick Attribute with Parameters:

<button onclick="ajaxButtonClick('{{ $item->id }}', '{{ $item->otherParam }}')">Click me</button>

<script>
    function ajaxButtonClick(itemId, otherParam) {
        // Your Ajax code here with the dynamic parameters (itemId and otherParam)
        console.log("Clicked with data-id:", itemId, "and otherParam:", otherParam);
    }
</script>

Combining Class and Element Selector:

<button class="ajaxButton4 special">Click me</button>

<script>
    $("button.ajaxButton4.special").click(function() {
        // Your Ajax code here
    });
</script>

Combining Class and Element Selector with parameter:

<button class="ajaxButton4 special" data-id="{{ $item->id }}" data-other-param="{{ $item->otherParam }}">Click me</button>

<script>
    $("button.ajaxButton4.special").click(function() {
        // Extract the data attributes
        var itemId = $(this).data('id');
        var otherParam = $(this).data('other-param');

        // Your Ajax code here with the dynamic parameters (itemId and otherParam)
        console.log("Clicked with data-id:", itemId, "and otherParam:", otherParam);
    });
</script>

Using Event Delegation:

<div id="container">
    <button class="ajaxButton5">Click me</button>
</div>

<script>
    $("#container").on("click", ".ajaxButton5", function() {
        // Your Ajax code here
    });
</script>

Using Event Delegation with parameter:

<div id="container">
    <button class="ajaxButton5" data-id="{{ $item->id }}" data-other-param="{{ $item->otherParam }}">Click me</button>
</div>

<script>
    $("#container").on("click", ".ajaxButton5", function() {
        // Extract the data attributes
        var itemId = $(this).data('id');
        var otherParam = $(this).data('other-param');

        // Your Ajax code here with the dynamic parameters (itemId and otherParam)
        console.log("Clicked with data-id:", itemId, "and otherParam:", otherParam);
    });
</script>

Using .on() method with event data:

<button class="ajaxButton6">Click me</button>

<script>
    $(".ajaxButton6").on("click", { param1: "value1", param2: "value2" }, function(event) {
        var data = event.data;
        // Your Ajax code here with data.param1 and data.param2
    });
</script>

Using .on() method with event data with parameter:

<button class="ajaxButton6" data-id="{{ $item->id }}" data-other-param="{{ $item->otherParam }}">Click me</button>

<script>
    $(".ajaxButton6").on("click", function(event) {
        // Extract the data attributes
        var itemId = $(this).data('id');
        var otherParam = $(this).data('other-param');

        // Your Ajax code here with the dynamic parameters (itemId and otherParam)
        console.log("Clicked with data-id:", itemId, "and otherParam:", otherParam);
    });
</script>

Using .one() method for a one-time click event:

<button class="ajaxButton7">Click me</button>

<script>
    $(".ajaxButton7").one("click", function() {
        // Your Ajax code here (executes only once)
    });
</script>

Using .one() method for a one-time click event with parameter:

<button class="ajaxButton7" data-id="{{ $item->id }}" data-other-param="{{ $item->otherParam }}">Click me</button>

<script>
    $(".ajaxButton7").one("click", function() {
        // Extract the data attributes
        var itemId = $(this).data('id');
        var otherParam = $(this).data('other-param');

        // Your Ajax code here with the dynamic parameters (itemId and otherParam)
        console.log("Clicked with data-id:", itemId, "and otherParam:", otherParam);
    });
</script>

Using .click() shorthand:

<button class="ajaxButton8">Click me</button>

<script>
    $(".ajaxButton8").click(function() {
        // Your Ajax code here
    });
</script>

Debug School

list out ways to call jQuery Ajax when clicking a button

Top comments (0)