CODEWITHSUNDEEP
javascriptjqueryajax
jun
jun

Reputation: 55

jQuery/ajax button click using variable

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?

Upvotes: 2

Views: 9044

Answers (6)

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

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>

Upvotes: 1

Dimple
Dimple

Reputation: 178

Try this

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

Upvotes: 0

Jayanti Lal
Jayanti Lal

Reputation: 1185

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

Upvotes: 0

Jai
Jai

Reputation: 74738

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>

Upvotes: 0

Dayachand Patel
Dayachand Patel

Reputation: 497

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

Upvotes: 2

Satpal
Satpal

Reputation: 133403

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

Upvotes: 0

Related Questions