jQWidgets Forums

This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Splitter and .load Posts

December 20, 2012 at 5:31 am Splitter and .load #12619

Member

I am trying to use .load to put a local content into a div that is located in a Splitter div , but it does not seem to work. It will work if I move the div outside of the splitter div. Am I missing something else here. How should I do this in the most optimized way?


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is demonstrated how to create a basic navigation with jqxTree and jqxSplitter. </title>
    <link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>	
    <script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxsplitter.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTree
            $('#jqxTree').jqxTree({ theme: 'classic', height: '100%', width: '100%' });
            $("#splitter").jqxSplitter({ theme: 'classic', width: '100%', height: '100%', panels: [{ size: 250}] });
            $('#jqxTree').bind('select', function (event) {
				
                var htmlElement = event.args.element;
                var item = $('#jqxTree').jqxTree('getItem', htmlElement);
                if (item && item.label == "Fleet Command") {
                    $('#ContentPanel').load('/fleetcommand/index.php');
                };
				
            });			
        });
		
    </script>
    
</head>
<body class='default'>
    <div id="splitter">
        <div>
            <div style="border: none;" id='jqxTree'>
                <ul>
                    <li id="Fleet Command" item-expanded='true'>
                        <span item-title="true">Fleet Command</span>
                        <ul>
                            <li id="Ships" item-expanded='true'> <span item-title="true">Ships</span> </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div id="ContentPanel">
        
    
        </div>
    </div>
</body>
</html>

December 20, 2012 at 6:12 am Splitter and .load #12624

litwerx

Member

Looks like it is only a problem in Google Apple OSX, can anyone else confirm this? Works in Safari and Firefox

December 20, 2012 at 8:56 am Splitter and .load #12632

Peter Stoev

Keymaster

Hi litwerx,

I think that you should put a DIV tag inside the Splitter’s content panel and load it with data and elements. You shouldn’t use directly the Splitter Panel’s element.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 20, 2012 at 3:44 pm Splitter and .load #12660

litwerx

Member

Thanks that totally worked! …. I will definitely be buying your software if I can ever get my project to a commercial product. Great resources and support on your website. I have used many simular software development tools in the past and yours has so far been the best documented and easiest to use. Well done!

December 21, 2012 at 4:44 am Splitter and .load #12685

litwerx

Member

Stange that it worked the first time I tried it then it does not work now. Works fine in other browsers just fine, just not in Google on OSX


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is demonstrated how to create a basic navigation with jqxTree and jqxSplitter. </title>
    <link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>	
    <script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxsplitter.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTree
            $('#jqxTree').jqxTree({ theme: 'classic', height: '100%', width: '100%' });
            $("#splitter").jqxSplitter({ theme: 'classic', width: '100%', height: '100%', panels: [{ size: 250}] });
            $('#jqxTree').bind('select', function (event) {
				
                var htmlElement = event.args.element;
                var item = $('#jqxTree').jqxTree('getItem', htmlElement);
                if (item && item.label == "Fleet Command") {
                    $('#mainScreen').load('/fleetcommand/index.php');
                };
				
            });		
        });
    </script>
    
</head>
<body class='default'>
    <div id="splitter">
        <div>
            <div style="border: none;" id='jqxTree'>
                <ul>
                    <li id="Fleet Command" item-expanded='false'>
                        <span item-title="true">Fleet Command</span>
                        <ul>
                            <li id="Ships" item-expanded='true'> <span item-title="true">Ships</span> </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div id="ContentPanel">
            <div id="mainScreen">
         	   &nbsp;
            </div>
        </div>
    </div>
</body>
</html>

December 21, 2012 at 7:21 am Splitter and .load #12702

Peter Stoev

Keymaster

Hi litwerx,

I suggest you to load the jQuery Framework as demonstrated in our samples. That is necessary, because the other files are not loaded from the googleapis.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.