0

I use an input field to submit 2 pieces of data to an event handler: the displayed value and a property value.

When I populate the data, I do this:

      xInput.val('ARC'+opts[0].arc);
      xInput.prop('data-sine',opts[0].sine);
// Now, trigger submit-handler
      xInput.show();
      xInput.trigger('change');

When I stop in the debugger, I can see that the property data-sine exists on the jQuery object and has the correct data.

Now, in the change event, I want to move the data from the "element" onto the event so the astrosearch API invocation can pick it up using a generic event handler, which also handles input from a <SELECT> tag in cases where there is more than one arc to choose from. So, I do this:

    xInput.on('change', function (e) { 
      e.sine = $(this).attr('data-sine');
      astrofinder.findAstro(e, true);
      astrofinder.ui.countdown.start(function () { xInput.trigger('find'); }); 
    });

When I stop at the first line here, this is NOT the xInput jQuery object, it's the raw HTML element - BUT the element DOES NOT HAVE a data-sine property! Somehow, it didn't make it out of jQuery into the DOM?

Why? Do I need to use a timer to get into the next event loop?

user1944491
  • 559
  • 1
  • 8
  • 24
  • Of course, I know the workaround is to just do `e.sine = xInput.prop('data-sine')` but that just side-steps the real question - why isn't the prop available (via DOM) to code that doesn't have access to the `xInput` jQuery instance? – user1944491 Apr 24 '21 at 16:11
  • Try to populate using `xInput.attr('data-sine',opts[0].sine);` – Roko C. Buljan Apr 24 '21 at 16:12
  • 2
    There is a big difference between element *properties* and *attributes*. `value` is a perfect example. The value attribute is not synchronized with value property after initial page load. You are setting a *property* and trying to read as *attribute* – charlietfl Apr 24 '21 at 16:17
  • OMG. @charlietfl you nailed it. Attributes are the ones that appear as part of the HTML element, not sure where properties go. Either way, my code was internally inconsistent. Thank you! – user1944491 Apr 25 '21 at 18:50
  • DOM = Document Object Model. Each node in document is an object that has *properties*. In some cases those properties are based on attributes found in the html when loaded. `` gets processed to the value property for example allowing you to access it as `inputElement.value` – charlietfl Apr 25 '21 at 18:52
  • @charlietfl Yeah, I got that from your first comment. But this begs the real question - when should one use `prop` and when `attr`? For this case, either works as well (as long as I'm consistent) but what are the reasons to use an object property vs. a DOM attribute? One obvious reason: adding an attribute can affect the display but a property wouldn't. Is the property available via the `event.target` like an attribute would be? Are there other factors/benefits/side-effects? – user1944491 May 03 '21 at 12:50
  • Should find plenty of results in search for jQuery attr vs prop as well as in the docs – charlietfl May 03 '21 at 13:00
  • https://stackoverflow.com/questions/5874652/prop-vs-attr was an excellent read. – user1944491 May 03 '21 at 18:15

0 Answers0