Updated component variable in JQuery sortable stop event

Question

I would like to change the isMyPresentationEmpty variable when the stop event of JQuery sortable fires. Unfortunately the 'this' variable is undefined in that scope... Do you know how I am able to access the variable from that scope?

Thank you so much in advance!

import { Component, OnInit, ElementRef, Inject } from 'angular2/core';

declare var jQuery: any;

@Component({
    selector: 'edit-presentation',
    templateUrl: 'app/Edit Presentation/edit_presentation.component.html'
})
export class EditPresentationComponent implements OnInit {
    elementRef: ElementRef;

    isMyPresentationEmpty = true;

    constructor(@Inject(ElementRef) elementRef: ElementRef) {
        this.elementRef = elementRef;
    }

    ngOnInit() {

        // Initialize Sortable on lists
        var oldList, newList, item;
        jQuery(this.elementRef.nativeElement).find('.sortable-list').sortable({
            start: function(event, ui) {
                item = ui.item;
                newList = oldList = ui.item.parent().parent();
            },
            change: function(event, ui) {  
                if (ui.sender) newList = ui.placeholder.parent().parent();

            },
            stop: function(event, ui) {  
                // Check for empty list and hide/show instruction text
                if (jQuery(event.target).has('li').length) {
                    this.isMyPresentationEmpty = false;
                } else {
                    this.isMyPresentationEmpty = true;
                }
            },
            connectWith: ".sortable-list"
        }).disableSelection();
    }

}

jQuery inside Angular2 ?!? :(

Mark Pieszak - Trilon.io
– Mark Pieszak - Trilon.io

2016-04-25 12:22:36 +00:00
Commented Apr 25, 2016 at 12:22 — Mark Pieszak - Trilon.io
– Mark Pieszak - Trilon.io, Commented Apr 25, 2016 at 12:22

eko · Accepted Answer · 2016-04-25 11:34:45Z

5

You can bind "this" to a variable (var self in this example) outside your events and then use that variable inside the events. For example:

ngOnInit() {
        var self = this;  //use self instead of this if you want to refer to your component inside events
        // Initialize Sortable on lists
        var oldList, newList, item;
        jQuery(this.elementRef.nativeElement).find('.sortable-list').sortable({
            start: function(event, ui) {
                item = ui.item;
                newList = oldList = ui.item.parent().parent();
            },
            change: function(event, ui) {  
                if (ui.sender) newList = ui.placeholder.parent().parent();

            },
            stop: function(event, ui) {  
                // Check for empty list and hide/show instruction text
                if (jQuery(event.target).has('li').length) {
                    self.isMyPresentationEmpty = false;
                } else {
                    self.isMyPresentationEmpty = true;
                }
            },
            connectWith: ".sortable-list"
        }).disableSelection();
    }

answered Apr 25, 2016 at 11:34

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

5 Comments

Dinistro Over a year ago

This is the JS way... You can just use arrow-functions in typescript that do not change the this context in a function.

eko Over a year ago

@Dinistro Yes but then you have to do other adjustments for example if you want to select $(this) = $(event.target). That may have been a case so I stayed on the safe side.

Dinistro Over a year ago

Oh, of course. I was not thinking about this. This is perhaps the reason, why using JQuery in angular2 is not that nice.

eko Over a year ago

Indeed. I agree :)

Jasper Over a year ago

If I could have avoided JQuery I would have. But I could not find any Angular2 solution for making my lists sortable...

Dinistro · Accepted Answer · 2016-04-25 11:50:44Z

You can use the arrow-functions from typescript, the do not change the this.

import { Component, OnInit, ElementRef, Inject } from 'angular2/core';

declare var jQuery: any;

@Component({
    selector: 'edit-presentation',
    templateUrl: 'app/Edit Presentation/edit_presentation.component.html'
})
export class EditPresentationComponent implements OnInit {
    elementRef: ElementRef;

    isMyPresentationEmpty = true;

    constructor(@Inject(ElementRef) elementRef: ElementRef) {
        this.elementRef = elementRef;
    }

    ngOnInit() {

        // Initialize Sortable on lists
        var oldList, newList, item;
        jQuery(this.elementRef.nativeElement).find('.sortable-list').sortable({
            start: (event, ui) => {
                item = ui.item;
                newList = oldList = ui.item.parent().parent();
            },
            change: (event, ui) => {
                if (ui.sender) newList = ui.placeholder.parent().parent();

            },
            stop: (event, ui) => {
                // Check for empty list and hide/show instruction text
                if (jQuery(event.target).has('li').length) {
                    this.isMyPresentationEmpty = false;
                } else {
                    this.isMyPresentationEmpty = true;
                }
            },
            connectWith: ".sortable-list"
        }).disableSelection();
    }

}

Setting the this into a variable is a JavaScript solution and not the typescript way.

I hope this helped you.

Collectives™ on Stack Overflow

Updated component variable in JQuery sortable stop event

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related