CODEWITHSUNDEEP
javascriptjqueryhtml
Kishor Prakash
Kishor Prakash

Reputation: 8151

How to Detect Dynamically generated ROWS in TABLE

I have a Table and its rows are created dynamically.
I want to prompt a message [alert] when the tr or td is generated.

At first it will be like

<table class="tab"></table>

After that the rows will be added dynamically.

<table class="tab">
 <tr class="row">
  <td> Message1</td>
  <td> Message2</td>
 <tr>
</table>

The Class names for Table and TR will always same but message in TD will change.
I want to display the messages in ALERT when TD is added.

EDIT
It seams my question is not clear. I'm trying to implement this JSF thing from following link
CLICK HERE

Its a File Upload thing,when you upload wrong file then it will throw a error message in Table row, I want to alert a message when it happens.

enter image description here

ANSWER
Hello Every one Thanks for All of you answers. I got the Answer.

$(document).bind('DOMNodeInserted', function(e) {
    var element = e.target;
    if($(element).is("tr.tab")) {
    alert("New ROW ADDED");
    }           
});

Upvotes: 3

Views: 3986

Answers (5)

CraftyFella
CraftyFella

Reputation: 7568

I think the solution to this can be simplified somewhat by using jqueries .on() event

Using this allows you to specify the event and selector in one statement:

$(document).on( "DOMNodeInserted", "tr.row", function() {
  alert( "New ROW ADDED" );
});

Here's a working JSFiddle

Upvotes: 2

Daniel Stejskal
Daniel Stejskal

Reputation: 63

Extend the uploader script to report this by its own by event callback - the best way for me.

Upvotes: 1

Marco Panichi
Marco Panichi

Reputation: 1185

I suggest you a solution based on this discussion: How to detect new element creation in jQuery?

$(document).ready(function(){
    $(document).bind('DOMSubtreeModified',function(){
        $('.template-upload.ui-state-error').each(function( index ){
            alert( "The file '"+$(this).find('.name').html()+" is not valid" );
            $(this).find('.ui-icon-cancel').click();
        });
    })
});

Unfortunally I'm not a jquery expert, so check my code and do your experiments. Let me know if you need more help.

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can use setinterval and write a function in such a way that if html for table is changed. then find the appended td and alert the message for user.

var previous_tr_html='';
setInterval(function() { $checkError(); }, 1000);

function checkError(){
  var current_tr_html=$('.row').html();
  if(previous_tr_html!=current_tr_html){
//new td added
  newerrortds=$('.row').find('td:not(.displayed)');
  $(newerrortds).each(function(){
  alert($(this).html();)
//add already displayed error class to current td
  $(this).addClass('displayed');
});
//change previous html value to current
 previous_tr_html=current_tr_html;
}

}

Upvotes: 1

Tim Abell
Tim Abell

Reputation: 11881

Take a look at DOM Events

https://en.wikipedia.org/wiki/DOM_events

"DOMNodeInserted - Fires when a node has been added as a child of another node"

Failing that, you could poll the DOM with a timeout, and add a class to everything you've already processed

setatimeout...
function timeouthandler (
  var newitems = $.(".tab td").not('.processed');
  if newitems {
     alert('new stuff!');
     newitems.addClass('processed')
  }
  setanothertimeout...
)

this is off the top of my head and needs some work. Feel free to edit this answer with something that actually works ;-)

Upvotes: 1

Related Questions