[RichardMember]

Thanks Peter, but the example you give does not load JQuery dynamically.

I finally figured out how to make this work… See my code below.

// Dynamically Load the Style Sheets
function loadcssfile(filename){
var fileref=document.createElement(“link”)
fileref.setAttribute(“rel”, “stylesheet”)
fileref.setAttribute(“type”, “text/css”)
fileref.setAttribute(“href”, filename)
if (typeof fileref!=”undefined”)
document.getElementsByTagName(“head”)[0].appendChild(fileref)
}
loadcssfile(“http://www.domainname.com/ca_files/css/hcc_ca_style.css”)
loadcssfile(“http://www.domainname.com/ca_files/js/jqwidgets/styles/jqx.base.css”)
loadcssfile(“http://www.domainname.com/ca_files/js/jqwidgets/styles/jqx.hcc.css”)

// Dynamically Load the JavaScript
document.Echo=document[“standard”+”Write”]==null?document[“write”]:document[“standard”+”Write”];
var include=function(path){path=”http://www.domainname.com/ca_files/js/”+path;document.Echo(”);};
include(“jquery.1.8.2.js”);
include(“jqwidgets/jqxcore.js”);
include(“jqwidgets/jqxbuttons.js”);
include(“jqwidgets/jqxscrollbar.js”);
include(“jqwidgets/jqxpanel.js”);
include(“jqwidgets/jqxtree.js”);
include(“jqwidgets/jqxexpander.js”);
include(“store.js”);

All of these instructions can be placed in the body of the page.

[RichardMember]

Good Day Peter, I was wrong when I said your code worss with IE and fails with FF. As it turned out, after adding your code example, I neglected to delete the <SCRIPT html statements for the JS files. That is why it works in IE and not in FF. After removing the html statements the tree does not display in IE nor FF.

That appears to confirm that the css files are loading properly.

The example I gave at the top of this post should work… I am left wondering why the Tree menu does not function properly after all of the js support files are loaded. Peter, can you show me a way to dynamically load the jqxTree App, that works?

[RichardMember]

That is what I thought. The code you gave me is using JQuery to load the JavaScript.

var files = [‘globalization/jquery.global.js’, ‘../demos/jqxgrid/generatedata.js’,
‘../scripts/knockout-2.1.0.js’, ‘jqx-all.js’];
for (var i = 0; i < files.length; i++) {
var url = '../../jqwidgets/' + files[i];
$.ajax({
url: url,
dataType: "script",
async: false
});
}

How can I dynamically load all of the JavaScript?
I have found lots of examples on the internet but none have worked so far. I am still searching.

[RichardMember]

Hi Peter,
Thanks for letting me know about gettheme. The only code that is being loaded is your code that loads the JavaScript.

$.ajax({
url: url,
dataType: “script”,
async: false
});

The $ is causing the warning…

How can you use the $.ajax statement when JQuery has yet to be loaded?.

[RichardMember]

Thanks Peter, You have been a tremendous help… thank you so much for your time…

It works with warnings in IE; the warning is Error: ‘$’ is undefined

It does not work in Fire Fox. I noticed in your code example the load for the js files is being performed with

$.ajax({
url: url,
dataType: “script”,
async: false
});

How can you use the $.ajax statement when JQuery has yet to be loaded?

Here is my load routine

var files = ['/ca_files/js/jqwidgets/scripts/gettheme.js', '/ca_files/js/jquery.1.8.2.js',
'/ca_files/js/jqwidgets/jqxcore.js', '/ca_files/js/jqwidgets/jqxbuttons.js','/ca_files/js/jqwidgets/jqxscrollbar.js','/ca_files/js/jqwidgets/jqxpanel.js','/ca_files/js/jqwidgets/jqxtree.js','/ca_files/js/jqwidgets/jqxexpander.js'];
path = 'www.domainname.com'
for (var i = 0; i < files.length; i++) {
var url = 'http://' + path + files[i];
$.ajax({
url: url,
dataType: "script",
async: false
});

You can see that JQuery is the second file to be loaded.

[RichardMember]

Peter, Since I have not heard from you, I made the assumption that the tree items had to be defined in source in order to get the single click working. Once I converted my <ul and <li HTML commands to the source format. It all started working properly. Not sure why the single click would not work when the tree items are hard coded as <li items.

Thanks for your help…

[RichardMember]

Peter, in the example you give the entries in the tree are created using source. Must I create the tree that way or can I code the HTML for the items in the tree?

[RichardMember]

Thanks Dimitar, I solved it by using this command
$(‘#jqxExpander’).jqxExpander({ showArrow: false, toggleMode: ‘click’, width: ‘212px’, height: ‘auto’, theme: ‘hcc’ });

[RichardMember]

If a Tree Item is the s within the UL, then that is what I am clicking. Below is an example

Handlebar Pkgs Softail

Basic
Complete
Prewired

The expandable item, Handlebar Pkgs Softail is not an anchor.

[RichardMember]

Hi Peter,
I added the instruction to my tree menu but it does not expand on single click. I am using the variation where the visitor can click the category name to expand the menu item. Double clicking the menu item works.

[RichardMember]

Thanks Peter but I cannot use cookies. I was hoping there was something already in the session that we could use as the key.

[RichardMember]

yes, that is correct

[RichardMember]

Peter, you must be the jqWidgets guardian angle. I see how to bind the selection when the option is clicked but I do not see how to determine which option was clicked once the new page loads. I want the menu to appear expanded when the new page loads.

[RichardMember]

Maybe I should add that to create my custom theme, I went to the theme builder and copied the resulting css to the jqx.hcc.css file. Is that the correct way to create the custom theme file?

[RichardMember]

Yes, I just left the base theme in the widgets folder and placed my custom theme in the css folder.

The definitions in the jqx.hcc.css were created by the jqxWidgets Themebuilder. Should I replace the base with those definitions?

The UL for the menu is in standard HTML enclosed by a DIV with the ID jqxTree. Must I change the UL/LI entries to Javascript commands as shown in the example?

I have two problems, the correct formatting is not applied to the menu and after I use the source: source parameters in the command, my Jquery click statement stop working for other parts of the page.

[Author]

Posts