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>
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.