0

I am having some trouble with elements being outside scope or something but I am not getting any errors so I am not really sure how to fix it. I've shrunk up my code below to include what is relevant. 

(function(){

      var zdf = {
            theme : $('#zdf_theme')
      };


      zdf.setupPopup = function(){
         zdf.loadThemes();
      }

      zdf.loadThemes = function() {

        zdf.theme
                 .editableSelect({
                     effects: 'slide'
                 })
                 .on('select.editable-select', function(e, li) {
                     zdf.theme.attr("data-value", li.attr('value'));
                 });

     });
 }
}();

Hopefully I've provided enough code to identify the problem but basically everything is working up until the line

zdf.theme.attr("data-value", li.attr('value'));

It doesn't seem to select the object zdf.theme

If I replace it with the actual selector $('#zdf_theme') it works fine.

The editable select is this code base https://github.com/indrimuska/jquery-editable-select

Any input would be great!

trowse
  • 184
  • 10
  • if you do `console.log(zdf.theme)` inside your loadThemes function, what does it show? You can also use `this.theme` instead of `zdf.theme` – Joe Lissner May 12 '17 at 16:10
  • I wonder if you could use `$(this)` instead of `zdf.theme` inside the .on handler. – James May 12 '17 at 16:11
  • Scope is just fine. Try changing .attr() to .prop(). I think it MIGHT BE a problem with empty attribute. Read some more on attr() vs prop() here: http://stackoverflow.com/questions/5874652/prop-vs-attr . You could also use .data('value') – Marcin Pevik May 12 '17 at 16:14
  • 1
    And my second guess is: the element with id #zdf_theme is recreated and reattached to the DOM when .editableSelect() is invoked. This is why it need to be reselected. Maybe. – Marcin Pevik May 12 '17 at 16:18
  • Marcin it appears as if you are correct. The editable select replaces my current select with an input... and the console.log is returning the select `[select#zdf_theme, context: document, selector: "#zdf_theme"]`. Would there be anyways to select the newly created object?!? or redefine it I guess? – trowse May 12 '17 at 16:28

1 Answers1

0

Solution... editable select was replacing my input so I needed to redefine it after initializing the editable select.

trowse
  • 184
  • 10