SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast Angrypoonani's Avatar
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax .load calls before the click event that is used to call it...

    So I'm doing some basic href functionality replacement for users that have JS enabled. I admit I'm more of a PHP guy so I may have some syntax issues in my JQuery, please point those issues out.

    This will replace all my href attributes in my nav links to remove their functionality and then replace with an click event listener...
    Code:
    function replaceLinks() {
        $('#nav_ribbon li a').each(function() {
            $(this).attr({'href': 'javascript:void(0)'}).on('click', navLinkClick(this));
        });
    }
    function navLinkClick(selector) {
        var pageValue = $(selector).attr('title').toLowerCase();
        var page = pageValue + '.php';
        $('#content').load(page);
    }
    So on document ready I run replaceLinks but when my page loads it automatically activates the handler without the event taking place... so I end up with loaded content instead of the home page content

    sample of the navigation html:
    HTML Code:
    <div id="nav_ribbon"> <a class="header_logo" href="index.php"><img title="Home" alt="Logo" src="img/logo.png" /></a>
    <ul>
       <li><a title="page0" class="nav_item" href="index.php">page0</a></li>
       <li><a title="page1" class="nav_item" href="index.php?page=page1">page1</a></li>
       <li><a title="page2" class="nav_item" href="index.php?page=page2">page2</a></li>
       <li><a title="page3" class="nav_item" href="index.php?page=page3">page3</a></li>
       <li><a title="page4" class="nav_item" href="index.php?page=page4">page4</a></li>
       <li><a title="page5" class="nav_item" href="index.php?page=page5">page5</a></li>
    </ul>
    </div>

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Angrypoonani View Post
    Code:
            $(this).attr({'href': 'javascript:void(0)'}).on('click', navLinkClick(this));
    So on document ready I run replaceLinks but when my page loads it automatically activates the handler without the event taking place
    That's because you're calling it on that line. You should be passing a function reference.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Enthusiast Angrypoonani's Avatar
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink

    Quote Originally Posted by Logic Ali View Post
    That's because you're calling it on that line. You should be passing a function reference.
    Thank you Logic Ali!

    Oh, so like this:
    Code:
    $(this).attr({'href': 'javascript:void(0)'}).on('click', function() {
         navLinkClick(this);
    });
    Can someone explain what's going on here so I have a better understanding
    What is happening differently between these calls?
    Code:
    .on('click', function() {navLinkClick(this);} );
    AND
    Code:
    .on('click', navLinkClick(this));
    I'm eager to learn

  4. #4
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,155
    Mentioned
    14 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Angrypoonani View Post
    navLinkClick(this)
    Here, you're executing navLinkClick immediately, and the return value is used for the second argument to .on().

    Quote Originally Posted by Angrypoonani View Post
    function() {navLinkClick(this);}
    Here, you're passing .on() a function reference, which when executed will call navLinkClick.
    "First make it work. Then make it better."

  5. #5
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,155
    Mentioned
    14 Post(s)
    Tagged
    0 Thread(s)
    And although what you proposed will fix the problem, there are also other ways to improve the code quality, such as removing the "javascript:void(0)" thing (event.preventDefault is cleaner), and passing a reference to navLinkClick itself rather than wrapping it in an anonymous function.

    Code:
    function replaceLinks() {
        $('#nav_ribbon li a').each(function() {
            $(this).on('click', navLinkClick);
        });
    }
    function navLinkClick(event) {
        event.preventDefault();
        var pageValue = $(event.target).attr('title').toLowerCase();
        var page = pageValue + '.php';
        $('#content').load(page);
    }
    "First make it work. Then make it better."

  6. #6
    SitePoint Enthusiast Angrypoonani's Avatar
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Jeff Mott, I appreciate your explanation and clean code suggestions


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •