dynamically loading content with jquery doesnt work

Question

So.. I've been trying to dynamically load content but when I click on the menu loader shows only. It seems I can't figure this out, can you please look at the code and tell me if I missed something or did wrong?

this is my html

<body>

<div id="wrapper">

<div id="top">
    <div id="logo">
    <img src="images/logo.png"/>
    </div>


<div id='cssmenu'>
<ul id="nav">
   <li class='has-sub'><a href="storitve.html">Storitve</a>
      <ul>
         <li><a href="grafično-oblikovanje.html">Grafično oblikovanje</a></li>
         <li><a href="spletno-oblikovanje.html">Spletno oblikovanje</a></li>
         <li><a href="industrijsko-oblikovanje.html">Industrijsko oblikovanje</a></li>
      </ul>
   </li>
   <li><a href="reference.html">Reference</a></li>
   <li><a href="cenik.html">Cenik</a></li>
   <li class='last'><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</div>

<div id="content">
</div>

<div id="footer">
<p>&copy;Copyright 2015</p>
</div>

</div>
</body>
</html>

..and js

$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #content';
        $('#content').load(toLoad)
    }                                           
});

$('#nav li a').click(function(){

    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
        $('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#content').show('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    return false;

});

});

and css

body        { width:100%; 
              height:100%;
              margin:0px;
              padding:0px;
              font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif; 
              text-align:center;
              background:#BFBFBF;
              padding-bottom:60px;
            }



#logo     {  float:left;
             position: fixed;
             margin-top: 20px;
             margin-left: 20px;
             margin-bottom:20px;
             z-index: 2000;
          }


#top     {  position:relative;
            top: 0px;
            left:0px;
            width:945px;
            height: 160px;
            background-color: white;

            z-index:auto;
            opacity: ;
         }

#cssmenu {  float:right;
            position:fixed; 
            margin-top:123px;
            margin-left:554px;
            font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
            font-size: 11px;
            line-height: 15px;
            text-transform: uppercase;
            text-align: left;
            z-index:3;

         }

#cssmenu > ul {   width: auto;
                  list-style-type: none;
                  padding: 0;
                  margin: 0;
              }

#centeredmenu ul ul {
    z-index: 1 !Important;
}




#wrapper    { width: 945px;
              margin:0px auto;
              background: #BBB;
              position:relative;
              border: ;
            }



#content    {  width:880px; 
               background-color:white; 
               border: px solid white;

               margin: 10px auto;
               padding: 0 30px;
            }



#footer  {  position:fixed;
            bottom:0;
            left:0;
            width:100%;
            height:40px;   /* Height of the footer */
            background:white;
         }



#load {
    display: none;
    position: absolute;
    right:460px;
    top: 380px;
    background: url(../images/ajax-loader.gif);
    width: 43px;
    height: 11px;
    text-indent: -9999em;
}

can you provide a jsfiddle to demo what you're talking about? — indubitablee
– indubitablee, Commented Jan 20, 2015 at 13:42
There is too much code here... Can you shorten it and leave only the code you expected to work but didn't ? — Stephan
– Stephan, Commented Jan 20, 2015 at 13:44

devqon · Accepted Answer · 2015-01-20 13:49:38Z

3

You are removing your loader from the DOM:

$('#load').remove();

yet after that you try to fade it in while it does not exist:

$('#load').fadeIn('normal');

Replace the .remove() with a .hide() call to hide it, but not remove it from the DOM.

answered Jan 20, 2015 at 13:49

devqon

14k2 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jazzykat Over a year ago

Seems like this isn't the problem

jazzykat · Accepted Answer · 2015-01-22 13:33:27Z

This is my navigation menu and what I'm trying to make is when I click on navigation, it dynamically loads the requested page into a content div with jQuery.

<div id='cssmenu'>
    <ul id="nav">
       <li><a href="index">Domov</a></li>
       <li class='has-sub'><a href="storitve">Storitve</a>
          <ul>
             <li><a href="grafično-oblikovanje">Grafično oblikovanje</a></li>
             <li><a href="spletno-oblikovanje">Spletno oblikovanje</a></li>
             <li><a href="industrijsko-oblikovanje">Industrijsko oblikovanje</a></li>
          </ul>
       </li>
       <li><a href="reference">Reference</a></li>
       <li><a href="cenik">Cenik</a></li>
       <li class='last'><a href="kontakt">Kontakt</a></li>
    </ul>
    </div>
    </div>

<div id="content"></div>

And I changed JS code into:

$(document).ready(function() {
    // initial
    $("#content").load("content/index.html");

    // handle menu click
    $("ul#nav li a").click(function() {
        var page = $(this).attr("href") ;
        $("#content").load("content/" + page + ".html");

        return false;


        }); 
    });

but it's working just on 2 menu buttons.

Collectives™ on Stack Overflow

dynamically loading content with jquery doesnt work

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related