jQuery UI Widgets Forums Navigation Menu, Context Menu Menu ignores AJAX

Tagged: ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Menu ignores AJAX #79406

    sourvinos
    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>
    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;
    });
    
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.