Modify dynamically added elements on load using jQuery

Question

I am converting old jQuery version 1.2.6 code that we use with our portal (Liferay). Previously we used the livequery plugin to add events to dynamically added DOM objects. This is now a feature built-in to jQuery (the on() function). I have that figured out.

However, there was also a feature in livequery that allowed us to modify these dynamically loaded objects on load (ie not tied to certain events):

$(".myTextBox").livequery(function() { $(this).val("initial value"); });

I do not control the code when the ajax portlets get loaded in our portal, so I can't modify the content when created.

I've tried a few things to no avail. Here is the one that I thought would work, but doesn't. I added jQuery to my portlet so that it loads at the bottom of the portlet HTML and I added jQuery to the file.

<footer-portlet-javascript>myscript.js</footer-portlet-javascript>

...

$(document).ready(function() {
    $(".myTextBox").val("initial value");
});

This doesn't work. If I write an alert($(".myTextBox")) it shows an object, but alert($(".myTextBox").val()) is undefined.

Any ideas of how I can get working?

Answer 1

From what I read, you want to wire up events to items that have not been necessarily added to the DOM yet at the time you're wire-up function fires. I also read that you are upgrading to a more recent version of jquery.

If you're using jquery 1.7+, the .on() method should provide this capability for you. If you're using something between 1.2.6 and 1.7, you'll need to use the .live() method to achieve this behavior.

$(".myTextBox").live('click', function(e){
    console.log(this.value);
});

Optionally, you may want to mix in some AUI to do your wiring-up on the Liferay 'allPortletsReady' published event. Here is some code we've used to wire-up items once all portlets are finished loading:

//This is the AUI version of on document ready
//  and is just used to form a 'sandbox'(clojure)
//  around our code so the AUI object A is not modified
AUI().ready(function(A){
    //This essentially subscribes the provided function
    //  to the Liferay custom event 'allPortletsReady'
    //  so that when it's fired, the provided function
    //  will be called.
    Liferay.on('allPortletsReady', function(){
        //Do your initialization here
        myCustomPortletManager.init();

        //OR
        A.one("#mySelector").on('click', function(e){
            //do your work here
        });
        //Etc.
        //NOTE: jQuery ($) is valid inside this sandbox for our
        //instance.
    });
}):

Answer 2

First, you probably want to use an ID instead of a class in this case to ensure you are referring specifically to a single element.

Where your alert is will determine whether this code is executed before or after. This would explain that you return an object, but no value. Put it after the value assignment, either on the page or temporally.

The following works just fine ( http://jsfiddle.net/4WHyE/1/ ):

<input id="myid"/>

$('#myid').val('some value')
alert($('#myid').val())    

If you must use class, then it depends on whether you want to set each class element individually or all to the same value. If you wish them all to have the same value, simply replace id with class in the above example:

<input class="myclass"/>
$('.myclass').val('myvalue')

If you wish to set unique values, you can simply iterate through them ( http://jsfiddle.net/4WHyE/2/ ):

$('.myclass').each(function(index){
    $(this).val('value' + index)
});

Answer 3

Well you can setInterval to iterate checking new element.

setInterval(function(){

   var $ele = $('.myTextBox:not(.loaded)'); // find new element that not loaded
   if($ele.size() > 0){
      $ele.each(function(){
         // do stuff with elements
         $(this).val("initial value");
      }).addClass('loaded'); // flag this element is loaded
   }

}, 200); // set delay as you wish

by the way, I'm not recommended this.