Question

1. My asp.net page loads with one text box and one button and no hidden element at this point.

2. On button click it does processing and creates number of divs (Panel) based on result. Divs will have result in them as Pass, Fail, Neutral, etc. This happens by asp.net asynchronous web service call without any page refresh

3. Now after the divs are created I want to analyze the content of these divs using jQuery and add particular attributes to those divs. eg Div Background color as Green for Pass, Amber for Neutral etc. Would do more processing as required in future.

4. I can do this in asp.net only, but i want to keep the div highlighting thing separate from asp.net code and jquery will be more suitable for that.

5. (Question) Any suggestion how to trigger the jquery method after those divs are created on the webpage.

Edit 1: I am trying this, but not working.

$(document).on("create", '[id*="GridComp"]', function () { 
    alert("Created 1");
    // change background color of divs or any other thing
});

Answer 1

If those divs Id attribute contains “GridComp”. Then you can use setInterval method and keep checking the existence of divs. If found then style those divs as per the contained text and clear interval.

var intervalId;
$(function(){
    intervalId = setInterval(styleDynamicDivs, 500);
});

function styleDynamicDivs(){

    if($('div[id*="GridComp"]').length > 0){
        clearInterval(intervalId);

        $('div[id*="GridComp"]').each(function(){
            var result = $.trim($(this).text().toLowerCase());
            if(result == "pass"){
                $(this).css('background-color', 'Green');
            }
            else
            {
                $(this).css('background-color', 'red');
            }
        });
    }
}​