|
JavaScript - Self-updating Content Problem
Resolved
Similar TutorialsHello. 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? I moved this to a more appropriate place... http://www.codingforums.com/showthread.php?t=184432 when someone selects a date it shows ok in the field but the checker script can not view it for some reason, i have an alert show the content, if i place the alert before everything it unblurs and the tick shows, but i have to click the alert off for the tick to show. The alert show nothing on the first run. just a thought, but would the DOM not be updating quick enough for the next line to read the content ? reason i ask is that with the alert line in the code it shows the previous state of the field when i change the date to something else. 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 checkValidFormInput() {
redX = '<img alt="Invalid" src="images/redX.png" style="width: 18px;">';
greenTick = '<img alt="Valid" src="images/icongreentick.png">';
alert('.' + document.getElementsByName('j1date')[0].value + '.');
document.getElementsByName('j1date').blur();
if (document.getElementsByName('j1date')[0].value == '') {
document.getElementById('j1dateImg').innerHTML = redX;//
} else {
document.getElementById('j1dateImg').innerHTML = greenTick;//
}
}
</script>
</head>
<body>
<? // for some strange reason the following lines need to be here for the date picker to work! ?>
<table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
<tr><td id="ds_calclass"></td></tr>
</table>
<script type="text/javascript" src="datetimepicker.js"></script>
<? // end of date picker storage ?>
<form method="POST" action="index.php">
<li class="value"> <input type="text" autocomplete="off" name="j1date" id="j1date" value="<?=$j1date;?>" style="width: 200px; float: left;" onClick="ds_sh(this);" onBlur="checkValidFormInput();"> <div style="float: left;" id="j1dateImg"></div><br style="clear:both"> </li>
</form>
</body>
</html>
attached is the datetimepicker.js you will need to remove the last part .txt from the above file name Hello, I am having some issues with some of my content being displayed on my website in my 'works' section. In particular the images, which i have double checked to make sure the names match, and the iframe video does not load at all. I have an incline this may be related to a javascript problem. Here is the code: Edit fiddle - JSFiddle Any help would be much appreciated, thank you. Reply With Quote 02-03-2015, 10:29 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts You are using jQuery but you aren't including your choice of the version of jQuery you want to use in that jsFiddle. But we can't easily debug in jsFiddle. Can't you show us the page live, on your site? And in any case, you have no images nor video on that fiddle, so why are you asking us about them? Here's how I mucked with your fiddle: Edit fiddle - JSFiddle Hello there, new to this forum and starting with a quick question. Normaly I can figure things out myself but I'm a bit stuck on this one. I have two scripts. one is for TinyMCE (WYZIWYG editor): Code: tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "newdocument,save,|,styleprops,del,ins,attribs,|,visualaid,visualchars,template,pagebreak,|,preview,cleanup,code,print,|,|,help,fullscreen",
theme_advanced_buttons2 : "insertlayer,absolute,moveforward,movebackward,|,tablecontrols,|,hr,advhr,,charmapemotions,iespell,media,ltr,rtl,anchor,image,nonbreaking,|,insertdate,inserttime",
theme_advanced_buttons3 : "bold,italic,underline,strikethrough,|,outdent,indent,|,bullist,numlist,|,sub,sup,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons4 : "undo,redo,|,cut,copy,paste,|,pastetext,pasteword,|,search,replace,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,blockquote,cite,|,abbr,acronym,|,link,unlink,|,removeformat",
content_css : '/CSS/TinyMCE.css',
theme_advanced_styles : "Test style=header1;",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
function setup() {
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "newdocument,save,|,styleprops,del,ins,attribs,|,visualaid,visualchars,template,pagebreak,|,preview,cleanup,code,print,|,|,help,fullscreen",
theme_advanced_buttons2 : "insertlayer,absolute,moveforward,movebackward,|,tablecontrols,|,hr,advhr,,charmapemotions,iespell,media,ltr,rtl,anchor,image,nonbreaking,|,insertdate,inserttime",
theme_advanced_buttons3 : "bold,italic,underline,strikethrough,|,outdent,indent,|,bullist,numlist,|,sub,sup,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons4 : "undo,redo,|,cut,copy,paste,|,pastetext,pasteword,|,search,replace,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,blockquote,cite,|,abbr,acronym,|,link,unlink,|,removeformat",
content_css : '/CSS/TinyMCE.css',
theme_advanced_styles : "Test style=header1;",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
}
first part loads tinymce when it's there on the page, second part loads it when a button is pushed. second script is for loading filecontent into a div: Code: function load_this(url) {
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = targetDiv;
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = targetDiv;
req.open("GET", url, true);
req.send();
}
}
}
function targetDiv() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById("main").innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
now the problem: I have this page with div 'main'. an url loads this script, but after loading the dynamic content into the div, the setup() script isn't working: Code: function load_editor(url) {
load_this(url);
setup();
}
where url=editor.php. The funny thing is: when I click the button to load the content into the div, the textarea (from editor.php) loads, but the javascript function to start tinymce isn't working! This is probably because right after loading the div with 'editor.php' the setup() script doens't recognise the freshly loaded content. However, when I place a link in 'editor.php' which calls javascript:setup(); and click it after loading the content, setup() does work. my question: How can I make it so, that, when I press a link or button to load the editor.php into a div, the setup() script recognises the fresh code and starts the WYSIWYG editor? Do I have to use state ready or something? And ifso, how do I do this? Or is there some other way I can do this? Kind regards and many thanks for your help! Kevin Hi I have created this page http://kylehouston.com/new/ were I have added a content slider in the main banner then another in the footer, these work fine in ff but ie7 doesnt seem to agree instead giving me an error, how do i get around this? Thanks in advance! Kyle Hello, As the title states, I have a problem with a function that hides content contained in DIV tags. Here is the function: Code: <script language="JavaScript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
Now, the function itself works perfectly. The problem that I have is that it doesn't work the way I need it to. I have 4 links that need to show the content of a corresponding DIV section. When a link is clicked I need it to check the state of the other 3 DIVs and hide any that are open, then display the content for the link that was clicked. I can tell from the function I am using that it already checks the state of any 1 given DIV then acts accordingly (shows if hidden, hides if shown). While this works, I am having a hard time figuring out how to modify it to suit my needs. I am completely new to JavaScript but I do know some VB so I am not a stranger to programming in general. What I would like is some direction on how to modify the above function to handle the logic I need. I would prefer instruction on how I should go about it so I can get some experience, but any help is appreciated. Thanks! PS, I am setting the display property of all 4 DIVs to NONE by default via embedded CSS. Ok, i have a javascript that creates a table then appends it to an empty div. This works fine in FF, however it fails to work in IE8. [edit] I have decided to post the entire code since I wasn't having any luck getting any suggestions. Maybe now someone can help me out. Code: function createTable() {
var machine = document.Catalog.machine.value;
var dSearch = document.Catalog.dSearch.value;
var section = document.Catalog.section.value;
var x = xmlDoc.getElementsByTagName('record');
var y = xmlDoc.getElementsByTagName('data');
var newEl = document.createElement('TABLE');
newEl.className = 'resultsTab';
var tmp = document.createElement('TBODY');
newEl.appendChild(tmp);
var row = document.createElement('TR');
var n = 1;
var headings = new Array("Col1", "Col2", "Col3", "Col4", "Col5");
var dcount = 0;
//for (t=0;t<10;t++) {
for (t=0;t<y[0].childNodes.length;t++) {
if (y[0].childNodes[t].tagName == "record") { // it is required for FF to work properly
dcount++;
}
}
if (document.Catalog.thumbImg[0].checked) {
var container = document.createElement('TH');
var theData = document.createTextNode("Pic");
container.className = "topline1";
container.appendChild(theData);
row.appendChild(container);
}
for (h=0;h<headings.length;h++) {
var container = document.createElement('TH');
var theData = document.createTextNode(headings[h]);
container.className = 'topline' + n;
container.appendChild(theData);
row.appendChild(container);
n++;
}
tmp.appendChild(row);
switch (searchtype) {
case 1:
var objRegex = new RegExp(machine);
break;
case 2:
var objRegex = new RegExp(section, "i");
break;
case 3:
var objRegex = new RegExp(dSearch, "i");
break;
default:
document.getElementById("replaceTxt").innerHTML = "<p>There was an error processing your request.</p>";
}
var rowColor = 1;
var noResult = "false";
for (i=0;i<dcount;i++) {
var row = document.createElement('TR');
var searcharr = new Array();
for (j=0;j<x[i].childNodes.length;j++) {
if (x[i].childNodes[j].nodeType != 1) continue;
searcharr.push(x[i].childNodes[j].firstChild.nodeValue);
}
var searchstrg = searcharr.toString();
if (searchstrg.match(objRegex)) {
var t;
var m=1;
if (document.Catalog.thumbImg[0].checked) {
var pn = "images/"+searcharr[2]+".jpg";
var container = document.createElement('TD');
var refLink = document.createElement("A");
refLink.setAttribute('href', "javascript:viewImg(\""+pn+"\")");
var imgHolder = document.createElement("IMG");
imgHolder.setAttribute("src", pn);
imgHolder.style.height = "75px";
refLink.appendChild(imgHolder);
container.appendChild(refLink);
container.className = "img"+rowColor;
row.appendChild(container);
}
for (t=0; t<searcharr.length; t++) {
container = document.createElement('TD');
var theData = document.createTextNode(searcharr[t]);
container.appendChild(theData);
container.className = 'line' + rowColor + '_' + m;
row.appendChild(container);
m++;
}
tmp.appendChild(row);
rowColor == 1 ? rowColor++ : rowColor--;
document.getElementById("replaceTxt").innerHTML = "";
document.getElementById("replaceTxt").appendChild(newEl);
noResult = "true";
}
}
if (noResult=="false") {
document.getElementById("replaceTxt").innerHTML = "<h3>Sorry, there was no match to your search. Please try again</h3>";
}
}
xmlDoc is the xml object from my import xml function. it is working correctly. IE does not give any JS errors, it just does nothing. If I put text in the Code: document.getElementById("replaceTxt").innerHTML
field, IE displays the text in the correct spot so I know the code is working. I also verified the data is being written correctly to "newEl" via IE 8 debugger. IE just does not want to append the newEl child to the <div> tag. This is where I assume the problem is. 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 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 Hi all, this is the code I'm using in order to display the contents of an xml file into a page. It's working fine with IE but with Firefox. I have searched over intrenet and have applied all suggestions I've found about this issue. Unfortunately it's still not working. Can you please help me??? Code: function importXML()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = createTable;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) createTable()
};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
xmlDoc.load("news.xml");
}
function createTable()
{
var x = xmlDoc.getElementsByTagName('event');
var newEl = document.createElement('table');
newEl.style.width = '100%';
newEl.setAttribute('cellPadding',0);
newEl.setAttribute('cellspacing',0);
var tmp = document.createElement('TBODY');
newEl.appendChild(tmp);
for (i=0;i<x.length;i++)
{
var row = document.createElement('TR');
if (x[i].childNodes[0].nodeType != 1) continue;
var container = document.createElement('<TD style="padding-left:3px; font-weight:bold;">');
var theData = document.createTextNode(x[i].childNodes[0].firstChild.nodeValue);
container.appendChild(theData);
row.appendChild(container);
tmp.appendChild(row);
row = document.createElement('TR');
if (x[i].childNodes[1].nodeType != 1) continue;
var container = document.createElement('<TD class="box_2">');
var theData = document.createTextNode(x[i].childNodes[1].firstChild.nodeValue);
container.appendChild(theData);
row.appendChild(container);
tmp.appendChild(row);
}
document.getElementById('writeroot').appendChild(newEl);
}
Hi all, I am using xmlhttp.open();xmlhttp.send(); to send a php content to a div. This php content is again using the same method to get php content from a further page. The content of the div, does not seem to be using the css and javascript files defined in the calling pages <head> section. Does anyone know why this is? Is there a workaround or solution to this problem? It might be easier to understand looking at the code, so Background info: Javascript file: scripts.js client.php ----> loads data from: display_client.php display_client.php ----> loads data from: display_brand.php Code: client.php http://pastebin.com/4EFn9YRf display_client.php http://pastebin.com/BGZAKre2 display_brand.php http://pastebin.com/0a4Pg3gg scripts.js http://pastebin.com/er4dkmPc Thanks! 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 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, 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. 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>
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.. 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! 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! |
|||||||