kael.shipman

You could approach this a few ways, depending on what your needs are. I'm going to use old-style notation just so it's more clear, but you could separate the javascript and HTML in the actual implementation. 1. Without Ajax <script type="text/javascript"> function showSelect2(val) { var select2 = document.getElementById('select2'); if (val == '') select2.style.display = 'none'; //If the value for select1 is invalid, make sure select2 isn't shown //Populate select2 according to the value passed select2.style.display = ''; //Make sure select2 is displayed by removing the CSS rule that hides it } </script> <select id="select1" name="select1" onchange="showSelect2(this.value)"> <option value="">Choose</option> <option>1</option> <option>2</option> </select> <select id="select2" name="select2" style="display: none;"> <!-- fill when select1 is changed to a valid value --> </select> 2. Ajax fetches a preformed selectbox that you have to place <script type="text/javascript"> function showSelect2(val) { var select2_container = document.getElementById('select2_container'); if (val == '') select2_container.innerHTML = ''; //If the value for select1 is invalid, make sure select2 is gone //Ajax call that sends a preformed <select> box with options to showSelect2(selectBox) } function showSelect2(html) { var select2_container = document.getElementById('select2_container'); select2_container.innerHTML = html; //insert select2 in container } </script> <select id="select1" name="select1" onchange="showSelect2(this.value)"> <option value="">Choose</option> <option>1</option> <option>2</option> </select> <div id="select2_container"> <!-- select2 will be inserted here when a valid value is selected from select1 --> </div> 3. Leave select1 and select2 both visible, but adjust available select2 options when select1 is changed <script type="text/javascript"> function showSelect2(val) { var select2 = document.getElementById('select2'); if (val == '') { //remove all select2 options and add <option value="">Select from select1</option> } else { //Populate select2 according to the value passed } } </script> <select id="select1" name="select1" onchange="showSelect2(this.value)"> <option value="">Choose</option> <option>1</option> <option>2</option> </select> <select id="select2" name="select2" style="display: none;"> <option value="">Please select from select1</option> <!-- fill when select1 is changed to a valid value --> </select> Those examples should give you a good start. Mess with them and you should be alright!

What does your HTML look like? It should include the following: <input type="text" id="units" name="units" value="1" /> <input type="text" id="units_size" name="units_size" value="1" /> If that's not the problem, you'll have to describe a little better what's happening. Where is it stopping? What alerts do you get? Etc.... Also, try developing in Firefox and downloaded FireBug. That will tell you exactly what's going on!

Hi everyone, Does anyone know if there's an low-level, readonly object ID that can be accessed in javascript for any and all objects across the board? It seems to me that all objects - be it an Array, Object, Image, or from the entire arsenal of HTML elements - should already have an ID that javascript uses to organize them internally. My problem is that I want to uniquely identify HTML objects without having to do a check/write-if-not-exists sequence on the ID attribute of the element. This doesn't apply to any code specifically, but here's an idea: Here, we're putting all of the original text of all the divs on the page - some of which may have html ids but most of which won't - into a hash with the div object's fundamental object id as the key and the text as the value. Then, even if the html id attribute is changed for some reason, that div will always be associated with the text that was cataloged on the pageload. Remember, this doesn't have any practical application, but is a clear example of what I want. window.onload = function() { window.allDivs = {} var docDivs = document.getElementsByTagName('div'); var uniqueId; for(var i = 0; i < docDivs.length; i++) { uniqueID = docDivs[i].lowLevelObjectId; //Note that this is not the simple html ID attribute, since most divs won't have that attribute set window.allDivs[uniqueID] = docDivs[i].innerHTML; } } //Now, assume that people can change the content of whatever div, //so maybe they've changed the content and want to see what was in it originally. //Maybe double-clicking the div calls viewHistory, sending the HTMLDivObject itself as the argument function viewHistory(thisDiv) { history = window.allDivs[thisDiv.lowLevelObjectId]; alert(history); }

