Touch UI dialog listeners | Community
Skip to main content
Singaiah_Chintalapudi
Singaiah_Chintalapudi
Level 7
June 6, 2016

Touch UI dialog listeners

  • June 6, 2016
  • 2 replies
  • 14714 views

Hi,

I am trying to write a simple listener for Touch UI dialog. I have two text fields and when I open the dialog, I want to hide one of the text field. I have couple of articles and they just explained how to show some alerts/email validations. 

https://helpx.adobe.com/experience-manager/using/creating-touchui-validate.html

Below is my code:

(function ($, $document) {
    "use strict";
    $document.on("dialog-ready", function() {
        $(window).adaptTo("foundation-ui").alert("Open", "Dialog now open, event [dialog-ready]");
        var $form = $(this).closest("form.foundation-form"),
            title = $form.find("[name='./jcr:Heading']"),
            message, clazz = "coral-Button ";
        title.hide();
    });

})($, $(document));

But the hide is not working. Can anyone help me to resolve this issue?

Thanks.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

smacdonald2008
smacdonald2008
Level 10
June 6, 2016

As most of the logic when using Touch UI Dialog is JQuery - have you tried to hide the field using JQuery:

  $('#myfield').hide();

Singaiah_Chintalapudi
Singaiah_ChintalapudiAuthor
Level 7
June 6, 2016

smacdonald2008 wrote...

As most of the logic when using Touch UI Dialog is JQuery - have you tried to hide the field using JQuery:

  $('#myfield').hide();

 

Hi Scott,

What is the value of #myfield? widget name? I have tried with the widget name and its not working. Also, I've created the client lib for validation under a specific component as mentioned in the above article. However, this validation is triggering/applying for all components.

Ex: If I put alert then this alert is popping up for every component.

Thanks.

smacdonald2008
smacdonald2008
Level 10
June 6, 2016

I got this to work. Assume we have this dialog struc:

Now the TextField in the dialog is named title. I have used JQuery selector to get it and hide it:

    $document.on("dialog-ready", function() {

        $(window).adaptTo("foundation-ui").alert("Open", "Dialog now open, event [dialog-ready]");

         $("[name='./title']").hide() ; 

         

    });

 

Dialog looks like:

 

 

The text field is hidden, SO you can manipulate touch ui via standard JQuery 

Hope this helps. 

Kunal_Gaba_
Kunal_Gaba_
June 6, 2016

Try either of the following-

title.setAttribute("style","display:none") OR $form.find("[name='./jcr:Heading']").hide()
Terms & ConditionsAccessibility statement

Loading footer...