jQWidgets Forums

Tagged: Button, jqxsplitter, jqxwindow, modal, splitter, window

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

click failures and blow thrus of widgets in splitters Posts
June 23, 2014 at 11:00 pm click failures and blow thrus of widgets in splitters #56260

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.

June 24, 2014 at 6:23 am click failures and blow thrus of widgets in splitters #56270
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/
July 5, 2014 at 3:37 am click failures and blow thrus of widgets in splitters #56792

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!

July 5, 2014 at 3:54 am click failures and blow thrus of widgets in splitters #56793

webnerdgirl
Participant

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

Thanks!
Author

Posts

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

You must be logged in to reply to this topic.