Sorry for the delayed reply here effigy: I admit, I'm not really great in the realm of interpreting actual server and file configurations. The hosting company has this stupid FTP management web interface and it blocks my actual FTP program from viewing or editing permissions. Here's what I can divine from their interface: Valid options for permissions are "none", "read", "change" and "full control", and each folder has a field for administrator (that's always set to "full control and isn't editable"), a field for anonymous that seems not to be able to receive "full control", and a box where you can add users and set permissions for each of those. What I see is that my original_images folder is set up as "change" for anonymous, which should be enough, I think. That seems to work just fine when it's under htdocs, but it doesn't work when it's above htdocs. That's when it starts displaying the weird problems that I noted before (like being able to overwrite files that are already there, but not being able to create new ones). steve: Thanks for the .htaccess tip. I think I'll probably end up using that method if the hosting company allows me to use that feature. I'd still like to learn a little bit more about the specifics of managing permissions, though, so if I could do it without a server exception, that would be ideal. Thanks to both of you! -kael

Thanks for the resource, but that's not exactly what I'm looking for. I'm not planning on ever displaying these images anywhere on my site. They're simply for php to use as starting points for other images. Therefore, theft by downloading or hotlinking isn't a concern for me since I've determined that the images can't be accessed by a url. What I need is advice on how I can work my folder/user permissions for PHP to be able to look above the web root directory and into this images folder without compromising any server security.

Hey everybody, This doesn't exactly fit under Apache concerns, but it's a general webserver question: I need to create an image folder that isn't browse-able by the public but that PHP can still read from and write to. I've experimented a little bit with permissions but just don't know enough about what the permissions mean to really use them with confidence. It's a public web server, so I know I don't have unlimited control, but it's also got a lot of permissions control that it does relinquish to the administrator. I just don't want to risk opening up the system to an easy attack. Anyway, the structure is like this: root/ ->Database ->ftproot ->htdocs |->index.php |->[rest of site files] ->original_images |->[imagefiles] I don't want users to be able to type in a url and view images from the original_images folder, but I need PHP to be able to copy uploaded files to it and read files from it into memory. From my tests, it looks like it's not currently accessible by url, and PHP can read from it. PHP can also modify files that are already there, so if original_images/test.jpg exists and I call move_uploaded_file($_FILE['image']['tmp_name'], '../original_images/test.jpg') from /index.php, it works great and overwrites that file with the new image information. However, if the file doesn't already exist, calling the above move_uploaded_file() function throws an error ("Unable to access file...."). chmod() throws the same error regardless of whether the file exists or not. The hosting company allows folder permissions to be changed for the anonymous user, but then it also allows you to create users and assign permissions for certain users. Is there a way for PHP to access the folder using a specific username/password instead of anonymous or PHP or whatever it uses currently? Thanks in advance for any help. -kael

Holy crap! Genius! I don't know why I didn't think of that.... Thanks a lot! -kael

Hey everyone, Any ideas on how I might determine the height of a div without actually displaying it? I've got a div that I'm putting dynamic content into and I need to slide it out (like a rolldown effect), but to do that I need to know how much space the new content takes up. The way I'm currently doing that is like so: function() { var box = document.getElementById('divId'); box.style.height = ''; //box.style.height is initially set to '0px', so setting it to an empty string allows it to adjust to fit the content var ht = box.offsetHeight; box.style.height = '0px'; rollFunction('divId', 0, ht); //call roll function to roll "divId" from 0px to {ht}px } The problem with that is that now I get a big flash of the content before it rolls smoothly down. Solutions? Thanks in advance, Kael

Unfortunately, that still references the i variable which still returns the value at the end of the parent function execution when referenced. I've tried it already and got the same result. Thanks though; any other ideas?

Hi again, This is another problem I've had for a while and haven't solved adequately: when I set a timeout or an interval from within an object and pass a reference to the object through "this" variable, the function loses it's reference after the first iteration. Likewise, when I attach an event through a function like addListener (shown below), the event also loses the object reference. My solutions involved setting a "self" local variable in each parent function, then using that instead of the "this" variable. However, in cases of setInterval or setTimeout, you have to then wrap that inside of an anonymous function to get it to work because the timing function loses the self variable after the first iteration. For example, this will work the FIRST time, but not after that: var myObject = function() { this.timeMe(); } myObject.prototype = { constructor : this, test : "test", timeMe : function() { var self = this; setInterval(self.tryMe, 1000); }, tryMe : function() { alert(this.test); } } while this will work: var myObject = function() { this.timeMe(); } myObject.prototype = { constructor : this, test : "test", timeMe : function() { var self = this; setInterval(function() { self.tryMe() }, 1000); }, tryMe : function() { alert(this.test); } } Here's the addListener function I was talking about. This is similar to the above examples. You have to pass it an anonymous function inside of which you call "self.myFunction()": function addListener(element, type, func, overwrite, bubbling) { if (typeof element == 'string') element = $(element); if (!element) return throwError('global::addListener - element not found'); bubbling = bubbling || false; overwrite = overwrite || false; if (overwrite) element['on'+type] = ''; if(window.addEventListener) { element.addEventListener(type, func, bubbling); return true; } else if(window.attachEvent) { element.attachEvent('on' + type, func); return true; } return throwError('global:addListener - couldn\'t attach event to element'); } myObject.prototype.addAnEvent = function() { var self = this; addListener('someElement', function() { self.tryMe(); }); } There's gotta be an easier way to juggle all these object references! Can anyone point me to some resources for explaining this stuff more clearly? Thanks, Kael

Hey everyone, I've been having this problem forever and haven't found a fix for it. I'll create an object, then have some function that iterates over an array of elements, attaching an event to each one. The event will contain a reference to a counting variable (it'll be more clear below). However, instead of the function for each object referencing the variable at the time of it's iteration, each function references the variable as it stands at the end of execution of the parent function, meaning that if there are 10 elements in the array, they all end up calling onclickFunction(n), where n = 10 instead of n = 0, n = 1, n = 2, etc.... Example: function myObject() { this.elements = [ 'element0', 'element1', 'element2', 'element3' ]; this.attachEvents(); } myObject.prototype = { constructor : this, attachEvents : function() { var self = this, i, obj; for(i = 0; i < this.elements.length; i++) { obj = document.getElementById(this.elements[i]); addListener(obj, function() { self.doSomething(i); return; }); } }, doSomething : function(n) { alert(n); } } //Just for reference.... function addListener(element, type, func, overwrite, bubbling) { if (typeof element == 'string') element = $(element); if (!element) return throwError('global::addListener - element not found'); bubbling = bubbling || false; overwrite = overwrite || false; if (overwrite) element['on'+type] = ''; if(window.addEventListener) { element.addEventListener(type, func, bubbling); return true; } else if(window.attachEvent) { element.attachEvent('on' + type, func); return true; } return throwError('global:addListener - couldn\'t attach event to element'); } Now if I were to create one such object on a page with all the required HTML in place, when I clicked element0, it would alert "4", just as it would when I clicked any of the other elements because it's referencing the variable "i" at the end of execution of the parent function "attachEvents". I know this has to do with closures, but I haven't wrapped my head around those yet. Maybe this is a good place to start. So how do I get it to reference the correct number? It seems to me that there's no way to use variables to do it because you're always setting variables with variables, and at the end, they're all still going to reference a variable that has been incremented since the function was created. The use of addListener() actually leads right into another question I have about transferring ownership, but take a look at my next post for that. Thanks for any help you can offer! -kael

