CODEWITHSUNDEEP
javascriptjqueryhtmlhref
Aaron
Aaron

Reputation: 3

Javascript Accordion Menu; Inserting html into <div> from <a> tags

What I'm trying to do is setup a fairly standard sort of layout - header, menu on left and main body on the right and keep it compatible with IE, FF and Chrome!

For the menu I wish to use an acordion style menu - I settled on this one here as it seemed very light weight, worked nicely and is very easy to edit menu items. http://www.i-marco.nl/weblog/jquery-accordion-menu/

As you would expect from this layout clicking a menu option will have the information display on the right. Now there are a few ways I could probably do this, but the option I want to use is inserting html in to a <div>. For this menu it uses <a> tags - getting them to load a html in to a div tag is my first problem here. I have a little code, courtesy of a friend, that I believe should intercept the <a href>'s and then insert the linked html into the div tag. Unfortunately it doesn't seem to work and I was hopeing a kind soul here might take pitty on a noob and shed some light for me! :)

So here is the very basic code I would have in my index.html

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
function initMenu() {
    $('#menu ul').hide();
    $('#menu ul:first').show();
    $('#menu li a').click(function(){
        var checkElement = $(this).next(),
            href = $(this).attr('href');

    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
      return false;
    }

    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
    }

    if (href != '#') {
        $.get(href,function(data){

            var inserting = $('body',data).html();

            $('#TEST').fadeOut('fast',function(){
            $(this).html(inserting);
            }); 
        });

      return false;
    }

  });
}
$(document).ready(function() {initMenu();});
/* ]]> */
</script>

<ul id="menu">
    <li>
        <a href="#">Weblog Tools</a>
        <ul>
            <li><a href="text.html">Simple Text</a></li>
            <li><a href="s2000.html">S2000 Info</a></li>
            <li><a href="local_link.html">Typo</a></li>
        </ul>
    </li>

    <li>
        <a href="#">Programming Languages</a>
        <ul>
            <li><a href="local_link.html">PHP</a></li>
            <li><a href="html/text.html">Ruby</a></li>
            <li><a href="local_link.html">Python</a></li>
            <li><a href="local_link.html">PERL</a></li>
        </ul>
    </li>
</ul>

<div id="TEST">
Content should replace this text.
</div>

simple text html to load into div text.html 

<html>
    <body>
        <p><h1>simple text</h1></p>
        <p>Lorem ipsum dolor sit amet, vim ut diam nulla admodum.</p>
        <p>Eum eu odio movet, nusquam deleniti ut his, usu te eius tamquam.</p>
        <p>blah
        <br />
        de-blah
        <br />
        ...
        </p>
    </body>
</html>

Upvotes: 0

Views: 550

Answers (1)

squidbe
squidbe

Reputation: 1021

It's hard to answer your question without seeing any examples of the html files referenced in your hrefs, but a few things occur to me:

In this line...

var inserting = $('body',data).html();

... it looks like your intention is to extract some html from the returned data, but that syntax isn't right. You actually don't even need to store anything (more on that later).

Here...

$('#TEST').fadeOut('fast',function(){

... you're telling the #TEST div to hide once its data is inserted. Is that really what you want?

It's possible that the get() function isn't correctly interpreting the datatype, so you should explicitly set it. If you're just trying to insert the contents of an html document into the #TEST div, all you have to do is the following:

$.get(href,function(data){
  $('#TEST').html(data);
}, "html");

If that still doesn't work for you, clarify the problem, and include a sample html file referenced in your hrefs.

Upvotes: 0

Related Questions