javascript - Jquery change href attribute only works when I add an alert() function -


i using jquery load sidebar each of pages, sidebar contains list of story names, date, , content type (story, article, news, whatever) placed in unordered list, when each page loads use jquery's .load() function load sidebar information current page's unordered list, once sidebar information has loaded use script sets href of current story in sidebar #. problem piece of code sets href # works if put alert right before function.

here flow:

user clicks on story (lets call story nothing.html)

nothing.html

<!doctype html> <html>  <head>     <meta charset="utf-8">     <link rel="stylesheet" href="../../../../css/reset.css">     <link rel="stylesheet" href="../../../../css/index.css">     <script type="text/javascript" src="../../../../js/jquery.js"></script>     <script type="text/javascript" src="../../../../js/storyloadsidebar.js"></script>     <script type="text/javascript" src="../../../../js/disablelink.js"></script>     <title> nothing </title> </head>  <body>      <div id="container">          <div id="main">              <article>                  <header>                     <h3> nothing here </h3>                     <time pubdate="pubdate"> july 19, 2011 </time>                 </header>                  <p> said there nothing here, yet. </p>              </article>          </div>          <div id="listwrapper">             <div id="storylist">                 <ul></ul>             </div>         </div>      </div>  </body>  </html> 

storyloadsidebar.js

$(document).ready(function() {     $("ul").load("../../../../sidebar.html ul"); }); 

sidebar.html

<!doctype html> <html>  <head>     <meta charset="utf-8"> </head>  <body>        <ul>          <li>             <div class="catdate">                 <p> nothing </p>                 <time pubdate="pubdate"> 2011-07-19 </time>             </div>              <div class="storytitle">                 <a id="nothing" href="stories/2011/07/19/nothing.html"> nothing here, yet. </a>             </div>         </li>      </ul>  </body>  </html> 

then script disable link:

disablelink.js

$(document).ready(function() {     var fullpath = window.location.pathname;     var pagename = fullpath.substring(fullpath.lastindexof('/') + 1).replace('.html', '');     $('#' + pagename).attr('href', '#'); }); 

the entire thing works of add alert disablelink.js right before href modification so:

$(document).ready(function() {     var fullpath = window.location.pathname;     var pagename = fullpath.substring(fullpath.lastindexof('/') + 1).replace('.html', '');     alert('now work');     $('#' + pagename).attr('href', '#'); }); 

what problem here, why work if add in alert?

the reason $("ul").load("...") takes time load.

you can assign call function next piece of code runs when completed

$("ul").load("../../../../sidebar.html ul",function () {    var fullpath = window.location.pathname;    var pagename = fullpath.substring(fullpath.lastindexof('/') + 1).replace('.html', '');    $('#' + pagename).attr('href', '#'); }) 

Comments

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

actionscript 3 - TweenLite does not work with object -

jQuery Ajax Render Fragments OR Whole Page -