I know this is kind of old, but this is still a big issue for me. Anyone have any resources?

To the first question: you have to quote the entire id. You're trying to access a non-existent javascript userInput array, when you should be passing the string "userInputs["+id+"]" to the getElementById() function. As a side note, you don't need the single quotes in the input name, either ("userInput['userInput_boxes']" should be "userInput[userInput_boxes]"). To the second question: Yes, all inputs on the page, whether static or dynamic, will be available so long as they are children of the <form> element that's being submitted.

Alright, so you can hate me for reading the "READ THIS BEFORE POSTING" post AFTER I posted... My MySQL version is 5.0.something. It's not really relevant to my question. Thank you.

Hey all, I've had this problem for a while now and have searched the boards and google and everything and haven't been able to figure it out: I have an images table and a filters table. Each image can belong to multiple filters and each filter can belong to multiple images - standard many-to-many. The problem is that I need to query XREF table with exclusivity, so I need to say "get ONLY images that belong to these filters". My tables look roughly like this: -- -- imgs -- create table `imgs` ( `imgID` serial PK, `img_nm` varchar(30) not null ); -- -- filters -- create table `filters` ( `filterId` serial PK `filter_name` varchar(30) not null, `filter_val` varchar(30) not null ); -- -- imgs_filters -- create table `imgs_filters` ( `id` serial pk, `img_id` int not null, `filter_id` int not null ); That's a pretty dumbed down version, and structured a bit differently, but it'll get the point across. Please don't nit pick any coding errors. This isn't real code; just concept. So when I query the table with one filter, I'm fine: @mysql_query("select i.imgID from imgs i, imgs_filters f where f.imgID = i.imgID && f.filter_id = 1 limit 0, 25"); That'll pull up any images that are in the imgs_filters table with filter_id = 1. However, if I want to apply filter number 1 AND filter number 2, now I've got a problem because I can't say "... where f.imgID = i.imgID && f.filter_id = 1 && f.filter_id = 2 ..." because that's always impossible. I've always solved this by simply putting a string column in the imgs table like this: create table `imgs` ( `img_id` serial pk, `img_nm` varchar(20) not null, `filters` varchar(100) not null ); //Periods go on both the beginning and end of the string so that each number can be referenced by .n. insert into `imgs` set `img_nm` = 'name', `filters` = '.1.2.'; This way, I can write the following query and get the results I want: @mysql_query("select i.imgID from imgs i where i.filters like '.1.' && i.filters like '.2.'"); OR I can write an inclusive search with "||", which adds a nice flexibility to the structure. That works great, but it's sloppy as hell. I figure there's gotta be a more table-based approach to this. Any insights? Thanks, Kael

