CODEWITHSUNDEEP
javascriptjqueryfunctionscopecall
Sawyer
Sawyer

Reputation: 77

Why does the content of the function load, but not the function when it is called?

I'm having an issue with a function I'm calling (using jQuery). My issue is that when I attempt call a function within another function, that first one is not being called. However, when I place the contents of the failed function into the one calling said failed function, the code executes fine. I'll show you what I'm talking about:

$('form.register .submit').click(validateRegister);

function submitStart() {

    var $this = $(this);
    $this.parent().addClass('processing');

    var $processing = $('#processing');
    $processing.show();

    var $endNote = $this.parent().find('#endNote')
    $endNote.slideDown();

}

function validateRegister(){

    submitStart();

}

See, when the contents of submitStart() are places into the validateRegister(), they code executes. However, when calling the function as it shows in this code, it fails to work. I've considered scope (at least to my knowledge) to no avail.

Any help is extremely appreciated, thank you!

Upvotes: 2

Views: 118

Answers (5)

nrabinowitz
nrabinowitz

Reputation: 55678

The problem here is this. When you use validateRegister as an event hander, jQuery automatically makes sure that this refers to the DOM element that dispatched the event. But when you call your separate function, the scope isn't being set correctly, so this probably refers to the window object (that's the default when you refer to this in the global scope). To fix it, the easiest way would be to pass the element along as an argument:

function submitStart(element) {

    var $this = $(element);
    $this.parent().addClass('processing');

    var $processing = $('#processing');
    $processing.show();

    var $endNote = $this.parent().find('#endNote')
    $endNote.slideDown();

}

function validateRegister(){
    // "this" is the DOM element
    submitStart(this);
}

As @Andrew noted, you can also set the value of this in submitStart by using the .apply() method of the submitStart function.

Upvotes: 0

James Montagne
James Montagne

Reputation: 78650

I think you may have an issue with this not being what you think it is.

Try this:

submitStart.call(this)

Upvotes: 0

mVChr
mVChr

Reputation: 50185

this will no longer be referencing the clicked element but will represent window instead. You can change submitStart so that it accepts a parameter and pass this to it.

Upvotes: 0

user113716
user113716

Reputation: 322502

You're losing your expected this value, so the submitStart is likely getting called, but doesn't work properly.

Do this:

function validateRegister(){

    submitStart.call( this );

}

Here you're calling the submitStart method via the .call() method, which is available on function instances.

The .call() method lets you manually set the value of this in the function you're calling.

So because you've assigned validateRegister as the handler, jQuery makes sure the value of this is your element. But since validateRegister is calling another function, it carries the responsibility of making sure that function has the proper this value.

Just keep in mind that when you call any function like this:

someFunction();

...the value of this in that function will be window, unless you manually set it to something else.

Upvotes: 4

zsalzbank
zsalzbank

Reputation: 9857

var $this = $(this); is returning the window.

Upvotes: 0

Related Questions