|
JavaScript - Ajax Content And Innerhtml
Hi all,
I have a javascript+CSS based popup (? by toggling display property), which works well. The popup <div> consist of an <h3>, <img> (serves as close button) and a big <ol> (This markup is in a seperate file and is about 2KB) I need to bring the content via Ajax rather than statically placing it inside the document. I'm very reluctant to use innerHTML, as it's non standard and I may lose the "close" action from the img(mentioned above), which would be there otherwise. My other option is to save the content(without any html tag) in a php array and return through Ajax, and then dynamically create all html nodes with all attributes using proper DOM methods. I expect some advice from you to choose the right one. PS: My popup script is obtained from http://www.php-development.ru/javasc...pup-window.php Similar TutorialsHello, I am using AJAX and got the output from AJAX like the below line Ajax function Code: if (http_request.readyState == 4) {
if (http_request.status == 200) {
var_output = http_request.responseText;
document.getElementById('result').innerHTML = var_output; //value 100 displayed
}
else
{
alert('There was a problem with the request.');
}
}
In my javascript function, i need to get the value 100 from that innerHTML. Is it possible to get this value? Code: // I tried this way, but not working
var txt = document.getElementById('result').innerHTML;
or Store it in hidden field and get the value from javascript. Please suggest any idea to solve this problem Thanks Problem: I have a DIV whose content needs to change on mouseover and return to prior state on mouse out. I do not want to pre store the divs inner HTML in variables. So I am trying to get the script on execution (mouseover) to grab the existing innerHTML from the DIV, assign it to a variable, then write the new innerHTML content. on mouse out, function sets innerHTML to the variable in order to restore original content. For some reason the code below causes a strange flicker effect, also sometimes it catches the mouseout and works, other times it does not catch mouseout and is stuck with the content changed on mouse over? any ideas why/how i set this up wrong? HTML Code: <div id="ac-repair-inspection" class="bgbblue cborder" onMouseOver="test();" onMouseOut="testo();" > <div class="ctr"><h2 class="fs19 uline">COOLING SYSTEM TUNE-UP</h2></div> <div style="padding-left:17px"> <ul style="padding:0;" class="fs15"> <li>Check Refrigerant Pressures</li> <li>Monitor Thermal Expansion Valve operation</li> <li>Check temperature differential</li> </ul> </div> <!-- end list --> </div> <!-- end ac repair inspection --> SCRIPT (Placed at end of HTML before closing body tag) Code: <script type="text/javascript">
var temp= document.getElementById("ac-repair-inspection").innerHTML;
function test() {document.getElementById("ac-repair-inspection").innerHTML="<img src='../images/layout_images/cold-tune-up-promo.png' width='340' height='428'>";}
function testo() { document.getElementById("ac-repair-inspection").innerHTML= temp;}
</script>
CSS Code: #ac-repair-inspection {
position:absolute;
width:340px;
height:428px;
left: 453px;
top: 10px;
}
Hi guys, The code in question is www.spectral.og.uk/test5/work2.htm I am trying to change the main 'SPECTRAL' video content mid-right when I click on the 'Change Movie' at the bottom. Eventually I want to be able to do this from the thumbnails but Im just running a simple test first. So I defined the function 'ChangeMOVIE' on line 14 using document.getElementById & innerHTML, etc, to replicate the flash player script contents that are incidentally ID'd as "BIGCHANGE" (ie, part of the main flash player on line 249) but simply replacing a different name for the video when it reaches the Flashvars "&file=Splash.flv" to something else to effect the change of video content I'm after, 'Olay.flv' I think. I have tried so hard to research into this but it just doesn't work. Is the problem to do with that :- 1) You can't ID something within <script>, ie BIGCHANGE in this instance. 2) innerHTML is only really for text replacement, not the amount of script I've stuck into it to replace within the whole <TD> cell with ID 'VID' (ie the main flash player) even though I've used delimiters and everything within the innerHTML data to try and not confuse it with apostrophes within speach marks, etc Any thoughts where I'm going wrong? Maybe Im barking up the wrong tree on this! Thanks so much guys for any headsup on a solution to this as I've been up all night for about a week on this! Dom I wish to know how I can count how many lines there are by searching the innerHTML of a div can anyone suggest how this can be done? also when the new line is added in my code it clears the content of all the existing fields if there was anything in them before the add link was clicked Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"><!--
function addmore() {
// count existing boxes to find out next number to use.
// ?
document.getElementById('namesdiv').innerHTML += '<textarea name="name_added" cols="30" rows="2"></textarea><br>';
document.getElementById('addressesdiv').innerHTML += '<textarea name="address_added" cols="30" rows="2"></textarea><br>';
document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile_added" cols="30" rows="2"></textarea><br>';
}
--></script>
</head>
<body>
<form>
<div style="width: 850px;">
<div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br>
<textarea name="name1" cols="30" rows="2"></textarea><br>
<textarea name="name2" cols="30" rows="2"></textarea><br>
<textarea name="name3" cols="30" rows="2"></textarea><br>
<textarea name="name4" cols="30" rows="2"></textarea><br>
<textarea name="name5" cols="30" rows="2"></textarea><br>
</div>
<div id="addressesdiv" style="float: left; padding-right: 10px;">Client's Addresses<br>
<textarea name="address1" cols="30" rows="2"></textarea><br>
<textarea name="address2" cols="30" rows="2"></textarea><br>
<textarea name="address3" cols="30" rows="2"></textarea><br>
<textarea name="address4" cols="30" rows="2"></textarea><br>
<textarea name="address5" cols="30" rows="2"></textarea><br>
</div>
<div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br>
<textarea name="mobile1" cols="30" rows="2"></textarea><br>
<textarea name="mobile2" cols="30" rows="2"></textarea><br>
<textarea name="mobile3" cols="30" rows="2"></textarea><br>
<textarea name="mobile4" cols="30" rows="2"></textarea><br>
<textarea name="mobile5" cols="30" rows="2"></textarea><br>
</div>
</div>
<br style="clear: both;">
<a href="" onClick="javascript:addmore(); return false;" >Add more</a>
</form>
</body>
</html>
Hello: I have a bit of an interesting delima: I have a form with select box which is dynamically db populated and based on the first selection, additional data populates two other linked boxes (a input and a textarea). This process happens in a table row. here is the source code of the selection process: PHP Code: <tr><td><select name='select_1' style='width:200px; color:#003399; text-align:center; font-size:1em' onChange="switch_select(); switch_text();"> <option>-- Select an Item --</option><option>5 A Series Blades</option><option>Balls</option><option>TT Tables-Mini</option><option>Bottle Water</option><option>TT Tables -- Reg</option><option>Gatorate</option><option>Blade combo</option><option>Membership Renewal</option><option>1 hr Private Lesson (Adlt)</option><option>1 hr Private Lesson (Chld)</option><option>Group Lesson (Adlt)</option><option>Group Lesson (Chlidren)</option><option>Membership (Couples-2)</option><option>Membership (Family -Up 4)</option><option>Robot Play</option><option>Gift Certificate</option><option>Gift Card Add Value</option><option>Club T-Shirts</option><option>Member Credit</option><option>Other</option><option>Rubber - 1615 PIPS </option><option>Rubber -Volant 3</option><option>6 A Series Blades</option><option>Blades Only -China QI</option><option>Blades Only -CQ 1</option><option>Ross-Action Blade</option><option>Ross-Classic Blade</option></select> </td> <select name='select_2' onChange="switch_text();" style='display:none' disabled='true'> <option>You need to select a category</option> <option></option> <option></option> </select><td><textarea name='mytextarea' rows='2' cols='40' class='expand10-1000' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></textarea><td> <td valign='top' width='17%'><input type='text' name='qty' class="qty" size='3' maxlength='3' value='' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td> <td valign='top' width='17%'><input type='text' name='cost' class="cost" size='6' maxlength='6' value='0.00' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td> </tr> The user has the option of adding an additional row which is similarily structured to give the user the option of selecting a different item (with its description an price) for each row. Now here is the problem; the adding row mechanism is done with ajax using the following code: PHP Code: $('#addrow').click(function(){ $('.item-row:last').after('[COLOR="Red"]//INSERT THE CONTENT OF THE PHP HERE//[/COLOR]'); if ($('.delete').length > 0) { $('.delete').show(); } bind(); }); I want to insert the content of an external php file containing the dynamic linked field into the ajax above in the section outlined in red. Sorry for the long post... here is the external php file: PHP Code: <?php echo" <script type='text/javascript' src='js/jquery-1.3.2.min.js'></script> <script language='JavaScript'> ";?> var num_of_cats = 17; // This is the number of categories, including the first, blank, category. var open_in_newwindow=1; //Set 1 to open links in new window, 0 for no. <?php include '../datalogin.php';// make sure this is available to make connection to db $result = mysql_query("SELECT * FROM products"); echo "var option_array = new Array(num_of_cats);"; $count=1; echo"option_array[0] = new Array(\"Please Select a Merchandise\");"; while($row = mysql_fetch_array($result)) { echo"option_array[".$count."] = new Array(\"--select One--\",\"\",\"\");"; $count++; } $result2 = mysql_query("SELECT * FROM products"); echo"var text_array = new Array(num_of_cats);"; $count=1; echo "text_array[0] = new Array(\"Please Select a Merchandise\");"; while($row_1 = mysql_fetch_array($result2)) { echo "text_array[".$count."] = new Array(\"".$row_1['product_desc']."\");"; $count++; } $result3 = mysql_query("SELECT * FROM products"); echo "var text_array2 = new Array(num_of_cats);"; $count=1; echo "text_array2[0] = new Array(\"Please Select a Merchandise\");"; while($row_2 = mysql_fetch_array($result3)) { echo "text_array2[".$count."] = new Array(\"".$row_2['unit_cost']."\");"; $count++; } ?> <?php echo" var options = 0; function switch_select() { for (loop = window.document.PaymentForm.select_2.options.length-1; loop > 0; loop--) { window.document.PaymentForm.select_2.options[loop] = null; } for (loop = 0; loop < option_array[window.document.PaymentForm.select_1.selectedIndex].length; loop++) { window.document.PaymentForm.select_2.options[loop] = new Option(option_array[window.document.PaymentForm.select_1.selectedIndex][loop]); } window.document.PaymentForm.select_2.selectedIndex = 0; } function switch_text() { window.document.PaymentForm.mytextarea.value = text_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex]; window.document.PaymentForm.cost.value = text_array2[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex]; //window.document.PaymentForm.gift_card.value = text_array3[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex]; //window.document.PaymentForm.qty.value = text_array4[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex]; } function box() { if (window.document.PaymentForm.select_2.selectedIndex == 0) { alert(\"Sorry, you have to select an item\"); } else { if (open_in_newwindow==1) window.open(url_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex],\"_blank\"); else window.location=url_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex] } } function set_orig() { window.document.PaymentForm.select_1.selectedIndex = 0; window.document.PaymentForm.select_2.selectedIndex = 0; } window.onload=set_orig </script> "; include '../datalogin.php'; $get_products = "select id as id_num, items as display_name2 from products order by id_num"; $get_products_res = mysql_query($get_products) or die (mysql_error()); if (mysql_num_rows($get_products_res) < 1) { // no records $display_block .="<p><em>Sorry, no records to select</em></p>"; } else { echo" <form name='PaymentForm' onSubmit='return false;'> <tr><td><select name='select_1' style='width:200px; color:#003399; text-align:center; font-size:1em' onChange=\"switch_select(); switch_text();\"> <option>-- Select an Item --</option>"; while ($recs2 = mysql_fetch_array($get_products_res)) { $id_num = $recs2['id_num']; $display_name2 = stripslashes($recs2['display_name2']); //$display_block .= "<option value=\"$id_num\">$display_name2</option>"; echo "<option>$display_name2</option>"; } } echo "</select> </td>"; echo " <select name='select_2' onChange=\"switch_text();\" style='display:none' disabled='true'> <option>You need to select a category</option> <option></option> <option></option> </select>"; echo"<td><textarea name='mytextarea' rows='2' cols='40' class='expand10-1000' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></textarea><td> <td valign='top' width='17%'><input type='text' name='qty' class=\"qty\" size='3' maxlength='3' value='' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td> <td valign='top' width='17%'><input type='text' name='cost' class=\"cost\" size='6' maxlength='6' value='0.00' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td> </tr> </form>"; ?> I hope this is doable and that I have describe my intention properly. Any thoughts would be appreciated! Mossa Hi All I'm going to keep this simple. I'm using a hashchange plugin for my page navigation I can't get scripts to run for the AJAX generated content. They run perfectly without the hashchange Here is a link to my current project: http://www.bluecoast.co.uk/test/temptation Here is the script that handles the hashchange: Code: $(function() {
var newHash = "",
$mainContent = $("#right"),
$pageWrap = $("#wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $pageWrap.height();
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href="+newHash+"]").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
I'm loading the scripts in the header of the main index.php page like so: Code: <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="js/jquery.form.js"></script> <script type="text/javascript" src="js/jquery.tweet.js"></script> <script type="text/javascript" src="js/easing.js"></script> <script type="text/javascript" src="js/jquery.anythingslider.min.js"></script> <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> <script type="text/javascript" src="js/jquery.tools.min.js"></script> <script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script> <!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" /><![endif]--> <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script> <script type='text/javascript' src='js/dynamicpage.js'></script> <!--[if IE]> <script src="js/html5.js"></script> <![endif]--> <script type="text/javascript" src="js/custom.js"></script> Would somebody be kind enough to help me with this? Thanks in advance Craig I have been searching online for hours, but it is possible I'm just not thinking of the correct keywords. I have included a basic illustration of the current setup (which does not work). The issue lies with the page that is the desired output. I have a far deeper issue which I have narrowed down to javascript on the final .asp page not loading at all. On default.asp, I am calling a function contained in 'ajax_call-contentselection.js' Code: <a onclick="func_displaycontents('restaurants'); return false">displayajaxcontent</a>
Honestly, I don't believe the following piece of code (ajax_call-contentselection.js) is relevant, as it is standard ajax code, but just in case: Code: function func_displaycontents(var_type){
var xmlHttp = GetXmlHttpObject();
var url = "../_include/ajax_display-contentselection.asp";
url += "?type="+var_type;
if (!xmlHttp){
alert ("Browser does not support HTTP Request")
return
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState == 1){
document.getElementById("div_ajaxfillattractions").innerHTML = "<div style='padding-top:50px;color:white;width:930px;text-align:center;'><img src='../_images/ajax-loader.gif'/><br/>Loading...</div>";
};
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("div_ajaxfillattractions").innerHTML=xmlHttp.responseText;
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
The other contents of "ajax_display-contentselection.asp" are displayed properly in "div_ajaxfillattractions" of "default.asp", but no javascript code on that page loads. If I use "ajax_display-contentselection.asp" as an include file on "default.asp", I get the javascript alert of 'Success', but when I initiate the AJAX it does not work, so I know there isn't a problem with the javascript. Please let me know if I sucked at explaining something, or more detail is needed. Thanks in advance, Matt Hi, I am creating a webpage to display menu items in a div tag. The premis of my page is to use 4 div tags. 1st div tag = company logo (top left) 2nd div tag = img of restaurant and address (top right). 3rd div tag = horizontal menu with text or buttons to call up menu items, for example: Lunch: Dinner: Beverages: Driving Directions, etc 4th div to display content pages. For example, if the user clicks the Lunch button, it would call the lunch page and place it into the 4th div tag. I am able to do this with frames in HTML or content pages in ASP.net, but how would I do it using CSS and div tags. The best response I got was with AJAX, but I am not familiar with this language yet. Can I use JavaScript to do this? Any suggestions? Thank you, Paul I'm working on my portfolio and I want to get content to load into my "middle" div upon clicking on the buttons in the sidebar. I'm able to get it to load, but I can't figure out how to get the CSS to load. I keep getting errors in the code. Here is the code I'm using: http://www.dynamicdrive.com/dynamici...jaxcontent.htm Here is what I've got: Code: <img src="images/rule.png" id="rule" width="1" height="1" />
<a href="javascript:ajaxpage('about.html', 'middle');"><img src="images/about.png" width="195" height="101" alt="about" /></a>
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<a href="javascript:ajaxpage('work.html', 'middle');"><img src="images/work.png" width="195" height="101" alt="work" />
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<img src="images/resume.png" width="195" height="101" alt="resume" />
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<a href="javascript:ajaxpage('contact.html', 'middle'); loadobjs('contact.css', 'feature.js')"><img src="images/contact.png" width="195" height="101" alt="contact" /></a>
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" /></div>
I'm working on the contact page right now, just trying to figure out how to get it to load properly. Here is a screenshot of what it's supposed to look like: https://skitch.com/jillianadriana/r7...itled-document I can't get it to load with the custom CSS. I am using this code... simplified for example Code: [
<script type="text/javascript">
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>
<a onclick="loadContent('#content', 'http://www.website.com/includes/content.php');"
<div id="content"></div>
Works fine if run on http://www.website.com but not on http://www.website.com/home/sitepage. I have spent a few hours and cannot figure it out. Can anyone? Thanks I am new to Java/AJAX and I am trying to create a script that will change content of a div. My scenario I am using is an index page with the list.php script included in the div I want content changed in. The list.php script will pull 8 newest titles from mysql and list them in the div. When you click one of the titles it will redirect you to a new page created by story.php. I would like this to be contained inside the div I have currently have the list.php script in. I have looked at several tutorials on AJAX to do this, but they always call a static html page. Since I am not using a static html page I do not think this solution would work for me. How my list.php script works is as follows: PHP Code: // generate and execute query $query = "SELECT id, title, timestamp FROM news ORDER BY timestamp DESC LIMIT 0, 8"; $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error()); // if records present if (mysql_num_rows($result) > 0) { // iterate through resultset // print news titles while($row = mysql_fetch_object($result)) { ?> <b><font size="+2"><a href="story.php?id=<? echo $row->id; ?>"><? echo $row->title; ?></a></b></font> <br> <font size="-2"><center><? echo formatDate($row->timestamp); ?></center></font> <p> <? } } // if no records present // display message else { ?> <font size="-1">No news is bad news</font> <? } How my story.php script works is as follows: PHP Code: // generate and execute query $query = "SELECT title, content, contact, timestamp FROM news WHERE id = '$id'"; $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error()); // get resultset as object $row = mysql_fetch_object($result); // Show me the news if ($row) { ?> <p> <b><? echo $row->title; ?></b> <p> <font size="-1"><? echo nl2br($row->content); ?></font> <p> <font size="-2">Posted on <? echo formatDate($row->timestamp); ?>. By <? echo $row->contact; ?></font> <? } else { ?> <p> <font size="-1">That news post could is not found.</font> <? } If you need more information for this I will provide whatever you need. Hi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. How would you make a if for a input box =this do this Some if the input boxe value = this then get innerHTMl Hey, for some reason, this isn't working because of the src="images/edit.png" attribute. Here is my code: Code: <a href="#" onclick="change('HEYYY')"><img src="images/edit.png" alt="Edit" id="edit1" /></a>
Javascript (External) Code: function change(message)
{
document.getElementById('edit1').innerHTML = '<input type="text" value="'+message+'" />';
}
It does nothing. But if I take the src attribute out, it works fine. Any help? Thanks. Hello, I am a newbie for Javascript. Currently I am doing a website which consists of a lot of contents. Therefore, I hope to get a solution which all my contents are arranged into a table (rows and columns). The condition is that there is only a html page to hold all the contents where there is a "view more" or 'next" button at the bottom and each times user can click to go to the different contents. I have tried to use the innerHTML and I was able to do for 2 pages only...Now I encountered a problem which I need to update more contents to more pages . Can you kindly give some guidelines according to this? Below shows the example code of my website: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript">
function OpenWindow()
{
var content=document.getElementById('achieve').rows[0].cells;
content[1].innerHTML="<br/><div align='justify' class='style1 style8'><span class='style11'>Another content</span></div>" + "<div align='left' class='style23 style13'>more details</div>";
var content=document.getElementById('achieve').rows[1].cells;
content[1].innerHTML="";
var content=document.getElementById('achieve').rows[2].cells;
content[1].innerHTML="<strong><em><font class=style13 style23 color=#FF6600><a href='test.html'>back</a></font></em></strong>";
}
</script>
</head>
<body>
<!--id starts-->
<table id="achieve" width="780" height="387" border="0">
<tr>
<td width="10" height="39"> </td>
<td width="340"><div align="center" class="style6">My Title</div></td>
<td width="416"> </td>
</tr>
<tr>
<td> </td>
<td><div align="justify" class="style1 style8"><span class="style11">More Contents here</span></div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><div align="right"><strong><em><font class="style23 style13" color="#FF6600"><a href="#" onclick="OpenWindow()">+ view more </a></font></em></strong></div></td>
<td> </td>
</tr>
</table>
</body>
</html>
Can somebody explain me why this isn't working? Code: <SCRIPT TYPE="TEXT/JAVASCRIPT">
// Check lotto
var goed = frmTrekking.EersteGetal.value
var fout = frmGetallen.Opgegeven_1.value
function checkLotto() {
if (frmTrekking.EersteGetal.value == frmGetallen.Opgegeven_1.value) {
document.getElementById('boldStuff').style.color='#00ff00';
document.getElementById('boldStuff').innerHTML = goed;
}
else {
document.getElementById('boldStuff').style.color='#ff0000';
document.getElementById('boldStuff').innerHTML = fout;
}
}
</script>
When I don't use the var, but give for example this: it works ok. Code: document.getElementById('boldStuff').innerHTML = '6';
Does anyone have any suggestions as to how I can get IE working properly with this? It's a, (exempting IE), straight forward line numbering and plain text code view function. When using the line numbering portion, it works fine in Moz based browsers etc, as it does in IE for the initial numbering. On trying to remove the numbers though, (on the second call), IE just seems to cascade the list entries rather than removing them. Code: function process_code(id, number, print)
{
if (document.getElementById(id))
{
var current = document.getElementById(id);
var code = current.innerHTML.split('\n');
var count = 0;
var xcount = 0;
if (number)
{
if (current.innerHTML.indexOf('<li class="code-entry">') != -1)
{
code = code.join('\n');
code = code.replace(/\<\/(li\>\<\/ol|li)\>/ig, '\n');
code = code.replace(/\<ol\>\<li[^\>]+\>|\<li[^\>]+\>/ig, '');
current.innerHTML = code.replace(/^\n+|\n+$/g, '');
}
else
{
current.innerHTML = '<ol><li class="code-entry">'+code.join('</li><li class="code-entry">')+'<
/li></ol>';
}
}
else
{
var doc = window.open('', 'code_print');
var newdoc = doc.document;
newdoc.open('text/plain');
newdoc.write(decode_code(code.join('\n')));
newdoc.close();
if (print)
{
if (navigator.userAgent.indexOf('Opera') != -1)
{
window.print();
}
else
{
doc.print();
}
doc.close();
}
}
}
}
I trying to display a random number using innerHTML Here's my code: Code: <html>
<head>
<script language="JavaScript">
var myArray = new Array("String1", "String2", "String3", "String4", "String5", "String6", "String7", "String8", "String9", "String10");
var num = Math.floor(myArray.length * Math.random());
document.writeln(myArray[num]);
//document.getElementById("myString").innerHTML = myArray[num];
</script>
</head>
<body>
<div id="myString"></div>
</body>
</html>
it works when I use document.writeln(myArray[num]); but does NOT work for document.getElementById("myString").innerHTML = myArray[num]; any ideas?? tks |
|||||||