Just curious... do you have compelling reasons not to embed functions like that? I figure if the mysql_query() fails (with an actual PHP error), then the extension is bad and nothing in the script is gonna work anyway. You have to fix the build then, so there's real script debugging. If it's the query itself that's bad, I'll still know what information's not being gathered (and therefore which query isn't returning expected results) and all I have to do is add echo mysql_error($cnx); below it and it'll spit out my error. I've been doing this with no negative results for 2 years now.... What's so bad about it? -kael

Yeah, probably wasn't a good idea for me to start reverse engineering from a "subclass" of a much larger and more feature-packed parent. I think I'll take your advice!

Hey everyone, As a preface, I'll say that I'm running Firefox 2.0 on Mac OSX 10.4.10 and that the following problem is not quite so bad on windows, but does still exist. I've been having this problem for a few weeks now: I've built a whole arsenal of different functions and objects that all have the seemingly simple goal of extending and retracting a div (or other block-level element). However, the problem that they've all had has been rooted in the actual timing mechanism of the browser. I'd leave it at that and say that it's the browser's fault, but if you go to http://www.auctionpal.com/about/pal_facts, you'll see that the guy at stickman labs has utilized the Prototype library that comes with ruby on rails to produce the most beautifully smooth div roller that can be made. So I know it's possible! The most recent object is the most functional, yet is still posing problems (in two areas, but that'll be for later). It's an object called Drawer that has a head element and a content element. When you initialize a drawer, it automatically checks the provided content element's normal display length by switching the element to height (or width): auto, measuring the size with offsetHeight (or Width), then closing it back up to whatever the original css value was. This is the second issue that I was talking about, because if you have more than about 3 drawers on a page, the browser hangs for a little bit on each pageload while it switches the height to auto and back. Anyway, save that one for later. Here's the object definition: Drawer = function(head, cont, dimension, limits, speed, enforce) { if (!limits) limits = []; var self = this; this.open = false; this.head = head || this.head || false; this.content = cont || this.cont || false; this.rollSpeed = speed || 4; this.rollTime = 0; this.contentLowerLimit = limits[0] || 0; this.contentUpperLimit = limits[1] || false; this.contentUpperLimitEnforce = enforce || false; this.contentSize = 0; this.contentDimension = dimension || 'Height'; this.currentSize = 0; this.effect = 1; this.rolling = false; //timeout this.action = 0; //0 = bottom, 1 = moving up, 2 = top, -1 = moving down this.prepareDrawer(); this.checkContentSize(); } Drawer.prototype = { constructor : Drawer, prepareDrawer : function() { var self = this; if (this.head) addListener(this.head, 'click', function() { self.toggle(); }); }, checkContentSize : function() { var curDimension, styleProp = this.contentDimension.toLowerCase(); this.currentSize = this.content['offset' + this.contentDimension]; if (!this.content) return false; if (this.contentUpperLimit && this.contentUpperLimitEnforce) { this.contentSize = this.contentUpperLimit; return; } curDimension = this.content.style[styleProp]; this.content.style[styleProp] = 'auto'; this.contentSize = this.content['offset' + this.contentDimension]; this.content.style[styleProp] = curDimension; }, toggle : function() { var self = this; if (this.rolling) clearInterval(this.rolling); if (this.action == 0 || this.action == -1) { this.action = 1; this.comparison = this.contentUpperLimit || this.contentSize; } else { this.action = -1; this.comparison = this.contentLowerLimit; } this.rolling = setInterval(function() { self.controlAction(); }, 2); }, moveDrawer : function() { this.currentSize = this.currentSize*1 + this.action * Math.pow((this.rollTime * this.rollSpeed / 4), 3); if (this.currentSize * this.action > this.comparison * this.action) this.currentSize = this.comparison; this.content.style[this.contentDimension.toLowerCase()] = this.currentSize + 'px'; return; }, controlAction : function() { if (this.currentSize != this.comparison) { this.moveDrawer(); this.rollTime++; return; } else { clearTimeout(this.rolling); this.action = this.action*1 + 1; this.rollTime = 0; return; } } } I admit the constructor is terrible, but that's because I drew it all up pretty quickly last night and then mashed it all over the place to fit my needs tonight. You can see this in action at http://64.78.46.106 (sorry for the ip; the domain stuff isn't configured yet) in the "posted comments" section. Click on a "more" link and the thing rattles its way down. Anyone have any ideas on how that accordion by stickman might differ from mine? I've been making these as light-weight as possible, but they just plain and simply don't scale well. It works great when there's only 2 or 3 of them, but as soon as you go past that, the thing falls apart. Thanks in advance. -kael

