jQWidgets Forums

jQuery UI Widgets Forums Dialogs and Notifications Window click failures and blow thrus of widgets in splitters

This topic contains 3 replies, has 2 voices, and was last updated by  webnerdgirl 10 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • webnerdgirl
    Participant

    I’ve got about 30 different first level configuration implementations set up and all work just fine. Problem is that I cannot get any of them to work correctly once I integrate them into my splitter layout (left, right-top/right-bottom). I have a “logout” button that when “CLICKED” needs to trigger a “Confirmation Modal”. Works like a champ in about 4 or 5 different frameworks BUT when I put any of them into the splitter layout either the button stops working all together, the code blows thru the click event and all of the window code regardless of having autoOpen: false, OR this is my favorite because it makes me convinced there is a way… OR the button, click event and modal confirmation render perfectly… but it breaks everything else on the page.

    So my question PLEASE…. can you please show me code that has the three pane splitter with collapsing to left and right-top WITH a plain jane button in the right-bottom area that when clicked will trigger a modal with a title, content (text plus Yes and No buttons), that when the yes button is clicked it will send the user off to a “you are now logged out” page (same folder)…… without breaking everything else on the page. Namely the three blank splitters.

    FYI – the majority of this site will use windows/docking panels/whatever for all of the grid/form type functionalities so I really need this to work for me.

    Thanks so much.


    Dimitar
    Participant

    Hello webnerdgirl,

    Here is an example. We hope it is helpful to you.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
        <meta name="description" content="This page demonstrates splitter's events" />
        <title id='Description'>Vertical Splitter </title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.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/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/jqxwindow.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#mainSplitter').jqxSplitter({ width: 850, height: 480, panels: [{ size: 300}] });
                $('#rightSplitter').jqxSplitter({ width: "100%", height: "100%", orientation: 'horizontal', panels: [{ size: 100 }, { size: 300}] });
                $("#jqxWindow").jqxWindow({ width: 300, height: 200, autoOpen: false, isModal: true });
    
                $("#button").click(function () {
                    $("#jqxWindow").jqxWindow("open");
                });
    
                $("#OKButton").click(function () {
                    window.location = "defaultfunctionality.htm";
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="mainSplitter">
                <div class="splitter-panel">
                    Panel 1</div>
                <div class="splitter-panel">
                    <div id="rightSplitter">
                        <div class="splitter-panel">
                            Panel 2.1</div>
                        <div class="splitter-panel">
                            Panel 2.2<br />
                            <button id="button">
                                Open modal</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="jqxWindow">
                <div>
                    Header</div>
                <div>
                    Content<br />
                    <button id="OKButton">
                        OK</button>
                    <button id="CancelButton">
                        Cancel</button>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    webnerdgirl
    Participant

    Dimitri,
    Just got back to this. Thanks so very much. The code I got from the demos for the modal window looked totally different than yours. Yours works though and that’s all I care about.

    One more question please. I’ve not been successful at being able to open multiple windows on the same page. Can you point me to a correct sample of opening multiple windows, that would work with your code above? I know it has to be something dumb that I’m overlooking and I’d really appreciate the help.

    Oh, your code above…. I was able to include both my horizontal bar image for expanding/collapsing the top horizontal panel AND!!!!! I’ve even come up with code for the left Vertical panel that renders 60px wide to expose image buttons on page load and expands to 200px on click of one of the image buttons then collapses back to 60px exposed if the same button is clicked! Now if I can just get multiple windows on the page working. <G> I know it isn’t supposed to work that way but it is what I needed and it works like a champ!


    webnerdgirl
    Participant

    Dimitri………..
    duh…….. never mind……. I got it working. <G>

    Thanks!

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

You must be logged in to reply to this topic.