MDWeezer

I have a very simple site (internal to my employer, otherwise I would post the site). It's a simple grid layout and on my left hand column I have a list box containing some items. When an item is selected, an AJAX call is made to populate the main content with an accordion containing data regarding that item. However, after a few selections from the list the accordion starts to not function properly (everything expands when clicked, only opens half way etc etc). Pages that I use the same accordion code on that don't have any AJAX calls function fine, so the AJAX calls are doing something. Here's my code (Prototype for my AJAX calls): AJAX Call: function getLRUs(selected_value){ var url = 'getlrus.cfm'; var pars = 'id='+selected_value; var target = 'mainBox'; var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars, asynchronous:true, evalScripts: true}); initLightbox(); } Then I have to use an iframe inside of the returned contents to fire off the code to render my accordion which looks like this: <iframe WIDTH=0 HEIGHT=0 FRAMEBORDER=0 onload="init();"/> init() is in an included javascipt file. function init() { new Accordian('basic-accordian',5,'header_highlight'); } Once I close out of my browser (IE in my corporations case...) and open it back up it will function correctly. I'm guessing as I make each AJAX request, I'm creating more and more accordion objects? Any thoughts or suggestions?

Excellent! Thank you very much, this is pretty much exactly how I wanted it (I'll be adding a lot of charts, make it much easier this way to handle). So close! This does what I need and places the image in the correct spot, however, the "rel=lightbox" tag inside the generate href statement doesn't get looked at. I have the following includes: <script src="lib/lightbox/js/prototype.js" type="text/javascript"></script> <script src="lib/lightbox/js/scriptaculous.js" type="text/javascript"></script> <script src="lib/lightbox/js/effects.js" type="text/javascript"></script> <script src="lib/lightbox/js/lightbox.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="lib/lightbox/css/lightbox.css"> But when I click the image from the generated code, it just opens the image in its own window. Using the Javascript library it should pop up over the screen with a faded out background (it worked perfectly before). I tried using eval() but I didn't have any luck. Thanks!

Excellent! Thank you very much, this is pretty much exactly how I wanted it (I'll be adding a lot of charts, make it much easier this way to handle).

Good morning, I have a very simple setup. Header, left navigation bar which consists of a tree view and then a main content pane to hold a 640x480 image. The tree view contains a variety of charts, so when someone clicks a chart in the tree view, that specific chart (which is 640x480) shows up in the center content pane. Each image also has a 1024x768 counterpart as well and when the smaller image is clicked, the bigger image is shown using Lightbox. The following is what I need in the content pane: <a href="charts/chartlarge.png" rel="lightbox"><IMG src="charts/chart.png" /></a> However, there will be a few dozen charts (all automatically generated in the background with Perl/java). So for each chart I will have a link formatted like above so it's displayed and can be clicked for the larger view. I would like the image to show up without re-loading the page (I could do simple AJAX calls with Prototype but there must be an easier way.) Would there be a way in my tree view, that when a node is clicked, it can replace the content DIV on the fly with the code above but modified for the image it needs to show (all of which will be hardcoded). Thanks

I'm looking to build a very simple layout in CSS but I'm needing help. I need the following: Header - 25px height, 98% width Footer - 25px height, 98% width Navigation bar on the left - This width needs to be flexible. I have a tree view here, so when someone expands a node in the tree, I need the width to automatically adjust, as well as the height. Body - This is going to contain a 640x480 image. I would like this centered, just to look nice. This is for a internal project, I have a bunch of Perl and Java apps that generate charts... People will navigate the tree view and upon click on the different nodes, I'll be loading in a new 640x480 image (chart) with Prototype and a simple AJAX call. A variety of people will be using this, 98% using IE (corporation standard), however there will be a variety of resolutions. Another option too would to squeeze everything so it's centered in the page (float: middle?). The big thing is having the navigation bar on the left being able to automatically adjust its width and not effect the image in the body. It would be greatly appreciated if someone can whip up this, what seems to be very easy but I can't figure out, CSS layout . Thanks!

I'm trying to utilize the excellent tabbing capabilities of Dojo at the moment.  I have a standalone page which dynamically populates a nice set of tabs and fills them with content based on a variable passed in the URL.  This page works flawlessly. I'm currently using Prototype to do a bunch of AJAX calls to update different parts of the page.  Everything works great except for my Ajax.updater call with Prototype to pass a variable to the page containing the Dojo tabs and putting that in a DIV placeholder.  What ends up happing is that the content of each of my tabs gets placed but it seems all the JavaScript is being ignored and I get an error message saying "'Dojo' is undefined".  I've messed with Firebug but I can't come up with anything.  I'm also using the EvalScripts parameter on my call but that doesn't do the trick.  Is there a special way I should be including the Dojo javascript files? Like I said, this page works great on its own but when I try to call it to another page I just get the content and no tabs. Some code: [code]function getLRUData(selected_value){ var url = 'getlrudata.cfm'; var pars = 'lru='+selected_value; var target = 'lruSpace'; var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars, evalScripts: true}); }[/code] Dojo includes on getlrudata.cfm: [code]<script type="text/javascript"> var djConfig = { isDebug: true }; </script> <script type="text/javascript" src="include/dojo/dojo.js"></script> <script type="text/javascript"> dojo.require("dojo.widget.TabContainer"); dojo.require("dojo.widget.LinkPane"); dojo.require("dojo.widget.ContentPane"); dojo.require("dojo.widget.LayoutContainer"); dojo.require("dojo.widget.Checkbox"); </script>[/code] I'm guessing I have some scope issues or some quirky JavaScript syntax wrong.  But I'm out of ideas… Thanks!

