jQWidgets Forums

Forum Replies Created

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • in reply to: DropDownList value problems DropDownList value problems #60274

    jon.moon
    Participant

    Thanks for the info on the name attribute, but it still doesn’t fix the other problem I am having. Is there anything in the code that would make it not load the “val” option from the JSON as the value? This exact code worked correctly in 3.1.0 but not in 3.5.0.

    Thanks,
    Jon

    in reply to: DropDownList value problems DropDownList value problems #60169

    jon.moon
    Participant

    Okay, just to clarify, the name attribute has to be on the div that is being turned into the drop down? Or is the name attribute added through the jqxDropDownList constructor?

    As for the other piece, I wrote it incorrectly. I was doing it for memory instead of actually copying from the code. Here’s the exact lines of code that I am using:

    var source_3 = {dataType:"json",datafields:[{name:"label"},{name:"val"}],url:"/search/index/param?id=3",async:true}
    var da_3 = new $.jqx.dataAdapter(source_3);
    $('#advanced_search #A_General_3').jqxDropDownList({selectedIndex:0,placeHolder:'',source:da_3, displayMember:'label',valueMember:'val',width:248,height:25,theme:'ui-redmond'});

    and here’s the first part of the JSON (it’s a long list of state and region names so I don’t want to include it all here):
    [{“label”:””,”val”:””}, {“label”:”Alabama”,”val”:”AL”}, {“label”:”Alaska”,”val”:”AK”}, {“label”:”Alberta”,”val”:”AB”},

    Thanks.


    jon.moon
    Participant

    Thanks. Setting the width for the splitter was the piece I was missing.

    Jon


    jon.moon
    Participant
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Form Administrator</title>
    <link href="/jqwidgets/styles/jqx.base.css" media="screen" rel="stylesheet" type="text/css" >
    <link href="/jqwidgets/styles/jqx.ui-redmond.css" media="screen" rel="stylesheet" type="text/css" >
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="/jqwidgets/globalization/jquery.global.js"></script>
    <script>
    var theme = 'ui-redmond';
    $(document).ready(
    function ()
    {
    $("#mainMenu.jqxMenu").jqxMenu({width:$("body").width()-3, height: '30px', autoOpen: true, theme:theme});
    $(".jqxTabs .jqxMenu").jqxMenu({width:$("body").width()-10, height: '30px', autoOpen: true, theme:theme});
    $(".jqxTabs").jqxTabs({width:$("body").width()-3,height: $("body").height() - 144,theme:theme,initTabContent:initTabContent});
    }
    );
    function initializeSplitter()
    {
    $("#editorContent").jqxSplitter({height: $("body").height()-220,orientation:'vertical', theme:theme, panels:[{size:400},{}]});
    }
    function initializeGrid()
    {
    $(".jqxGrid").jqxGrid({width:$("body").width()-9,height: $("body").height() - 220,theme:theme});
    }
    function initTabContent(tab)
    {
    switch(tab)
    {
    case 0:
    initializeSplitter();
    break;
    case 1:
    initializeGrid();
    break;
    }
    }
    </script>
    <style>
    html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    }
    </style>
    </head>
    <body>
    <div id="topheader" class="topheader" style="padding-top:0px;padding-bottom:0px;background: #CCC url(https://huss.covenant.edu/common/img/headerbg.jpg) center top;">
    <a href="/">
    <img style="border: 0px solid white;height:69px;width:278px" class="headerimage" src="https://huss.covenant.edu/common/img/header_covenant-college-logo.png"/>
    </a>
    <div style='float:right;color:white;cursor:pointer;padding-right:10px;padding-top:10px'>
    <div id="toolbarTextSpace" style='float:right;padding-top:8px'></div>
    </div>
    </div>
    <div id="footer" class="footer" style="font-size:8pt;padding:5px 0px;position:absolute;bottom:0px;left:0px;background-color:#87BEF0;width:100%;padding-top:5px;padding-bottom:5px;">
    <div class="footertext" style='float:left;margin: 0px 20px;'>
    Scots Portal v2.0<br />
    Technology Services
    </div>
    <div class="footertext" style='float:left'>
    Problems or Questions?<br />
    <a href="https://techsupport.covenant.edu" target="_blank">Contact Us</a>
    </div>
    </div>
    <div id='mainMenu' class='jqxMenu'>
    <ul>
    <li>Forms
    <ul>
    <li>Admissions
    <ul>
    <li>Net Price Calculator</li>
    <li>Request Information</li>
    </ul>
    </li>
    <li>Education
    <ul style='width:250px'>
    <li>2013 Career Summit Registration</li>
    <li>2013 Educators Conference Registration</li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    <div id='mainTabs' class='jqxTabs'>
    <ul>
    <li>Edit Form</li>
    <li>View Form Submissions</li>
    </ul>
    <div id='formEditor'>
    <div id='editorToolbar' class='jqxMenu'>
    <ul>
    <li>File
    <ul>
    <li>Preview Form</li>
    <li>Save</li>
    </ul>
    </li>
    <li>Change Page
    <ul>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Confirmation</li>
    </ul>
    </li>
    </ul>
    </div>
    <div id='editorContent'>
    <div id='leftSide' style='width:400px'></div>
    <div id='rightSide'></div>
    </div>
    </div>
    <div id='formSubmissions'>
    <div id='submissionToolbar' class='jqxMenu'></div>
    <div id='submissionGrid' class='jqxGrid'></div>
    </div>
    </div>
    </body>
    </html>

    The initial loading of the tabs works fine, but when you switch back to the first tab, the first panel is always collapsed. I was logging in the console a bit and found that when you switch off a tab which has a splitter, then the widths of all of the panels gets set to 0. When you switch back, it does not change the size of all of them correctly so that the first one is set to 0 and the second is set to the full width (at least in this case).

    Thanks.

    Jon


    jon.moon
    Participant

    I am having the same problem as Antony, and this solution didn’t fix it. The tab initially loads correctly, but when you switch to a different tab, the width of all of the panels in the splitter are set to 0. So when you switch back to the tab, everything is collapsed. Any ideas on what is happening? I can provide code if needed.

    Jon


    jon.moon
    Participant

    That works perfectly! Thanks!

    Jon


    jon.moon
    Participant

    I tried this and a different approach (using a jQuery selector to access the item after the menu was built and setting the float to right), and had a problem both times. When the submenu opens up, it opens off the page, since the menu item is too far to the right. Is there a way to tell the submenu to right-align to the parent element? I am working on replacing a program for a client and I just started working with these tools. Their current system has a main menu on the left side with a system menu on the right. I was trying to replicate the same behavior, but the submenu is a major problem.

    Thanks.

    Jon

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