Menu ignores AJAX - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 1 reply, has 1 voice, and was last updated by sourvinos 7 years, 5 months ago.

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

Author

Menu ignores AJAX Posts

December 16, 2015 at 3:45 pm Menu ignores AJAX #79406

Participant

When I try the code without the call to the createMenu function, the page does not refresh and the page menu11.html is added to the #container. If the createMenu is used, the menu11.html is loaded in a new page, as if AJAX was not there! Any idea what is going on?

index.php

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Gallery</title>
    <!--Stylesheets-->
    <link rel = "stylesheet" href = "styles/jqx.base.css">
    <link rel = "stylesheet" href = "styles/jqx.office.css">
    <!--Scripts-->
    <script src = "http://code.jquery.com/jquery-latest.min.js"></script>
    <script src = "js/jqxcore.js"></script>
    <script src = "js/jqxbuttons.js"></script>
    <script src = "js/jqxscrollbar.js"></script>
    <script src = "js/jqxdata.js"></script>
    <script src = "js/jqxlistbox.js"></script>
    <script src = "js/jqxcombobox.js"></script>
    <script src = "js/jqxmenu.js"></script>
    <script>
        $(document).ready(function () {
            createMenu();
            $('#jqxMenu a').click(function () {
                $('#container').load(this.href + ' #container');
                return false;
            });
        });
        function createMenu() {
            $("#jqxMenu").jqxMenu({
                width: '1082',
                theme: 'office',
                animationShowDuration: 300,
                animationHideDuration: 200,
                animationShowDelay: 200,
                enableHover: true,
                autoOpen: true
            });
        }
    </script>
</head>
<body>
    <div id = "jqxMenu">
        <ul>
            <li><a href = "#">Home</a></li>
            <li>Menu 1
                <ul>
                    <li><a href = "menu11.html">Menu 11</a></li>
                    <li><a href = "menu12.html">Menu 12</a></li>
                    <li><a href = "menu13.html">Menu 13</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id = "container"></div>
</body>
</html>

menu11.html

<p class = "caption">Picture 1</p>
<p>Image Placeholder</p>

December 16, 2015 at 10:02 pm Menu ignores AJAX #79425

sourvinos

Participant

[SOLVED!]

I replaced this piece of code:


$('#jqxMenu a').click(function () {
   $('#container').load(this.href + ' #container');
   return false;
});

with this:


$('#jqxMenu').bind('itemclick', function (event) {
   var element = event.target;
   $('#container').load(element + ' #container');
   return false;
});

Author

Posts

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

You must be logged in to reply to this topic.