|
JavaScript - Error Updating Dynamic Data
I have a website I am currently debugging, http://display.ist-apps.com/.
When you select a ski resort, then go on to select a date, the dates relating to that ski resort show. However if you then go back and select another ski resort, the dates do not update they still continue to show the ones from the ski resort you originally selected. This is a debug piece of work I am doing based on something someone else built so it's a bit of a toughie, any help is appreciated. Here is the related (I think) JS file. Code: (function($){$.fn.
dynamicResortSelect = function(options)
{
var defaults = {
'dateFormat' : 'dd/mm/y',
'forceDatePickerZindex' : false,
'uris' : {
'get_availiable_durations' : '/get-availiable-durations',
'get_availiable_start_dates' : '/get-availiable-start-dates'}};
var options = $.extend(defaults, options);
var datePickerDrawn = false;
var durationsDrawn = false;
var currentMonth = '';
var resortTitle = '';
var resorts = [];
function _updateDurations(dateText, durationsValue)
{
$.getJSON(options.uris.get_availiable_durations, {'resort_title': resortTitle, 'start_date': dateText}, function (data)
{
var options = {0:'Duration...'};
for (var i in data)
{
options[data[i]] = data[i]+' Nights'
}
if (durationsValue < 0)
{
$('.duration_container').addClass('disabled');
$('select[name="duration"]')
.selectBox('disable')
.selectBox('value', 0);
}
else
{
$('.duration_container').removeClass('disabled');
$('select[name="duration"]')
.selectBox('options', options)
.selectBox('enable')
.selectBox('value', durationsValue);
}
});
}
/*
function _isValidDate(dates, date)
{
var formattedMonth = date.getMonth()+1;
if (formattedMonth < 10)
formattedMonth = '0'+formattedMonth;
var formattedDate = date.getDate();
if (formattedDate < 10)
formattedDate = '0'+formattedDate;
var dateFormatted = date.getFullYear()+'-'+formattedMonth+'-'+formattedDate+' 00:00:00';
return [$.inArray(dateFormatted, dates) != -1];
}*/
function _drawDatePicker(startDate, endDate, dates)
{
$('.date_picker_conatiner').removeClass('disabled');
$('.date_picker_conatiner .date_picker').removeAttr('disabled').datepicker(
{
dateFormat: options.dateFormat,
minDate: startDate,
maxDate: endDate,
beforeShow: function()
{
if (typeof(options.forceDatePickerZindex) == 'number')
setTimeout('jQuery("#ui-datepicker-div").css("z-index", "'+options.forceDatePickerZindex+'")', 1);
},
beforeShowDay: function(date)
{
var formattedMonth = date.getMonth()+1;
if (formattedMonth < 10)
formattedMonth = '0'+formattedMonth;
var formattedDate = date.getDate();
if (formattedDate < 10)
formattedDate = '0'+formattedDate;
var dateFormatted = date.getFullYear()+'-'+formattedMonth+'-'+formattedDate+' 00:00:00';
return [$.inArray(dateFormatted, dates) != -1];
},
onSelect: function(dateText, inst)
{
_updateDurations(dateText, 0);
}
});
}
function _updateDatePicker(value)
{
if (datePickerDrawn)
$('.date_picker').destroy();
resortTitle = resorts[value];
$.getJSON(options.uris.get_availiable_start_dates, {'resort_title': resortTitle}, function (data)
{
var startDate = data[0];
var endDate = data[data.length-1];
currentMonth = startDate.substring(5, 7);
startDate = _buildDate(startDate);
endDate = _buildDate(endDate);
_drawDatePicker(startDate, endDate, data);
});
return true;
}
function _buildDate(text)
{
ret = new Date(
text.substring(0, 4),
(text.substring(5, 7) - 1),
text.substring(8, 10));
return ret;
alert('alerting');
}
return this.each(function()
{
var alreadyPopulated = $('select[name="duration"]').val() != 0;
$('select[name="first_hotel_id"] option').each(function()
{
resorts[$(this).val()] = $(this).text();
});
// $('select[name="first_hotel_id"]').selectBox();
$('select[name="first_hotel_id"]').change(function()
{
var value = $(this).val();
_updateDatePicker(value);
/*
if (durationsDrawn)
$('select[name="duration"]').*/
});
// $('select[name="duration"]').selectBox();
// alert("true");
if (alreadyPopulated)
{
_updateDatePicker($('select[name="first_hotel_id"]').val());
durationsValue = $('select[name="duration"]').val();
_updateDurations($('.date_picker_conatiner .date_picker').val(), durationsValue);
}
});
}})(jQuery);
Similar Tutorialshi, I want to create a litebox with one or two inputs in it and submit button. These inputs would work in jQuerry to update information in main page.. I see many websites are using them, but i am not so good in javascript if you know any examples of simple litebox which could work with jQuerry, please inform me. All suggestions are welcome. Kind regards, Aurimas. I wasn't sure if this should go in the JavaScript or PHP forum, so I decided JavaScript. I have created a site that has a form where the user can create as many rows as wanted. I really have no idea how I can then get this information to use in PHP. Here is my JavaScript function creating the rows: Code: function addDollyRow() {
numDollies++;
document.getElementById("numDollies").value = numDollies;
document.getElementById("removeDolly").disabled = false;
var dollyTable = document.getElementById('dollyTable');
var lastRow = dollyTable.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var row = dollyTable.insertRow(numDollies);
// two blank cells
var blankCellOne = row.insertCell(0);
var blankCellTwo = row.insertCell(1);
// dolly list
var dollyListCell = row.insertCell(2);
var dollyListSel = document.createElement('select');
dollyListSel.name = 'dollyListRow[]';
dollyListSel.id = 'dollyList' + numDollies;
dollyListSel.options[0] = new Option('','-1');
dollyListSel.options[1] = new Option('Regular Duty Dolly Set - Collins-4.80 \'C\'','1');
dollyListSel.options[2] = new Option('Heavy Duty Dolly Set - Collins-5.70 \'C\'','2');
dollyListSel.options[3] = new Option('Super Duty Dolly Set - Collins-5.70 \'D\'','3');
dollyListCell.appendChild(dollyListSel);
// dolly material list
var dollyMatCell = row.insertCell(3);
var dollyMatSel = document.createElement('select');
dollyMatSel.name = 'axleMaterial' + numDollies;
dollyMatSel.id = 'axleMaterial' + numDollies;
dollyMatSel.options[0] = new Option('','-1');
dollyMatSel.options[1] = new Option('Aluminum','1');
dollyMatSel.options[2] = new Option('Steel','2');
dollyMatCell.appendChild(dollyMatSel);
// quantity text cell
var qtyCell = row.insertCell(4);
var qtyInput = document.createElement('input');
qtyInput.type = 'text';
qtyInput.name = 'dollyQuantity' + numDollies;
qtyInput.id = 'dollyQuantity' + numDollies;
qtyInput.size = 3;
qtyCell.appendChild(qtyInput);
}
I read something about naming each element something such as 'el[]' and then iterating through it on the PHP side, but that didn't make much sense to me. I have only been using PHP for a few weeks now so I'm pretty new. Thanks for the help! This article ( http://www.webreference.com/js/column24/userdata.html ) explains how to do userdata persistence, but (like most things in ie) the code is in the source. Anyone know if you can do user data persistence dynamically in ie? Could I create the requisite metatag and css rule on-demand, instead of in the source? Any tips/links welcome. Hello all! I am hoping for some coding help as I have been trying to figure out my problem for a couple of days without resolve. I am new to Javascript so this is just test code that eventually will go into a larger project. Here goes: I have a form that initially creates two select boxes. The 2nd select box option values are determined onchange of the first boxes value using mysql to pull the data from a database. That all works fine. I also have an add button that adds a second set of select boxes dynamically and assigns names and values, etc. This also works fine. My goal is to have the 2nd set of select boxes act the same as the first so that when an option is chosen in the first box the 2nd dynamically populates. This does not work. The first box is created fine but when it tries to create the values in the 2nd from an onchange event I have a problem. This is the code that returns a valid object with the first set of select boxes but is null with the 2nd set. Code: var selbox = document.getElementById(exep); The entire piece of spaghetti code is below. Any help is appreciated. Please be nice as I am still trying to figure out this Javascript stuff. Thanks for any help... Code: <html>
<head>
<title>Workout testing</title>
<SCRIPT language="javascript">
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
<script language="javascript">
function setOptions(chosen, form_num) {
var musc = "musc_"+form_num;
var exep = "exep_"+form_num;
//var str = '';
// var elem = document.getElementById('form1').elements;
// for(var i = 0; i < elem.length; i++)
// {
// str += "<b>Type:</b>" + elem[i].type + "  ";
// str += "<b>Name:</b>" + elem[i].name + " ";
// str += "<b>Value:</b><i>" + elem[i].value + "</i> ";
// str += "<BR>";
// }
// document.getElementById('lblValues').innerHTML = str;
var selbox = document.getElementById(exep);
selbox.options.length = 0;
if (chosen == "0") {
selbox.options[selbox.options.length] = new Option('First select a muscle group','0');
}
<?
$car_result = mysql_query("SELECT muscle FROM work_muscle") or die('Something is wrong: ' . mysql_error());
while(@($c=mysql_fetch_array($car_result)))
{
?>
if (chosen == "<?=$c['muscle'];?>") {
<?
$c_id = $c['muscle']; ;
$mod_result = mysql_query("SELECT exercise FROM work_exercise WHERE muscle='$c_id'") or die('Something is wrong: ' . mysql_error());
while(@($m=mysql_fetch_array($mod_result)))
{
?>
selbox.options[selbox.options.length] = new
Option('<?=$m['exercise'];?>','<?=$m['exercise'];?>');
<?
}
?>
}
<?
}
?>
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>create DOM table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function makeTable() {
//give the new table unique name
var form_num = document.getElementsByTagName("table").length;
row=new Array();
cell=new Array();
row_num=1; //edit this value to suit
cell_num=6; //edit this value to suit
tab=document.createElement('table');
var table_id = 'newtable_'+form_num;
tab.setAttribute('id',table_id);
tbo=document.createElement('tbody');
for(c=0;c<row_num;c++){
row[c]=document.createElement('tr');
for(k=0;k<cell_num;k++) {
cell[k]=document.createElement('td');
//cont=document.createTextNode((c+1)*(k+1))
//cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);
changeBorder(table_id, form_num);
}
function changeBorder(table_id, form_num){
document.getElementById(table_id).border="1";
pop_cells(table_id, form_num);
}
function pop_cells(table_id, form_num) {
var table = document.getElementById(table_id);
var colCount = table.rows[0].cells.length;
//create the first checkbox
var selcheck = document.createElement("input");
selcheck.type = "checkbox";
selcheck.name = "chk[]";
//create the first select box
var selbox = document.createElement("select");
var musc_opt = "musc_"+form_num;
selbox.name = "musc_"+form_num;
selbox.id = "id_"+form_num;
//var test_ops = javascript:setOptions(document.form1.'+musc_opt+'.options [document.form1.'+musc_opt+'.selectedIndex].value,'+selbox.name+');
//selbox.setAttribute("onchange", function(){setOptions(test_ops);});
selbox.onchange = function(){setOptions(this.value,form_num);};
selbox.options[selbox.options.length] = new Option('Select a muscle group','0');
<?
$car_result = mysql_query("SELECT muscle FROM work_muscle") or die('Something is wrong: ' . mysql_error());
while(@($c=mysql_fetch_array($car_result))) {
?>
selbox.options[selbox.options.length] = new Option('<?=$c['muscle'];?>','<?=$c['muscle'];?>');
<?
}
?>
//create the 2nd select box
var selbox2 = document.createElement("select");
selbox2.name = "exep_"+form_num;
selbox2.id = "id_"+form_num;
selbox2.size = "1";
selbox2.options[selbox2.options.length] = new Option('First select a muscle group','0');
//<?
//$car_result = mysql_query("SELECT exercise FROM work_exercise") or die('Something is wrong: ' . mysql_error());
//while(@($c=mysql_fetch_array($car_result))) {
//?>
// selbox2.options[selbox2.options.length] = new Option('<?=$c['exercise'];?>','<?=$c['exercise'];?>');
//<?
//}
//?>
var target0 = table.rows[0].cells[0];
var target1 = table.rows[0].cells[1];
var target2 = table.rows[0].cells[2];
// fire
target1.appendChild(selcheck);
target1.appendChild(selbox);
target1.appendChild(selbox2);
}
</script>
</head>
<body>
<form name="form1"><div align="center">
<INPUT type="button" value="Add Row" onclick="makeTable()" />
<INPUT type="button" value="Delete Row" onclick="javascript:deleteRow(this)" />
<TABLE id="newtable" width="350px" border="1">
<TR><TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><select name="musc_0" size="1"
onchange="javascript:setOptions(document.form1.musc_0.options
[document.form1.musc_0.selectedIndex].value, 0);">
<option value="0" selected>Select a muscle group</option>
<?
$result = mysql_query("SELECT * FROM work_muscle") or die(mysql_error());
while(@($r=mysql_fetch_array($result)))
{
?>
<option value="<?=$r['muscle'];?>"><?=$r['muscle'];?></option>
<?
}
?>
</select></td>
<td>
<select name="exep_0" size="1">
<option value=" " selected>First select a muscle group</option>
</select></td></tr>
</div></table><div id="mytable"></div><div id="lblValues"></div>
</form>
</body>
</html>
Hello, i'm trying to insert a dynamic js file which contains multiple functions in it (for the example : function x, function y) and it seems that my google chrome doesn't really like it so much is there anyway you know i can bypass it and make it work and both web browsers code examples: // this is where the js file supposed to go <script id="ScriptFile"> </script> //1.js contains function x and function y document.getElementById('ScriptFile').src = "/Mysite/js/1.js" later on i need to preform some actions with function x & y. Couple more issues i need to explain first there are number of js files (1,2,3 .... n ) which all contain the same functions but with different data so i cant register them hard-coded if i type the function x into the "ScriptFile" block, it does work.. its not the function problem. same goes if i include it as source in the "ScriptFile" block (<script id="ScriptFile" src="/Mysite/js/1.js") this only gives me an error while using chrome, works perfectly fine under explorer the error says it cant find function x. thanks alot! Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong 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. 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 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 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>
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 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! 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! 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...
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.. 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>
Resolved
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! |
|||||||