I want to implement a simple webpage using jQuery/Ajax. I have 3 buttons, each of which will use ajax call to get different files from the server. The only difference is that each button has different class name, and calls different files. Everything else, such as the loading time, loading icon, success/fail message, are all the same. Therefore, I would like to write only 1 ajax function, instead of 3.

I have:

<script>
$(document).ready(function(){
    $(".button1").click(function(){
        $.ajax({
            url: "button1.txt", 
            /*more code*/
        });
    });
});
</script>

I want to create another function so that this "button1" and "button1.txt" will bee a variable, and whatever is returned from the function will be used in the ajax function, in which way I can reuse the ajax function 3 times. How could you achieve this?

I want to implement a simple webpage using jQuery/Ajax. I have 3 buttons, each of which will use ajax call to get different files from the server. The only difference is that each button has different class name, and calls different files. Everything else, such as the loading time, loading icon, success/fail message, are all the same. Therefore, I would like to write only 1 ajax function, instead of 3.

I have:

<script>
$(document).ready(function(){
    $(".button1").click(function(){
        $.ajax({
            url: "button1.txt", 
            /*more code*/
        });
    });
});
</script>

I want to create another function so that this "button1" and "button1.txt" will bee a variable, and whatever is returned from the function will be used in the ajax function, in which way I can reuse the ajax function 3 times. How could you achieve this?

• javascript
• jquery
• ajax

Share Improve this question Follow asked Dec 30, 2016 at 5:25 junjun 5511 silver badge1010 bronze badges 2

• Can you include the three <button> elements html and corresponding javascript at Question? See stackoverflow./help/how-to-ask – guest271314 Commented Dec 30, 2016 at 5:28
• Thank you everyone! I love to see how there are so many different solutions. I am amazed. I learned a lot with this simple question. Thank you! – jun Commented Dec 31, 2016 at 6:03

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

Your need to set url on all three button like

<button class='button1' data-url='button1.txt'>button 1</button>
<button class='button2' data-url='button2.txt'>button 2</button>
<button class='button3' data-url='button3.txt'>button 3</button>

After That on your ajax.

<script>
$(document).ready(function(){
$(".button1, .button2, .button3").click(function(){
var url = $(this).attr('data-url');
    $.ajax({
        url: url", 
        /*more code*/
    });
});
});

EDIT use a data attribute say an attribute named data-url, fetch it inside your click event

Provide same class names to all the buttons. Retrieve the value of the buttons, and pass them to the ajax call,

<script>
$(document).ready(function(){
    $(".buttonClass").click(function(){
        //var value = $(this).attr("value");
     var dataUrl = $(this).attr('data-url');
        $.ajax({
            url: dataUrl, 
            /*more code*/
        });
    });
});
</script>

You can use data-* prefixed custom attributes to store the file to be access in the $.ajax() function. You can use a mon class to attach the event handler.

HTML

<button class="button" filename="button1.txt"></button>
<button class="button" filename="button2.txt"></button>
<button class="button" filename="button3.txt"></button>

FileName can be fetched using Element.dataset property or jQuery's .data() method.

Script

$(".button").click(function(){
    var fileName = this.dataset.filename;
    $.ajax({
        url: fileName, 
        /*more code*/
    });
});

I guess a mon class name would suffice. Although you need to have some id on your buttons to differ, yet it's not required. this can be used in this case.

I think this can be done with putting your ajax in a parameterised function:

function myAjaxCall(){
    var url = this.textContent.trim().toLowerCase()+'.txt';

    $.ajax({
        url: url, 
        /*more code*/
    });
}

$(document).ready(function(){
    $(".button").click(myAjaxCall);
});

consider such buttons:

<button class='button'>Button1</button>
<button class='button'>Button2</button>
<button class='button'>Button3</button>

simply add buttons in click event

<script>
   $(document).ready(function(){
     $(".button1, .button2 , .button3").click(function(){
        $.ajax({
            url: "button1.txt", 
            /*more code*/
        });
      });
    });
</script>

2 :

Add click onclik event in html

Try this

$(document).ready(function(){
    $(".button1, .button2 , .button3").click(function(){
        var value = $(this).attr("value");
        $.ajax({
            url: value, 
            /*main logic*/
        });
    });
});