jQWidgets Forums

Tagged: ajax, clear, content, jqxsplitter, jqxwindow, load, page, splitter, window

This topic contains 2 replies, has 2 voices, and was last updated by africanfarmer 11 years, 7 months ago.

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

Author

How to load other file into split panel when it loads? Posts

September 21, 2013 at 2:23 pm How to load other file into split panel when it loads? #29322

Member

hi Peter,

i am very like the Loading Split panels with Ajax. in my system designing, i placed all windows in one page which occupy memory largely. so i want to load the contents of split in a window from other files when it opens, and then clear them when it closes.

can you have instruction how to do it?

September 23, 2013 at 6:10 am How to load other file into split panel when it loads? #29346

Dimitar

Participant

Hello africanfarmer,

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            $("#jqxwindow ").jqxWindow({ height: 310, width: 600, theme: 'summer', autoOpen: false });
            $('#jqxSplitter').jqxSplitter({ width: 580, height: 300, theme: theme, panels: [{ size: '50%' }, { size: '50%'}] });
            $("#jqxwindow ").on("open", function () {
                loadPage('pages/ajax1.htm', 1);
                loadPage('pages/ajax2.htm', 2);
            });
            $("#jqxwindow ").on("close", function () {
                clearPage(1);
                clearPage(2);
            });
            var loadPage = function (url, tabIndex) {
                $.get(url, function (data) {
                    $('#content' + tabIndex).html('<div style="overflow: auto; width: 100%; height: 100%;">' + data + '</div>');
                });
            };
            var clearPage = function (tabIndex) {
                $('#content' + tabIndex).html("");
            };
            $("#openWindow").click(function () {
                $("#jqxwindow").jqxWindow("open");
            });
        });
    </script>
</head>
<body class='default'>
    <button id="openWindow">
        Open window</button>
    <div id='jqxwindow'>
        <div>
            Header</div>
        <div>
            <div id='jqxSplitter'>
                <div id="content1">
                    <img src='../../images/ajax-loader.gif' />
                </div>
                <div id="content2">
                    <img src='../../images/ajax-loader.gif' />
                </div>
            </div>
        </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 13, 2013 at 8:38 am How to load other file into split panel when it loads? #30633

africanfarmer

Member

Dear Dimitar,

Thank you so much for your sample!

can you help on below codes that failed to rebuild the html data after reopen the window? I click menuitem to open the window, and create some html.

————————

function startMenuOpenWindow() {};
startMenuOpenWindow.init = function()
{
    this.openWindowOnClick ();
}
startMenuOpenWindow.openWindowOnClick = function ()
{
    var startMenuItems = $('#startMenu');
    /*get the created window div*/
    var startMenuOpenWindowDiv = $(' .startMenuWindows');
    startMenuItems.on('itemclick', function (event)
    {
        /*get index of clicked menuitem*/
        var index = event.args.id;
        /*get the topmenu item index from the submenu*/
        if ( index < 10 && index > 0 )
        {
            cIndex = index - 1;
        }
        
        else
        {
            cIndex = _getParentMenuItemId(event) - 1;
        }
        for (var i = 0; i < startMenuOpenWindowDiv.length; i++)
        {
            var currentWindowId = '#' + startMenuOpenWindowDiv[i].id;
            //get zindex of the opened window
            var zIndex = $(currentWindowId).jqxWindow('zIndex');
            if ( i == cIndex )
            {
                _openWindow($(currentWindowId));
                //make it on the top of all windows when opens
                $(currentWindowId).css('z-index', '' + (zIndex + 10 ) );
            }
            else
            {
                /*对于已经打开的窗口，放到后面去*/
                $(currentWindowId).css('z-index', '' + (zIndex - 10 ) );
            }
        }
    });
    startMenuOpenWindowDiv.on('close', function()
    {
        clearPage(startMenuOpenWindowDiv.children());
    })
}

Author

Posts

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

You must be logged in to reply to this topic.