Hi, I will explain my use case here.
I am new to JQuery and I am currently working on listing Dynamic Tree list by using JQuery column navigation plugin. Please refer the following link to check the plugin demo page: (Note: The demo is not a dynamic tree list) http://source.polaris-digital.com/column-navigation/ (demo page) http://plugins.jquery.com/project/column-navigation (got from here) I am trying to create trees dynamically and need some help regarding this: What I am doing is, I have the following files _________________________________________________________________________________________________________________________ 1. PHP file (Initially Root drives will be listed here) //Some part of code here. <script type="text/javascript"> $(document).ready( function() { $("#myTree").columnNavigation({ containerPosition:"relative", containerWidth:"790px", containerHeight:"350px", containerBackgroundColor:"rgb(255,255,255)", columnWidth:250, columnFontFamily:"'Helvetica Neue', 'HelveticaNeue', Helvetica, sans-serif", columnFontSize:"90%", columnSeperatorStyle:"1px solid rgb(220,220,220)", columnDeselectFontWeight:"normal", columnDeselectColor:"rgb(50,50,50)", columnSelectFontWeight:"normal", columnSelectColor:"rgb(255,255,255)", columnSelectBackgroundColor:"rgb(27,115,213)", columnSelectBackgroundImage:"url('styles/common/images/list-selected-background.jpg')", columnSelectBackgroundRepeat:"repeat-x", columnSelectBackgroundPosition:"top", columnItemPadding:"3px 3px 5px 3px", columnScrollVelocity:200, callBackFunction : function( obj ) { alert( $(obj).attr("href") ); } }); }); </script> //Here I list the root drives like below: <div id="myTree"> <ul> <div> <li id='someID'> <a class="document" id="someID" onClick="javascript: Listsubdirs('C:/')"> C:/ </a> </li> <li id='someID'> <a class="document" id="someID" onClick="javascript: Listsubdirs('D:/')"> D:/ </a> </li> </div> </ul> </div> When the page load it will list the root drive and apply the styles of 'columnNavigation' when the document is ready. _________________________________________________________________________________________________________________________ 2. In the Js file, I am using Ajax calls and get the subdireectories and list those things. //Some part of code. Using Ajax calls I get the sub directories for C:/ and I will construct the html as below and append to the parent using the parents ID. //Construction (the following is the sample, and there could be some quotes issue.. pls just ignore that.) Listsubdirs(parent) { //AJAX send request } FunctionForAjaxResponse { var subtree = "<ul>"; subtree = subtree + "<div>"; subtree = subtree + "<li id='someID'>"; subtree = subtree + "<a class="document" id="someID" onClick="javascript: Listsubdirs('C:/SubDir1')"> SubDir1 </a>"; subtree = subtree + "</li>"; subtree = subtree + "<li id='someID'>"; subtree = subtree + "<a class="document" id="someID" onClick="javascript: Listsubdirs('C:/SubDir2')"> SubDir2 </a>"; subtree = subtree + "</li>"; subtree = subtree + "</div>"; subtree = subtree + "</ul>"; var parentelement = document.getElementById('<ID of C:/ anchor>'); parentelement.innerHTML = parentelement.innerHTML + subtree; //When I do this, the html elements get correctly added. But the styles of 'myTree' has not applied correctly. Hence I copied the columnNavigation code here as below. After appending I put a function to call that code. applyStyles(); //After this the styles are applied correctly. But it once again list the root drives. I think since it apply the styles again. Not sure how to automatically apply the styles. If I click on the C:/ drive again, it list the subdirectories. //To list the subdirectories, I trigger onclick event for parent drive manually $('parentID').click(); //Now it seems to list correctly. similarly for subdrives I trigger event for the parents. (for eg, if I click C:/subdir1 then I trigger event for C:/ and then subdir1 } function applyStyles() { $("#myTree").columnNavigation({ containerPosition:"relative", containerWidth:"790px", containerHeight:"350px", containerBackgroundColor:"rgb(255,255,255)", columnWidth:250, columnFontFamily:"'Helvetica Neue', 'HelveticaNeue', Helvetica, sans-serif", columnFontSize:"90%", columnSeperatorStyle:"1px solid rgb(220,220,220)", columnDeselectFontWeight:"normal", columnDeselectColor:"rgb(50,50,50)", columnSelectFontWeight:"normal", columnSelectColor:"rgb(255,255,255)", columnSelectBackgroundColor:"rgb(27,115,213)", columnSelectBackgroundImage:"url('styles/common/images/list-selected-background.jpg')", columnSelectBackgroundRepeat:"repeat-x", columnSelectBackgroundPosition:"top", columnItemPadding:"3px 3px 5px 3px", columnScrollVelocity:200, callBackFunction : function( obj ) { alert( $(obj).attr("href") ); //obj.fn.columnNavigation = function( configuration ) } }); } _________________________________________________________________________________________________________________________ The above code works fine in Firefox and Chrome browsers. But Unfortunately, this code has not work on IE 6/IE 7/IE 8 browsers. Only the root drives listed correctly. I could not find any error on IE browsers. I am not sure how to make this work on IE browser. I try to debug by using 'IE Developer Tools'. If I change the 'Compatiblity Mode' to 'Internet Explorer 7' or 'Internet Explorer 8' it seems to be partially working files. ie, subtrees working. But it has not work with the default Quirks mode. Could any one update me, what I am doing wrong here and how to fix this in IE browsers. Also, is there a way to automically apply the styles instead of calling 'applyStyles()' and trigger onclick events. Note: Currently I am using JQuery 1.2.6 (Also tried with 1.4) Thanks in Advance for your response. On Tue, Jan 19, 2010 at 10:25 PM, Nathan Klatt <n8kl...@gmail.com> wrote: > On Tue, Jan 19, 2010 at 10:03 AM, Asharudeen <asharud...@gmail.com> wrote: > > Unfortunately, It seems trigger is not a issue.. I am trying to list > dynamic > > file tree using JQuery. It seems to be work fine in Firefox. But in IE, > it > > has not working.. I thought it is related to trigger event. > > It might be worthwhile for you to put together a simple example on one > of the collaborative Javascript sites (e.g., http://jsbin.com) so > others on the list can easily see it for ourselves and play around. > > Nathan >