Thanks for the reply. I know it's hard to help without code in many cases, but the code that's causing the problem here is seriously just $chkCmd = @mysql_fetch_row(@mysql_query("select cmd from commands where prsID = $prsID")); //var_dump($chkCmd); die(); if ($chkCmd) $cmd = unserialize($chkCmd[0]); else $cmd = new command('[Command Name]'); I've commented out absolutely everything else, as well as trying several different comment debugging approaches. I put that comment (var_dump($chkCmd); die(); ) in there to show that I've also checked that the serialized string is not only present, but is actually valid (I found the closing curly brace for the object at the end). The problem here is entirely with the unserialize function, but I'm just wondering if there are limitations on the function that I didn't know about or if there are configuration settings or anything that would cause it to show or prevent it from showing the download dialog instead of loading the page. For a little background, I was using the database initially, but tried putting it in a session for debugging purposes. While it was there, I did include the class definitions before the session was initialized. The same problem is experienced regardless of whether the string comes from the session variable or from the database. As I'm playing with it, I'm leaning more and more toward it just being a size limitation with the unserialize() function. The function works when I use it between the first few pages, but it breaks as the object gets bigger and bigger. Thanks again for any help, Kael

Hm. So you're setting the cookies with setcookie("uid", [id], time() + 60*60*24*365, "/"). Did you try deleting it with setcookie("uid", "", time() - 3600, "/")? I didn't pick up from your post whether or not you're operating in the same path with both calls to setcookie(). That would certainly make a difference.

