My name is Edward Tanguay. I'm an American software and web developer living and working in Berlin, Germany.

Categories

My Older Tutorials

My Old Web Dev Site

JQUERY CODE EXAMPLE created on Sunday, November 14, 2010 permalink
Simple menu site with jQuery AJAX
Simple example of using jQuery's $.get() to make a quick responding site that shows text in a display box based on menu selection.
> > > View Demo
<!DOCTYPE html>
<html>
<head>
    <title>JQuery AJAX Menu</title>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            showText('welcome');
            $('#buttonWelcome').click(function () {
                showText('welcome');
            });
            $('#buttonInfo').click(function () {
                showText('info');
            });
            $('#buttonHelp').click(function () {
                showText('help');
            });

            function showText(idCode) {
                $.get('content/' + idCode + '.txt', function (data) {
                    $('#content').text(data);
                });
            }
        });
    </script>
    <style type="text/css">
        button::-moz-focus-inner
        {
            border: 0;
        }
        button
        {
            background-color: beige;
            cursor: hand;
            cursor: pointer;
        }
        #content .
        {
            background-color: beige;
            border: 1px solid #555;
            height: 200px;
            width: 300px;
            margin-top: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <button id='buttonWelcome'>
        Welcome</button>
    <button id='buttonInfo'>
        Info</button>
    <button id='buttonHelp'>
        Help</button>
    <div id="content">
    </div>
</body>
</html>
need markup?
 

Most Recently Added Items: