Pamela,
I'm not quite sure why your research produced that answer, it is incorrect. I use dynamically loaded content all the time and apply javascript events to various tags by ID. THere is one caviot .. you cannot have 2 tags with the same ID. ID's are required by the SPEC to be UNIQUE
While I understand that your examples don't use JQuery, you may wish to try this example:
<html>
<script src="js/3rdparty/jquery-1.10.2.min.js"></script>
<body>
</body>
<script id="template" type="text/text">
<a href="javascript:void());" id="row_[?= t ?]" value="[?= t ?]">Hello World - [?= t ?]</a><p>
</script>
<script>
var szTemplate = $("#template").html ();
for (var t=0; t<10; t++)
{
// there is a regex expression that can replace all instances of T in
// a string, I have been unable to get it to work with square brackets.
szNew = szTemplate.replace ("[?= t ?]", t);
// replace first instance of T in template
szNew = szNew.replace ("[?= t ?]", t);
// replace 2nd instance of T in template
szNew = szTemplate.replace ("[?= t ?]", t);
// replace 3rd instance of T in template
$("body").append ( szNew );
$("#row_"+t).click (onClick);
}
function onClick()
{ window.alert ( $(this).attr("value") ); }
</script>
</html>
Mike,
On 10/13/2013 1:03 PM, pamelapdh@aol.com wrote:
I'm not quite sure why your research produced that answer, it is incorrect. I use dynamically loaded content all the time and apply javascript events to various tags by ID. THere is one caviot .. you cannot have 2 tags with the same ID. ID's are required by the SPEC to be UNIQUE
While I understand that your examples don't use JQuery, you may wish to try this example:
<html>
<script src="js/3rdparty/jquery-1.10.2.min.js"></script>
<body>
</body>
<script id="template" type="text/text">
<a href="javascript:void());" id="row_[?= t ?]" value="[?= t ?]">Hello World - [?= t ?]</a><p>
</script>
<script>
var szTemplate = $("#template").html ();
for (var t=0; t<10; t++)
{
// there is a regex expression that can replace all instances of T in
// a string, I have been unable to get it to work with square brackets.
szNew = szTemplate.replace ("[?= t ?]", t);
// replace first instance of T in template
szNew = szNew.replace ("[?= t ?]", t);
// replace 2nd instance of T in template
szNew = szTemplate.replace ("[?= t ?]", t);
// replace 3rd instance of T in template
$("body").append ( szNew );
$("#row_"+t).click (onClick);
}
function onClick()
{ window.alert ( $(this).attr("value") ); }
</script>
</html>
Mike,
--
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/6746 - Release Date: 10/13/13
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.