1

I need to remove the "disabled" property from a button. I have been trying to achieve this via jQuery and I know what exactly to do ($(.button).removAttr("disabled")), the only problem is that this button is deep inside the hierarchy and I am not able to grab it through my code. Inside my scss file, I am able to work with this element by doing something like this:

.parent ::ng-deep .child {
  margin-left: 1px;
}

Though when I try $(.parent ::ng-deep .child).removAttr("disabled") in my jQuery code I get a syntax error since I believe ::ng-deep is not allowed in jQuery. Is there a way I can mirror the functionality of ::ng-deep in my jQuery code?

Edit: I am using Alfresco Development Framework(ADF). This is the adf-viewer component to be precise. the html code looks something like this:

enter image description here

I am not able to grab the highlighted div (adf-viewer-container) which is a child of adf-viewer element. I started off from a parent at a much higher level and could trace my way upto adf-viewer. The button I am targeting is deep inside the highlighted div.

In the scss file this works:

.inner-layout .inner-layout__content adf-viewer ::ng-deep .adf-viewer-container {
     // do something
}

P.S. Since this button is a part of a third-party component I do not have the ability to manipulate the HTML file. I have been using the developer tools to look at hierarchy. I also read about shadow DOM, but parent.shadowRoot is null. The regular jQuery operator '>' didn't work either.

Any help is highly appreciated

Rutraaj
  • 19
  • 3
  • What is the third-party lib you're using. Can you show the html markup also please – C.OG Dec 27 '19 at 15:45
  • Question edited @C_Ogoo – Rutraaj Dec 27 '19 at 15:57
  • @Rutraaj - If the `html` is embedded inside `shadowRoot`, use `:host(selector)`, to select the element. See - https://developer.mozilla.org/en-US/docs/Web/CSS/:host(). – random Dec 27 '19 at 16:03
  • @random I need to do this in a jQuery code. I believe :host(selector) is used for css? – Rutraaj Dec 27 '19 at 16:09
  • Isn't there a property ( like `[allowDownload]="true"` ) provided in alfresco to do this, since setting enabled/disabled button state sounds like basic component functionality. https://www.alfresco.com/abn/adf/docs/core/components/viewer.component/ I'm not really a fan of using jquery to hack functionality into frameworks without knowing 100% sure the framework doesn't do this out of the box. – Shilly Dec 27 '19 at 16:10
  • Please include code as text, not as a picture of text. People with visual impairments and search engines can't read the code in the image. – Heretic Monkey Dec 27 '19 at 16:13
  • @Shilly Right. It does have `[allowThumbnails]` options and I have set it to true already. This worked fine out of the box in ADF version 2.3. I updated it to 3.5 and it has stopped working since. – Rutraaj Dec 27 '19 at 16:15
  • @Rutraaj - Did you tried `$(':host selector')`? see - https://github.com/jquery/jquery/issues/1784. This link might also be useful to you - https://stackoverflow.com/questions/21218859/can-i-access-the-shadow-dom-using-jquery. – random Dec 27 '19 at 16:15
  • @random I see your point now. Sorry I am new to this. Yes I tried `$(':host .adf-viewer-container')` and it didn't work either. – Rutraaj Dec 27 '19 at 16:21
  • @Rutraaj `[allowThumbnails]` is still in the docs, so try to find out why it isn't working anymore. Alfresco has rather long upgrade docs, so you might be able to find what broke the thumbnails there: https://www.alfresco.com/abn/adf/docs/upgrade-guide/upgrade26-30/ My hunch would be that it has something to do with the changes to file permissions they talk about. I know, this is more work that just using JQuery to do whatever, but the guy updating your project in a year, will be thankful, especially when you're working with complex angular components. – Shilly Dec 27 '19 at 16:24

0 Answers0