2

To simplify, this code runs as part of an async function that loads in content based on an api response.

Based on whether or not the api returns a "next page token" (for basic prev/next page pagination purposes) it adds a data-prevpage or data-nextpage attribute to the button with the proper value returned by the api. Such that this 

<button class='btn'>Click</button>

will become 

<button class='btn' data-nextpage="something">Click</button>

After it adds (or doesn't add the data attribute, depending on if the api returned such information) the last piece of the function should enable/disable the button if it has/doesn't have the data attribute.

The issue is, this code works - almost. Instead of adding the attribute disabled, it adds the attribute disabled="" to the button. Meaning it looks like this: 

<button class='btn' data-nextpage="something" disabled="">Click</button>

instead of 

<button class='btn' data-nextpage="something" disabled>Click</button>

I've read through several links here regarding disabling not working but they deal with other languages, Xamarin, or people putting the boolean values in as strings. Can anyone explain why this code isn't setting disabled as true or false (present in html or not) but as disabled="", or if I missed a page pertaining to my question, a link to it?

Once again, as I said, this code works but inserts the wrong thing into the html element and the question of why is what I'm here for. Thanks for any responses!

    //Function does other api stuff here


    // Store prev page token/next page token in a data attribute in respective button
    if (data.prevPageToken !== undefined) {
      this.prevBtn.setAttribute('data-prevpage', data.prevPageToken);
    }
    if (data.nextPageToken !== undefined) {
      this.nextBtn.setAttribute('data-nextpage', data.nextPageToken);
    }

    // if prev button has attribute, set disabled to false. Otherwise, the button is disabled
    if (this.prevBtn.hasAttribute('data-prevpage')) {

    // console.log(this.prevBtn.hasAttribute('data-prevpage')) returns false on first call, ideally making button disabled and unclickable

      this.prevBtn.disabled = false;
    } else {
      this.prevBtn.disabled = true;
    }

    // if next button has attribute, set disabled to false. Otherwise, the button is disabled
    if (this.nextBtn.hasAttribute('data-nextpage')) {

// console.log(this.nextBtn.hasAttribute('data-prevpage')) returns true on first call, ideally making disable=false and button clickable

      this.nextBtn.disabled = false;
    } else {
      this.nextBtn.disabled = true;
    }
Barmar
  • 741,623
  • 53
  • 500
  • 612
Bendystraw
  • 45
  • 1
  • 1
  • 4
  • 4
    `disabled=""` has the same meaning as `disabled` or `disabled="disabled"`. That's how boolean attributes work. – Barmar Mar 19 '20 at 00:37
  • See https://stackoverflow.com/questions/4139786/what-does-it-mean-in-html-5-when-an-attribute-is-a-boolean-attribute – Barmar Mar 19 '20 at 00:39
  • Well, allow me to say, I feel... ashamed by the fact that I did not recognize that. Thank you for clarifying my stupid mistake. I think I also misunderstood that because my styles overrode the default "disabled" styles that would have been applied and I was looking for those to happen as well. – Bendystraw Mar 19 '20 at 00:47

1 Answers1

1

If you want to use vanilla javascript, then you should use these functions: 

element.setAttribute("disabled", "disabled");
// this will disable an html element.

element.removeAttribute("disabled");
// this will remove the disabled attribute, and re-enable the control.

If you are willing to use jQuery then you can use boolean expressions for disabled

$("element").prop("disabled", true);
$("element").prop("disabled", false);

Hope this helps you out...

Glenn Ferrie
  • 10,290
  • 3
  • 42
  • 73