[quote author=wildteen88 link=topic=111192.msg450430#msg450430 date=1160571868] You'll want to work with percentages rather than pixels if you want the your layout/div to fit in all screen resolutions. [/quote] Wow, what a "duh" moment... Thanks for the quick fix

Here is my CSS [code] #container{ overflow: scroll; width:550px; border:1px black solid; overflow-y: hidden; margin-bottom: 10px; } #dataTable{ border-collapse: collapse; border: black 1px solid; width: 100%; background-color: #f7f7f7; } #dataTable .rowHeader{     background-color:#ffffff; white-space: nowrap; border: 1px silver solid; text-align:center; padding: 2px; left: expression(document.getElementById("container").scrollLeft-1); position: relative; } #dataTable td{ white-space: nowrap; border: 1px silver solid; padding: 2px; } [/code] This code produces a table with a fixed first column (I have a lot of data to display... this way I can have the user scroll and the first column is always visible so they know what data they're looking at). However, the container width of 550px if very small.  This will be run on a variety of screen resolutions so I would like the table to adjust its width to as wide as it can get depending on screen resolution. Not too familiar with CSS but I've toyed with a few attritutes on the container div but no such luck. Any suggestions? Thanks!

Got it! [code] onChange="testFunction   (window.document.rackForm.rackNumber.   options[selectedIndex].value);" [/code] Thanks a lot!

[quote author=akitchin link=topic=110610.msg447394#msg447394 date=1160072540] i imagine you may be right about the second form and select not becoming part of the document.  without being too familiar myself, i might suggest a few things to see if they help: 1.  use the IDs of the form elements (or the form itself) in conjunction with getElementById(), rather than specifying the name. 2.  get the forms that are to be populated by a previous selection into the document BEFORE running the functions, but put them into a hidden DIV.  that way they will be part of the document, having only had their values changed and made visible. i'm not too sure of whether number 2 would work though, since i haven't used coldfusion and am not sure how the cfoutput element works. hope this helps. [/quote] Hmmm after reading your post, I'm going to try passing the value of the currently selected index of the form as a argument in my Javascript function.  Need to find a good resource on how to do that now!  ex: onChange(getLRUs(form.value)) <- I'm guessing something like this is possible. Thanks for the ideas, I appreciate it.

I have a drop down populated with values, upon selection of a value a AJAX call is made which brings up another form list of values.  When I select a value from that list I would to make another AJAX call but my function can't seem to find the form item.  Here is my code: [code] // This one is called first and works fine function getRacks(){ var w = document.planeForm.planeNumber.selectedIndex;     var selected_value = document.planeForm.planeNumber.options[w].value; // alert("Selected"); var url = 'getracks.cfm'; var pars = 'planenumber='+selected_value; var target = 'rackSpace'; var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars}); } // This gets called but I get a JavaScript error saying // "document.rackForm.rackNumber is NULL or not an Object" function getLRUs(){ var x = document.rackForm.rackNumber.selectedIndex;             var selected_value = document.rackForm.rackNumber.options[x].value; alert("Selected"); var url = 'getlrus.cfm'; var pars = 'id='+selected_value; var target = 'LRU'; var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars}); } [/code] Here is the form HTML [code] // First form item that is on my index page and works fine: <FORM id="planeForm" name="planeForm"> <select name="planeNumber" onchange="getRacks()"> <OPTION VALUE="">Select a Plane...</option> <cfoutput query="aircrafts"> <OPTION value="#ACIM_AC_NBR_CD#">#ACIM_MODEL# #ACIM_AC_NBR_CD#</OPTION> </cfoutput> </select> </FORM> // Form item placed in a div on the index page after the AJAX call from the above form <FORM id="rackForm" name="rackForm"> <select name="rackNumber" onChange="getLRUs()"> <cfoutput query="racks"> <option value="#RACO_OBJECT_ID#">#RACO_RACK_NAME# </cfoutput> </select> </form> [/code] Any thoughts why my second function, getLRUs() cannot see the form item rackNumber?  My thought is that they don't become part of the document.  I'm not too familiar with DOM or anything so any help would be appreciated!!!

Pardon the ColdFusion tags....  I'd prefer to be doing this in PHP but gotta use what the customer has! [code] <form> <select name="racks" size="20" > <cfoutput query="racks"> <option value="#RACO_OBJECT_ID#">#RACO_RACK_NAME#</option> </cfoutput> </select> </form> [/code] That correctly populates a list with 20 or so options but when all is said and done, the very last record is selected which is a little bit annoying and I would prefer for the first option to be selected. Would appreciate a fix or some insight. Thanks :). [b]FIXED.[/b] I simply took off the </option> tags after each option...

I am creating a simple database containing 2 (or possibly 3 tables, thats why I need advice). My first table is a users table, primary key will be a auto increment userid. My second table is a album table, its primary key will be a albumid and secondary userid. I would like to be able to add as many albums as I would like for any particular user and relate them using the unique userid. So albums 2, 5, 35 all belong to userid 34. Is this the way to do it? Or should I create a third table? The third table would contain both primary keys from each table. userid from the users table and albumid from the album table. Also which is the best way to query to lookup? So if I want to view all albums for a particular user. Would using the SQL join commands work fine or is there a better method? I\'m a SQL newbie but would love to figure this out, I could get it work on my own, I would just like some expert opinions on it. Thanks all in advance. I look forward to reading some responses! -Matt Williams