CODEWITHSUNDEEP
javascript
amphibient
amphibient

Reputation: 31238

How to invoke JavaScript function when popup is open but not using JavaScript?

I have a popup defined in my parent page as a PrimeFaces p:dialog. It is opened using PF('myDialog').show().

I also have a simple JS function that updates a span in the popup when a textarea within has an onkeyup event:

<p:inputTextarea id="comment" ... onkeyup="textCounter(this,'charactersRemaining',1000);"/>

That refreshes the charactersRemaining span on every text area change, meaning there is no remaining count shown before you've hit a key in the UI component. However, I would like to trigger the textCounter JS function also when the popup loads for the first time so that it's always there. I am asking for a way to do this as I am relatively new to JS.

In short, how do I say, run me textCounter('commentField','charactersRemaining',1000); when myDialog is opened?

Upvotes: 1

Views: 178

Answers (1)

Jasper Giscombe
Jasper Giscombe

Reputation: 313

You could just call textCounter('commentField','charactersRemaining',1000); after PF('myDialog').show(); But if you want to you could trigger an event and consume it like this:

HTML <div id='myDialog'>This is my dialog</div>

JAVASCRIPT

$( document ).ready(function() {    
   (function ($) {
     $.each(['show', 'hide'], function (i, ev) {
       var el = $.fn[ev];
       $.fn[ev] = function () {
        this.trigger(ev);
        return el.apply(this, arguments);
       };
     });
   })(jQuery);



   $('#myDialog').on('show', function() {
     alert('Show event fired');
     textCounter('commentField','charactersRemaining',1000);
   });

   $('#myDialog').on('hide', function() {
     //Do something when myDialog is hidden
   });

   $('#myDialog').show();

});

Upvotes: 1

Related Questions