Javascript Scope (Jquery)

Question

I have an Ajax Call, in an OnClick event.

Inside the OnClick, I set a var type = $(this).closest("table").attr("id");

I am trying to call this type inside the Ajax's complete function().

But it shows as undefined.

Maybe someone can explain a lil bit why this is happening?

Thanks!!

$(document).on('click','.swaction',function(event){
    var pdfId = $(this).closest('tr').find('td:first').html();
    var type = $(this).closest("table").attr("id");
    event.preventDefault();

    if( $(this).data('action') === 'delete' )
    {
      var currentElement = this;
      if( confirm( "¿Está seguro de querer eliminar el \nPDF Nº " + pdfId + '?' ) )
      {
        $.ajax({
          url: 'ct_form_procesar_escaneos/pdf/delete/'+ type + '/' + pdfId,
          method: 'POST',
          error: function( jqXHR, textStatus, errorThrown )
          {
            alert( errorThrown );
          },
          complete: function()
          {
            var a = type; // undefined
            $(currentElement).closest('tr').fadeOut(600, function(){
              $(currentElement).remove();
              $.procesar_escaneos.removeOnEmpty( type );
            });
          }
        });
      }
    }

Did you check if the type is defined after your initialization? — Victor
– Victor, Commented Jun 13, 2013 at 21:08
Scope seems ok. have you tried using a different variable name? maybe this one is overwritten somehow on a different scope. — Skarlinski
– Skarlinski, Commented Jun 13, 2013 at 21:24
Yep, you're gonna have trouble doing this. Especially with jQuery you run into weird hoisting issues. Check out this article and see if it helps you. — AlbertEngelB
– AlbertEngelB, Commented Jun 13, 2013 at 21:25
I made a simple test based on your code with jsfiddle, and it appears to work fine: jsfiddle.net/aHA5a/1, at least on my browser. Can you check on your side ? — vcarel
– vcarel, Commented Jun 13, 2013 at 21:39

mor · Accepted Answer · 2013-06-14 00:46:41Z

2

In javascript, the this keyword takes it's context dynamically depending of the function it is called from. When you call type from within an Ajax callback, the context has changed and this is not the same object.

Since javascript uses lexical scoping, you can save a reference to the this object when the context is right and then use this reference in your function.

var self = this;
var type = $(self).closest("table").attr("id");

This will work.

edited Jun 14, 2013 at 0:46

answered Jun 13, 2013 at 23:20

mor

2,31318 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

Javascript Scope (Jquery)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related