JavaScript - Content Generation W/o Page Refreshing
D.I.C Head
** Joined: 29 Jan, 2009 Posts: 94 Thanked: 1 times My Contributions Hello, I am teaching myself javascript and in the course of my experimentation have run into this roadblock: I want to display a styled navigation bar with a button beneath it. When the button is clicked, an onclick event will be triggered and the response of the browser should be to print the word "test" right beneath the button. However, what actually happens is the page blanks out and the word 'test' appears in the upper left corner of the screen. I'm hoping someone would be kind enough to fix this code and explain to me where I've gone wrong here. CODE <html> <head> <title>JavaScript Navanimation Example</title> <style type="text/css"> #navsite h5 { display: none; } #navsite ul { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; } #navsite ul li { list-style: none; margin: 0; display: inline; } #navsite ul li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none; } #navsite ul li a:link { color: #448; } #navsite ul li a:visited { color: #667; } #navsite ul li a:link:hover, #navsite ul li a:visited:hover { color: #000; background: #AAE; border-color: #227; } /* #navsite ul li a#current { background: white; border-bottom: 1px solid white; } */ </style> </title> <script language="JavaScript" type="text/javascript"> function navanimate() { document.write("test"); return false; } </script> </head> <body language="JavaScript" type="text/javascript"> <div id="navsite"> <h5>Site Navigation</h5> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/archives/">Archives</a></li> <li><a href="/writing/">Writing</a></li> <li><a href="/speaking/">Speaking</a></li> <li><a href="/Contact/">Contact</a></li> </ul> </div> <input type="button" name="button" value="Drop Down" onclick="return navanimate()"> </body> </html> Thanks! Similar TutorialsI am a music geek. I am also a Javascripter who doesn't know much, but enough to get around the language. Anyways, I wrote a script to construct chords to make writing music easier for me. The script works, it shows there are no errors, and it does what I want it to do, but the page keeps refreshing almost immediately after the Alert box goes away. I have no idea whats going on. I don't know if it's the JS or the HTML part of the page. If you have any ideas that would be great. Code: <head> <script> function calc() { var type, note, root, third, fifth, seven, ans; var notess, notesb; type=document.f1.type.value note=document.f1.note.value*1 notess=["A","A#","B","C","C#","D","D#","E","F","F#","G","G#"] notesb=["A","Bb","B","C","Db","D","Eb","E","F","Gb","G","Ab"] if(type=="maj") { root=notess[note] third=notess[(note+4)%12] fifth=notess[(note+7)%12] seven=notess[(note+11)%12] ans=root+", "+third+", "+fifth+", "+seven; alert(ans) } if(type=="min") { root=notess[note] third=notess[(note+3)%12] fifth=notess[(note+7)%12] seven=notess[(note+11)%12] ans=root+", "+third+", "+fifth+", "+seven; alert(ans) } document.getElementById("here").innerHTML=ans } </script> </head> <body> <h1>Chord Builder</h1><p> <form name="f1"> Make a:<br> <select name="note"> <option value="0">A<br> <option value="1">A#/Bb<br> <option value="2">B<br> <option value="3" selected>C<br> <option value="4">C#/Db<br> <option value="5">D<br> <option value="6">D#/E<br> <option value="7">E<br> <option value="8">F<br> <option value="9">F#/Gb<br> <option value="10">G<br> <option value="11">G#/Ab<br> </select> <select name="type"> <option value="maj" selected>Major<br> <option value="min">Minor<br> </select> <br> <button onClick="calc()">Make my Chord!</button></br> </form> <span id="here">-chords will be here soon-</span> <p> </body> My URL is: http://localhost/testproject/product.html#catId=155 I want to URL: http://localhost/testproject/product.html without refreshing the page. Is this possible using javascript/jquery or not ? Hi, Im not sure if im going about this the right way but what I'm trying to achieve is to have my webpage seperated into two main div's. The first div contains a media player so it cant be refreshed or the media stops. The second div is used to view content. I've used innerHTML to change the content of the second div from links in the first. The problem is the URL displayed doesn't reflect the change in content of the second div. I want to be able to load content into the second div using innerHTML while changing the URL so people can link directly to that content. Any help or alternative ideas are greatly apprectiated. Thanks. Hello! I have been designing a schedule website which will be displayed on several computers throughout the building, I would like to be able to edit the JS during the day but I do not want to be going all through the building refreshing every computer to make sure it has the latest JS version. I also do not want use the meta HTML tag to refresh because that is too noticeable with the images reloading. Basically I would like to only refresh the JS file. I found this link, but it has a button which defeats the purpose. Any way of doing this without the button? FYI, I have the javascript setTimeout("driver()",1000); already so that the clock stays up to date. Not sure if that will make things easier or more complicated... EDIT: not sure why the ICODE tags are not working EDIT 2: Forgot the website! http://www.philnicholas.com/2009/05/...ing-your-page/ I have the below code i been trying to figure out how to reset the font changes made without having to refresh the website (f5). Currently I have created a button that onClick uses history.go(0) which refreshes the page removing the font changes. I would like help with figuring out a solution to reset (remove font) step1-5 without having to refresh the page. Thanks. Preview of Code Code: <html> <head> <title>My Title Page</title> <script type="text/javascript"> function selectTextArea() { document.FormTextArea.TextAreaBox.select(); document.FormTextArea.TextAreaBox.focus(); } function changeStepColor(id) { document.getElementById(id).style.font="italic bold 15px arial,serif"; } function inputPrompt(String , msg) { String=prompt(msg, ""); if (String!=null && String!="") { document.FormTextArea.TextAreaBox.value=document.FormTextArea.TextAreaBox.value + msg + ' ' + String + '\r' + '----------------------------------' + '\r' } else { document.FormTextArea.TextAreaBox.value=document.FormTextArea.TextAreaBox.value + msg + ' N/A' + '\r' + '----------------------------------' + '\r' } } </script> </head> <body> <table border="1" cellpadding="2" cellspacing="2" width="100%"> <tr> <td width="50%" align="center" valign="top"> <form name="FormTextArea"> <textarea name="TextAreaBox" cols="40" rows="12" wrap="virtual"></textarea> </form> </td> <td width="50%" valign="top"> <font size="2" id="step1">1. Step One</font> <input type="button" value="Input" onclick="inputPrompt('a', 'Step 1:'); changeStepColor('step1');" /><br /> <font size="2" id="step2">2. Step Two</font> <input type="button" value="Input" onclick="inputPrompt('a', 'Step 2:'); changeStepColor('step2');" /><br /> <font size="2" id="step3">3. Step Three</font> <input type="button" value="Input" onclick="inputPrompt('a', 'Step 3:'); changeStepColor('step3');" /><br /> <font size="2" id="step4">4. Step Four</font> <input type="button" value="Input" onclick="inputPrompt('a', 'Step 4:'); changeStepColor('step4');" /><br /> <font size="2" id="step5">5. Step Five</font> <input type="button" value="Input" onclick="inputPrompt('a', 'Step 5:'); changeStepColor('step5');" /> </td> </tr> <tr> <td width="50%" align="center" valign="top"> <input type="button" value="Select Text Area" onClick="selectTextArea()" /> <input type="button" value="Clear Text Area" onClick="document.FormTextArea.TextAreaBox.value=''; history.go(0)" /> </td> <td width="50%" align="center" valign="top">   </td> </tr> </table> </body> </html> hi everyone, Here's part of the codes I got from our website. Right now, when someone wants to register on our website, they have to put into the Captcha after they finish all the other information. If the captcha is empty, there would be an alert; if it's wrong, the page would be refreshed, and there would be another alert, and at the same time, all the information would be lost and they have to fill them again. Now the question is, how can I stop the page refreshing itself? All I need is an alert and then you could retype the captcha without losing the other information. Thank you in advance for your advice! <script type="text/javascript"> function ltrim(stringToTrim) { return stringToTrim.replace(/^\s+/,""); } function validateForm() { var okSoFar=true with (document.practitioner_profile) { if (firstname.value=="" && okSoFar) { okSoFar=false alert("Please enter your first name.") firstname.focus() } if (lastname.value=="" && okSoFar) { okSoFar=false alert("Please enter your last name.") lastname.focus() } //some other things here... if (verify_code.value=="" && okSoFar) { okSoFar=false alert("Please enter your security code.") verify_code.focus() } if (okSoFar==true) submit(); } } //here's the submit button in the html code, <div class="practsubmit"> <div class="signupform"><h4>* Security Code:</h4> <p>Please type in what you see in the box below and press submit. Characters are case-sensitive.</p></div> <div class="signupform"><img id="captcha" src="index.php?option=com_egbcaptcha&width=150&height=50&characters=5" /><br /><input id="verify_code" name="verify_code" type="text" /></div> <input type="button" class="button" value="Send" name="B1" ONCLICK="javascript:validateForm()"> <input type="reset" class="button" value="Clear" name="clear"> </div> is it possible to refresh a select list on it's own without refreshing the whole page?
How can I execute this: From the dropdown list build up from mysql database (say a list of fruits). I select "Add New Fruit". This triggers it to either have a modal form to add new fruit or a table form. Once submitted, Select dropdown list RELOADS including the newly added data (fruit) without reloading the whole page which contains other form control such as textbox. Hi Everyone I'll explain the situation first: I need to build a website that allows students to select from a drop down list and then hit an 'Add button'. From there, that value will go to another part of the screen and display as bullets. Once that list is built, they can hit a final submit button that sends an email to someone with everything they selected. More Detail: LEFT SIDE OF SCREEN: [DROP DOWN LIST] <- this will have all the courses listed that we offer. Once once is selected. [ADD] <- add button that puts the values from the dropdown list to an array. RIGHT SIDE OF SCREEN: My Courses: * TEST1001 * TEST1002 This is being updated dynamically so that whenever the add button is hit, this lists grows. [SEND] <- Send button Thank you, I have home page with session close button and 10 child window link and i am opening all child window.All child windows should close after clicking on session close button. Code bellow <html> <script type="text/javascript"> openWins = []; curWin = 0; function openWin(page) { openWins[curWin++] = window.open(page,'_blank'); } function closeAll() { for(var i=0; i<openWins.length; i++) if (openWins[i] && !openWins[i].closed) openWins[i].close(); } window.onunload = closeAll; </script> <body > <input type="button" onClick="openWin('http://www.google.com');" value="Open PopUps"> <input type="button" onClick="closeAll('http://www.google.com');" value="Close PopUps"> </body> </html> how could i save radio buttons choices especially when i have many groups of radio buttons. i mean when refreshing the page they stay as they are.
Hi, I am Aditya. I am explaining below the exact scenario where I need the help: I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text. Now, I need help for the below issues: 1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages. 2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page. I am new to web development, so may be that these questions are too simple. But, I need some help from you. Waiting for your reply, Thanks, Aditya Hello Basically I have found and adapted the code: Code: alreadyloading = false; nextpage = 2; $(window).scroll(function() { if ($('body').height() <= ($(window).height() + $(window).scrollTop())) { if (alreadyloading == false) { var url = "page"+nextpage+".html"; alreadyloading = true; $.post(url, function(data) { $('#projectscontainer').children().last().after(data); alreadyloading = false; nextpage++; }); } } }); I want when the user scrolls to the bottom of the page for content in a new page to load under the div "#projectscontainer". So in the new page 'Page2.html" I have put 5 divs going down with content in... I want the new content to appear below "#projectscontainer'" Why won't this work? Anyone know? Thanks Hi all, I have a complicated (well to me it is!) problem with a form I am creating for my site. The form has three sections with the ability to add another field unlimited times. There is one for adding ingredients, one for equipment and one for steps The name and id does increment on all 3 however the problem is they seem to all be using the same count, by this I mean that if I add 2 steps (which brings the count to 3) and then add an ingredient, the ingredient id goes to ingredient4 - obviously because it is taking the count that step has set. I am no javascript guru, I am more a designer so I'm really struggling, Ive been working on this one for days.. There is also another problem in that if I create say 3 steps bringing the count up to step4 and then remove the second step, I cant see how I can bring the other steps after step2 count down by one, at the moment step4 and step3 are staying as step3 and step4 but because step2 was removed they should drop down to becoming step2 and step3. My php that inserts the data into my db isnt working because the ids keep getting messed up I have a demo URL up on ajburchell.com/form.html If anyone can help me with this I will be extremely grateful Thank you in advance I want to create several pages (they can be text or html) with basic informatons for css formatting. example: <div class="appname" name: this app <div class="appdetails"> Version: 1.0 Date: 1/1/2011 Description: this is an app </div> </div> I want to be able to save several of these and load them into a web page where they are formatted and displayed. This needs to be a client side solution so that I can be able to access this offline. Any suggestions? Edit: so far I have tried this but I am not sure about it. <object type="text/html" data="app1.html"> Hi, I wish to get some content from another page. Here is my code. Code: <script type="text/javascript"> jQuery.ajax({url: 'http://www.livecounter.dk/viewstats/30050',type: 'get',success: function(ajax) { var x = jQuery('#box4 .first:last', ajax).innerHTML; document.write(x); } } }); </script> <script src="http://code.jquery.com/jquery-1.6.1.min.js"> </script> But it isn't working. I can't get the at this page : http://www.livecounter.dk/viewstats/30050 under "Altid" (to the right), next to "Sidevisninger". Image of it here : http://i51.tinypic.com/2e0sb9s.png Thanks 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 So I'm trying to get one particular number from a game's grand exchange database. Say I wanted to know the 'Market price' of this item and the item results would change on click of a drop down box. I don't know how I'd go about getting that one section of the entire page though. Any help is appreciated. Code: <html> <head> <title></title> function doit() { var potion = calculate.potion.options[calculate.potion.selectedIndex].text; if (potion=="Sara brew") { var potion = "Saradomin_brew_(3)"; } if (potion=="Zammy brew") { var potion = "Zamorak_brew_(3)"; } calculate.results.value=potion; } </head> <body> Item: <select name="potion" onChange="doit()" /> <option selected>--Potion--</option> <option>Sara brew</option> <option>Zammy brew</option> <br /> <input type="text" name="results" /> </body> </html> I know that when you "display: none" with CSS it will not show the div content in the browser, but will still show the div and content in page source. Is there a way (via javascript or anything else) to also remove the content from page source at the same time? Thanks. Hi all: This script and code works great, but in order for me to finish, I need a way of passing to the next PHP page which check box is checked. Currently, it is just passing a single value (1, 2, 3, 4, 5, or 6) depending on the last box checked. I need a way to record which check boxes are selected. Code: <html> <head> <script type="text/javascript"> var majors = { "001 - Exchange" : [ 2, 6 ], "003 - Academic Foundations" : [ 2, 6 ], "005 - Pre-Engineering" : [ 2, 6 ], "006 - Pre-Business" : [ 2, 6 ], "008 - Pre-Nursing" : [ 2, 6 ], "010 - Accounting" : [ 3, 4 ], "014 - Afro-American Studies" : [ 2, 6 ], "050 - American Studies" : [ 2, 6 ], "070 - Anthropology" : [ 2, 6 ], "080 - Art" : [ 2, 6 ], "082 - Art History" : [ 2, 6 ], "090 - Arts and Sciences" : [ 2, 6 ], "100 - Astronomy" : [ 2, 6 ], "115 - Biochemistry" : [ 2, 6 ], "120 - Biology" : [ 2, 5, 6 ], "124 - Biomedical Technology" : [ 2, 6 ], "130 - Botany" : [ 2, 6 ], "135 - Business Administration" : [ 3, 4 ], "140 - Business Law" : [ 3, 4 ], "160 - Chemistry" : [ 2, 5, 6 ], "163 - Childhood Studies" : [ 2, 5, 6 ], "190 - Classics" : [ 2, 6 ], "198 - Computer Science" : [ 2, 5, 6 ], "200 - Creative Writing" : [ 5 ], "202 - Criminal Justice" : [ 2, 5, 6 ], "203 - Dance" : [ 2, 6 ], "220 - Economics" : [ 2, 6 ], "300 - Education" : [ 2, 6 ], "350 - English" : [ 2, 5, 6 ], "352 - English - American Literature" : [ 2, 5, 6 ], "354 - English - Film Studies" : [ 2, 5, 6 ], "360 - European Studies" : [ 2, 6 ], "387 - Film Studies" : [ 2, 6 ], "390 - Finance" : [ 3, 4 ], "415 - Foreign Languages" : [ 2, 6 ], "420 - French" : [ 2, 6 ], "460 - Geological Sciences" : [ 2, 6 ], "470 - German" : [ 2, 6 ], "490 - Greek" : [ 2, 6 ], "500 - Hebraic Studies" : [ 2, 6 ], "509 - Historical Methods and Skills" : [ 2, 6 ], "510 - History, General" : [ 2, 6 ], "512 - History, American" : [ 2, 5, 6 ], "516 - African Asian Latin American and World Hist" : [ 2, 6 ], "520 - Home Economics" : [ 2, 6 ], "525 - Honors Program" : [ 2, 6 ], "533 - Human Resource Development" : [ 3 ], "537 - Hospitality Management" : [ 3 ], "549 - International Studies" : [ 2, 6 ], "555 - Student Proposed Major" : [ 2, 6 ], "560 - Italian" : [ 2, 6 ], "565 - Japanese" : [ 2, 6 ], "570 - Journalism" : [ 2, 6 ], "580 - Latin" : [ 2, 6 ], "590 - Latin American Studies" : [ 2, 6 ], "601 - Law - Day Student" : [ 1 ], "602 - Law - Evening Student" : [ 1 ], "606 - Liberal Studies" : [ 2, 5, 6 ], "615 - Linguistics" : [ 2, 5, 6 ], "620 - Management" : [ 3, 4 ], "623 - Management Science and Info Systems" : [ 3, 4 ], "626 - Managerial Economics" : [ 4 ], "630 - Marketing" : [ 3, 4 ], "640 - Mathematics" : [ 2, 6 ], "645 - Mathematical Science" : [ 5 ], "660 - Medical Technology" : [ 2, 6 ], "680 - Microbiology" : [ 2, 6 ], "698 - Museum Studies" : [ 2, 6 ], "700 - Music" : [ 2, 6 ], "701 - Music, Applied" : [ 2, 6 ], "705 - Nursing" : [ 2, 6 ], "730 - Philosophy" : [ 2, 6 ], "740 - Physical Education" : [ 2, 6 ], "742 - Physical Therapy" : [ 5 ], "750 - Physics" : [ 2, 6 ], "760 - Physiology" : [ 2, 6 ], "780 - Plant Physiology" : [ 2, 6 ], "790 - Political Science" : [ 2, 6 ], "830 - Psychology" : [ 2, 5, 6 ], "834 - Public Administration" : [ 5 ], "840 - Religon" : [ 2, 6 ], "842 - Rhetoric" : [ 5 ], "860 - Russian" : [ 2, 6 ], "890 - General Science" : [ 2, 6 ], "910 - Social Work" : [ 2, 6 ], "920 - Sociology" : [ 2, 6 ], "940 - Spanish" : [ 2, 6 ], "950 - Speech" : [ 2, 6 ], "960 - Statistics" : [ 2, 6 ], "964 - Teacher Preparation" : [ 2, 6 ], "965 - Theater Arts" : [ 2, 6 ], "975 - Urban Studies and Community Development" : [ 2, 6 ], "976 - Urban Planning" : [ 2, 6 ], "981 - Volunteer Organization and Leadership" : [ 2, 6 ], "988 - Womens & Gender Studies" : [ 2, 6 ], "989 - Writing" : [ 2, 6 ], "990 - Zoology" : [ 2, 6 ] }; Array.prototype.isMember = function( find ) { for ( var i = 0; i < this.length; ++i ) { if ( this[i] == find ) return true; } return false; } function resetOptions( ) { var form = document.theForm; var sel = form.Majors; for ( var s = sel.options.length-1; s > 0; --s ) { sel.options[s] = null; } var checked = [ ]; for ( var cb = 0; cb < form.schools.length; ++cb ) { if ( form.schools[cb].checked ) checked.push( form.schools[cb].value ); } for( major in majors ) { var mschools = majors[major]; for ( var c = 0; c < checked.length; ++c ) { if ( mschools.isMember( checked[c] ) ) { sel.options[sel.options.length] = new Option( major, major ); break; } } } } </script> </head> <title>Search</title> <body bgcolor="99CCFF"> <center> <br> <center>Search:<table border='1'> <form name='theForm' action='display.php' method='post'> <tr><td>ID: </td><td><input type="text" name="ID"/></td></tr> <tr><td>Last Name: </td><td><input type="text" name="NAME_LAST"/></td></tr> <tr><td>First Name: </td><td><input type="text" name="NAME_FIRST"/></td></tr> <tr><td valign="top">School: </td> <td> <input type="checkbox" name="schools" value="1" onClick="resetOptions()"> Law School<br/> <input type="checkbox" name="schools" value="2" onClick="resetOptions()"> College of Arts and Sciences<br/> <input type="checkbox" name="schools" value="3" onClick="resetOptions()"> School of Business (Undergraduate)<br/> <input type="checkbox" name="schools" value="4" onClick="resetOptions()"> School of Business (Graduate)<br/> <input type="checkbox" name="schools" value="5" onClick="resetOptions()"> Graduate School<br/> <input type="checkbox" name="schools" value="6" onClick="resetOptions()"> University College </td> </tr> <tr><td>Major: </td><td><select name="Majors"> <option value="" selected>Select a major</option> </select></td></tr> <tr><td>Order By: </td><td> <select name="ORDER_BY"> <option value = "" selected> Select One </option> <option name="NAME_LAST" value = "NAME_LAST ASC"> Last Name </option> <option name="CURRIC_CD" value = "CURRIC_CD ASC"> Major </option> <option name="ID" value = "ID ASC"> RUID </option> <option name="UNIT_OF_REG_CD" value = "UNIT_OF_REG_CD ASC"> School </option> <option name="EMAIL_ADDR" value = "EMAIL_ADDR ASC"> Email Address </option> </select></td> </tr> </table> <br><br> <input type='submit'/> </form><br><br> </center> </body> </html> Thanks in advance. |