|
JavaScript - Table Manipulation Causing Premature Hair Loss
Ok, first off I would like to say hi to everyone as this is my first post! Now that we have been introduced, here is my problem. I am trying to create a billing system in which you generate invoices. The way I am going about this is using a table with rows for each item the user is placing on the invoice. I have a script that adds new rows to the table when the user wants to place more than one item on the invoice, thats all fine and dandy. The problem is that I also want to be able to delete any row of the table at any time so that the user can remove items as well. When the user presses the attached "delete" button on the row they wish to remove the delete script gets the table length and changes the id and name of every item in the rows below the one being deleted so that when I submit the data as a form it will have a predictable pattern for getting the post variables. At the moment the script runs fine the first time and does exactly what it is supposed to. The issue is that the second time you run it after it has changed the id and name values for the delete button elements on the lower rows it only makes it to the first alert() call! I have been pulling my hair out for days!!!!!
Here is the Code: Code: function getEl(element)
{
var object = null;
if (document.layers)
{
object = document.layers[element];
}
else if (document.all)
{
object = document.all[element];
}
else if (document.getElementById)
{
object = document.getElementById(element);
}
return object;
}
function addRow()
{
var tbl = getEl('invTbl');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cellqty = row.insertCell(0);
var qty = document.createElement("<input type='text' name='qty_"+iteration+"' id='qty_"+iteration+"' size='4' value='1' onChange='javascript:updatePrice();' />");
cellqty.appendChild(qty);
var cellitm = row.insertCell(1);
var itm = document.createElement('input');
itm.type = 'text';
itm.name = 'itm_' + iteration;
itm.id = 'itm_' + iteration;
itm.size = 30;
cellitm.appendChild(itm);
var celldsc = row.insertCell(2);
var dsc = document.createElement('input');
dsc.type = 'text';
dsc.name = 'dsc_' + iteration;
dsc.id = 'dsc_' + iteration;
dsc.size = 50;
dsc.value = iteration;
celldsc.appendChild(dsc);
var cellprc = row.insertCell(3);
var prc = document.createElement("<input type='text' name='prc_"+iteration+"' id='prc_"+iteration+"' size='9' value='1.00' onChange='javascript:updatePrice();' />");
cellprc.appendChild(prc);
var celldel = row.insertCell(4);
var del = document.createElement("<input type='button' name='"+iteration+"' id='"+iteration+"' value='Delete' onClick='javascript:removeRow(this.id);' />");
celldel.appendChild(del);
}
function removeRow(row)
{
alert("you are deleting row " + parseInt(row));
tbl = getEl('invTbl');
rowTotal = tbl.rows.length;
alert("there are " + rowTotal + " rows!");
tbl.deleteRow(parseInt(row));
for ( i = 1; i < rowTotal; i++ )
{
if ( i > parseInt(row) )
{
place = i - 1;
alert(i + " becomes " + place);
qtycontainer = "qty_" + i;
itmcontainer = "itm_" + i;
dsccontainer = "dsc_" + i;
prccontainer = "prc_" + i;
delcontainer = i.toString();
buttonchange = place.toString();
getEl(qtycontainer).name = 'qty_' + place;
getEl(qtycontainer).id = 'qty_' + place;
getEl(itmcontainer).name = 'itm_' + place;
getEl(itmcontainer).id = 'itm_' + place;
getEl(dsccontainer).name = 'dsc_' + place;
getEl(dsccontainer).id = 'dsc_' + place;
getEl('dsc_'+place).value = getEl('dsc_'+place).id;
getEl(prccontainer).name = 'prc_' + place;
getEl(prccontainer).id = 'prc_' + place;
getEl(delcontainer).name = buttonchange;
getEl(delcontainer).id = buttonchange;
alert("del button changed to " + getEl(i).id);
}
}
// updatePrice();
}
The button element for each row calls javascript:removeRow(this.id); Please help me figure out what I am doing wrong! Similar TutorialsAt the discretion of the user I am using window.resizeTo and window.moveTo to resize a window. In IE8, if the window is resized from a maximised state the drag handles on the browser are not available after the resize? It does not seem to apply if the window is already semi minimised. Is this a bug or is there a solution, would appreciate any thoughts. Thanks http://whitelemondesigns.com/test/about.html I can't for the life of me figure out where I'm going wrong with the scroll bar... I think I've got all the html and css correct, I have to assume there's a javascript error but I can't find it... could I have a javascript conflict? If you guys have any insight I would appreciate it, this is driving me up a wall. Code:
// Code for alternating row colors on data tables, but NOT every table.... just ones with classname="altRows"
// Note: rowID comes from the JIT Variable: &&_sflalt
// Note: This function is called in ovject group: *TR in the MLS Syntax File
function stripeRows(rowVar)
{
// Need to create a var for uniquely identifying the highlighted rows
var rowID = 0;
// Begin the checking and writing of the HTML data
if (rowVar == '')
{
var html = "<tr>";
document.writeln(html);
}
else if (rowVar == '0')
{
var html = "<tr class=\"rowEven\" id=\"evenRow"+rowID+"\" onmouseover=\"highlightRow('over', 'evenRow"+rowID+"');\" onmouseout=\"highlightRow('out', evenRow"+rowID+"');\">";
document.writeln(html);
rowID++;
}
else if (rowVar == '1')
{
var html = "<tr class=\"rowOdd\" id=\"oddRow"+rowID+"\" onmouseover=\"highlightRow('over', 'oddRow"+rowID+"');\" onmouseout=\"highlightRow('out', oddRow"+rowID+"');\">";
document.writeln(html);
rowID++;
}
else
{
var alertText = "Something went wrong with alternating row color in datasets - The function broke. Please jot down a note as to what you were doing when this dialogue box poped up, and let American Health Care Software know \n\n\n ATTN: Pat Litke";
parent.showDialog('Broken Function',alertText,'prompt');
}
}
// Function for modifying class attrbutes for row highlighting..
// This function will allows the currently moused-over row to highlight a different color based on its ID
function highlightRow(option, theRowID)
{
var row = document.getElementById(theRowID);
if(option == 'over')
{
row.className = 'rowOver';
}
if(option == 'out')
{
row.className = 'rowEven';
} else if(option == 'in')
{
row.className = 'rowOdd';
} else { }
}
Can someone help? I can't figure out why this isn't working the way that I'm logically seeing it... The alternate rows highlight works fine, but the mouseover and mouseout events fail miserebly... When a page loads, regardless of where i mouse over, only the top two rows color in with the mouseOver color. They also don't revert to original coloring. Where am I going wrong? Note: I apologize if it's something little that I'm missing... I'm still new to js Hi I have a given url and want to back up a level. So for example if start with: url = "test/level1/level2/level3/" I would like to it remove the "level3/" to become url="test/level1/level2/" Hi i was wondering if anyone might be able to help me here as i hve an idea but not quite sure how to impliment it. I want to be able to create 2 Divs, 1 for my navigation button and a second for an image to be placed in. i ant to be able to have the 2nd div move position to underneath Div 1 when i hover over the navigaton(div 1). Ive attached a link to a diagram of what i mean Any help would be very much apreciated http://spark-box.co.uk/images/ideaz.jpg I have the following code for a textbox that is supposed to change itself to 20 if the entered value is over 20, to 1 if it's less than 1, and round itself to the nearest integer Code: <input type="text" size="1" name="blevel" value="1" onchange='
document.unitselect.blevel.value++;
document.unitselect.blevel.value--;
document.unitselect.blevel.value = document.unitselect.blevel.value / 1
Math.floor(document.unitselect.blevel.value);
if(document.unitselect.blevel.value > 20){
document.unitselect.blevel.value = 20
}else if(document.unitselect.blevel.value < 1){
document.unitselect.blevel.value = 1
}
'>
The textbox is in a form named "unitselect". For some reason, it just ignores the Math.floor line. After experimenting for a bit, I found out that it was treating the textbox value as a string. I tried both using the increment/decrement operators and dividing it by 1. Although the operations executed properly, it still treated it as a string after the operations. Does anyone know what I can do to round this value? I have created a simple webpage that allows users to search multiple comparison shopping sites at once. This is just a side project that I am working on. At the current time, the webpage has the sites listed with checkboxes. The user can put in a search term in the box and then select which sites they want to search. The sites then open in a new window or on different tabs depending on which browser they are using. What I would like to do is find out if there is a way to have the same thing, but the sites open in the same window below the search box, like in tabbed frames. I tried doing something with the tabbed viewer script from dynamic drive: http://www.dynamicdrive.com/dynamici...bdocviewer.htm, but was unable to figure out how to get the search parameter into the url. My page can be found at http://www.imarkinteractive.com/tools/onesearch.html and all of the javascript is on the page. Does anyone know if this can be accomplished and if so, how would I go about doing it. I can run a php script on my server if that would be easier, but I would really appreciate the assistance. Thanks. Hello, I am trying to get an image to change based on a date range within an array, then display that image on a webpage, if there is no corresponding date, then display a default image. I have NEVER coded in JavaScript and need some assistance with this. Here is the array example: Code: var holiday = new Array() holiday[0] = "images/bronc.jpg" holiday[1] = "0210, 0214, images/Valentines_Pic.jpg" holiday[2] = "0317, 0317, images/St-Patrics_Day.jpg" holiday[3] = "0701, 0704, images/4th_Of_July.jpg" holiday[4] = "1015, 1031, images/Halloween.jpg" holiday[5] = "1111, 1130, images/Thanks_Giving.jpg" holiday[6] = "1201, 1227, images/Christmas.jpg" holiday[7] = "9999, 9999, images/New_Years_Pic.jpg" holiday[0] would be the default image that would display if no other images fall in the date range at the begining of each array element. Then something like get date alter date to be mmdd if date >= firstarraydate and date <= secondarraydate then set image to ********.jpg else set image to *******.jpg loop then in the body display the correct image <p><img src="image" /></p> Or something simple like that. I have searched and cannot find anything simple like that. I have tried a few available scripts for rotating banners but they always either do not work at all or they use one specific date or time and since I am not too swift with javascript, any help would be greatly appreiated. Thanks Kel I have tried to manipulate attributes in a specific class & am successful by using jquery. Now for the purpose of learning I want coders to look at my simple snippet & tell me how can I use functions namely getElementsByTagName & For loop instead of each. http://jsfiddle.net/defencedog/Zz7cX/ [My snippet adds 'fullscreen' functionality to youtube vids, which unfortunately isn't present in default phpBB3 forum engine] regards;; Greetings. It has been a long while since I have needed to code and a lot has changed. I am looking for resources on how to use JavaScript to When a button is pressed it moves the playhead of a single video to an assigned frame or timestamp in the video and begin playing. Then when the playhead reaches its destination it stops. I have done this in Flash before using AS1 and simple keyframe based commands and buttons for goToandPlay and stop. Is there any good reading to be had on the interwebs on this topic? Thanks in advance!! Hi, I'm looking for some help, or perhaps an explaination in regards to "click & rotate" an image using your cursor with Javascript. I've seen this a couple of times on various websites and I'm wondering how difficult/expensive it is to develop such an image. I own a clothing company and what I'm looking to do is to create images on my website of a product in which the customer can click on and "rotate" to see a 360 degree view of the product. Think autocad to a degree... Is Javascript the best language to pursue for this function? I'm quite new to this department, so any help/advice is greatly appreciated. I code through Greasemonkey using Firebug on Firefox. I'm trying to write my first script using a simple function to change the appearance of my email address in Gmail. My current email address is formatted like this example: Code: firstlast@gmail.com I want the script to manipulate the text to resemble this: Code: first.last@gmail.com I've posted my script below. The Mozilla error console shows no syntax errors or warnings. JavaScript IS allowed to run and there are no restrictions of any kind that should hinder this script's ability to run. What am I doing wrong in the code? Any help would be greatly appreciated! Code: (function () {
var loadOldName = window.document.body.getElementById('loading').getElementsByClassName('msg').textContent('\nLoading+ firstlast@gmail.com…\n');
var topLeftName = window.document.getElementsByClassName('cP').getElementsByClassName('bB').getElementsByTag('u').innerHTML('<b>firstlast@gmail.com</b>');
var topLeftDrop = window.document.getElementsByClassName('cP').getElementsByClassName('J-N-Jz').innerHTML('<span class="Qu L4">firstlast@gmail.com (default)</span>');
function changeName() {
if(loadOldName) {
window.document.body.getElementById('loading').getElementsByClassName('msg').removeChild(textContent('\nLoading+ firstlast@gmail.com…\n')).appendChild(textContent('\nLoading+ first.last@gmail.com…\n'));
};
if(topLeftName) {
window.document.getElementsByClassName('cP').getElementsByClassName('bB').getElementsByTag('u').removeChild(innerHTML('<b>firstlast@gmail.com</b>')).appendChild(innerHTML('<b>first.last@gmail.com</b>'));
};
if(topLeftDrop) {
window.document.getElementsByClassName('cP').getElementsByClassName('J-N-Jz').removeChild(innerHTML('<span class="Qu L4">firstlast@gmail.com (default)</span>')).appendChild(innerHTML('<span class="Qu L4">first.last@gmail.com (default)</span>'));
};
};
changeName();
});
Hello everyone, I am trying to make a canvas element display an image with some text on using canvas.drawImage and canvas.fillText. Only problem is my code is generating a very odd and hard to debug error. Thanks in advance, Alex Code(JS): Code: function runstuff() {
canvasthing = document.getElementById('1');
context = canvasthing.getContext('2d');
purple = new Image();
purple.src = 'img/buttonpurple.png';
purple.onload = function() {
context.drawImage('purple', 0, 0);
};
context.font = '16px Vani';
context.textBaseline = 'top';
context.fillText('Test', 26, 24);
}
Code(html): Code: <!doctype html> <html lang="en"> <head> <title>POB.G</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"> </script> </head> <body onload="runstuff()"> <canvas id="1" width="127" height="128"></canvas> </body> </html> Error: Code: Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: file:///C:/Users/*BlahBlahBlah/script.js :: <TOP_LEVEL> :: line 7" data: no] Hi all, I am a little stuck trying to use arrays for the purpose of creating a currency converter. I have created the script below but it seem to work fine without the arrays added in. Any ideas? <script type="text/javascript"> function currencyConverter() { //declare and initialise variables var CurrYen = 128.7; var CurrUSDollar = 1.59; var CurrEuro = 1.15; var CurrSwissFrank = 2.06; var CurrDanishKorona = 9.69; var strCurrency = new Array(5); var dblExchange = new Array(5); var dblGross var dblCurrency //collect information from drop-down menu and text boxes strCurrency = document.getElementById("cmbCurrency").value; intSterling = document.getElementById("txtSterling").value //selection if (strCurrency == "Yen") { dblCurrency = CurrYen; } else if (strCurrency == "US Dollar") { dblCurrency = CurrUSDollar; } else if (strCurrency == "Euro") { dblCurrency = CurrEuro; } else if (strCurrency == "Swiss Frank") { dblCurrency = CurrSwissFrank; } else if (strCurrency == "Danish Korona") { dblCurrency = CurrDanishKorona; } else { dblCurrency = 0; } //calculate total currency to convert dblGross = dblCurrency * intSterling; //display total cost document.getElementById("txtSterling").value = dblGross.toFixed(2); } </SCRIPT> I'm trying to run two javascript files on a web page and there appears to be a conflict. Im using InnerFade with JQuery which can be seen at: http://medienfreunde.com/lab/innerfade/ And Im using Lightbox2 which is at http://www.huddletogether.com/projec...box2/#download If I use them individually they work fine but as soon as I call them together the one won't work. I'm not fluent in javascript so I would really appreciate any help with this. Thanks. Hello there, I am using Dynamic Drive's dhtml windowfile and when I had a link for it to call the popup window, it makes my site deliver a 500 server error. Here is the line of code I'm adding: Code: echo '<td><a class="link" href="#" onClick="ajaxwin=dhtmlwindow.open('ajaxbox', 'ajax', 'pages/post.php', 'Composing Mode: Post', 'width=650px,height=400px,left=300px,top=100px,resize=0,scrolling=1'); return false">Compose</a></td>';
It is not a php issue, I plaintext the link and it still did the same thing. hello, The following code is causing firefox to crash: Code: if (!e)
{
alert("!e");
e = window.event;
}
alert("before");
var x = e.pageX;
alert("after");
By 'crash', I mean it just stops running. It doesn't give me an error message or shut down the browser, it just quits reading the script. I get the alert box "!e" and "before" but I don't get anything for "after". At the line var x = e.pageX; it seems to die. This seems to happen anytime I use e, for example e.clientX, e.screenX, e.type, etc. This doesn't occur in IE. Anyone know what the problem is? hello i am trying to include the following following in my code, but it keeps creating an error. i need to know the correct place to include the function.many thanks Code: CODE
----------------------------------------
<script type="text/javascript">
$(function() {
$("#flex1").flexigrid(
{
url: 'staff.php',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id_con', width : 40, sortable : true, align: 'left'},
{display: 'Name', name : 'name_con', width : 150, sortable : true, align: 'left'},
{display: 'Email', name : 'email_con', width : 150, sortable : true, align: 'left'},
{display: 'Phone', name : 'phone_con', width : 250, sortable : true, align: 'left'},
{display: 'Mobile', name : 'mobile_con', width : 150, sortable : true, align: 'left'},
{display: 'Fax', name : 'fax_con', width : 150, sortable : true, align: 'left'},
{display: 'Notes', name : 'notes_con', width : 250, sortable : true, align: 'left'}
],
buttons : [
{name: 'Edit', bclass: 'edit', onpress : doCommand},
{name: 'Delete', bclass: 'delete', onpress : doCommand},
{separator: true}
],
searchitems : [
{display: 'Name', name : 'name_con'},
{display: 'Email', name : 'email_con', isdefault: true},
{display: 'Position', name : 'position'}
],
sortname: "name_con",
sortorder: "asc",
usepager: true,
title: "Staff",
useRp: true,
rp: 10,
showTableToggleBtn: false,
resizable: false,
autowidth: true,
autoheight: true,
singleSelect: true
}
);
});
FUNCTION
-----------------------------------------------------------
function doCommand(com, grid) {
if (com == 'Edit') {
$('.trSelected', grid).each(function() {
var id_con = $(this).attr('id_con');
id_con = id_con.substring(id_con.lastIndexOf('row')+3);
alert("Edit row " + id_con);
});
} else if (com == 'Delete') {
$('.trSelected', grid).each(function() {
var id_con = $(this).attr('id_con');
id_con = id_con.substring(id_con.lastIndexOf('row')+3);
alert("Delete row " + id_con);
EDIT: Ive actually managed to sort this out. The problem was as simple as the onload in the body tag was overriding the onload script in the header. Combining the two solved the problem. Ive recently been appointed to do some work on my employers website. For now, to hold us over until we can manage a complete re-write, I have been asked to just do a little update to the look and feel. One of the things I have done is use the niftycorners code for rounded divs. I have had no trouble implementing this code over all the site pages, until I got to one page. Our product pages. Ive never seen a code placed directly within the body tag, but this is what has been done here. <BODY onload="pricing_init(); attribute_changed();"> This code loads the dynamic pricing feature. Unfortunately, it also causes the nifty corners code I have placed between the head tags to fail. I dont know if its just the odd placement of the code or the code itself as I am just learning js (using the Javascript and Ajax for dummies book). Is there some way I can alter this so that both the dynamic pricing and nifty corners works? thanks in advance for any suggestions. I am building a wordpress theme that utilizes a theme options panel. The theme has a area where someone can enter in their email address, and when they do a Thank You message displays. One of the sections in the theme options panel allows the users to modify that message. Right now the message is formated like this: "Thank you for your interest!<br />As soon as as we are ready we will send you an email with all the details." and the page source shows this: Code: $('#right').html("<div id='submitted'></div>");
$('#submitted').html("Thank you for your interest!<br />As soon as as we are ready we will send you an email with all the details.")
.hide()
.fadeIn(1000, function() {
});
(i bolded the thank you message) now the form functions properly the way it should and the thank you message appears accordingly when someone submits their email. However, if the person modifies the message via the theme options panel and uses "Enter" for a return or line break the code looks like this: Code: $('#right').html("<div id='submitted'></div>");
$('#submitted').html("Thank you for your interest!
As soon as as we are ready we will send you an email with all the details.")
.hide()
.fadeIn(1000, function() {
});
and this causes the form not to function properly. The thank you message will not show up. Is there a way to fix the java code so a person can use "Enter" if they choose to? Ive narrowed it down to this one section of the javascript. If you need the entire script I can post it. Any help is greatly appreciated. Thank you for your time. |
|||||||