How to use document.getElementsByTagName in Backbone.js

Question

I was using the following code without Backbone.js and it was working - preventing the ghost images from appearing when trying to drag the image:

$(document).ready(function() {
$('img').attr('draggable', false);
document.getElementsByTagName('img').draggable = false;
});

Now I'm learning backbone.js and trying to implement it in the Views, this is how it looks:

function noDrag () {
        $(that.el).find('img').attr('draggable', false);
        document.getElementsByTagName('img').draggable = false;
    }

    noDrag();

It doesn't work.

I know that the key to making this work is getting the part enter code heredocument.getElementsByTagName('img').draggable = false; to work. What's wrong with my code?

Here goes the full code:

    window.dolnyPanelView = Backbone.View.extend({
    tagName : 'div',
    className : 'dolnyPanel-menu-view',
    initialize : function() {
        var that = this;
        // tu wybierz template z templates/main.tpl
        this.template = _.template($("#dolnyPanel-view").html());     
        return this;
    },
    events : {

    },
    render : function() {
        var that = this;       
        $(this.el).html(this.template());  
       $(this.el).find('#panel-view').carousel({
         interval: 3000
         });


        var BandCount;

        $.post('api/getBandsCount.php', function(data) {

            BandCount=data;
        });



         var items = getItems(BandCount);
        $(this.el).find('.carousel-inner').html($(items));
        $(this.el).find('.item').first().addClass('active');




         function getItems(BandCount) {
           // console.log(BandCount);
            var allItems = '';
            for (var i = 1; i <= BandCount; i++) {
                var items = '';
                for (var j = 0; j < 6; j++) {
                    if (i <= BandCount) {
                        items += getImageItem(i);
                        i++;
                    }
                }
                allItems += '<div class="item"><div class="row">' + items + '</div></div>';
            }
        return allItems; 
        }

        function getImageItem(id) {
        var item = '<div class="col-md-2 col-sm-3 col-xs-6 artist-col biography-artist-col"><a href="#x" bandId="'+id+'">';

        var src = 'LEKSYKON';

        $.post('api/getAwatar.php', {id: id}, function(data) {

            src = src + data.path;

        }, "json");
        item += '<img src="' + src + '" alt="Image" class="img-responsive artist"></a></div>';
        return item;
    }

        function noDrag () {
            $(that.el).find('img').attr('draggable', false);
            document.getElementsByTagName('img').draggable = false;
        }

        noDrag();


        return this;
    }


});

UPDATE: thank you for all the answers, it turned out that it's not working because the whole view doesn't work. The thread could be closed now not to mistake anybody.

Answer 1

document.getElementsByTagName returns a NodeList of DOM elements, so you'd need to apply the attribute change to every element rather than to the collection itself.

As you're using jQuery already, you don't need to use document.getElementsByTagName - you can create another jQuery selection.

In fact, that's exactly what you are doing in your first, working example - document.getElementsByTagName is not doing anything there.

You can use jQuery's prop method to reliably change a toggleable attribute for all elements in a selection.

$('img').prop('draggable', false);

See this question for an discussion of prop vs attr.

Answer 2

Try this

//this will get the first img element 
var element = document.getElementsByTagName('img')[0];
//setting value of attribute
element.setAttribute("draggable", false);