Question

I’m trying to initialize a div with a text area inside of it on load. I populate the the text area with data still during the load process. Once all elements are created I go out and find the elements and use “appendTo” to add another set of dynamic elements all during the load process.

Here’s where the first set of elements load…

 j$(function() {

                   for(var i = 0; i < Survey_result.length; i++){

                    j$('<div id="QDiv'+Survey_result[i].Id+'">'+
                          '<div id="'+Survey_result[i].Survey_Question__r.Question_Input_Type__c+'">'+
                             '<textarea cols="130" id="Q_'+Survey_result[i].Survey_Question__c+'"  readonly="true" name="p_Q">'+Survey_result[i].Survey_Question__r.Question__c+'</textarea>'+
                          '</div>'+   
                      '<div>').appendTo('#SurveyBuilder_div');
                      QelId='#Q'+i;
                   }

Here is where I try to add the child elements but they aren’t loading. Is it because it’s not seeing the parent element id?

   if(QuestionType=='PickList'){

                               j$('<div id="ADiv'+QId+'">'+
                                  '<select id="selAnswer'+i+'" size="1">'+      
                                  '</select>'+
                                   '</div>').after(MainDiv);
                                   bp='#ADiv'+QId;

                                 j$(Answer_result).each(function(){

                                           j$(' <option value = "'+Answer_result[b].Id+'">'+Answer_result[b].Answer__c+'</option>').after(bp);
                                           b++;
                                 });                   

                        }else if(QuestionType=='Radio'){
                               j$('<div id="ADiv'+QId+'">'+
                                  '</div>').appendTo(MainDiv);

                                   bp='ADiv'+QId;

                                j$(Answer_result).each(function(){
                                       j$('<input type="radio" id="Radio_CtrlType'+b+'" value="'+Answer_result[b].Id+'" name="ctrlSel'+i+'"/>'+
                                          '<label for="Radio_CtrlType'+b+'">'+Answer_result[b].Answer__c+'</label>').appendTo(bp);
                                           b++;
                                 });
                         }else if(QuestionType=='Checkbox'){
                                j$('<div id="ADiv'+QId+'">'+
                                   '</div>').appendTo(MainDiv);
                                    bp='ADiv'+QId;

                                j$(Answer_result).each(function(){
                                      j$('<input type="checkbox" id="Checkbox_CtrlType'+b+'" value="'+Answer_result[b].Id+'" name="ctrlSel'+i+'"/>'+
                                         '<label for="Checkbox_CtrlType'+b+'">'+Answer_result[b].Answer__c+'</label>').appendTo(bp);
                                         b++;
                                }); 
                         }else if(QuestionType=='Textbox'){
                              j$('<div id="ADiv'+QId+'">'+
                                 '</div>').appendTo(MainDiv);
                               bp='ADiv'+QId;
                               j$(Answer_result).each(function(){
                                     j$('<input type="text" id="Textbox_CtrlType'+b+'" value="'+Answer_result[b].Id+'" name="ctrlSel'+i+'"/>').appendTo(bp); 
                                    b++;
                               });
                         }            

Answer 1

When modifying content on a page, you need to

1) make sure the page is already loaded (don’t do anything until after domready, which you are doing correctly, and

2) If you still don’t see your content, most likely your target element selector is returning nothing. To check this, do a console.log($('#yourselector').length);If length is 0, it’s not finding anything on the page to add to.

(btw, console.log(); logs to the developer console, such as is available in all major browsers these days)