JavaScript - Jquery Table Sorter And Dynamic Table
hi guys i having some problems with jquery plugin table sorter on a dynamic table.
if i use it on a regular html table it works fine,but on my dynamic table its not working. if someone could look at my code and see if i done something wrong i would appreciate it . Thanks will43 Code: <script type="text/javascript" src="table sorter/jquery.tablesorter/jquery-latest.js" ></script> <script type="text/javascript" src="table sorter/jquery.tablesorter/jquery.tablesorter.js" ></script> <script type="text/javascript"/> $(document).ready(function() { $("#myTable").tablesorter(); } ); </script> <form id="form1" name="form1" method="post" action=""> <label for="Position">Position</label> <select name="Position" id="Position"> <option>QB</option> <option>HB</option> <option>FB</option> <option>WR</option> <option>TE</option> <option>RG</option> <option>RT</option> <option>C</option> <option>LG</option> <option>LT</option> <option>CB</option> <option>LB</option> <option>SS</option> <option>FS</option> <option>DE</option> <option>DT</option> <option>P</option> <option>K</option> </select> <input type="submit" name="Summit" id="Summit" value="Submit" /> </form> <p> </p> <p> </p> <table width="950" border="1" cellpadding="3" cellspacing="3" class="tablesorter" id="myTable"> <thead> <tr> <th bgcolor="#FF0000">id</th> <th bgcolor="#FF0000">Team</th> <th bgcolor="#FF0000">FirstName</th> <th bgcolor="#FF0000">LastName</th> <th bgcolor="#FF0000">Position</th> <th bgcolor="#FF0000">Year</th> <th bgcolor="#FF0000">Overall</th> <th bgcolor="#FF0000">Speed</th> </tr> </thead> <?php do { ?> <tbody> <tr> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['id']; ?></td> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Team']; ?></td> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['FirstName']; ?></td> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['LastName']; ?></td> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Position']; ?></td> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Year']; ?></td> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Overall']; ?></td> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Speed']; ?></td> </tr> </tbody> <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?> </table> Similar TutorialsCode: <html> <head> <title>Table Sort Example</title> <script type="text/javascript"> function generateCompareTRs(iCol) { return function compareTRs(oTR1, oTR2) { var sValue1 = oTR1.cells[iCol].firstChild.nodeValue; var sValue2 = oTR2.cells[iCol].firstChild.nodeValue; return sValue1.localeCompare(sValue2); }; } function sortTable(sTableID, iCol) { var oTable = document.getElementById(sTableID); var oTBody = oTable.tBodies[0]; var colDataRows = oTBody.rows; var aTRs = new Array; for (var i=0; i < colDataRows.length; i++) { aTRs[i] = colDataRows[i]; } if (oTable.sortCol == iCol) { aTRs.reverse(); } else { aTRs.sort(generateCompareTRs(iCol)); } var oFragment = document.createDocumentFragment(); for (var i=0; i < aTRs.length; i++) { oFragment.appendChild(aTRs[i]); } oTBody.appendChild(oFragment); oTable.sortCol = iCol; } </script> </head> <body> <P>Click on the table header to sort in ascending order.</p> <table border="1" id="tblSort"> <thead> <tr> <th onclick="sortTable('tblSort', 0)" style="cursor:pointer">Last Name</th> <th onclick="sortTable('tblSort', 1)" style="cursor:pointer">First Name</th> </tr> </thead> <tbody> <tr> <td>Smith</td> <td>John</td> </tr> <tr> <td>Johnson</td> <td>Betty</td> </tr> <tr> <td>Henderson</td> <td>Nathan</td> </tr> <tr> <td>Williams</td> <td>James</td> </tr> <tr> <td>Gilliam</td> <td>Michael</td> </tr> <tr> <td>Walker</td> <td>Matthew</td> </tr> </tbody> </table> </body> </html> The only part I don't quite understand is the use of sortCol. Is it just the scripter's created variable? Or a build-in method? How is the logic behind? I bet the coder's using an integer to control the sorting. Could anyone help me a bit? 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> <script language="javascript"> function splitNumber() {alert("inside splitnumber"); var x = parseInt(document.getElementById("value1").value); var z = x%10; /*units*/ var y = (x - z)/10; /*tens*/ var c = parseInt(document.getElementById("value3").value); var a = c%10; /*units*/ var b = (c - a)/10; /*tens*/ for(var i=0;i<=z;i++) { var parseInt(document.getElementById("u1").td.value); for(((document.getElementById("u1").td.value))=0;((document.getElementById("u1").td.value))<=i;((doc ument.getElementById("u1").td.value))++) { document.write("<td> " +document.getElementById("u1").td.value +"</td>") } } } </script> /*this is the code i write for generating unique values in the table cells, but it is not working*/ <body > <div class="left"> <table class="main" cellpadding="3px" cellspacing="6px"> <tr> <td width="630px" height="50px" bgcolor="#ffffff"> <table class="tens"> <tr id="t1"> <td value="9"></td> <td value="8"></td> <td value="7"></td> <td value="6"></td> <td value="5"></td> <td value="4"></td> <td value="3"></td> <td value="2"></td> <td value="1"></td> </tr> </table> </td> <td width="200px" height="50px" bgcolor="#ffffff"> <table class="units"> <tr id="u1"> <td value="9"></td> <td value="8"></td> <td value="7"></td> <td value="6"></td> <td value="5"></td> <td value="4"></td> <td value="3"></td> <td value="2"></td> <td value="1"></td> </tr> </table> </td> </tr> <tr> <td width="630px" height="50px" bgcolor="#ffffff"> <table class="tens"> <tr id="t2"> <td value="9"></td> <td value="8"></td> <td value="7"></td> <td value="6"></td> <td value="5"></td> <td value="4"></td> <td value="3"></td> <td value="2"></td> <td value="1"></td> </tr> </table> </td> <td width="200px" height="50px" bgcolor="#ffffff"> <table class="units"> <tr id="u2"> <td value="9"></td> <td value="8"></td> <td value="7"></td> <td value="6"></td> <td value="5"></td> <td value="4"></td> <td value="3"></td> <td value="2"></td> <td value="1"></td> </tr> </table> </td> </tr> <tr> <td width="630px" height="50px" bgcolor="#ffffff"> <table class="tens"> <tr id="t3"> <td value="9">9</td> <td value="8">8</td> <td value="7">7</td> <td value="6">6</td> <td value="5">5</td> <td value="4">4</td> <td value="3">3</td> <td value="2">2</td> <td value="1">1</td> </tr> </table> </td> <td width="200px" height="50px" bgcolor="#ffffff"> <table class="units"> <tr id="u3"> <td value="9">9</td> <td value="8">8</td> <td value="7">7</td> <td value="6">6</td> <td value="5">5</td> <td value="4">4</td> <td value="3">3</td> <td value="2">2</td> <td value="1">1</td> </tr> </table> </td> </tr> </table> </div> <div class="right" > <table cellpadding="3px"> <tr> <td width="5px"></td> <td><span class="row"><input min="0" max="99" type="number" id="value1" name="value1" value="0" onchange="javascript:addNumbers()"/></span></td> </tr> <tr> <td width="5px"><b style="font-size:25px; position:relative; top:18px;">+</b></td> <td><span class="row"><input min="0" max="99" type="number" id="value3" name="value3" value="0" onchange="javascript:addNumbers()"/></span></td></tr> <tr><td width="5px"></td> <td><span class="row" ><input style=" width:66px; position:relative; right:25px;" readonly="readonly" id="answer" name="answer" value="0" /></span></td></tr> </table> </div> </body> hi I have just took from internet dinamic table. this table is dynamic and its rows dynamically can be increased. it sum but not like integer for ex. in row1 i enter 20 and in row2 i enter 5 it sums like 205 but i need it sums like 25 if possible pls help me Thanks beforehand here is code Code: <html> <head> <title></title> <script type="text/javascript"> function addRow() { // grab the element, i.e. the table your editing, in this we're calling it // 'mySampleTable' and it is reffered to in the table further down on the page // with a unique of id of you guessed it, 'mySampleTable' var tbl = document.getElementById('mySampleTable'); // grab how many rows are in the table var lastRow = tbl.rows.length; // if there's no header row in the table (there should be, code at least one //manually!), then iteration = lastRow + 1 var iteration = lastRow; // creates a new row var row = tbl.insertRow(lastRow); // left cell // insert a cell var cellLeft = row.insertCell(0); // here we're just using numbering the cell, like anything else you don't // have to use this, but i've kinda noticed users tend to like them var textNode = document.createTextNode(iteration); // takes what we did (create the plain text number) and appends it the cell // we created in the row we created. NEAT! cellLeft.appendChild(textNode); // right cell // another cell! var cellRight = row.insertCell(1); // creating an element this time, specifically an input var el = document.createElement('input'); // a data type of text el.type = 'text'; // the name of the element txtRow, and because this is dynamic we also // append the row number to it, so for example if this is the eigth row // being created the text box will have the name of txtRow8. super fantastic. el.name = 'txtRow' + iteration; // the exact same thing with a unique id el.id = 'txtRow' + iteration; // set it to size of 40. setting sizes is good. el.size = 40; el.rel = 'sum'; // same thing as earlier, append our element to our freshly and clean cell cellRight.appendChild(el); // select cell // our last cell! var cellRightSel = row.insertCell(2); // create another element, this time a select box var sel = document.createElement('select'); // name it, once again with an iteration (selRow8 using the example above) sel.name = 'selRow' + iteration; // crates options in an array // the Option() function takes the first parameter of what is being displayed // from within the drop down, and the second parameter of the value it is carrying over sel.options[0] = new Option('text zero', 'value0'); sel.options[1] = new Option('text one', 'value1'); sel.options[2] = new Option('text two', 'value2'); // append our new element containing new options to our new cell cellRightSel.appendChild(sel); } function removeRow() { // grab the element again! var tbl = document.getElementById('mySampleTable'); // grab the length! var lastRow = tbl.rows.length; // delete the last row if there is more than one row! if (lastRow > 2) tbl.deleteRow(lastRow - 1); } </script> <script type="text/javascript"> function sum() { var elem = document.getElementById('eval_edit').elements; // loop fields in form for (var i = 0; i < elem.length; i++) { // check if field has attribute 'rel' with value of 'sum' if (elem[i].getAttribute('rel') == 'sum') { // parse value as integer and copy to total field document.getElementById('total').value += parseInt(elem[i].value); } } } </script> </head> <body> <form action="miro.html" name="eval_edit" method="post" format="html"> <table align="center" width = "75%"> <tr> <td align = "center"> click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee! </td> </tr> <tr> <td align = "center"> <!--- very imporant to give the table an id ---> <!--- otherwise it won't know where to edit ---> <table border="1" id="mySampleTable"> <tr> <td> Lesson </td> <td> Title </td> <td> Instructor </td> </tr> <!--- i create the initial row by hand, there are a lot of ---> <!--- different ways to do this depending on what parsing ---> <!--- language you use, i found this was easiest for the ---> <!--- snippet, but experiment, do your thing mang. ---> <!--- this matches the same specs we laid out in the javascript ---> <tr> <td> 1 </td> <td> <input type="text" name="txtRow1" id="txtRow1" size="40" rel="sum"/></td> <td> <select name="selRow0"> <option value="value0">text zero</option> <option value="value1">text one</option> <option value="value2">text two</option> </select> </td> </tr> </table> <input name="total" /> <!--- our buttons call our javascript functions when clicked ---> <input type="button" value="Add" onclick="addRow();" /> <input type="button" value="Remove" onclick="removeRow();" /> <input type="button" value="SUM" onClick="sum()"/> <input type="submit" value="Submit" /> </td> </tr> </table> </form> </body> </html> I have a temp HTML file that is based the code I found on this site at http://www.codingforums.com/showthread.php?t=103961. It dynamically adds and removes rows from an HTML table with inputs in the cells. I have tweaked my copy a bit to match our needs. Of importance to this post is that column 1 is simply the row number. Unfortunately, I am unable to figure out how to re-sequence the first column if a row is deleted. For example, if there are 4 rows, and I delete row 3, I need to re-sequence (re-number) the values to reflect 1, 2, 3, not 1, 2, 4. Below is the insert logic (which adds a delete button for the row). Code: function insertRow() { nForm = document.forms[0]; nForm['submit'].disabled = false; nTable = document.getElementById('worksheet'); var lastRow = nTable.rows.length; var x = nTable.insertRow(lastRow); var a = x.insertCell(0); var b = x.insertCell(1); var c = x.insertCell(2); var d = x.insertCell(3); var e = x.insertCell(4); var f = x.insertCell(5); var g = x.insertCell(6); var h = x.insertCell(7); var i = x.insertCell(8); var j = x.insertCell(9); var k = x.insertCell(10); var l = x.insertCell(11); var z = x.insertCell(12); a.innerHTML="<input type='text' class='PanelNo' name='PanelNo[]' value='"+lastRow+"' readonly>"; b.innerHTML="<input type='text' class='PanelQty' name='PanelQty[]' value='1' onblur='setDefault(this)' onKeyup='verifyNumeric(this)' >"; c.innerHTML="<input type='text' class='PanelThickness' name='PanelThickness[]' onkeyup='verifyNumeric(this)' >"; d.innerHTML="<input type='text' class='PanelWidth' name='PanelWidth[]' onkeyup='verifyNumeric(this)' onChange='recalcSqFootage()'>"; e.innerHTML="<input type='text' class='PanelHeight' name='PanelHeight[]' onkeyup='verifyNumeric(this)' onChange='recalcSqFootage()'>"; f.innerHTML="<input type='text' class='FloorElev' name='FloorElev[]' onkeyup='calc(this)' onkeyup='verifyNumeric(this)' >"; g.innerHTML="<input type='text' class='BlockoutSQFootage' name='BlockoutSQFootage[]' align='center' readonly>"; h.innerHTML="<input type='text' class='PanelWeight' name='PanelWeight[]' readonly>"; i.innerHTML="<input type='text' class='TotalCubicYds' name='TotalCubicYds[]' readonly>"; j.innerHTML="<input type='text' class='LiftingInsReq' name='LiftingInsReq[]' readonly>"; k.innerHTML="<input type='text' class='DaytonBraceReq' name='DaytonBraceReq[]' readonly>"; l.innerHTML="<input type='text' class='DaytonBraceQty' name='DaytonBraceQty[]' readonly>"; z.innerHTML="<input type='button' value='Delete' class='button' onclick='deleteRow(this)'>"; } Here is the logic for deleting a row (dynamically added for each row with the last line in the above code). I have added all the code after the 1st line, but it clearly does not work (but gives no errors): Code: function deleteRow(subjRow) { subjRow.parentNode.parentNode.parentNode.removeChild(subjRow.parentNode.parentNode); var PanelNo = document.getElementsByName('PanelNo[]'); NoRows = PanelNo.length; if (NoRows > 0) { var temp = new Array(); for (xx1=0; xx1 < NoRows; xx1++) { temp[xx1] = (xx1+1); } // how do I do this? document.getElementsByName('PanelNo[]').innerHTML = temp; } } I have never worked with arrays like this for dynamic inputs, so any help would be appreciated. Hi All, I tried to add links to open local xml files in browser in a dynamic table cells. I need help. I tried all ways but I think I miss something. I can open them without table just by document.write(xmlfile location). Here is my code. please help. function showResultsTable(searched, srchedname) { // get the reference for the body var mybody = document.getElementsByTagName("body")[0]; // creates a <table> element and a <tbody> element mytable = document.createElement("table"); mytable.setAttribute('id', 'resulttable'); mytablebody = document.createElement("tbody"); // creating all cells var mycurrent_cell = new Array(); for(var j = 0; j < srchedname.length; j++) { // creates a <tr> element mycurrent_row = document.createElement("tr"); mycurrent_cell[0] = document.createElement("td"); currenttext = document.createTextNode(j); mycurrent_cell[0].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[0]); mycurrent_cell[1] = document.createElement("td"); link = document.createElement("a"); link.name = ""+srchedname[j]); link.href = "C:\\AAA\\TestCasesList.xml"; mycurrent_cell[1].appendChild(link); mycurrent_row.appendChild(mycurrent_cell[1]); mycurrent_cell[2] = document.createElement("td"); currenttext = document.createTextNode(searched[j]); mycurrent_cell[2].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[2]); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); } // appends <tbody> into <table> mytable.appendChild(mytablebody); // appends <table> into <body> mybody.appendChild(mytable); // sets the border attribute of mytable to 2; mytable.setAttribute("border", "2"); } have created dynamic table with two columns for ex:first column is Income column and second column is tax from Income at the third column are different percent options for ex. I wrote first column 1000 and chose from third drop down box 10% I would like when i chose 10% sum function automatically writes 10% percent of 1000 into second column so that 100 here is code if possible pls help me i really need this code and i bellieve that this code is useful both me and other users thanks beforehand here si code Code: <html><head><title>dinamik sheet</title> <script> function addrow(){ var tbl=document.getElementById('sheet'); var lastrow=tbl.rows.length; var iteration=lastrow; var row=tbl.insertRow(lastrow); var cellLeft=row.insertCell(0); var textNode=document.createTextNode(iteration); cellLeft.appendChild(textNode); var cellRight=row.insertCell(1); var el=document.createElement('input'); el.type='text'; el.name='txtRow'+iteration; el.size=40; el.setAttribute('sumMe',"1"); el.onBlur=sum; cellRight.appendChild(el); var cellRight2=row.insertCell(2); var el1=document.createElement('input'); el1.type='text'; el1.name='txtRowe'+iteration; el1.id='txtRowe'+iteration; el1.size=40; el1.setAttribute('sumMe',"1"); cellRight2.appendChild(el1); var cellRightsel=row.insertCell(3); var sel=document.createElement('select'); sel.name='selRow'+iteration; sel.options[0]=new Option('10%','value="10"'); sel.options[1]=new Option('20%','value="20"'); sel.options[2]=new Option('30%','value="30"'); cellRightsel.appendChild(sel); var cellRightsel2=row.insertCell(4); } </script> <script> function sum(){ var form=document.getElementById('eval_edit'); if(!form) return; var s1 = 0; var s2 = 0; var tbl=document.getElementById('sheet'); var iteration=tbl.rows.length-1; for(var i=1; i<=iteration; i++){ var el = form['txtRow'+i]; if(!el) continue; var txt = el.value; if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries var el2 = form['selRow'+i]; var el3 = document.getElementById('txtRowe'+i); if(!el2 || !el3) alert('Error in calculating totals'); var percent = Number(el2[el2.selectedIndex].value)/100; var tax = Number(txt) * percent; el3.innerHTML = tax.toFixed(2); s1 += Number(txt); s2 += tax; } if(form['total']){ form['total'].value = s1.toFixed(2); } if(form['taxtotal']){ form['taxtotal'].value = s2.toFixed(2); } } onload = function(){ sum(); } </script> </head> <body> <form name="eval_edit" method="POST"> <table align="center" width="75%"> <tr> <td align="center">Balance sheet</td></tr> <tr><td align="center"> <table border="1" id="sheet"><tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr> <tr><td>1</td> <td><input sumMe="1" type="text" name="txtrow1" id="txtrow1" size="40"/></td><td><input sumMe="1" type="text" name="txtrowe" id="txtrowe" size="40"/></td> <td><select name="selRow0"> <option value="value="10">10%</option> <option value="value="20">20%</option> <option value="value="30">30%</option></select></td></tr></table> INCOME SUM<input name="total" type="text"/> <input type="button" value="Add" onclick="addrow()" /> <input type="button" value="Remove" onclick="removeRow()" /> <input type="button" value="SUM" onClick="sum()"/> <input type="submit" value="Submit" /> <input name="taxtotal" type="text"/>Tax SUM with desirable percent for ex: 20% </td> </tr> </table> </form> </body> </html> Hi, I have an HTML table dynamically populated with data from a coldfusion query and having radio buttons - see code following below. I need javascript to see the radio buttons and the user's selection - "approved"; "denied"; or, "N/A". If the user selects "approved" for multiple rows and then Submit the information will update the database table and remove those rows. However, if the user selects "approved" and "denied" then I need to update the "approved" rows and stop the update at the "denied" row and show a dialog box which informs the user that the "Reason for Denial" text box must be entered. Then the Submit button can be engaged and the "denied" selection processed. Only one "denied" at a time will be updated - but all "approved" entries can be denied similtaneously - unless a "denied" intervenes. I do have javascript code for the "denied" selection with empty "Reason for Denial" text box - see below: Code: <script type="text/javascript"> function rationale() { var denInfo = document.getElementById("denialReason"); if(denInfo.value == ""){ alert("Please enter reason for denial in Rationale for Request Denial"); return false; denInfo.focus(); } } </script> The overall action seems like it would need some extensive javascript coding and I haven't a clue how to do it. Any help is GREATLY APPRECIATED. Code: <table border="1" cellspacing="1" cellpadding="2" style="position:relative; left:50px;" width="1000"> <tr> <td width="140" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Name<hr />Begin Date</font></td> <td width="75" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Request Date<hr />End Date</font></td> <td width="145" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;">Type of Hrs<hr />Request Justification</font></td> <td width="76" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Num Hrs Req<hr />Rel Comp Begin Date</font></td> <td width="98" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Projects<hr />Rel Comp End Date</font></td> <td width="180" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Decision<hr />Leave Slip Submitted</font></td> </tr> <cfoutput query="Req"> <tr style="background-color:'FFFFFF';" onMouseOver="this.style.backgroundColor='FFCC33';" onMouseOut="this.style.backgroundColor='FFFFFF'" > <td colspan="6"> <table cols="6" border="1" cellpadding="5" cellspacing="0"> <tr> <td width="177"> #Name#</td> <td width="107"> #DateFormat(RequestDate, "m/d/yyyy")#</td> <td width="178"> #TypeofHours#</td> <td width="105"> #NumberHrsRequested#</td> <td width="127"> #project#</td> <td width="218"> #Decision# <cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="approved" size="1">Approve <cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="denied" size="1">Deny <cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="" size="1" checked="yes">N/A </td> </tr> <tr> <td> #DateFormat(BeginDate, "m/d/yyyy")#</td> <td> #DateFormat(EndDate, "m/d/yyyy")#</td> <td> #justification#</td> <td> #DateFormat(RCBDate, "m/d/yyyy")#</td> <td> #DateFormat(RCEDate, "m/d/yyyy")#</td> <td> #RCLeaveSlip#</td> </tr> <tr id="denyRow_#ID#"> <td colspan="1"><font color="##0000FF"; style="font-weight:bold">Reason For Denial</font></td> <td colspan="5"> #ReasonForDenial# <cftextarea name="denial_#ID#" cols="85" rows="3" wrap="hard"/> </td> </tr> </table> </td> </tr> </cfoutput> </table> Thank you, John Hi All, I tried to add links to open local xml files in browser in a dynamic table cells. I need help. I tried all ways but I think I miss something. I can open them without table just by document.write(xmlfile location). Here is my code. please help. function showResultsTable(searched, srchedname) { // get the reference for the body var mybody = document.getElementsByTagName("body")[0]; // creates a <table> element and a <tbody> element mytable = document.createElement("table"); mytable.setAttribute('id', 'resulttable'); mytablebody = document.createElement("tbody"); // creating all cells var mycurrent_cell = new Array(); for(var j = 0; j < srchedname.length; j++) { // creates a <tr> element mycurrent_row = document.createElement("tr"); mycurrent_cell[0] = document.createElement("td"); currenttext = document.createTextNode(j); mycurrent_cell[0].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[0]); mycurrent_cell[1] = document.createElement("td"); link = document.createElement("a"); link.name = ""+srchedname[j]); link.href = "C:\\AAA\\TestCasesList.xml"; mycurrent_cell[1].appendChild(link); mycurrent_row.appendChild(mycurrent_cell[1]); mycurrent_cell[2] = document.createElement("td"); currenttext = document.createTextNode(searched[j]); mycurrent_cell[2].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[2]); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); } // appends <tbody> into <table> mytable.appendChild(mytablebody); // appends <table> into <body> mybody.appendChild(mytable); // sets the border attribute of mytable to 2; mytable.setAttribute("border", "2"); } Hi All, I am working on a script that creates a table, taking the data from a number of text fields and populating the table cells with it. Originally I had to start with an existing table containing one blank row but I was able to get the script to create the table dynamically. Unfortunately I seem to have broken my delete row function (this was working fine when the script started with an existing table). The error I am getting is: TypeError: 'cells.0.childNodes' is null or not an object I googled this but could not find anything to help. I don't have alot of javascript experience and need help from the experts. Thanks in advance for all your help guys! Kind regards, Ken 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 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) { if (!document.getElementById(tableID)) { //alert("the table does not exist"); var body = document.getElementsByTagName("body")[0]; // creates a <table> element and a <tbody> element var tbl = document.createElement("table"); var tblBody = document.createElement("tbody"); var newRow = document.createElement("tr"); // add the row to the end of the table body tblBody.appendChild(newRow); // put the <tbody> in the <table> tbl.appendChild(tblBody); // appends <table> into <body> body.appendChild(tbl); // sets the id of "dataTable" and border attribute of tbl to 0; tbl.setAttribute("id", "dataTable"); tbl.setAttribute("border", "0"); } 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("name","StartTime[]"); element2.value = StartTime.value; cell2.appendChild(element2); StartTime.value=""; var cell3 = row.insertCell(2); var element3 = document.createElement("input"); element3.type = "text"; element3.setAttribute("name","EndTime[]"); element3.value = EndTime.value; cell3.appendChild(element3); EndTime.value=""; var cell4 = row.insertCell(3); var element4 = document.createElement("input"); element4.type = "text"; element4.setAttribute("name","MaterialID[]"); element4.value = MaterialID.value; cell4.appendChild(element4); MaterialID.value=""; var cell5 = row.insertCell(4); var element5 = document.createElement("input"); element5.type = "text"; element5.setAttribute("name","Title[]"); element5.value = Title.value; cell5.appendChild(element5); Title.value=""; } function deleteRow(tableID) { if (document.getElementById(tableID)) { //alert("the table exists"); 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="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="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="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="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')" /> <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> Hi, I have a dynamic JS table and the user can add several rows then populate rows with data. There are 4 columns in table. First row, first two columns have JQuery calendar. Third column has populated select list. Fourth column, first row has JS function to ensure that user enters integer/decimal with corresponding alert for incorrect entry. Two things I want to do: 1. Populate added rows with JQuery calendars and integer/decimal alert. 2. Capture added rows and data from user entries so that information can be sent to database via ColdFusion programming. The following is the js code I am using: For the datepicker I linked to an in-house URL so this is the function - Code: $(function() { $("#startdate").datepicker(); $("#enddate").datepicker(); $("#RcompStart").datepicker(); $("#RcompEnd").datepicker(); }); </script> The objects (inputs) for the above are Code: <td><input style="width: 70px" type="text" id="startdate"></td> <td><input style="width: 70px" type="text" id="enddate"></td> For the numeric alert the function is Code: <script type="text/javascript"> function checkQuarters( fld ) { var val = parseFloat(fld.value); if ( isNaN(val) || ( val*4 != Math.floor(val*4) ) ) { alert("Value must be a numeric and a multiple of 0.25"); return false; } return true; } </script> The object (input) for the above is Code: <td><p> <form style="width: 5px; height: 1px;"> <input type="text" name="No. of Hours" id="No. of Hours" style="width: 70px;" onblur="checkQuarters(this);" /> </form> </td> And to add and remove rows the function is Code: <script language="Javascript" type="text/javascript"> /*<![CDATA[*/ var new_rows=new Array(); var row_count=0; function addRow() { var tbl = document.getElementById('ReqDtTbl'); new_rows[row_count]=new Array(); var lastRow = tbl.rows.length; var iteration = lastRow; if (lastRow>7){ return;} var row = tbl.insertRow(lastRow); var cellLeft = row.insertCell(0); var textNode = document.createElement('input'); textNode.size = 7; textNode.name = 'startdate' + iteration; cellLeft.appendChild(textNode); new_rows[row_count]['cell']=textNode; var cellRight = row.insertCell(1); var el = document.createElement('input'); el.type = 'text'; el.name = 'enddate' + iteration; el.id = 'enddate' + iteration; el.size = 7; new_rows[row_count]['cell2']=el; cellRight.appendChild(el); // the last cell! var cellRightSel = row.insertCell(2); var sel = document.createElement('select'); sel.name = 'TypeHrs' + iteration; sel.options[0] = new Option('-Select-', '""'); sel.options[1] = new Option('Comp Time', 'Comp Time'); sel.options[2] = new Option('Credit Hrs', 'Credit Hrs'); sel.options[3] = new Option('Overtime', 'Overtime'); sel.options[4] = new Option('Rel Comp', 'Rel Comp'); cellRightSel.appendChild(sel); new_rows[row_count]['cell3']=sel; var cellRight = row.insertCell(3); var el = document.createElement('input'); el.type = 'text'; el.name = 'No. of Hours' + iteration; el.id = 'No. of Hours' + iteration; el.size = 7; cellRight.appendChild(el); new_rows[row_count]['cell']=el; row_count++; } function removeRow() { // grab element again var tbl = document.getElementById('ReqDtTbl'); // grab length var lastRow = tbl.rows.length; // delete last row if there is more than one row if (lastRow > 2) tbl.deleteRow(lastRow - 1); } /*]]>*/ </script> The buttons for this function are Code: <input type="button" value="Add a row" onclick="addRow('ReqDtTbl',5)";/> <input type="button" value="Remove a row" onclick="removeRow();" /> That's it. Thanks - John Dear all Gurus, I'm stucked with below logic. Wanna get your advice to find out where I went wrong.Please help.... Below is my Coding done. A dynamic HTML table is generated text boxes in table Rows(Dissable mode) with EDIT & DELETE buttons. When user clicks on Edit button, particular row(Text Box) should be enable to edit the values generated. But Unfortunately in my coding, always the fist row only gets enabled. <script type="text/javascript"> function m(id){ document.getElementById('Record_id').disabled=false; document.getElementById('file_number').disabled=false; return false; } </script> PHP Code: while ($rw = mysql_fetch_array($query1)) {$k = $rw['Record_id'];echo '<tr>';echo'<form name = "t_data">';echo '<td>'.'<input type="text" id="Record_id" name="Record_id"value="'.$rw['Record_id'].'" disabled="true" size ="5"/>'.'</td>';echo '<td>'.'<input type="text" id="file_number" name="file_number" value="'.$rw['file_number'].'" disabled="true" size = "9"/>'.'</td>';echo '</tr>'; echo '<tr>';echo' <td>';echo'<form action="dlt_grid.php" method = "GET">';echo'<input type="submit" value="Delete">';echo'<input type="hidden" name="hf" value="'.$k.'">';echo'</form> ';echo'</td>'; echo' <td>';echo'<input type="submit" id="'.$k.'" value="Edit" onclick = "return m(this.id)">';echo'<input type="hidden" name="hf" value="'.$k.'">';echo'</td>';echo '</tr>';echo'</form>'; My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its: Code: <script type="text/javascript"> addLoadEvent(function() { function1(1); }) //function1 makes the table rows do something appearance wise. </script> <tr> <td></td> <td></td> <td> <img src="pics/delete.png" alt="Delete" onclick="function2();"> </td> </tr> I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site. I want to pass the "divId' function so that i can grab functions dynamically into the server where "success" is. this possible? I know the current setup is not (because " d.divId " isn't a variable) Code: function run(times,divId) { $(function() { var client_id = $('#client_id').attr('value'); $.ajax( { url:'http://urlhere.com', data:{c:client_id}, timeout:99999999999999, dataType:'jsonp', jsonp:'callback', jsonpCallback:'jsonpCallback', error:function() { if (times==1) { run(2); } else { $('#'+divId).html('Error') } }, success:function(d) { $('#'+divId).html('$'+d.divId); } }); } Hello all i have to implement simple LIFO algorithm ( if i can call it like this .. ) say i have html table and and i fetching data i like thet the last data that fetched to be the first record in the table for example : im fetching the string "111" so it will be the first record next im fetching the string "222" now the string "111" will be the second and the string "222" will be the first .. and so on Hi, I am making a widget to work on any site, that means not my site, so I have no control of what other libraries are used on the page. Thats why I am loading my own jQuery libraries dynamically and then execute my own code. An issue I have that some sites are loading fine and all is working as expected, but some sites are executing the code 2 times. I have made a page dump and put on my own server, so I can replicate the issue better. GOOD: here is a page that works OK: (see the button that says: send these contact details and map to your mobile.) Code: http://test.plustest.info/suffolk/contact.html BAD: here is the page that shows the button I am trying to load 2 times: Code: http://test.plustest.info/cream.html As you can see the button appears 2 times, which is wrong... Even it shows 2 times, the popup appears just ok when you click on the button. Would anyone be able to check what can be wrong here? the code is in the: Code: <div id="now_send_it_wrapper"> so its easier to find. Any help would be much appreciated. Thanks, Vladas hi all, i have a table, just a basic table with 6 rows. depending on the value of the first <td>thevalue</td> i want to start a end the existing table and start a new one. the newly added table (i hope) will contain all the remaining <tr><td></td></tr> nodes until i run into the next check that will close the newly added table and begin a new table again etc.... i can get the correct node (tr) after i find the value in the td im looking for, and then try a : document.createElement("table"); , but my problem is that this newly created table tag comes with an automatically created </table> element / tag, so i end up with just inserting a new blank table after a row instead of inserting a new table tag that has all the remaining tr and tds under it. hope that makes sense. my entire test page is: (click the text link and an alert will show the output with the new <table></table> after the row that my check is looking for (first td with a 2) -------------------------------------------------------------------- Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <script type="text/javascript"> function reformatMe() { var divObj = document.getElementById('reformatMe'); var numRows = document.getElementsByTagName("tr"); var z = "1"; for (i = 0; i < numRows.length; i++) { if (numRows[i].childNodes[0].innerHTML == "2") { var markStart = numRows[i]; alert(markStart.nextSibling); var closeTable = document.createElement("/table"); var addTable = document.createElement("table"); //var tbody = document.createElement("tbody"); //addTable.appendChild(tbody); addTable.setAttribute("id", "subOptionID" + z); if(numRows[i+1] != null){ numRows[i].parentNode.insertBefore(addTable, numRows[i+1]); } z++; } } alert(divObj.innerHTML); } </script> </head> <body> <a href="#" onclick="reformatMe();">reformat table</a> <div id="reformatMe"> <table border="1" cellpadding="4" cellspacing="2" id="menuItemID1"> <tr><td>1</td> <td>1</td> <td>How would you like your food prepared?</td> <td>1</td> <td>1</td> <td>0</td></tr> <tr><td>1</td> <td>1</td> <td>Choose two of the following sides</td> <td>0</td> <td>2</td> <td>0</td></tr> <tr><td>1</td> <td>1</td> <td>What do you want on your Baked Potato?</td> <td>0</td> <td>2</td> <td>1</td></tr> <tr><td>2</td> <td>1</td> <td>What type of dressing do you want on your salad?</td> <td>1</td> <td>1</td> <td>1</td></tr> <tr><td>1</td> <td>1</td> <td>Do you want fries?</td> <td>1</td> <td>1</td> <td>0</td></tr> <tr><td>1</td> <td>1</td> <td>Do you want ketchup on your fries?</td> <td>1</td> <td>1</td> <td>1</td></tr> </table> </div> </body> </html> I have a master page with a table that contains main content and side bar content. The main content is where the different pages of the site are shown, and the side bar content has stuff like email and friends lists. The mail list is on a model popup and when opened will ajax populate the table with rows containing image, subject, sender, time, all in different td's. When I click a row, the message pops up. From the message I can choose to reply or delete. When I delete I want to fade out the row that was deleted. I can wait the 10 seconds until the list does a refresh but I would rather have this cool visual effect. My problem is I am having difficulty selecting the tr I want. My table has an id of MainMailTable and when I check it does not have the ct100: added in front. Here is what I am trying: Code: $('#MainMailTable:tr:has(td:contains(' + subject + '))').fadeOut(1000); I am trying to find the row that contains the subject of the message I want to delete. I guess that isnt really unique, and maybe I should add a hidden td with an id to the row (can Jquery get a hidden field?). But I would like to be able to get this first step to work. When I try: Code: $('tr:has(td:contains(' + subject + '))').fadeOut(1000); the whole page disappears, so I think I may be close. Thank you in advance for any assistance. I've tried using this to do it, but it isn't working... string.replace(/(<table([^>]+)table>)/ig,""); So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){ //References var change = $("#menu li a"); var loading = $("#loading"); var content = $("#content"); //Manage click events change.click(function(){ //show the loading bar showLoading(); //load selected section if(this.id == "home") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/index.php", hideLoading); content.slideDown(); } else if(this.id == "secondpage") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/secondpage.php", hideLoading); content.slideDown(); } else { //hide loading bar if there is no selected section hideLoading(); } }); //show loading bar function showLoading(){ loading .css({visibility:"visible"}) .css({opacity:"1"}) .css({display:"block"}) ; } //hide loading bar function hideLoading(){ loading.fadeTo(1000, 0); }; }); Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) { function load(num) { $('#content').load(num +".html"); } $.history.init(function(url) { load(url == "" ? "1" : url); }); $('#ajax-links a').live('click', function(e) { var url = $(this).attr('href'); url = url.replace(/^.*#/, ''); $.history.load(url); return false; }); }); |