JavaScript - Updating A Cell With Fnupdate From Datatables Jeditable
We use datatables on our site which displays data from a MySQL database, we just installed jeditable for inline editing, when a user updates a field the database is updated but the cell doesn't refresh displaying the new data. Our initialization code is below, any help is appreciated
Code: $(document).ready(function() { oTable3 = $('#links').dataTable( { "sDom":'t<"bottom"ifpl><"clear">', "bAutoWidth": false, "sPaginationType": "full_numbers", "aoColumns": [ { "bSortable": false}, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null ] } ).makeEditable({ sUpdateURL: "<a href="http://domain.com/account/profiles/updatelinkvalue%22" target="_blank" rel="nofollow">http://domain.com/account/profiles/updatelinkvalue"</a>, "aoColumns": [ null, null, { //indicator: 'Saving Engine Version...', tooltip: 'Click to change link status', loadtext: 'loading...', type: 'select', onblur: 'submit', submit: 'Ok', loadurl: '<a href="http://domain.com/account/profiles/engineversionlist%27" target="_blank" rel="nofollow">http://domain.com/account/profiles/engineversionlist'</a>, loadtype: 'GET', sUpdateURL: "<a href="http://domain.com/account/profiles/customupdateenginevalue%22" target="_blank" rel="nofollow">http://domain.com/account/profiles/customupdateenginevalue"</a>; }, Similar TutorialsHi, I am using the JS plugin DataTables. I am initializing the plugin on the Document ready and it is working fine. However, when I try to invoke a method, it throws the error: TypeError: table.fnSort is not a function When debugging, table shows all the properties and methods of DataTables and fnSort shows undefined. I checked the DataTables js file and fnSort is there. Does anyone know why this might be happening? Here is the page: Prudential Annuities FP Portal If you click the upper arrow of the right column (Double), you will see the alert and the error. FYI - You have to refresh the page each time to see the error. Thanks! <script language="JavaScript"> function changeColor(cell_id){var state1="#dde6ed"; var state2="#ffc20e"; var cellid = new Array ("id1", "id2", "id3", "id4", "id5", "id6"); for(var i = 0; i < cellid.length; i++){var nav = document.getElementById(cellid[i]); if(cellid == nav.id){nav.style.backgroundColor=state2;} else {nav.style.backgroundColor=state1;}}} </script> Can anyone tell me what is wrong with this script. I put an onClick= changeColor(this);" in my <td> tag to call the script but still not working. I have a table with two rows and 4 columns, the first cell has rowspan of 2. How do I insert something into the first cell only? How can I get the cell index of the first cell?
Hi guys can help me are very little versed in javascript ... I explain my problem! I have a table where they passed the results of a query ... The table field is called Article and consists of about 500 characters, but the substring in the table with a step the first 40 characters, and now the question arises ... I would click on the text of the article and see the page the entire article ... Code: query="SELECT * FROM Articolo ORDER BY titolo DESC"; ResultSet r = stmt.executeQuery(query); %> <table border="1"> <tr><td> titolo </td> <td> articolo </td> <td> data inser </td></tr> <% while(r.next()) { Tot = r.getString("titolo"); Art = r.getString("articolo"); dat = r.getString("data_inserimento"); String meta = ""; String metadata = ""; meta = Art.substring(0,40); metadata = dat.substring(0, 10); StringBuffer sb = new StringBuffer(meta); sb.replace(37,40, "..."); String s2 = sb.toString(); %> <tr> <td> <%= Tot %> </td> <td> <a href="#" onClick="this.innerText = '<%= Art %>';"><%= s2 %></a> </td> <td> <%= metadata %> </td> </tr> <% } %> </table> Hello. I'm creating a simple auto updating script based on PHP and using jQuery to set the interval to 1000 miliseconds. It works in FireFox, as the only one I've tested so far, but in Internet Explorer (Version 7 right now, didn't test others) it just freezes and doesn't auto update. Doesn't auto update either if I refresh the page, so something's messed up here. I'm using the same way of auto updating on other things, such as a chat-page - works on those in all browsers, so I'm kinda on a lost track here. Here's the JavaScript/jQuery: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> function loadContent() { $('#count').load('counter.php', function() { setTimeout("loadContent()", 1000); }); return false; } $(loadContent); And this is what I put on the body of the page: Code: <div id="count"></div> Can anyone see what my problem is? And any workarounds for this? Hi I am making a PC customization website, And I need help wit hthe inputs where you select the parts for the PC. Anyway, I need help for self updating inputs, Like if a user was to select a socket 775 processor, The form would automatically update the motherboard field from --Select a processor-- to a list of socket 775 motherboards. I am quite new at javascript I have never attempted to do anything like this myself, Although I don't know if this would need some PHP in here as well Anyway thanks in advance, Gergy Hi, I am creating a web page which automatically updates one image every 5 seconds. I use ajax to fetch a new img url every 5 seconds, and then update the image by changing img.src. I tested the same (in IE8, firefox) and it worked without any issues in my development server. But, when I try to put it on production server, many people are complaining that they are not able to see any image at all. Code: if (url_received){ var path = url.substring(url.indexOf("/")); var img = document.getElementById("testimage"); img.src = "/test/media/" + path; } I cannot think of a reason why this is failing for others. Is this due to any security issues? If someone helps me out, I would be very thankful. Hi - I am updating a site for a friend as the original designer has gone missing.. I am no developer by any means but know basic html etc.. I want to change a link in the drop down menu.js file, have opened it in my text editor and changed the link that needs changing to a diff page but it isn't updating on the site - arghhh!! I have notice at the top of the page it has: // QuickMenu Pro, Copyright (c) 1998 - 2003, OpenCube Inc. - http://www.opencube.com does this have anything to do with it? I can't find anything on google - any advice is greatly appreciated. Thanks Hi, First, I'm a newbie in javascript and I need help to do something with a random numbers. I would like to put the result numbers in the "<td class="style1">#01</td>" section and an image in <td class="style1">img1</td> depending of the result number. Exemple : If the result number is #1 then the image Under the #01 will be an image associated to the number 1". Number 1 = "red circle.jpg", Number2 = "blue square.jpg", etc. Am I clear ? Here is my actual HTML canvas : -------------------------------------- <!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" /> <title>Result</title> <style type="text/css"> .a1{ position:relative; font-family:Verdana; font-size:20px; color:#888888; } .style1 { text-align: center; } </style> <script language="JavaScript"> /***************************************** * Lottery Picker (By Kurt at kurt.grigg@virgin.net) * Featured on/available at Dynamic Drive DHTML(dynamic html) & JavaScript code library * Modified by DynamicDrive.com for below config options * This notice must stay intact for use. *****************************************/ var totalnumbers=6 //input total numbers to generate var lowerbound=1 //input lower bound for each random number var upperbound=49 //input upper bound for each random number function lotto(){ B=' '; LottoNumbers=new Array(); for (i = 1; i <= totalnumbers; i++) { RandomNumber = Math.round(lowerbound+Math.random()*(upperbound-lowerbound)); for (j = 1; j <= totalnumbers; j) { if (RandomNumber == LottoNumbers[j]) { RandomNumber=Math.round(lowerbound+Math.random()*(upperbound-lowerbound)); j=0; } j++; } LottoNumbers[i]=RandomNumber; } LottoNumbers=LottoNumbers.toString(); X=LottoNumbers.split(','); for (i=0; i < X.length; i++) { X[i]=X[i]+' '; if (X[i].length==2) X[i]='0'+X[i]; } X=X.sort(); for (i=0; i < X.length; i++) { OutPut=B+=X[i]; } if (document.all)document.all.layer1.innerHTML=OutPut; if (document.getElementById)document.getElementById("layer1").innerHTML=OutPut; if (document.layers){ document.layers.layer1.document.open(); document.layers.layer1.document.write("<span style='position:absolute;top:0px;left:0px;font-family:Verdana;font-size:20px;color:#888888;text-align:center'> "+OutPut+"</span>"); document.layers.layer1.document.close(); } T=setTimeout('lotto()',20); //window.status=OutPut; } function StOp(){ setTimeout('clearTimeout(T)',1000); } //--> </script> </head> <body> <table border='0' width=250 style="height: 146px"> <tr valign='middle'> <td align='center'> <form name=form> <input type=button value='Lottery Number Picker' onClick="lotto();StOp()"> </form> <span id=layer1 class=a1>Result</span> </td> </tr> </table> <table style="width: 250px; height: 100px" cellspacing="0" cellpadding="0"> <tr> <td class="style1">#01</td> //result number 1 have to be here <td class="style1">#02</td> //result number 2have to be here <td class="style1">#03</td> //result number 3 have to be here <td class="style1">#04</td> //result number 4 have to be here <td class="style1">#05</td> //result number 5 have to be here <td class="style1">#05</td> //result number 6 have to be here <td style="height: 50px" class="style1">#06</td> </tr> <tr> <td class="style1">img1</td> //associated image of the result number 1 have to be here <td class="style1">img2</td> //associated image of the result number 2 have to be here <td class="style1">img3</td>//associated image of the result number 3 have to be here <td class="style1">img4</td>//associated image of the result number 4 have to be here <td class="style1">img5</td>//associated image of the result number 5 have to be here <td class="style1">img6</td>//associated image of the result number 6 have to be here </tr> </table> </body> </html> -------------------------------------- Thank you very much to helping me to understand how to do it !! Sylvano Reply With Quote 12-22-2014, 05:36 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts This is hideously old and indeed crude code. document.all applied to IE4 and document.layers to Netscape 3. <script language="JavaScript"> and document.write() are also long obsolete. As is T=setTimeout('lotto()',20); I would suggest you get hold of a more up-to-date code. Simply rename your images 1.jpg, 2.jpg and so on, and display the appropriate one in its correct position. I'll give you a far better lottery number generator:- Code: <!DOCTYPE html> <head> </head> <body> <script type = "text/javascript"> function mylotto() { var rlts = document.getElementById("results"); rlts.value = ''; // clear results var srtrlts = document.getElementById("sortedresults"); srtrlts.value = ''; // clear results var hmany = document.getElementById("howmany").value; var max = parseInt(document.getElementById("maxnum").value); if (isNaN(max) || max <= hmany) { alert ("You must choose a number greater than " + hmany + " for the maximum number value!"); document.getElementById("maxnum").value = 49; return false; } var numArray = new Array(max); var chosen = new Array(hmany); var uniqueList = new Array(hmany); for (var i = 1; i <= max; i++) { // set up array 1 to max numArray[i-1] = i; } Array.prototype.shuffle = function() { var s = []; while (this.length) s.push(this.splice(Math.random() * this.length, 1)); while (s.length) this.push(s.pop()); return this; } numArray.shuffle(); // shuffle the array for (var i = 0; i < hmany; i++) { // take the first howmany items uniqueList[i] = numArray[i]; } rlts.value = uniqueList.join(" "); srtrlts.value = uniqueList.sort(sortNumber).join(" "); function sortNumber(a,b) { return a - b; } //alert ("The unsorted random numbers a - \n" + uniqueList) //alert ("The sorted unique random numbers a - \n" + uniqueList.sort(sortNumber)); } </script> <p>UNIQUE NUMBERS LOTTERY PICKER</p><br> <form> Select How Many Unique Numbers <select id="howmany"> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <option value=6 selected>6</option> <option value=7>7</option> <option value=8>8</option> <option value=9>9</option> <option value=10>10</option> </select> <br> Enter the Maximum Number Value  <input type="text" id = "maxnum" value="49" size="2"><br><br> <input type="button" value="Here we go!" onclick="mylotto()"> <br><br> Unsorted Results:- <input type = "text" id = "results" size = "60"><br> Sorted Results:-     <input type = "text" id = "sortedresults" size = "60"> </form> </body> </html> Quizmaster: In which river did John the Baptist baptise Jesus? Contestant: The Amazon I need to make a javascript that when I am at a page within a game I play and click the javascript, it will get the value of a table cell, separate them to x and y variables and then put the values into a link that opens. The open link is of a php script that uses $_GET for the values of the variables to query my database. I am terrible at javascript and have been trying to do this for 2 days now with no success. So I hope I can find help here. Here's the scripts so it is easier to understand: This is part of the html page that is from the game. I need to have the javascript get 432|608 and assign x=432 and y=608 in this case, although those number change, the place in the table that that they are displayed do not change. <td>Coordinates:</td> <td><a href="game.php?village=19392&s=map&x=432&y=608">432|608</a></td> <html> <head> <title></title> <meta http-equiv="Content-Language" content="de"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Page-Enter" content="revealTrans(Duration=0.1,Transition=4)"> <link rel="stylesheet" type="text/css" href="kingsage.css"> <link rel="shortcut icon" href="favicon.ico" type="image/ico"> <script src="js/kingsage.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> <script src="js/mootools-1.2-core-nc.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> <script src="js/mootools-1.2-more.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> <script src="js/map_src.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> </head> <body> <script type="text/javascript"> //<![CDATA[ lang = new Array(); lang['DAY'] = 'Day'; lang['DAYS'] = 'Days'; //]]> </script> <div style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" align="center"> <table style="border-collapse: collapse; height: 100%;" width="100%" cellpadding="0" cellspacing="0"> <tbody> <tr valign="top"> <td width="50%" align="right"> <br> </td> <td style="width: 840px;"> <table style="border-collapse: collapse; width: 840px; height: 100%;" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="lay_content" valign="top"><a name="head2"></a> <div class="contentpane"> <table class="borderlist" style="width: 420px;"> <tbody> <tr> <th colspan="2">Abandoned settlement</th> </tr> <tr> <td>Coordinates:</td> <td><a href="game.php?village=19392&s=map&x=432&y=608">432|608</a></td> </tr> <tr> <td>Points:</td> <td>390</td> </tr> <tr> <td>Player:</td> <td><br> </td> </tr> <tr> <td>Alliance:</td> <td><a href="game.php?village=19392&s=info_ally&id="></a><br> </td> </tr> </tbody> </table> <br> </div> </td> </tr> </tbody> </table> </td> <td width="50%" align="left"> <br> </td> </tr> </tbody> </table> </div> <div id="settlement" style="display: none;"></div> <script type="text/javascript"> //<![CDATA[ startCounter(); //]]> </script> </body> </html> Here's the php script that will process the x and y Code: <?php putenv("TZ=Europe/Berlin"); session_start(); include("includes/config.php"); $username = $_GET['username']; $pass = $_GET['pass']; $x = $_GET['x']; $y = $_GET['y']; $now = time(); //confirm user can make claim global $conn; $q = "SELECT password FROM users WHERE username = '$username' AND active = 1"; $result = mysql_query($q,$conn); if(!$result || (mysql_numrows($result) < 1)) { $data = "Your identity can not be authenticated"; } else { $dbarray = mysql_fetch_array($result); if($pass == $dbarray['password']) { $continue = true; } else { $data = "Your password can not be authenticated"; } } //if can claim then check the village if($continue) { $q = "SELECT * FROM `claims` WHERE x = '$x' AND y = '$y' AND state = 1"; $village = mysql_query($q, $conn); $result = mysql_fetch_assoc($village); if(!$result) { $can_claim = true; } elseif($result) { if($result['username'] == $username) { $data = "You already have an active claim on ($x|$y)"; } elseif($result['username'] <> $username) { $claimer = $result['username']; $data = "$claimer already has an active claim on ($x|$y)"; } } if($can_claim == true) { global $conn; $claim_made = time(); $claim_expires = $claim_made + 432000; $state = 1; $q = "INSERT INTO `claims` (x, y, username, claim_made, claim_expires, state) VALUES ('$x', '$y', '$username', '$claim_made', '$claim_expires', '$state')"; $add_claim = mysql_query($q, $conn); if($add_claim) { $data = "Success! You claimed ($x|$y)"; } else { $data = "Error: Your claim on ($x|$y) did not complete."; } } echo "<SCRIPT>alert(\"$data\");</SCRIPT>"; } ?> The javascript should link to this php script and send the variables like this: 'http://twv-kingsage.tw-family.us/auto_add_claim.php?username=username&pass=md5_password&x="+x+"&y="+y' Can someone tell me how to extract the values for x and y from the page and get them to the link? Thanks for the help, it is much appreciated. In the code below I have an iframe that acts as a WYSIWYG editor. On load a link is loaded inside the iframe. When you click the link a div opens that displays the URL of that link. Upon changing the link inside the DIV I want to update the href tag that I clicked. I've experimented with pasteHTML/execCommand("inserthtml") however this only updates the link when you select the text before clicking (as opposed to just clicking on the link), otherwise it inserts a whole new link. I'm trying to get this working across IE, Firefox, Opera, Chrome and Safari. I'd happily pay someone (Paypal) to help me with this. Code: <html> <body> <script language="JavaScript"> // Initialize WYSIWYG function initialise() { // HTML code to paste var html = "<a href='http://www.google.com'>Click Me</a>"; if (detectBrowser() == "ie") { // IE editorContent.document.designMode='on'; // turn on design mode editorContent.document.attachEvent("oncontextmenu", showContextMenu); // add listener for context menu editorContent.document.attachEvent("onclick", showContextMenu); // add listener for context menu // Paste the HTML code in iframe document.editorContent.focus(); range = editorContent.document.selection.createRange(); range.pasteHTML(html); document.editorContent.focus(); } else { // FF, Saf, Chr, Op document.getElementById("editorContent").contentDocument.designMode='on'; // turn on design mode editorContent.document.addEventListener("contextmenu", showContextMenu, true); // add listener for context menu editorContent.document.addEventListener("click", showContextMenu, true); // add listener for context menu // Paste the HTML code in iframe editorContent.focus(); editorContent.document.execCommand("inserthtml", false, html); editorContent.focus(); } } // Show Context Menu function showContextMenu(e) { // Get the URL from the clicked link if (detectBrowser() == "firefox") { url = e.target.href; } else { url = document.getElementById('editorContent').contentWindow.event.srcElement.href; } // Set the URL in the pop-up and load it document.getElementById("theUrl").value = url; document.getElementById("popUp").style.visibility = 'visible'; document.getElementById("popUp").style.display = ''; if (navigator.appName != "Microsoft Internet Explorer") { e.stopPropagation(); e.preventDefault(); } return false; } // Update the URL function updateUrl() { newUrl = document.getElementById("theUrl").value; alert('Update the URL to '+newUrl); /*******************************************/ /* WHAT TO DO HERE TO UPDATE URL IN EDITOR */ /*******************************************/ document.getElementById("popUp").style.visibility = 'hidden'; document.getElementById("popUp").style.display = 'none'; } // Detect browser function detectBrowser() { var userAgent = navigator.userAgent; var browser; if (userAgent.indexOf("MSIE") !=-1) browser = "ie"; if (userAgent.indexOf("Firefox") !=-1) browser = "firefox"; if (userAgent.indexOf("Chrome") !=-1) browser = "chrome"; if (userAgent.indexOf("Safari") !=-1) browser = "safari"; if (userAgent.indexOf("Opera") !=-1) browser = "opera"; return browser; } </script> <div id="popUp" style="width:250px; height:60px; border: 1px solid black; visibility:hidden; display:none; position: absolute; left: 300px; background-color:yellow; padding: 10px"> <form> <input type="text" id="theUrl" size="30"> <p><input type="button" value="Update" onClick="updateUrl()"> </form> </div> <iframe id="editorContent" name="editorContent" width="200" height="200" frameborder="1" onLoad="initialise();"></iframe> </body> </html> Hello Guys, I have a question here.. I have a scroller on my pages that basically reads a text file and displays.. The problem that I am having is it doesn't update until I reload the page(even though the .txt file updates about every 3 minutes).. I would like it to update when the file has been changed.. Here is my page. PHP Code: <link rel="stylesheet" href="../../css/li-scroller.css" type="text/css"> <script src="../../js/jquery.li-scroller.1.0.js" type="text/javascript"></script> <script type="text/javascript" src="../../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul#ticker01").liScroll(); }); </script> <?php $file = file_get_contents ('playingnow.txt'); ?> <div class="scrollpos"> <ul id="ticker01"> <li><a href="#"><?php Echo $file;?></a></li> <!-- eccetera --> </ul> </div> What can I add to make it go out and reload just the div not the entire page? Please advise.. All, first post on the forum. I hope this is relatively simple. I've looked around for the answer, but I thin think the search terms (update onchange event) are a bit too common... Code: document.getElementById("tester").innerHTML= "hello"; document.getElementById("tester").onmouseover = "alert('hello')"; You see I'm trying to change an event like I'd change a property. The first will change the text to hello. I'd like the second to change the onmouseover event to display a hello world alert... but it doesn't seem to do anything. How can I change events? Jason In a form I have two input boxes (ids of return1 and return2) with default values of 0 and a span element (id return3). The span's value is initalized to 0 on page load, and it updates when a button is clicked that calculates x - value of return1 - value of return 2, where x is calculated elsewhere. Form code: Code: Month 1: <input size="7" type="text" value="0" id="return1" name="return_1"> <input type="button" value="Calculate Remaining Amount" onClick="thirdReturn();"> Month 2: <input size="7" type="text" id="return2" value="0" name="return_2"> Month 3: <span style="color:black; font-size:14px;" id="return3"></span> ThirdReturn code: Code: function thirdReturn() { var first_return = document.getElementById("return1").value; var second_return = document.getElementById("return2").value; first_return = first_return.replace(/\,/g,''); second_return = second_return.replace(/\,/g,''); var combined = Number(first_return) + Number(second_return); if (typeof this.remaining_pipp_amount == "undefined") { alert('Please select a Flex option'); } else{ if (combined > this.remaining_pipp_amount){ alert('Return Amount Exceeds Credit Amount'); } else{ var temp = this.remaining_pipp_amount - combined; var third_return_amount = document.getElementById("return3"); third_return_amount.innerHTML = addCommas(Math.round(temp)); } } } I am trying to change it so that if return2 is zero when the button is clicked, return2 = x - return 1. Here is what I have: Code: function thirdReturn() { var first_return = document.getElementById("return1").value; var second_return = document.getElementById("return2").value; first_return = first_return.replace(/\,/g,''); second_return = second_return.replace(/\,/g,''); var combined = Number(first_return) + Number(second_return); if (typeof this.remaining_pipp_amount == "undefined") { alert('Please select a Flex option'); } else{ if (combined > this.remaining_pipp_amount){ alert('Return Amount Exceeds Credit Amount'); } else{ var temp = this.remaining_pipp_amount - combined; if (second_return == 0){ var new_second = document.getElementById("return2") new_second.innerHTML = Math.round(temp); } else{ var third_return_amount = document.getElementById("return3"); //alert (temp); third_return_amount.innerHTML = addCommas(Math.round(temp)); } } } } Does anyone know why this doesn't work or what can be done to fix it? Thank you! I've done some googling and have come across some information, but I'm not quite sure how to apply it to my problem. I have a PHP page saturna.php with six frames on it using the frameset commands. I would like to somehow make it so that when I click on something in one frame (with one PHP page loaded in it - game.php), it automatically/dynamically updates one of the other PHP pages (inventory.php) in another frame. What will happen is when the thing is clicked on in game.php, an entry will be added to the database, and the second PHP page (which retrieves information from the database) will notice that there is a new relevant record, and will add it to the inventory.php page in the table I have constructed there. From my googling it seems I need to use JavaScript to do this, but I'm not quite sure how - any ideas ? Thanks very much! Is there any way that I can make my HTML website STAY updated from a javascript innerHTML or value change? I've only used it a little...
I am fairly new to JS so please have patenience with me. What I am codeing is essentialy some digital signaage for my office. I will have a calender that updates through several screens with information in them. The basic page stays the same but the content is loaded into a large iframe in the center of the page and each html file loaded into the iframe is changed using meta tags. This is a touch screen so I want control along the bottom of the screen. I have did this very crudely with css and html. But I would like to refine it a little more with javascript. I want javascript to control the content of the iframe and javascript to control the buttons along the bottom to manual switch to a diffferent screen along with a button that stops the auto reloading of the page. Here is where I am so far. I have the javascript to automatilly change the iframe src but I need help with the nav buttons and the stop button. Right now the nav buttons are still using the regular <a> tags targeting the iframe. Code: <html lang="en"> <head> <meta charset="utf-8"> <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"> <meta name="created" content="Thu, 21 Jul 2011 15:16:57 GMT"> <meta name="description" content=""> <meta name="keywords" content=""> <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> <script type="text/javascript"> var frames = Array('cal11,html/', 10, 'cal22.html/', 10, 'cal33.html/', 10, 'cal55.html/', 10 'cal66.html/', 10, 'cal77.html/', 10, 'cal44.html/', 15,); var i = 0, len = frames.length; function ChangeSrc() { if (i >= len) { i = 0; } // start over document.getElementById('frame').src = frames[i++]; setTimeout('ChangeSrc()', (frames[i++]*1000)); } window.onload = ChangeSrc; </script> <title>Calender</title> </head> <body> <div align="center"><iframe src="" name="frame" id="frame" width="900" height="476" frameborder="0" scrolling="no"></iframe> </div> <ul class="solidblockmenu"> <li><a href="calstart.html">Instructions</a></li> <li><a href="cal11.html" target="frame">Month View</a></li> <li><a href="cal22.html" target="frame">Week View</a></li> <li><a href="cal33.html" target="frame">Agenda</a></li> <li><a href="cal55.html" target="frame">Current Projets</a></li> <li><a href="cal66.html" target="frame">Bidding Projects</a></li> <li><a href="cal77.html" target="frame">Open Service Calls</a></li> <li><a href="cal44.html" target="frame">General Information</a></li> <li><a href="??????????" target="frame">Stop Scroll</a></li> </ul> </body> </html> Hi guys, I've had a little trouble with this and haven't been able to find answers on google. I'm trying to set up a new window that contains a button. Then, if the user clicks the button, the window would display new information accordingly. I have written a simple test that won't seem to work: Code: <html> <head> <script language="Javascript" type="text/javascript"> var count = 0; function Window() { MyWindow = window.open('', 'myWin', 'height=250,width=250') MyWindow.document.write('<html>') MyWindow.document.write('<head>') MyWindow.document.write('<\/head>') MyWindow.document.write('<body>') MyWindow.document.write('<FORM method="post" name="aname">') MyWindow.document.write('<INPUT type="button" onclick="newfunc()" name="test" value="Click Me"\/>') MyWindow.document.write('<\/FORM>') MyWindow.document.write('<\/body>') MyWindow.document.write('<\/html>') MyWindow.focus() } function newfunc() { count++ MyWindow.document.write(count) } </script> </head> <body> <FORM method="post" name="me"> <INPUT name="opendis" value="Open Window" type="button" onclick="Window()"/> </body> </html> I am probably doing something very wrong. Is there a way for this to work? Thanks! Resolved
|