Hi.
In my script there are two document.write lines. The problem is that when I call it from my ajax page it replaces the entire body and the page disappears. Is there a way to call this in an ajax page?
<script type="text/javascript">
for (var i=0; i<DropTotal; i++){
document.write('<div id="Drop' + i + '" class="DropLine" align="center"> </div>');
document.write('<div id="Drop' + i + '" align="center"> </div>');
}
</script>
Jump to PostOblo10,
document.write() can only be used during the document load phase.
Any attempt to use document.write() after the
window.onloadevent has fired (or thereabouts) will cause the whole document (doctype, head, body - EVERYTHING) to be overwritten, as you have seen.For this reason, document.write() is not …
Jump to Post
id="D1"is legal but more than one element with the same id is not a good idea.Either omit ids completely or work with your
'<div id="Drop' + i + '" ... 'approach.Also, remember that your appended divs won't render unless they have some content …
Oblo10,
document.write() can only be used during the document load phase.
Any attempt to use document.write() after the window.onload event has fired (or thereabouts) will cause the whole document (doctype, head, body - EVERYTHING) to be overwritten, as you have seen.
For this reason, document.write() is not the right approach to modifying a rendered document.
Use DOM methods instead - eg.
document.createElement() ,element.innerHTML = String ,element.appendChild(element) .These and other methods are well documented on the web so I won't try to provide detail here.
Airshow
I have written the function as below. The first div works and prints but the second div does not write into yourRequiredDiv2.
but document.write('<div id="D1" ></div>') ; is working
Does a div in ajax not allow an id name like D1?
<div id="yourRequiredDiv"></div>
<div id="yourRequiredDiv2"></div>
<script type="text/javascript">
var topad = $('#topAd');
for (var i=0; i<DropTotal; i++){
$('#yourRequiredDiv').append( '<div id="Drop' + i + '" class="DropLine" align="center"> </div>' );
}
for (var i=0; i<Segments.length; i++){
$('#yourRequiredDiv2').append( '<div id="D1" ></div>' );
}
</script>
id="D1" is legal but more than one element with the same id is not a good idea.
Either omit ids completely or work with your '<div id="Drop' + i + '" ... ' approach.
Also, remember that your appended divs won't render unless they have some content or some height/width enforced on them.
Airshow
I have changed it as below but it is still not working
The javascript code has a onload function in body. Is there a way to implement this in ajax? The code is as follows, thanks for your help.
<script type="text/javascript">
function TimerStartUp(){
setTimeout('StartUp()', 300);
}
</script>
<body onLoad="TimerStartUp()" id="TheBody">
...
for (var i=0; i<Segments.length; i++){
$('#yourRequiredDiv2').append( '<div id="D' + i + '" class="CardStyle" onmousedown="beginDrag(event, ' + i + ')"></div>' );
}
Is there a way to implement this in ajax?
Sorry, the question doesn't make sense.
An onload handler is a javascript function. As with any function, it can make an ajax request but cannot in itself be "implemented in ajax".
A better way to attach an onload handler is (typically as the last javascript statement in the document's <head>):
onload = funtion(){
setTimeout('StartUp()', 300);
};Then, remove the attachment from the body tag.
<body>for (var i=0; i<Segments.length; i++){
$('#yourRequiredDiv2').append( '<div id="D' + i + '" class="CardStyle" onmousedown="beginDrag(event, ' + i + ')"></div>' );
}
Inserted divs with no contents and no height, width, margin, padding or border will exist in the DOM but will be (initially) rendered as zero-dimensioned nothings - not even a pin-prick.
The divs still have :
.CardStyle {
width: 20px;
height: 20px;
background-color: #FFCC00;
}Airshow
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.