JavaScript - How To Wipe An Existing Select Options And Add New
If i have an existing HTML Select statement with options specified, and then based on an even, i want to rebuild that options list, how do I wipe the existing options parameters in order to add new ones? Is that even possible?
Similar TutorialsI've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code: function createOption(OptionText, OptionValue){ var temp = document.captcha_form("option"); temp.innerHTML = OptionText; temp.value = OptionValue; return temp; } function valChange(){ var firstList = document.getElementById("emailaddress"); var secondList = document.getElementById("subject"); while(secondList.hasChildNodes()) secondList.removeChild(secondList.childNodes[0]); switch(firstList.value){ case "1":{ secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues)); secondList.appendChild(createOption("Report Page Errors", Report Page Errors)); secondList.appendChild(createOption("Other", Other)); break; } case "2":{ secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game)); secondList.appendChild(createOption("Report Spam", Report Spam)); secondList.appendChild(createOption("Report Harassment", Report Harassment)); secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities)); secondList.appendChild(createOption("Request Account Removal", Request Account Removal)); break; } // .... default:{ secondList.appendChild(createOption("Please select from the first list", "")); break; } } } window.onload = valChange; this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hey chaps, hope someone can help with this: I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables: // tbl_main_colour: Code: ID, NAME 1, Red 2, Blue 3, Green // tbl_shade_colour: Code: ID, NAME, FK_MAIN_COLOUR_ID 1, Light Red, 1 2, Dark Red, 1 3, Light Blue, 2 4, Dark Blue, 2 5, Light Green, 3 6, Dark Green, 3 What I'm after is something to filter the second select option, after the first select option has been chosen // Select 1: Code: Red // Select 2: Code: Light Red Dark Red I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated. Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> I have a select box that has ~7000 options, that based on a different dropdown select & input field, gets filtered to 0 - 300 entries. I have another select dropdown that has 13000+ options in total for all the ~7000 entries, but each entry may have 1 to 5 options of these 13000. Is there a way to change the options of the last select dropdown based on what the user chooses in the filtered select box? Currently the idea I'm having is to have the browser load all 13000+ items and filter out the ones that don't apply to the currently selected item, but I'm not sure what kind of lag the user would experience while the browser loads & filters through all these items. Any help would be appreciated. Thanks. This code is supposed to batch transfer options between selects. It works flawlessly for single values, but when I select multiple options, all of them get deleted, but only one transferred. Any help is greatly appreciated! Thank you. Code: <html> <head> <title></title> <script type="text/javascript"> function removeOptionSelected(b,j) { var elRem = document.getElementById(b); var elAdd = document.getElementById(j); var elOptNew = document.createElement('option'); var i; for (i = elRem.length - 1; i>=0; i--) { if (elRem.options[i].selected) { //alert(elRem.options[i].text+' '+elRem.options[i].value+' deleted!') elOptNew.text = elRem.options[i].text; elOptNew.value = elRem.options[i].value; try { elAdd.add(elOptNew, null); // standards compliant; doesn't work in IE } catch(ex) { elAdd.add(elOptNew); // IE only } elRem.remove(i); } } } </script> <style type="text/css"> div { float: left; /*border: 1px solid black;*/ } div.contain { width: 536px; height: 500px; border: none; } div.side { width: 215px; height: 500px; } div.middle { width: 100px; height: 300px; padding-top: 200px; } select { width: 200px; height: 500px; } input { width: 82px; margin-bottom: 10px; } </style> </head> <body> <div class="contain"> <div class="side"> <form name="left"> <select id="left" class="left" multiple name="out"> <option value="apple">apple</option> <option value="banana">banana</option> <option value="orange">orange</option> <option value="tangerine">tangerine</option> <option value="pineapple">pineapple</option> <option value="carrot">carrot</option> <option value="grapefruit">grapefruit</option> <option value="plum">plum</option> <option value="blueberry">blueberry</option> <option value="strawberry">strawberry</option> <option value="cashews">cashews</option> <option value="peanuts">peanuts</option> </select> </form> </div> <div class="middle"> <input type="button" value="Add-->" onClick="removeOptionSelected('left','right');" /> <input type="button" value="<--Remove" onClick="removeOptionSelected('right','left')" /> </div> <div class="side"> <form name="right"> <select id="right" class="right" multiple name="out"> <option value="greenbeans">greenbeans</option> <option value="walnuts">walnuts</option> </select> </form> </div> </div> </body> </html> Hi all, I have table in Javascript and it has addrow, deleterow, submit, and functions. when i click it automatically adds new row and it has select option to choose some of them for ex. in added two rows and one of drop down combox i chose Motherboard Asus and from other i chose Motherboard Gigabyte. So i need once i select the name from combobox, should not allow user to select same name in coming rows Here is my code. Thanks beforehands PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head><title>dinamik sheet</title> <script> var i=iteration; function addrow(){ var tbl = document.getElementById('sheet'); var iteration = tbl.rows.length; document.getElementById('count_rows').value = iteration; var row=tbl.insertRow(iteration); var cellLeft = row.insertCell(0); var textNode = document.createTextNode(iteration); cellLeft.appendChild(textNode); var cellRight = row.insertCell(1); var el = document.createElement('input'); el.type = 'text'; el.name = 'txtRow'+iteration; el.id = 'txtRow'+iteration; el.size = 15; el.value = '0'; el.onblur = sum; cellRight.appendChild(el); var cellRight = row.insertCell(2); var elaz = document.createElement('input'); elaz.type = 'text'; elaz.name = 'txtRowaz'+iteration; elaz.id = 'txtRowaz'+iteration; elaz.size = 20; elaz.value = '0'; elaz.onblur = sum; cellRight.appendChild(elaz); var cellRight1 = row.insertCell(3); var ela = document.createElement('input'); ela.type = 'text'; ela.name = 'txtRowe'+iteration; ela.id = 'txtRowe'+iteration; ela.size = 20; ela.value = '0'; ela.onblur = sum; cellRight1.appendChild(ela); var cellRightsel = row.insertCell(4); var sel = document.createElement('select'); sel.name = 'selRow' + iteration; sel.id = 'selRow' + iteration; sel.onchange = sum; sel.options[0] = new Option('MotherBoard ASUS', 'MotherBoard ASUS'); sel.options[1] = new Option('MotherBoard Gigabyte', 'MotherBoard Gigabyte'); sel.options[2] = new Option('MotherBoard MSI', 'MotherBoard MSI'); sel.options[3] = new Option('Graphiqcard ASUS', 'Graphiqcard ASUS'); sel.options[4] = new Option('GraphigCard ATI', 'GraphigCard ATI'); sel.options[5] = new Option('GraphigCard GefORCE', 'GraphigCard GefORCE'); cellRightsel.appendChild(sel); sum(); } function removeRowFromTable() { var tbl = document.getElementById('sheet'); var lastRow = tbl.rows.length; if (lastRow > 2) tbl.deleteRow(lastRow - 1); } function sum(){ var s1 = 0; var s2 = 0; var tbl=document.getElementById('sheet'); var iteration=tbl.rows.length-1; for(var i=1; i<=iteration; i++){//loop through table rows var el1 = document.getElementById('txtRow'+i);//Row's Income field var el2 = document.getElementById('selRow'+i);//Row's percentage menu var ela = document.getElementById('txtRowe'+i);//Row's Tax cell var elaz=document.getElementById('txtRowaz'+i); if(!el1 || !el2 || !ela||!elaz) continue; var txt = el1.value; if(txt != ( '' + Number(txt) )) continue; //reject non-numeric entries var tax = Number(txt) * Number(130); if(el2[el2.selectedIndex].value=="MotherBoard Gigabyte"){ var tax = Number(txt) * Number(150); } if(el2[el2.selectedIndex].value=="MotherBoard MSI"){ var tax = Number(txt) * Number(100); } if(el2[el2.selectedIndex].value=="Graphiqcard ASUS"){ var tax = Number(txt) * Number(85); } if(el2[el2.selectedIndex].value=="GraphigCard ATI"){ var tax = Number(txt) * Number(95); } if (el2[el2.selectedIndex].value=="GraphigCard ATI") { var tax = Number(txt) * Number(88); } ela.value = tax.toFixed(2); elaz.value=tax.toFixed(2)/Number(txt); if(isNaN(elaz.value)){ elaz.value=0; } s1 += Number(txt); s2 += tax; } var t1 = document.getElementById('total'); var t2 = document.getElementById('taxtotal'); if(t1){ t1.value = s1.toFixed(2); } if(t2){ t2.value = s2.toFixed(2); } } onload = function(){ addrow(); } </script> </head> <body> <form name="eval_edit" method="POST" action="part1.php?id=iteration-1"> <table align="center" width="75%"> <tr> <td align="center">Balance sheet</td></tr> <tr> <td align="center"> <table id="sheet" border="1"> <tr><td>object</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr> </table> </td> </tr> <tr> <td align="center"> <input type="hidden" name="count_rows" id="count_rows" /> <input type="button" value="Add" onclick="addrow()" /> <input type="button" value="Remove" onclick="removeRowFromTable()" /> <input type="button" value="SUM" onClick="sum()"/> <input type="submit" value="Submit" /><br /> </td> </tr> <tr> <td align="left"> <input id="total" name="total" type="text"/>total amount of products<br /> <input id="taxtotal" name="taxtotal" type="text"/>total price of products </td> </tr> </table> </form> </body> </html> Hello! I'm trying to figure out a way of having + and - buttons which cycle through the options in a select box such as: <select name="distance" id="jr_radius"> <option value="0.5">0.5 Miles</option> <option value="1">1 Mile</option> <option value="3" selected="selected">3 Miles</option> <option value="5">5 Miles</option> <option value="10">10 Miles</option> </select> So far I've only been able to have a button change the select box to a specific value, or add or subtract to a numerical value. Both of which aren't quite right. Ideally if the default value is "3" then clicking the + button could make it "5" and clicking the same button again would make it "10". Visa versa, the minus button would make the value "1" and then if pressed again it would become "0.5". Does that make sense? Any help will be greatly appreciated! Hey guys.... me again.... tried doing this a few different ways but it seems no matter what I do the last option won't remove for some reason..... if it's the only option, it won't remove either. as it's the last one. Here is my code.. PHP Code: function removeCats() { // Set selected category list var sel_cats = document.getElementById('cat_sel'); for (i = sel_cats.length-1; i >= 0; i--) { // Check if the cat is selected if (sel_cats.childNodes[i].selected == true) { // Remove the category sel_cats.removeChild(sel_cats.childNodes[i]); } } } Thanks again guys! *Edit: I thread title should probably be "Initialize indices..."* I've done quite a bit of research but couldn't find what I need to know so here I am. I have some javascript generated by php that reads a configuration file to add options to a select menu. This is somewhat irrelevant but... these options are removed from the menu when clicked and data related to the option is shown on the page... and the option gets re-added when the data is closed. I need the option to go back in the correct place/order in the select menu... which wouldn't be a problem if I could initialize the indices of the menu's options. They need to be initialized because when the page is created, saved settings are read and certain options are not shown in the list because they may already be shown according to the settings... meaning... since browsers automatically increment the indices of the options by 1 (starting at 0), if data is closed that was initially open and therefore not in the select menu at first... the key/index associated with that data will likely not match the correct menu order. Code: <script type="text/javascript"> function addOptionToSelect(selectID,index,offset,val,txt) { var elSel = document.getElementById(selectID); elSel.options[index+offset].value = val; elSel.options[index+offset].text = txt; } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } <?php foreach ($props as $k => $prop) { if (!in_array($prop, $_SESSION['crProps'])) { ?> addLoadEvent(addOptionToSelect('propertySelect',<?php echo $k; ?>,1,'?p=<?php echo $prop; ?>&k=<?php echo $k; ?>','<?php echo $prop; ?>')); <?php } } ?> </script> For example, suppose I have the following potential data sets: a,b,c,d,e,f In the config file that helps create the page, suppose it is something like: <Default>0:a|2:c|3:d</Default> (FYI: I've designed it so that the data set names/options are separated by the pipe character ("|") and their corresponding index is the number to the left of the colon.) Then the select menu that is initially generated would be something like: (Every other data set name except for what is already open by default.) <select id="bleh"> <option value="b">b <option value="e">e <option value="f">f </select> And by default, browsers would assign the indices like so: (skipping getElementById and all that...) select.options[0].value = b select.options[1].value = e select.options[2].value = f Whereas, I need it to be initialized like this: select.options[1].value = b select.options[4].value = e select.options[5].value = f So that when the data sets initially open are closed (a, c, or d)... they get put in the correct position in the list. I just thought of something... it's a little inefficient (OCD lol) but it should work and at worst would only cost a couple of milliseconds of processing time. A solution to this problem might be to load the menu with all options so that their indices are correct... and remove the defaults afterward. I'll try it. all i have to do is the image to change automatically based on the option you selected from the drop down list. here is the code, any help is appreciable. thanks in advance. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> img{ height:95px; width:95px; display:block; margin-top:10px; } #caption{ font-family:Verdana,tahoma,arial; font-size:8pt; text-align:left; display:block; width:250px; } </style> <script type="text/javascript"> window.onload=function() { var caption=['Default Image Caption', 'begonia', 'daffodils', 'mixture', 'natural', 'purple', 'red flower', 'sunflower', 'tulip', 'two flowers'], // This will be your images caption bp='..\images', //base url of your images imgnum=9, //Number of your images. This should match on your comboboxes options. thumb=document.getElementById('thumb'), //id of your image that will be changing description=document.getElementById('caption'), //id of your caption combobox=document.getElementById('selection'); // id of your combobox. combobox.onchange=function() { thumb.src=bp+'Picture'+this.value+'.jpg'; description.innerHTML=caption[this.value]; } } </script> </head> <body> <label>Please Change the pictu </label> <select id="selection"> <option>Change Picture</option> <option value="1">begonia</option> <option value="2">daffodils</option> <option value="3">mixture</option> <option value="4">natural</option> <option value="5">purple</option> <option value="6">red flower</option> <option value="7">sunflower</option> <option value="8">tulip</option> <option value="9">two flowers</option> </select> <br> <img src="..\images" alt="mypic" id="thumb"> <span id="caption">Caption for the default Image</span> </body> </html> thanks again Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction. I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely. If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks. Hi there, I am a new javascript guy - struggling a bit but marching on - The following code works fine to set a form field - Code: document.getElementById("ZS_Land").value = (empLand.innerHTML); However, I changed to form field into a select with option list, and I need it to set an option from the select now - the select has the same name/id as the field had, but is not working Any ideas how I do that ? Many thanks in advance Glorifindal Dear all, background information: I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values): echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>"; When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly. The javascript looks like this function set_time_hour(hour_value,next_field){ alert (hour_value); alert (next_field); document.getElementById(next_field).value = hour_value; } The alert calls are giving me the right values. but the document.getElementById(next_field).value = hour_value; is not working. What is wrong there? Do you have an idea? How can I change the value of a select box with Javascript? The select box values are already popoluated with PHP so I just want to select the right value. Hi All, I have a javascript function which adds a label and value to a select widget in its parent window. The function is working fine in firefox and chrome without any errors or warnings. But it is not working in internet explorer. Please tell me what the issue is. Thanks in advance for your help. Code: function addToParent( formName, selectName, name, label ) { var parent = window.opener; var selectWidget = parent.document.forms[formName].elements[selectName]; if( selectWidget ) { var length = selectWidget.length; selectWidget[length] = new Option( name, label, false, false ); } } When I tried to debug, internet explorer shows an error in the following line Code: selectWidget[length] = new Option( name, label, false, false ); Is there anything wrong with this statement ?? Okay, I'm having some trouble getting my head around how to do this.. Code: <select> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select> <option value="Rhino">Rhino</option> <option value="Bird">Bird</option> <option value="Rooster">Rooster</option> </select> <select> <option value="0202A">Rhino - Text</option> <option value="0203A">Rhino - Text2</option> <option value="0204A">Bird - Text1</option> <option value="0205A">Bird - Text2</option> <option value="0202B">Rhino - Text</option> <option value="0204B">Rhino - Text2</option> <option value="0204C">Rooster - Text1</option> <option value="0205C">Rooster - Text2</option> <option value="0206C">Rooster - Text3</option> </select> So say we had those three drop-downs. I'm looking to make it so that second drop-down only has options corresponding to a relationship between the first and the third drop-down. Example - if you select A in the first drop-down you only see Rhino and Bird in the second drop-down. If you select B you will only see Rhino in the second drop-down. Lastly, if you select C you will only see Rooster in the second drop-down. Just can't figure this out. >.< I have an iframe. I load a page within it. The page I load is a php page that I build with a table with the id of 'readmail_table'. My iframe is 'readmail_frame'. Someone clicks on a message title outside of the iframe and I load the contents of the message in the iframe from the database in my table. Sometimes this takes longer than others depending on how large the message is. What I am doing here is letting the contents load then calculating the width and height of the table and then increasing the iframe's size so there are no scrollbars. This works 98% of the time but I ran into an issue where the table does not exist yet in the iframe and the JS code errors out. So what I did then was add a local var, set it to false then had a while loop check for the table and once it finds it, set the var to false and run my code. Again, mixed results. Sometimes this works then others I get that the table id I am looking for is null but my if statement in the while loop is checking to see if != null line 159 is where it is breaking The error I am getting in firebug is Code: window.frames.readmail_frame.document is null Line 159 Code: 156 var temp = false; 157 while ( !temp ) 158 { 159 if ( window.frames[ "readmail_frame" ].document.getElementById( 'readmail_table' ) != null ) 160 { 161 //height of the table that holds the actual message 162 var tempheight = window.frames[ "readmail_frame" ].document.getElementById( 'readmail_table' ).clientHeight; 163 //height of the from, to, subject and date section 164 var tempheight2 = window.frames[ "readmail_frame" ].document.getElementById( 'readmail_heading' ).clientHeight; 165 var tempwidth = window.frames[ "readmail_frame" ].document.getElementById( 'readmail_table' ).clientWidth; 166 document.getElementById( 'readmail_frame' ).style.width = tempwidth + 'px'; 167 //add up the table for the message, table for from, to, date and icon for print and some extra to ensure enough room 168 document.getElementById( 'readmail_frame' ).style.height = ( tempheight + tempheight2 + 130 ) + 'px'; 169 temp = true; 170 } 171 } I have also tried Code: if ( window.frames[ "readmail_frame" ].document.getElementById( 'readmail_table' ) ) and Code: if ( window.frames[ "readmail_frame" ].document ) Like I said, most of the time this works exactly how I need it. I just need a fool proof way to determine that this table is in fact on the page. I am not sure why it works sometimes and not others since I am looping until it is there Thank you for any help with this. I know for sure that lastRowTD_s[i] does not have "textarea" element ! The whole page is html valid. Code: else if (lastRowTD_s[i].getElementsByTagName('textarea')) { alert(lastRowTD_s[i].id); //checked, it is the row that does not have "textarea" element. alert(lastRowTD_s[i].getElementsByTagName('textarea')); // gives me [Object HTML collection] !? alert(lastRowTD_s[i].getElementsByTagName('textarea')[0]); //gives me "undefined", heh where has it gone since previous line ? } Hi guys! As title says I need to create variable named with value of other variable! So is that possible? What exactly I need is something like this: Code: for(var i=0; i<11; i++){ var Img[i] = "" } I would like to know if anyone cane explain some javascript source code that i got from the chess.com website. Here is the following code Im talking about: window.Meebo||function(c){function p(){return["<",i,' onload="var d=',g,";d.getElementsByTagName('head')[0].", j,"(d.",h,"('script')).",k,"='//cim.meebo.com/cim?iv=",a.v,"&",q,"=",c[q],c[l]? "&"+l+"="+c[l]:"",c[e]?"&"+e+"="+c[e]:"","'\"></",i,">"].join("")}var f=window, a=f.Meebo=f.Meebo||function(){(a._=a._||[]).push(arguments)},d=document,i="body", m=d[i],r;if(!m){r=arguments.callee;return setTimeout(function(){r(c)},100)}a.$= {0:+new Date};a.T=function(u){a.$[u]=new Date-a.$[0]};a.v=4;var j="appendChild", h="createElement",k="src",l="lang",q="network",e="domain",n=d[h]("div"),v=n[j](d[h]("m")), b=d[h]("iframe"),g="document",o,s=function(){a.T("load");a("load")};f.addEventListener? f.addEventListener("load",s,false):f.attachEvent("onload",s);n.style.display="none"; m.insertBefore(n,m.firstChild).id="meebo";b.frameBorder="0";b.id="meebo-iframe"; b.allowTransparency="true";v[j](b);try{b.contentWindow[g].open()}catch(w){c[e]= d[e];o="javascript:var d="+g+".open();d.domain='"+d.domain+"';";b[k]=o+"void(0);"}try{var t= b.contentWindow[g];t.write(p());t.close()}catch(x){b[k]=o+'d.write("'+p().replace(/"/g, '\\"')+'");d.close();'}a.T(1)}({network:"chess"}); </script> Hey CF, I've been meaning to learn the answer to this question for a long time, I guess now is the time and place to hopefully have it answered. I'm wanting to know if there is a technique one can use to have Ajax request live data from a database as it happens but I want it to do this with out having to request a bunch of other information with it. Imagine you come to a webpage and there is the latest 10 comments on a video. Let's say that I want new comments to arrive as they happen (say every 5 seconds we will do an Ajax hit on the server). Let's say for sake of argument there is 2 new comments. Is there a way to make Ajax only request and display the latest 2 comments with out having to refresh the 10 latest as well? If this sounds confusing, try imagine the 10 comments as an array. I just want to pop one off the end and push a new one onto the front. Any tips in the right direction would be great to hear. |