Update jQuery variable on ajax complete

Question

im still a beginner with JS.

I use ajax for filtering content in wordpress. So I need to send 2 variables to PHP. But the problem is once i've navigated further one of the variables needs to change. In html the Data gets changed, but jquery which runs on (document).ready uses the initial variable. How can i make the variable refresh on ajax complete?

here is my code

jQuery(document).ready(function($) {
$('.tax-filter').click( function(event) {

    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }

    var selecetd_taxonomy = $(this).attr('id');
    var personData = $('#content').data('id');


    data = {
        action: 'filter_posts',
        afp_nonce: afp_vars.afp_nonce,
        taxonomy: selecetd_taxonomy,
        person: personData,
    };


    $.ajax({
        type: 'post',
        dataType: 'json',
        url: afp_vars.afp_ajax_url,
        data: data,
        success: function( data, textStatus, XMLHttpRequest ) {
            $('.showContent').html( data.response );
        },

        error: function( MLHttpRequest, textStatus, errorThrown ) {
            $('.projects').html( 'Error 404' );
        }
    })
});
});

From another function the .data('id') in html gets a new value, but I need the jQuery to get the new value aswell

EDIT:

I need the personData to be updated in my click function. The data-id value of #content gets updated on ajaxComplete. It is done by another click function which gets the value from PHP.

if (event.preventDefault) { why are you doing that check in jQuery? — epascarello
– epascarello, Commented Apr 22, 2015 at 12:51
possible duplicate of update javascript variable with ajax in real-time — Stephan Weinhold
– Stephan Weinhold, Commented Apr 22, 2015 at 12:52
"From another function the .data('id') in html gets a new value, but I need the jQuery to get the new value as well" Get the value where? Where is it setting the new id? — epascarello
– epascarello, Commented Apr 22, 2015 at 12:52
The $('#content').data('id'); gets a new value on ajaxComplete. I need the var personData to be updated in the function I posted above. — a_k_u
– a_k_u, Commented Apr 22, 2015 at 12:56

Rickkwa · Accepted Answer · 2015-04-22 13:34:25Z

2

Update the data-id using $('#content').data('id', 'newValueHere') instead of $('#content').attr('data-id', 'newValue')

See fiddle and note that changing the attribute with .attr() doesn't work, but .data() does.

edited Apr 22, 2015 at 13:34

answered Apr 22, 2015 at 13:25

Rickkwa

2,3015 gold badges25 silver badges37 bronze badges

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

1 Comment

a_k_u Over a year ago

this and correcting a few typos fixed my problem! Thanks

Collectives™ on Stack Overflow

Update jQuery variable on ajax complete

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related