#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    670
    Rep Power
    38

    JQuery load and prevent default question


    OK, I'm having issues with load and preventDefault.
    My JavaScript looks like this
    Code:
    <script type="text/javascript">
    $(document).ready(function(){        
    
      $('#headlines').on('click', 'li', function(e){
         //This will run whenever one of the LIs is clicked
    
         //Stop event to prevent navigation if they clicked the link
         e.preventDefault();
         e.stopPropagation();
    
         //Get the links href value
         var href = $(this).find('a').attr('href');
        
         //Load the href into the articles div
         $('#article').load(href);
      });
    });
    </script>
    My PHP produces links like this:
    Code:
    <li>
    <a id="headlines" class="header_brown" href="news-archives_GET.php?id=6">This is article number 6 headline</a>
    </li>
    But when you click a link, you are brought to the "news-archives_GET.php?id=6" page, which displays the article. I was hoping the article on this page would load into the "<div id='article'>"


    Does anyone see what's up with the JS?

    thanks
    - : )
  2. #2
  3. Wiser? Not exactly.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    5,956
    Rep Power
    4035
    Look at your HTML vs my HTML on your other thread. Notice the difference, in particular the placement of your id="headlines" attribute?

    The javascript code is written with the understanding that the id="headlines" is applied to the container which holds all your headlines. Each headline is then represented by an li tag with an anchor inside of it.

    If you want to layout your HTML differently you can, but you'll have to adjust the javascript code accordingly.
    Recycle your old CD's, don't just trash them



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    670
    Rep Power
    38

    Hey Kicken


    You were right. I thought maybe you're code was wrong, and I was trying to trouble shoot. The error was on my end. Your code works perfectly!

    Thanks so much for initial post, code, and follow up!!

IMN logo majestic logo threadwatch logo seochat tools logo