|
JavaScript - Dynamic Tr Add To Tablebody Issue In Js
Hi, i am trying to add <tr> dynamically to <table><tbody>. I have tried someways nothing seems to be working..
i have an ajax service which returns the result string as <tr id='some'><td></td><td></td><td></td></tr>. 1) var tableBody =Tbl.getElementsByTagName("tbody")[0]; var tempDiv = document.createElement("div"); tempDiv.innerHTML = html; var children = tempDiv.childNodes; tableBody.appendChild(children[0]); Drawback : THis works only in chrome, other browsers split result string in to 3 div children, i tried var tempDiv = document.createElement("td"); does not work either 2) var newRow = document.createElement("tr"); newRow.setAttribute('id' , "SrchTr_"+data.rowNum); tableBody.appendChild(newRow); newRow.innerHTML = html; Drawback : this adds outside the table body as the reulst string has <tr> 3) i tried insertROW as well , nothing seems to be working Similar TutorialsHello all! I hope everyone had a great Holiday I'm hoping someone can help me with a Switch Menu code. I borrowed and modded the code offered he http://www.dynamicdrive.com/dynamici...switchmenu.htm The site I'm trying to implement this menu on is: http://hardlyrhetoric.com/ste/projects.html Additional required files for this page a http://hardlyrhetoric.com/ste/tabcontent.js http://hardlyrhetoric.com/ste/tabcontent.css As you can see, the menu on the left will expand and collapse, revealing the sub-links perfectly fine. It will even display the content for each link in the first set of "Datacenters and Emergency Power" links, as it should. The problem is with each section after "Datacenters and Emergency Power" None of the links will display content in the right column the way the first set of links does. I've looked over the code for several hours... am I missing something basic??? Anyone have any issues with Safari in relation to javascript compatibility? I have a page that loads dynamically through user selections as follows: There is a set of three radio buttons. The user selects one and a div opens revealing a select box populated with entries related to the radio button selection. When the user makes a selection from the select box, one of two things happen. 1) If there are child records relating to their selection, a second div opens revealing another select box containing the child entries relating to the first select box choice. Or 2) if there are no child entries relating to the selection in the first select box, a div opens displaying a description relating to the selection they made in the first select box. The data is all coming from prepopulated javascript arrays. This works like a dream in IE and Chrome. Unfortunately, when we were in the final stages of testing before release to a live environment, we discovered it works in Safari only as far as the user makes a selection from the three radio buttons driving the opening of the first div layer containing the first select. At this point it stops working completely. On top of that, I can not find where in the latest release of Safari, that I can see any javascript errors (or if I even can). I am REALLY in need of help. Anything you can offer? Thanks!! Dmxsmith 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 Hello all. I am currently viewing various reports based on a location chosen by a dropdown. When I select GO, the page sends the location to a popup, which then queries based on that location and displays the graph on the popup window. What I want to do is to eliminate the popup and send the location to a <div> on the same page and then have the query run and display the graph on the same page. Is this possible, or do Divs have to be static content? Thanks, Parallon I have a dynamic website where my client can upload pictures to, i have php dynamically show the images and etc, i also have php assign each photo an id number. Basically what it is each photo dynamically gets id=$i++. So every photo uploaded it goes up one higher. Now i wanted to make it so in javascript the same happens, the id is dynamically i++ but im not very good in javascript so i was hoping i could get some help. Basically i want it to be something like this. (unless u know a better way of doing the same kind of effect) Code: var i=0;
$(document)
.ready(function(){
setTimeout(function () {$("#i++").fadeOut("slow");}, 100);
setTimeout(function () {$("#i++").fadeIn("fast");}, 400);
});
I just need help getting the i++ to work. In a webpage I am developing I need to change the presentation depending on user selection. At the moment this code is huge and not very maintainable. The first purpose was to have a working code, now I would like to make it more maintainable. Below is a main part of the problem; Code: function myFunction(type)
{
if (type.value == "1")
{
var form1 = document.getElementById("OrderForm1");
form1.style.display = "block";
var form2 = document.getElementById("OrderForm2");
form2.style.display = "none";
var form3 = document.getElementById("OrderForm3");
form3.style.display = "none";
}
else if (type.value == "2")
{
var form1 = document.getElementById("OrderForm1");
form1.style.display = "none";
var form2 = document.getElementById("OrderForm2");
form2.style.display = "block";
var form3 = document.getElementById("OrderForm3");
form3.style.display = "none";
}
else if (type.value == "3")
{
var form1 = document.getElementById("OrderForm1");
form1.style.display = "none";
var form2 = document.getElementById("OrderForm2");
form2.style.display = "none";
var form3 = document.getElementById("OrderForm3");
form3.style.display = "block";
}
}
<div id="OrderForm" style="display: block;">
<div id="OrderForm1" style="display: none;">
<FORM METHOD="POST"></FORM>
</div>
<div id="OrderForm2" style="display: none;">
<FORM METHOD="POST"></FORM>
</div>
<div id="OrderForm3" style="display: none;">
<FORM METHOD="POST"></FORM>
</div>
</div>
Basically the myFunction will be called based on user input. This input will show one section of html code and hide other sections of html code. So if input is "1", then OrderForm1 shall be shown and OrderForm2 and OrderForm3 must be hidden. if input is "2", the OrderForm2 shall be shown and OrderForm1 and OrderForm3 must be hidden etc. By adding more forms to show and hide, this code is growing massively. I would like to add some kind of for loop function to this but I am not sure how to loop through the various section names (OrderForm1, OrderForm2 and OrderForm3) and set the appropriate value. Appreciate any help Ok, so the nth-child format is .class:nth-child(n){} Does anyone know of a way to dynamically set n? What I am trying to do is highlight the nth child element, but I need to be able to alter n based on the state. Hello. I am using javascript to create a dynamic form to allow me to add multiple items to the form before posting... this is the code: Code:
if (!$_POST) {
?>
<title>Adding elements to a form</title>
<form name="form1" enctype="multipart/form-data" action="" method="post">
<div ID="Items">
<b>Dog 1:</b>
<input type="text" name="Item1" size="45">
<br>
<input type="button" value="Add Item" onClick="AddItem();" ID="add">
<input type="submit" name ="submit" value="Submit Form" >
</div>
</form>
<?
}
else {
echo print_r ($_POST);
}
?>
<script language="javascript">
var items=1;
function AddItem() {
div=document.getElementById("Items");
button=document.getElementById("add");
items++;
newitem="<b>Dog " + items + ": </b>";
newitem+="<input type=\"text\" name=\"Item" + items ;
newitem+="\" size=\"45\"><br>";
newnode=document.createElement("span");
newnode.innerHTML=newitem;
div.insertBefore(newnode,button);
}
</script>
It works but each element in the printed post array shows as Item1, Item2 etc with each being a seperate array... How can I make it so that I have a single posted array called Item with that array then having elements Item[1] etc up to the number of elements I add... Any help would be appreciated Hey everyone, I have a small script to open a little window, which is created for each record in a database through asp. The problem is, if there are multiple records, the function name is all the same, so the links open the same window for each record.. not good. Here is the code which is created for every record, until there arent anymo <SCRIPT language="javaScript"> function openwindow() {window.open("pofull.asp?poid=<%=MySqlRS("lpoid")%>","mywindow","menubar=0,resizable=0,width=500,hei ght=250");} </SCRIPT> <% Response.write "<td width=""30px"" align=""center""><a href=""javascript: openwindow()""><img src=""../style/edit.png"" border=""0"" title=""View Full Description""></a></td>" So obviously openwindow is being created multiple times. Is there a way to have this created in a way that every function name created is unique so they all work? I know.. its confusing but it would work really well. Is this possible? Please look at the attached image. I am trying to create a team creation page for a site I am making, however I want the user to be able to see all the names they enter before the information is passed to the .php file to send it to the MySQL table. 1. So, every time the user enters a name and presses the "add name" button the name details are stored in an Javascript array and displayed in the box below. 2. When the user presses the "save team" button the team name is passed by a simple form post and the javascript array is passed to a php array and then processed ready to be passed to the MySQL table. The problem is I don't know to do the first bit (number1). Any ideas or pointers? I want to have <div> cells that the background-color css style dynamically change between 4 colors depending on how many times they are clicked. The options are none, yellow, red and green then repeat. So when the page loads, they are all at none, and if you click once it goes to green, twice to yellow, three times to red, then back to none. I do not know if this is possible, but if anyone can point me to a tutorial, I would be appreciative. I just am having a hard time searching the proper terms. [CODE] <script language="JavaScript" type="text/javascript"> fuction init(){ document.getElementById("Name_First").value= "<?php echo $cooker[17]?>" ; } window.onload = init; </script> </head> [CODE] <Body onload="init()"> [CODE] i have to set the value of the input area. But it doesn't work. when i see the source of the page when displayed on firefox fuction init(){ document.getElementById("Name_First").value= "Bob Dwight" } I see this, The value is right but this doesnot show in the form. I would like to thank anyone who helps in advance. hi i need help in creating dynamic form using jquery. i create a form in this form i want when "add another" link is clicked then it adds one more set of fields. form is here Code: <!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>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.4.min(Production).js"></script>
<script src="js/script.js" type="text/javascript"></script>
<style>
#form1 div {
font-size:14px;
margin-bottom: 10px;
clear: left;
}
#form1 label {
width: 125px;
display: block;
font-size:14px;
font-weight: bold;
color: #999;
float: left;
}
#link {
margin-left:125px;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<div>
<label>IM Screen Names:</label>
<input type="text" name="textfield" id="textfield" />
<select name="select" id="select">
<option value="AIM" selected="selected">AIM</option>
<option value="gtalk">Google Talk</option>
<option value="skype">Skype</option>
<option value="windows live">Windows Live</option>
<option value="yahoo">Yahoo</option>
</select><br />
<div id="link"><a href="">Add another</a></div>
</div>
</form>
</body>
</html>
Hey there CF members, i have a huge problem with dynamic JavaScript i am using .load function which is the part of my script built by my programmers to load objects dynamically in JS. the code reads PHP Code: $("#content").load("SOME CODE HERE",hideUpdate); The division id is Content as u can see above. the need is to add a html code at the beginning of it like in php we can use dot operator like "SOME CODE IS " . $ code same way what can we use in here in dynamic html to combine a custom HTML regards hi i got some code from another site. i modified it according to my needs. what is it doing it adds dynamic form fields by clicking "add another" link. the problem is when logged in user wants to modify his contact details he clicks on edit then gets to this modification form where all the data in his db is selected and displayed in that form fields. so the problem here is when he clicks on add another link it adds up that many fields sets that appeared currently. means if there appeared four sets of fields then clicking on add another link will add four more fields. what i want is to add only one set of fields which contains of text field and select menu. my code is here Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
$('#input' + num).after(newElem);
});
});
</script>
<style>
#myForm div {
font-size:14px;
margin-bottom: 10px;
clear: left;
}
#myForm label {
width: 125px;
display: block;
font-size:14px;
font-weight: bold;
color: #999;
float: left;
}
#btnAdd {
margin-left:130px;
}
</style>
</head>
<body>
<form id="myForm" method="post" action="process.php">
<div>
<label>First Name: </label><input type="text" name="fname" id="fname"><br>
</div>
<div>
<label>Last Name: </label><input type="text" name="lname" id="lname"><br>
</div>
<?php
$connect = mysql_connect("localhost","user","pass");
mysql_select_db("db");
$get_im = mysql_query("SELECT * FROM contactim WHERE userid='$_SESSION[userid]'");
$count = mysql_num_rows($get_im);
while($get_contactim = mysql_fetch_assoc($get_im)) {
$userim_db = $get_contactim['username'];
$im_db = $get_contactim['im'];
//echo $userim_db."<br>";
for($i = 1; $i <= $count; $i++) {
?>
<div id="input1" class="clonedInput">
<label>IM Screen Names:</label>
<input type="text" name="name[]" id="name1" value="<?php if($userim_db == "") { echo ""; } else { echo $userim_db; } ?>" />
<select name="screenname[]" id="screenname1">
<option value="AIM" <?php if($im_db == "AIM") { echo "SELECTED"; } ?>>AIM</option>
<option value="gtalk" <?php if($im_db == "gtalk") { echo "SELECTED"; } ?>>Google Talk</option>
<option value="skype" <?php if($im_db == "skype") { echo "SELECTED"; } ?>>Skype</option>
<option value="windows" <?php if($im_db == "windows") { echo "SELECTED"; } ?>>Windows Live</option>
<option value="yahoo" <?php if($im_db == "yahoo") { echo "SELECTED"; } ?>>Yahoo</option>
</select><br />
<?php
}
}
?>
</div>
<div>
<a href="#" id="btnAdd">Add another</a>
</div>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Hi, Is it possible to code a slideshow where the slides can change at a different intervals? Which can be set by me?? The slideshow will hold just text and links but will need to be dynamic in size. i.e. there maybe 5 or 6 lines of text anything more can be viewed by a view more link and then i'll need the box to stretch to fit rest of text. how would i do this?? Thanks I am trying to concatenate text to refer to a variable: Code: var HomePlayer1Points = 17 var i = 1 var a = "HomePlayer" var b = "Points" var c = a + i + b alert(c.value) it give me undefined instead of 17. How should this be done without using eval() ??? Hello, I'm new here and also new to writing JS. I was hoping someone could tell me what is wrong with the code below. I am trying to load a page, and the filename will be different depending on current month and year. If I use the code below in the body for document.write instead of window.location it correctly displays this months page as 102009.htm. Is there a better way to do this? Thanks in advance for any help. Code: <script type="text/javascript"> <!-- var months=new Array(13); months[1]="01" months[2]="02" months[3]="03" months[4]="04" months[5]="05" months[6]="06" months[7]="07" months[8]="08" months[9]="09" months[10]="10" months[11]="11" months[12]="12" var time=new Date(); var lmonth=months[time.getMonth() + 1]; var year=time.getYear(); window.location = (1month + year + ".htm") //--> </script> Hi All, I am working on a script to generate a dynamic table and populate the fields in that table with data from a number of text fields on my page. The page uses Adobe spry validation and this is the only way I can get my validation to function and add the data to the table dynamically (I had a script where the text fields were part of the first row and blank rows were added dynamically but the validation would not work for the added rows... This is a workaround). Being new to JS I did the best I could and I think it's clear what I am going for but I am sure my syntax and method usage is off. When I click to add the table row, I get "[object HTMLLabelElement]" in each cell (dunno what that is). Could someone please help me get going in the right direction with this code? Here it is and thanks in advance for any help. Code: A<!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>Untitled Document</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
</style>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>
<SCRIPT language="javascript">
function addRow(tableID) {
//These variable are commented out and coded inline below.
//var StartTime = document.getElementById(StartTime);
//var EndTime = document.getElementById(EndTime);
//var MaterialID = document.getElementById(MaterialID);
//var Title = document.getElementById(Title);
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.setAttribute("id","StartTime[]");
//Set the value to the form's textfield.
element2.value = document.getElementById(StartTime);
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.setAttribute("id","EndTime[]");
//Set the value to the form's textfield.
element3.value = document.getElementById(EndTime);
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.setAttribute("id","MaterialID[]");
//Set the value to the form's textfield.
element4.value = document.getElementById(MaterialID);
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.setAttribute("id","Title[]");
//Set the value to the form's textfield.
element5.value = document.getElementById(Title);
cell5.appendChild(element5);
}
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) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
<body>
<span id="spryStartTime">
<label for id="StartTime">Start Time:</label><br />
<input name="StartTime" type="text" id="StartTime" tabindex="1" size="10" maxlength="8" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br />
<label for id="EndTime">End Time:</label><br />
<span id="spryEndTime">
<input name="EndTime" type="text" id="EndTime" tabindex="2" size="10" maxlength="8" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br />
<label for id="MaterialID">Material ID:</label><br />
<span id="spryMaterialID">
<input name="MaterialID" type="text" id="MaterialID" tabindex="3" size="10" maxlength="10" />
<span class="textfieldRequiredMsg">A value is required.</span></span><br />
<label for id="Title">Title:</label><br />
<span id="spryTitle">
<input name="Title" type="text" id="Title" tabindex="4" size="50" maxlength="50" />
<span class="textfieldRequiredMsg">A value is required.</span></span><br />
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<!--
I would prefer not to start with a table with blank rows
(but rather create the rows already populated)
but I can work on this later.
-->
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD><INPUT type="text" /></TD>
<TD><INPUT type="text" /></TD>
<TD><INPUT type="text" /></TD>
<TD><INPUT type="text" /></TD>
</TR>
</TABLE>
<script type="text/javascript" />
var sprytextfield3 = new Spry.Widget.ValidationTextField("spryStartTime", "time", {validateOn:["blur"], format:"HH:mm:ss", useCharacterMasking:true});
var sprytextfield4 = new Spry.Widget.ValidationTextField("spryEndTime", "time", {format:"HH:mm:ss", useCharacterMasking:true, validateOn:["blur"]});
var sprytextfield5 = new Spry.Widget.ValidationTextField("spryMaterialID", "none", {validateOn:["blur"]});
var sprytextfield6 = new Spry.Widget.ValidationTextField("spryTitle", "none", {validateOn:["blur"]});
</script>
</body>
</html>
|
|||||||