Is this code being executed from a different path? I know cookies are pretty sensitive, so if you set them in /subpath/subpath2, then try to delete them from root or /subpath, it may not work. If you're not setting the path parameters explicitly when the cookie is created, try doing that, then stating the same parameters when you delete them. If that doesn't work, I don't have any idea what the problem might be. It seems strange that the deletion works on logout but not there.

Hi everyone, I posted a topic here a week ago and never got a reply. I've been working on it for a while, too, and haven't been able to figure it out on my own. If anyone has any ideas, I really need to hear them! Here's the link to the topic: http://www.phpfreaks.com/forums/index.php/topic,164402.0.html. Also, I've eliminated the database as the source of the problem and traced it directly back to unserialize by storing the object in a session variable across pageloads rather than in the database. It works until the object gets to a certain size, then craps out with the same symptoms: Download dialog box appears instead of page. I still blame it on unserialize because PHP serializes/unserialize session variables across pageloads, supposedly using the public functions for those purposes. I really need to get this figured out, so if anyone has any suggestions, please let me know. Thanks, Kael

Hey everyone, I've got an undo framework that I built to handle edits on a site. I can't post a URL cause it's a private site. The framework is centered around two objects, "Command" and "Action". Within a given Command, there is an array of Actions. That should be sufficient information for this discussion, but if you need more detail, I'll gladly provide. What's happening is that I create a new Command, add a bunch of Actions to it, then serialize it and store it in the database for the next pageload, where I add more Actions to the same Command and then finally execute the Command. I escape it properly when inserting into the database, then when I retrieve it, I unescape it (both with a SmartSlashes function that's a little more robust than the standard) and then unserialize it. The problem is that when I hit the submit button to move to the next page, instead of loading the next page, a download dialog pops up wanting me to download index.php. I tried doing that once just to see what would happen and it was just a blank file. I traced the cause of the download dialog to the use of unserialize, but can't figure out where my error is. The serialized string is 55,000 characters, so I can't really go through and find out where the problem is, either. I tried unserializing a smaller object string and it worked fine. Does anyone have any ideas on what might possibly be causing unserialize to change the output to a downloadable file or how to get it to stop doing that? Thanks for anything you can offer.

Yeah, I was just sloppy with my example cause the specific application wasn't really the point. By the way, I didn't mean to sound snappy with my previous posting. I just got pissed at the failures of the language as compared to the much more robust PHP. Anyway, I think my original question was out of the scope of this forum and deals more with actual computer software inner workings rather than with Javascript as a language. Thanks again!

Alright, try this: <script type="text/javascript"> function overLimit(el,lim) { if (el.value.length > lim) return false; else return true; } </script> <body> <textarea onkeydown="return overLimit(this,50);"></textarea> </body> I'm not completely sure it's cross-browser, but it would knock my socks off if it wasn't. Incidentally, I made the function so you can send it any element/limit pair. You can use it on as many text inputs as you want with as many different limits as you want. Think scalability!