Can I load an external js file in the listener node of a dialog | Community
Skip to main content
Naveen_AEM_dev
Naveen_AEM_dev
New Participant
February 15, 2016
Solved

Can I load an external js file in the listener node of a dialog

  • February 15, 2016
  • 3 replies
  • 2046 views

In some scenarios the dialogs of complex components have multiple listener nodes listening on various events. At times, the JS code in the listeners gets pretty complex and since this code is embedded in the listener node, it is very difficult to debug and troubleshoot issues.

Is there any way of writing the JS code for the listener in an external JS file and then including this file in the event changed property of listener node?

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

    Hi 

    Please have a look at this post,

    Link:- http://stackoverflow.com/questions/26192217/how-to-make-textfield-required-using-listeners

    Dialog:

    <type jcr:primaryType="cq:Widget" fieldLabel="Type" name="./type" type="radio" xtype="selection"> <options jcr:primaryType="cq:WidgetCollection"> <email jcr:primaryType="nt:unstructured" text="Email" value="email"/> <url jcr:primaryType="nt:unstructured" text="Url" value="url"/> </options> <listeners jcr:primaryType="nt:unstructured" selectionchanged="function(field,value) { MyDialog.setRequired(field,value); }"/> </type>

    Listener JavaScript:

    MyDialog.setRequired = function(field,value) { var dialog = field.findParentByType("dialog"), email = dialog.getField('./email1'); if('url' == value) { email.allowBlank = true; }else{ email.allowBlank = false; } };
     

    I hope this will help you.

    Thanks and regards

    Kautuk Sahni

    3 replies

    kautuk_sahni
    kautuk_sahniAccepted solution
    Employee
    February 15, 2016

    Hi 

    Please have a look at this post,

    Link:- http://stackoverflow.com/questions/26192217/how-to-make-textfield-required-using-listeners

    Dialog:

    <type jcr:primaryType="cq:Widget" fieldLabel="Type" name="./type" type="radio" xtype="selection"> <options jcr:primaryType="cq:WidgetCollection"> <email jcr:primaryType="nt:unstructured" text="Email" value="email"/> <url jcr:primaryType="nt:unstructured" text="Url" value="url"/> </options> <listeners jcr:primaryType="nt:unstructured" selectionchanged="function(field,value) { MyDialog.setRequired(field,value); }"/> </type>

    Listener JavaScript:

    MyDialog.setRequired = function(field,value) { var dialog = field.findParentByType("dialog"), email = dialog.getField('./email1'); if('url' == value) { email.allowBlank = true; }else{ email.allowBlank = false; } };
     

    I hope this will help you.

    Thanks and regards

    Kautuk Sahni

    Kautuk Sahni
      Mani_kumar_
      Mani_kumar_
      New Participant
      February 15, 2016

      Hi 

      As Jitendra said create a clietlib folder and listener as below

      <listeners
              jcr:primaryType="nt:unstructured"
              beforesubmit="function(dialog){return javascriptObject.beforeSubmit(dialog);}"      />

      External JS:

      var  javascriptObject= javascriptObject|| {};

      javascriptObject.beforeSubmit = function (dialog) {
          Write here your functionality
        
      };

       

        Jitendra_S_Toma
        Jitendra_S_Toma
        New Participant
        February 15, 2016

        Yes, All you need to do is create a clientlib with these javascript functions and include them in the header (Just make sure, functions are available before lister invoke them).

        Let me know if you face any issue.

        ---Jitendra

          Terms & ConditionsAccessibility statement

          Loading footer...