JavaScript - Filtertable Library Has Problem With Tables Of 1 Or 0 Records
I encountered an error when my table had only one or zero records when using the filtertable library from javascriptkit.com Here is the solution to fixing it for anyone else who encountered it. Perhaps the library could be updated with the fix?
The error is in the function getChildElms() when the variable 'n' is undefined. Working backwards, I found that there was a problem with some logic in the setFilterGrid() function where the value of 'ref_row' is changed if undefined to a value of '2'. In fact, that value is needed in the line to set the value of tbl.tf_ref_row, but accidentally caused a problem in the call to getCellsNb() where at some point it tries to get at row 2 (offset 3) which doesn't exist in my case. I fixed it by creating a new variable and leaving it as 'undefined' unless ref_row contained a number (passed into the function). This is a section of the function with the fix: Code: var _row; if(ref_row == undefined){ ref_row=2; } else { ref_row=(ref_row+2); _row = ref_row; } var ncells = getCellsNb(id,_row); tbl.tf_ncells = ncells; if(tbl.tf_ref_row==undefined) tbl.tf_ref_row = ref_row; tbl.tf_Obj = fObj; if( !hasGrid(id) ) AddGrid(id); However, if you have zero rows, you still get an error since there are no tr elements. I fixed this by having the code use the th elements instead when zero tr elements are found. This code is in the function 'getCellsNb()' below: Code: { var t = grabEBI(id); var tr; if(nrow == undefined){ tr = grabTag(t,"tr")[0]; } else { tr = grabTag(t,"tr")[nrow]; } var n = getChildElms(tr); if (!n){ n = getChildElms(th); // Check for 'th' elements instead. return n.childNodes.length; } return n.childNodes.length; } If you have no data rows and no header row, then you're on your own :) Similar TutorialsHi, I have written this program: Code: var scores=[]; function sortScores(scoreRecs){ for(i=0;i<scoreRecs.length;i++) scores.push(scoreRecs[i]); for(var i=0;i<scores.length;i++) { for(var j=i+1;j<scores.length;j++) { if(Number(scores[i])>Number(scores[j])) { tempValue=scores[j]; scores[j]=scores[i]; scores[i]=tempValue; } } } alert(scores); } sortScores(["5","6","5","7","7"]); to take an array of variables in calling the function (ie sortScores), place these variables into an empty array("scores"), apply the bubble sort to scores, and then alert scores in sorted form. When I use test values like I have above, where they are all just numbers, this program works perfectly and alerts the "scores" array, correctly sorted. However, what I would like to do is to call the function with an array of records, each containing two fields, and apply the same sort to the array of records, based on the value in the first field of each record.To illustrate, i'd like to be able to call the function thus: Code: sortScores([{sco 0,index:0},{sco 2, index:1},{sco 1,index:2}]); and for it to sort the records in descending order of the value of the "score" field. So the above call would alert: Code: [{sco 2,index:1},{sco 1,index:2},{sco 0,index:0}] however, i'm not sure how i'd reference the numeric part of the f1 of each record in the sort? Hopefully you can see what I'm trying to achieve...any ideas would be greatly appreciated. hello .. can I use som function from c++ library in my java script file ? thanks .. Hello. I have a few String prototypes such as Code: String.prototype.EscapeReg = function () { return this.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); }; // Escapes characters for use with a regular expression I also have my own class/ library which is used like this Code: var adg = new AndyG_ns.ADG_Utils(); adg.StartClock('AndyClock','dd mmm yy hh:nn'); // etc. What I would like to do is to only add the prototype to my library (not to the global namespace). The end result I'm looking for is to use code such as: Code: var adg = new AndyG_ns.ADG_Utils(); var myString = new adg.AString(); var parsed = myString.EscapeReg(); In addition, I want to be able to also use/create my special string sub-class within my library. I suppose I'm saying that I would like to extend or super-class the native String object. Any guidance would be appreciated Hi im in the middle of creating my own javascript library but got stuck I can do everything for this library I just got stuck on how to make it flow through a list of strings like jQuery does. For example jQuery allows you to write a string like this: $('li').add('p').css('background-color', 'red'); Which they can select all li tags add a p tag inside then change the background color of that tag, What im asking is how can I go about doing this where I can create a similar system which allows me to flow through my class functions. Right now its a very small code because I started again to allow better overview of where things are but this is it so far. This allows the use of both SDK and $ at the start of the function for example. $.Display({'file':'index.php','id':'divid'}); And SDK.Display({'file':'index.php','id':'divid'}); Code: (function(window) { var $ = { Display: function(info) { this.call(info.file,info.id,'file='+info.file); }, call: function(file,id,parameters) { if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById(id).innerHTML=xmlhttp.responseText; } } xmlhttp.open("POST",file,true) xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded") xmlhttp.send(parameters) }, Flash: function(params) { if(params.file){alert(params.file);} if(params.id){alert(params.id);} } }; // Expose SDK to the global object window.SDK = window.$ = $; })(window); Hey guys! Was wondering if anyone knew a simpel javascript library? With things like alert ,displayDate() and other basic things. Im pretty new to JS so I think that a lib like jquery would be to hard for me right now. Thx // Kiwo Greetings, I am using the javascript scriptaculous library. On my Green Products webpage, if the user clicks "Subcategory", "Maximum Price", "Business Name", or "Search For", a green dialogue box should appear giving the user a tooltip. This works great for browsers other than IE. I am getting the following error: Quote: Message: Object doesn't support this property or method Line: 543 Char: 3 Code: 0 URI: http://www.green-watch.org/scriptaculous/src/effects.js Message: Object doesn't support this property or method Line: 529 Char: 3 Code: 0 URI: http://www.green-watch.org/scriptaculous/src/effects.js This is a fairly common library. What is the solution to this problem? Always seems to be problems with IE... Thanks in advance for any solutions or suggestions. Sincerely, Travis Walters Hello, UPJS is an open source JavaScript Library that caters needs and requirements of web developers. It is currently under development, we encourage you to use this Library. For any bug, we will be glad to help you. Please follow upjs on facebook, http://www.facebook.com/pages/upjs/239536299419136 http://www.upjs.org Have a nice day! [delete]
I read the posting guidelines but I still have questions that I would love to be answered by anyone willing to tolerate me. I started studying javascript when I decided that I wanted to create a dynamic webpage after viewing some books that were made to pageflip with Javascript and after viewing a ton of animations. So I figured since everyone keeps saying Javascript is simple that if all I wanted to do was to make a book extend outwards on mouseover and then open up on click and flip pages which they already have a code for that it wouldn't be so difficult. I've read everything I could practiced a little bit, I'm not fluent but I do have a goal and a time. The problem for me comes up with figuring out what I need to do in order to make it appear as if the book is coming out of a book shelf. There is a lot of information on animations where flat objects rise above clouds. I am thinking that I would have to use some sort of sprite of a row of books both sorta sideways where you can see the side of the book as well as the edge, and both a row of books on a shelf, or perhaps a row of books with some of the books being pulled out and then on mouse over animate the scene so that it looks like the book is being pulled out. Would that work? Or is there a simpler way? Another way or I don't know. Is there a code that can make it look like a book is extending outwards without an animation or would I need to create an animation for that? Thank you. First off I'm incredibly new to JavaScript and its likely I am going about this completely the wrong way. But gotta start somewhere. Also my apologise if I am posting in the wrong area. Here's my problem. I have setup a site in CSS3/XHTML that I will use to display some of my photography (im a keen photographer) The way my Gallery will work will be using Submenu's then there will be a table of Thumbnails which I have setup. The part I am stuck on is that I want people to be able to click the thumbnails and then the corresponding picture held in the next folder to be displayed in a CSS defined container in the center of the page. So clicking _Images/Thumbnails/1.gif will bring up _/Images/1.gif in the CSS container For the life of me I cannot work out how to do it though. Here is my code so far. HTML -> <td> <a onclick="newImage" href="nogoto"> <img src="_images/Thumbnails/1.png" align="left" width="47px" height="33px" alt="1" id="1"/> </a> </td> CSS -> #mainpage { color:#FFF; text-align:right; font-size:.7em; height:365px; width:529px; position:relative; top:25px; left:35px; } JavaScript -> window.onload = newImage(); function newImage() { document.getElementById(mainpage).innerHTML = "<script>background-image:_images/1.png;</script>" } Obviously I want to expand on this once it works but for now I would just like to get the images to appear correctly when clicked. Thank you so much in Advance if anyone can help. Hi all, can anyone recommend me nice tooltip script which is javascript library independent, meaning no help/code from any of libraries such as (jquery, prototype,scriptalicious, mootools,extjs etc.). Here is the one I particularly like but it uses protoype and that is not option for me now, because I'm just integrating something else into already existing huge script and I don't wanna mess up old functionality or bring some additional unnecessary overhead. Or even better if you can give me some guidelines / pointers , how to make one from scratch that would be acceptable for me also. The most important thing is that it points from above downwards, because I found like dozen of good ones but pointing from below. Here is an example what I mean when I say from pointing from above. Thank you Qatrix is a new kind of JavaScript library for easily building up high performance web application with less code. And now is released today. The features of Qatrix a Hardware Accelerated Animation Qatrix will use the native CSS3 transition to process the animation as possible. And this kind of native basic process operation will enable hardware acceleration by browser. The animation of Qatrix will be more faster and more smoother. High performance code Qatrix is using more native code and special design to increase the performance. Web application will run much more faster and more efficient. Easy-to-learn The name of functions on Qatrix is familiar with the most popular JavaScript jQuery. It will be much more easy to use without re-learn other new concept and knowledge. Cache system Qatrix included a simple cache system to storage and fetch data with high speed. Incredible size Only 6KB compressed and gzipped file size with 60+ functions. Load script instantly without expectation. Read more and download: http://qatrix.com I am trying to use a javascript plugin for jQuery library that transforms a regular select html element into a dropdown checkbox list (Dropdown Check List, see http://code.google.com/p/dropdown-check-list/), however I believe that the prototype library that I am loading immediately after the jquery library is still conflicting with it somehow even though I modified my code to reflect the following changes (which is supposed to allow the use of prototype with jquery): http://docs.jquery.com/Using_jQuery_...ther_Libraries (Including jQuery before Other Libraries) My code (in a cold fusion environment, which should be irrelevant) looks like this: Code: <html> <head> <SCRIPT LANGUAGE="JavaScript" SRC="js/jQuery/jquery.js" TYPE="text/javascript"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="js/prototype.js" TYPE="text/javascript"></SCRIPT> <script language="javascript" type="text/javascript" src="js/jQuery/ui.core.js"></script> <script language="javascript" type="text/javascript" src="js/jQuery/ui.dropdownchecklist.js"></script> <script language="javascript" type="text/javascript"> jQuery(document).ready(function() { jQuery("#cbo_status").dropdownchecklist({ width: 200, maxDropHeight: 120 }); }); </script> </head> <body> <select id="cbo_status" name="cbo_status" multiple="multiple"> <option value="-1">All</option> <option value="1" SELECTED>Assigned</option> <option value="2" SELECTED>In Progress</option> <option value="3" SELECTED>Complete</option> <option value="4" SELECTED>Verified Resolved</option> <option value="5" SELECTED>Will not be addressed</option> <option value="6" SELECTED>Wishlist</option> </select> </body> </html> When I run the debugger, here's the error I'm still receiving: Error: Object doesn't support this property or method (pointing to the line below, character 3) jQuery("#cbo_status").dropdownchecklist({ width: 200, maxDropHeight: 120 }); Does anyone have any idea why this might still be failing? Hi, I Have been working on a archive/library for our animators here, with images of old and useful models/3d work. to help them out and save them some time, I wanted to add the ability to click on a jpeg and open the folder where the files are stored for the desired character/set. Being a animator myself, and working for a small company (who have no javascript programmers) we have little to no knowledge of the code and would appreciate any help possible. this is what i have come up with so far Code: <HEAD> <SCRIPT LANGUAGE="JavaScript"> function DriveList() { var folder=document.Drive.Name.options[document.Drive.Name.selectedIndex].value; document.frames['MyComputer'].location.href = folder; } function FolderChoose() { var location=document.UserLocation.FolderLocation.value; document.frames['MyComputer'].location.href = location; } </script> </HEAD> <BODY> <FORM NAME="UserLocation"> <P><font size="2">Type in a Folder Location: </font> <INPUT TYPE="text" name="FolderLocation" length="25" size="20"> <INPUT TYPE="button" value="Open Folder" onClick="FolderChoose();"></P> </FORM> <IFRAME NAME="MyComputer" SRC="about:blank" WIDTH="50%" HEIGHT="20%"></IFRAME> </CENTER> however this only allows the user to manually search for the files. Is it possible and what would be the best approach to achieving this. I have been using DreamWeaver to create the library if that is of any help. Thanks in advance! Matt <!-- *** NEED HELP PASSING VALUE id TO POPULATE SUBRECORDS *** --> <!-- *** See line #51 to #55 *** --> <?php session_start(); ob_start(); if($_SESSION[userdetails]->role != "Admin") { die("Access Denied!"); } require_once("includes/connect.php"); // Check if he has the right info. $sql = sprintf("SELECT * FROM members ORDER BY username ASC", $_SESSION[userdetails]->id); $query = mysql_query($sql); // You are now connected ?> <head> <html> <head> <title>Split ListBox Text To Text Boxes</title> <script type="text/javascript"> <!-- archaic format: language="javascript" --> function SplitText (info) { if (info == '') { return; } var tarr = info.split(","); document.getElementById('tBox1').value = tarr[0]; document.getElementById('tBox2').value = tarr[1]; document.getElementById('tBox3').value = tarr[2]; document.getElementById('tBox4').value = tarr[3]; } </script> </head> <body> <form name="convert"> <p style="margin: 2px"> <p><select name="Groups" style="width: 176; height: 19; border: 1px solid #C0C0C0 ; font-size: 11px; font-family:Arial" size="1" onChange="SplitText(this.value)"> <option>===Select Group===</option> <?php $sql1 = mysql_query("SELECT * FROM qw_groups"); while($r1=mysql_fetch_assoc($sql1)){ $f1 = $r1[id]; $f2 = $r1[GroupName]; echo "<option value='$f1,$f2,,'>$f2</option>"; } echo "</select>"; ?> <p><select name="GroupItems" style="width: 176; height: 19; border: 1px solid #C0C0C0 ; font-size: 11px; font-family:Arial" size="1" onChange="SplitText(this.value)"> <option>===Select Group Item===</option> <?php // **** IS IT POSSIBLE TO PASS THE VALUE "$f1" FROM GROUPS TO GROUPITEMS **** // **** I WANT TO POPULATE THE SECOND DROPDOWN LIST WITH SUB-RECORDS WITHOUT SUBMIT /POST /REFRESH /OR RELOAD **** // WHERE id = $f1 ?? maybe some java code id = $val onChange ?? $sql2 = mysql_query("SELECT * FROM qw_groupitems WHERE id = $f1"); while($r2=mysql_fetch_assoc($sql2)){ $f3 = $r2[Subid]; $f4 = $r2[GroupItem]; echo "<option value='$f1,$f2,$f3,$f4'>$f4</option>"; } echo "</select>"; ?> </p> <!-- Input selected data from listBox --> <p style="margin: 2px"> <input type="text" name="textbox1" id="tBox1" value=""><br> <input type="text" name="textbox2" id="tBox2" value=""><br> <input type="text" name="textbox3" id="tBox3" value=""><br> <input type="text" name="textbox4" id="tBox4" value=""><br> </p> </form> </body> </html> I already have something that paginates thru records by clicking a next or back link that works great. Now I would like to upgrade this to a paginate script that does not do page loads everytime the user clicks next or back. I know how to refresh the new record into input fields with ajax so I don't need help there but how do I change the text of the record count that displays to the user on the screen with javascript as the page will not refresh so I can't write "Record 5 of 200" or whatever record the user is on. I guess I'm asking how can I write to the screen without page refreshes. I will be using an onclick event to click thru the records. How can I add a different number as a parameter to the onclick event everytime I click it without page refreshes? I was going to use the record id number as a parameter to the function so I know what record to get. Sorry for the long rambling post. Tracy Hello I'm using the combo box selection menu by Elviro Mirko from this site (http://www.javascriptkit.com/script/...plecombo.shtml) I have made amendments to show my own data, however what I would like to happen is if the user selects from the top combo only, then all the records would be shown, whereas selecting from the second combo merely 'drills down' and shows the records required. - Hope that makes sense. The code is as follows: Code: // first combo box data_1 = new Option("Douglas - DIS", "$"); data_2 = new Option("Douglas - COE", "$$"); data_3 = new Option("Peel - DIS", "$$$"); data_4 = new Option("Peel - COE", "$$$$"); data_5 = new Option("Ramsey - DIS", "$$$$$"); data_6 = new Option("Ramsey - COE", "$$$$$$"); data_7 = new Option("Castletown - DIS", "$$$$$$$"); data_8 = new Option("Castletown - COE", "$$$$$$$$"); // second combo box data_1_1 = new Option("Registry Office Douglas", "-"); data_1_2 = new Option("Broadway Baptist Church Douglas", "-"); data_1_3 = new Option("Finch Hill Congregational Church Douglas", "-"); data_2_1 = new Option("St Thomas's Church", "--"); data_2_2 = new Option("St Barnabas Church", "--"); data_2_3 = new Option("St George's Church", "--"); The HTML code is as follows: Code: <select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;"> <option value="">Select a Register...</option> <option value="Douglas - DIS">Douglas - DIS</option> <option value="Douglas - COE">Douglas - COE</option> <option value="Peel - DIS">Peel - DIS</option> <option value="Peel - COE">Peel - COE</option> <option value="Ramsey - DIS">Ramsey - DIS</option> <option value="Ramsey - COE">Ramsey - COE</option> <option value="Castletown - DIS">Castletown - DIS</option> <option value="Castletown - COE">Castletown - COE</option> </select> <BR><BR> <select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;"> <option value="">Select a venue...</option> </select> the link for the actual site is http://www.manxbmd.com/cgi-bin/db.cg...m;db=marriages If you choose Douglas-COE and search, then 0 records are found, if you choose Douglas-COE followed by St Thomas's then still 0 records are found but if you search the surname Allitson you'll see that there is a record there. I'm not sure where I've gone wrong - I'm completely new to Javascript. Any suggestions welcomed. regards Pendle Ignore post (if mod, please delete)
I want to create a code.. tat would take the input from the user .. say for example No of items. and create a table in the next page having so many rows ... help asap thank you in advance Hey guys, I ran into a problem designing my site. All is working, but this. As you can see, the table on the right is not even with the table on the left. This code has worked in the past, Code: <script type="text/javascript"> window.onload = function () { var divArray = document.getElementById('tablecontent').offsetHeight; var subtraction = divArray - 442; var tablesidebar = document.getElementById('tablesideba'); tablesidebar.style.paddingBottom = subtraction + 'px'; }; </script> But that only works for a static page. The problem is now, both tables, the one on the left, and the one on the right, are dynamic. Either could have different heights depending on what page you are visiting. Different pages also have more than one table, and the only way I could see this working is with a million if statements or each page, defining each table being used. Is there anyway to get these two tables evened out, no matter the content using JavaScript? |