jQuery/ajax button click using variable

Question

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 become 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?

Can you include the three <button> elements html and corresponding javascript at Question? See stackoverflow.com/help/how-to-ask — guest271314
– 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
– jun, Commented Dec 31, 2016 at 6:03

Dayachand Patel · Accepted Answer · 2016-12-30 05:35:01Z

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*/
    });
});
});

answered Dec 30, 2016 at 5:35

Dayachand Patel

4977 silver badges12 bronze badges

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

Comments

Sudhansu Choudhary · Accepted Answer · 2016-12-30 07:21:56Z

1

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>

edited Dec 30, 2016 at 7:21

answered Dec 30, 2016 at 5:29

Sudhansu Choudhary

3,3903 gold badges21 silver badges33 bronze badges

Comments

Satpal · Accepted Answer · 2016-12-30 05:30:52Z

0

You can use data-* prefixed custom attributes to store the file to be access in the $.ajax() function. You can use a common 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*/
    });
});

answered Dec 30, 2016 at 5:30

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Jai · Accepted Answer · 2016-12-30 05:36:52Z

0

I guess a common 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>

answered Dec 30, 2016 at 5:36

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Jai · Accepted Answer · 2016-12-30 05:40:58Z

0

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

edited Dec 30, 2016 at 5:40

Jai

74.8k12 gold badges77 silver badges104 bronze badges

answered Dec 30, 2016 at 5:28

Jayanti Lal

1,1836 silver badges19 bronze badges

1 Comment

Jai Over a year ago

when .button2 is clicked it will call button1.txt so that is not the desired behavior.

Dimple · Accepted Answer · 2016-12-30 05:42:33Z

0

Try this

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

edited Dec 30, 2016 at 5:42

answered Dec 30, 2016 at 5:35

Dimple

1782 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery/ajax button click using variable

6 Answers 6

Comments

Comments

Comments

Comments

2 :

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

2 :

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related