How to get ID of the clicked element and store in variable and use it in function that makes AJAX call

user_5779131 0
Viewed 1504

I have been trying to remove this #static id from the one click function below and make a use of variable so that it automatically gets the Ids' like #static, #dynamic...etc and puts it in One click function. This will save me copying and pasting the same function again and again just by changing it's ID names. Plus this will also make the code look clean & short. 

jQuery(document).ready(function($){
// Home Page Static Portfolio Ajax Query
$(this).one('click', '#static', function( e ){
    var that = $(this);
    var id = that.attr('id');
    var rel = that.data('rel');
    var ajaxurl = that.data('url');
    $.ajax({
        url : ajaxurl,
        type : 'POST',
        data : {
            rel : rel,
            action : 'home_filter_' + id + '_portfolios'
        },
        error : function( response ){
            console.log( response );
        },
        success : function ( response ){
            if ( response == '' ) {
                $('figure' + id).after( '<div class="end_of_testimonial"><h3>You have reached the end of the line</h3><p>No more portfolios to load!</p></div>' );
            } else {
                $('.gallery-wrapper').append( response );
            }
        }
    });
});

Any help would be greatly appreciated :)

jquery ajax javascript
3 Answers

You can use class and call this way to ajax function. Here is your demo code. You can use as many as id you want for this functions. I use document on event for called every instance of that class. Fiddel link

jQuery(document).ready(function($){
    // Home Page Static Portfolio Ajax Query
    $(document).on('click', '.clickclass', function( e ){
        var that = $(this);
        var id = that.attr('id');
        var rel = that.data('rel');
        var ajaxurl = that.data('url');
            alert(id);

    });
    });
user_44331010

You can add a common class to all the elements you want this to work on and use a regular on()

Add another class when one has been clicked so you don't make the request again as replacement for one() functionality

$(function() {
  // better to use `document` instead of `this` for readability
  $(document).on('click', '.my-div', function(e) {
    var that = $(this);
    if (that.hasClass('already-clicked')) {
      // bail out
      console.log('Already clicked')
      return
    } else {
      that.addClass('already-clicked');
      var data = that.data();
      data.id = this.id;
      console.log(JSON.stringify(data))
      // do your ajax
    }
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="my-div" id="1" data-rel="rel_1" data-url="url_1">Div one</div>
<div class="my-div" id="2" data-rel="rel_2" data-url="url_2">Div two</div>
<div class="my-div" id="3" data-rel="rel_3" data-url="url_3">Div two</div>

user_11759660 
$(this).one('click', '#static', function( e )

In this line of your code you should use class as an identifier of the element. "id" is unique and it should be assigned to only one element.

$(body).one('click', '.yourclass', function( e )

and add the class to all the element you want.

user_78373360
Related