Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by gb on Dec 20, 2008 10:43
open dhtmlx forum
Accordian Javascript Error

I'm trying a simple accordan page and keep getting a javascript error on the line where dhtmlxaccordian.js is loading. Error says "this.base' is null or not and object.

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<!-- dhtmlxAccordion -->
<script src="accordian/codebase/dhtmlxcommon.js"></script>
<script src="accordian/codebase/dhtmlxaccordion.js"></script>

<link rel="stylesheet" type="text/css" href="accordian/codebase/skins/dhtmlaccordian_dhx_blue.css">

<!-- dhtmlxWindows -->
<script src="codebase/dhtmlxwindows.js"></script>
<link rel="stylesheet" type="text/css" href="codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxwindows_dhx_black.css">
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxwindows_dhx_blue.css">

<script>
var dhxAccord = new dhtmlXAccordion("accordObj","dhx_blue");
</script>

</head>

<body style="width:100%;height:100%;margin:0px;overflow:hidden;">

<div id="accordObj" style="width: 320px; height: 400px;"></div>

</body></html>



Can you help? Thanks!
Answer posted by Support on Dec 22, 2008 03:06
<div id="accordObj".. is not exists on the accordion creation moment.

Edit you code like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<!-- dhtmlxAccordion -->
<script src="accordian/codebase/dhtmlxcommon.js"></script>
<script src="accordian/codebase/dhtmlxaccordion.js"></script>

<link rel="stylesheet" type="text/css" href="accordian/codebase/skins/dhtmlaccordian_dhx_blue.css">

<!-- dhtmlxWindows -->
<script src="codebase/dhtmlxwindows.js"></script>
<link rel="stylesheet" type="text/css" href="codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxwindows_dhx_black.css">
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxwindows_dhx_blue.css">

<script>
    function doOnLoad() {
        var dhxAccord = new dhtmlXAccordion("accordObj","dhx_blue");
    }
</script>

</head>

<body onload="doOnLoad();" style="width:100%;height:100%;margin:0px;overflow:hidden;">

<div id="accordObj" style="width: 320px; height: 400px;"></div>

</body></html>
Answer posted by GB on Dec 22, 2008 07:29

Great.... and sorry again for the stupid questions; working on a deadline.   

Got a page to come up without javascript errors - but nothing else on it.  I'm assuming now that there has to be content for the accordian - do you have to attach to windows, or can you just add content directly?   How would I add (for instance) 3 simple frames with some html inside?

Love the way its coming out - definately going to buy the expanded version

Answer posted by GB on Dec 22, 2008 20:54

Got it to work finally.  

Only problem now, the top tab shows initially (see attached picture button labeled "Statistics")  like its supposed to, but when you push it again its body won't go down; all the other buttons work fine.

Also, in the picture you see that I added the calendar above the accordian but it is causing that white area to stick out further than the border on my page - what is causing this?

Thanks again for your help.

 

Attachments (1)
site_example.JPG41.99 Kb
Answer posted by Support on Dec 23, 2008 00:59
Could you please provide a source code?
Answer posted on Dec 23, 2008 07:03

<!-- dhtmlxAccordion -->
   
    <link rel="stylesheet" type="text/css" href="http://secure.spidermed.com/accordian/codebase/skins/dhtmlxaccordion_dhx_blue.css">
    <link rel="stylesheet" type="text/css" href="http://secure.spidermed.com/accordian/codebase/skins/dhtmlxaccordion_dhx_black.css">
    <link rel="stylesheet" type="text/css" href="http://secure.spidermed.com/calendar_dhtmlx/codebase/dhtmlxcalendar.css">
    <link rel="stylesheet" type="text/css" href="http://secure.spidermed.com/calendar_dhtmlx/codebase/dhtmlxcalendar_skins.css"> 
    <link rel="STYLESHEET" type="text/css" href="http://secure.spidermed.com/grid/codebase/dhtmlxgrid.css">

    <script src="http://secure.spidermed.com/accordian/codebase/dhtmlxcommon.js"></script>
    <script src="http://secure.spidermed.com/accordian/codebase/dhtmlxaccordion.js"></script>   
    <script src="http://secure.spidermed.com/calendar_dhtmlx/codebase/dhtmlxcommon.js"></script>
    <script src="http://secure.spidermed.com/calendar_dhtmlx/codebase/dhtmlxcalendar.js"></script>
    <script src="http://secure.spidermed.com/windows/codebase/dhtmlxwindows.js"></script>
    <script src="http://secure.spidermed.com/grid/codebase/dhtmlxgrid.js"></script>
    <script src="http://secure.spidermed.com/grid/codebase/dhtmlxgridcell.js"></script>

   
    <!-- dhtmlxWindows -->
   
    <link rel="stylesheet" type="text/css" href="http://secure.spidermed.com/windows/codebase/dhtmlxwindows.css">
    <link rel="stylesheet" type="text/css" href="http://secure.spidermed.com/windows/codebase/skins/dhtmlxwindows_dhx_blue.css">
    <link rel="stylesheet" type="text/css" href="http://secure.spidermed.com/windows/codebase/skins/dhtmlxwindows_dhx_black.css">

    <script>window.dhx_globalImgPath="http://secure.spidermed.com/calendar_dhtmlx/codebase/imgs/";</script>

<script>

function doOnLoad() {

var dhxAccord = new dhtmlXAccordion("accordObj","dhx_black");

dhxAccord.addItem("a1", "Statistics");
dhxAccord.addItem("a2", "Resources");
dhxAccord.addItem("a3", "Find a Team");
dhxAccord.addItem("a4", "Find a Player");
dhxAccord.openItem("a1");
dhxAccord.setEffect(true);

var statgrid = dhxAccord.cells("a1").attachGrid();
statgrid.setImagePath("codebase/imgs/");
statgrid.setSkin("modern");
statgrid.loadXML("http://secure.spidermed.com/step2.xml");
statgrid.init();


mCal = new dhtmlxCalendarObject("objId",true);
mCal.setSkin();
mCal.draw();


};


</script>

<body>

<div id="objId" style="width: 175px; height: 185px;"></div>
<div id="accordObj" style="width: 175px; height: 300px;"></div>

</body>

 

Answer posted by gb on Dec 24, 2008 07:20

I tried adding this code to get the top pane ("a") to open up again after it initially opens but I get a javascript error.   Still can't figure out why the calendar gives that awful white space to the right side of it.... (see jpg from previous post).


dhxAccord.attachEvent("onActive", function("a1"){
       dhxAccord.cells("a1").open();
    });

Thanks!

 

 

Answer posted by GB on Dec 24, 2008 13:01
I put the whole thing (calendar and accordian) in an inline frame and this took care of the white space in some kind of div or something around calendar.   I also figured out why the top tab of the accordian wasn't working - it was because I adjusted the "height" of the calendar div to get the accordian closer to the calendar - when I take the height out it is too far away but at least it works.    Anyway I can get it closer?