Re: Can't getElementById on document.createElement dynamically

Pam,

Popup Window ... The term actually now refers to two different types of visuals.  One is an actual window, and the other is a DIV tag that appears above the content of the current page.  To write a form dynamically between browser Windows may require using JavaScript calls between them - similar to calling frames. I can talk more about that, if that is the version you are trying to build.  What follows is for a popup DIV.

For this example, I'm assuming you mean a DIV that appears above the content.  There are 4 CSS values that affect this ... position : absolute;  visibility : hidden; display : none, and z-index : 50 or higher.  You might also need to set left, top, width and height as well.

To make the DIV appear change visibility : visible; display : block;

Using the previous example ... I used a SCRIPT tag to contain HTML.  I would suggest that you use this example for your site as well. Create SCRIPT tags that contain your forms, and then copy the script into the popup DIV as needed.

var szTemplate = $("#template_form_1").html();
$("#popup").html (szTemplate);
$("#popup").css ("visibility ", "visible").css ("display ","block");

OR

put each form in a hidden DIV tag, and then make the DIV appear where you need it.

$("#form_1").css ("visibility ", "visible").css ("display ","block");


<style>
.hiddenDIV
{
    position : absolute;

    display : none;

    width : 100%;
    height : 100%;

    z-index : 50;

    float : none;
    clear : both;
}
</style>

<div id="form_1" class="hiddenDIV">[content]</div>

I hope this helps,

Mike,

PS .. if you need to disable all content below the popup DIV you need to create another div, with a z-index below the popup div.  This DIV has to cover the entire visible window, and usually has a 50 or 75% dithered white background to shadow the content blow the working DIV.  Then the popup DIV sits on top of that.

On 10/13/2013 4:34 PM, pamelapdh@aol.com wrote:

Hi Mike:

Yes I just tried it using jquery and I'm not getting any errors.  I do understand that you cannot have the same id. I thought this was the reason
I couldn't get my dynamic form to popup but since  the id its not the problem. I'm back to square one.


Do you have any idea how I can create a dynamic form that has a pop window I'm working on it no luck.
I can write regular HTML with no problem this DOM manipulation is a bit more tricky.  I'm getting there I
believe  this is the last piece I'm missing.  You know how development is there is always something that arises.

This project has so many forms that I have to create and then write more code for button manipulation.
I have the button for the form to pop up which I do with a button.onclick = funciton(){
                                                                                                                        }
Its calling my function that creates and appends everything, its just that no form pops up

alert("Appending Divs");
   
    var regupdateForm=document.createElement('form');
    regupdateForm.name ="dynamicform";
    regupdateForm.id ="regupdate";  
    regupdateForm.method='';
    regupdateForm.action='';
     var updateForm = $(document.getElementById('regupdate'));
    regupdateForm.appendChild(updateFrom);
   
    regupdateForm.setAttribute("style"," width:300px;  height:200px; ");
    regupdateForm.setAttribute("target", "_blank");


Thank You For Your Response.
And
Thanking you in advance.

PH
On Sunday, October 13, 2013 3:03:13 PM UTC-5, pame...@aol.com wrote:

 
On my research it points out that you can not get element by id on an element created dynamically is there anyway around it?
  Here is  what I'm trying to do.  I'm aware that I don't have the createElement(select) in yet.  I was trying to get things working first.

 /**************Create Form******************/
 
 var element = document.createElement('div');   //parent
 element.id = "updateCCdialog";
 
 
                 
 
   var parent= element.parentNode;

   
 
    element.innerHTML = "Update Credit Card";
    element.style.height = "20px";
    element.style.width = "300px";
    element.setAttribute("style"," border:1px solid #06478c;");
  
   
    alert("Debugging");
   
   
    var nextDiv = document.createElement('div');
    nextDiv.className ="dialogWrapper";
   
 
   
    alert("Appending Divs");
   
    var regupdateForm=document.createElement('form');
    regupdateForm.id ="";  
    regupdateForm.method='';
    regupdateForm.action='';

   

   
    element.appendChild(nextDiv);
    nextDiv.appendChild(regupdateForm);
   
    alert("Start of form creation");
   
   
    var form_Msg = document.createElement('p');
    var msg_Node =document.createTextNode("Are you sure you want to update this card?");
   
    var formLabel =document.createElement('label');
    formLabel.style.font ="red";
    formLabel.setAttribute("for", description);
    formLabel.innerHTML = "Card Description: ";
   
    form_Msg.appendChild(msg_Node);
    form_Msg.appendChild(formLabel);
 
   
    alert("Start of form creation 0");
   
    var formInput = document.createElement('input');
    formInput.name = "discription";
    formInput.setAttribute('value', des);
    //formInput.value ="";//getvalue from document.creditCardRegister.description.value;
    formInput.type ="text";
    formInput.required ="true";
   
    var formLabel2 = document.createElement('label');
    formLabel2.style.font ="red";
    //formLabel2.setAttribute("for", expiration);
    formLabel2.innerHTML = "Expiration: ";
   
    formInput.appendChild(formLabel2);
    form_Msg.appendChild(formInput);
    nextDiv.appendChild(form_Msg);
   
    alert("Start of form creation2");
   
    var formselectMonth =  document.createElement('select');
    formselectMonth.id = "expirationMonth";
    formselectMonth.className = "expirationMonth";
    formselectMonth.setAttribute("style"," width:80px;  align:left; ");
     for(var i = 1; i <= 12; i++){
       var option = document.createElement('option');
         option.setAttribute('value','0'+i);
         option.appendChild(document.createTextNode('0' + i));
         //formselectMonth.appendChild(option); 
        }
   
    alert("Start of form creation3");
   
   
    var nnextDiv = document.createElement('div');
    nnextDiv.className ="UpdateCreditCardActions";
    var formbuttonUpdate = document.createElement('input');
    formbuttonUpdate.type= "submit";
    formbuttonUpdate.value="Update";
   
    var formbuttonCancel =document.createElement('input');
    formbuttonCancel.type="reset";
    formbuttonCancel.value ="Cancel";
   
    alert("Is this appending");
   
    nnextDiv.appendChild(formbuttonUpdate);
    alert("Is this appending0");
    nnextDiv.appendChild(formbuttonCancel);
     alert("Is this appending2");
 
     nextDiv.appendChild(nnextDiv);
   
    
   
    var formselectYear = document.createElement('select');
    formselectYear.id="experationYear";
    formselectYear.name="expirationYear";
    formselectYear.setAttribute("style"," width:50px;  align:left; ");
     for(var i = 2013; i <= 2024; i++){
            var option = document.createElement('option');
            option.setAttribute('value','0'+i);
            option.appendChild(document.createTextNode('0' + i));
             //formselectYear.appendChild(option);
        }   
  
   alert("Start of form creation4");
  
  
  
  
   parent.insertBefore(nextDiv, element);  //not working never hits my last alert
  
   alert("Am I making it to the  end")
 
    };

Thanking you in advance
PH

--
You received this message because you are subscribed to the Google Groups "JavaScript Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to javascript-information+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

No virus found in this message.
Checked by AVG - www.avg.com
Version: 2013.0.3408 / Virus Database: 3222/6747 - Release Date: 10/13/13