CODEWITHSUNDEEP
jqueryhtmlcss
Jeff
Jeff

Reputation: 4423

JQuery / HTML link does not load on first click

JQuery + HTML + CSS

I am trying to get the links on a nav bar to update a "div" tag that I have. I got that to work, but I have to click each hyperlink twice before it loads the page on the main viewer. Why? How do I make it load after only one click?

test.js:

function onScreen(id){
    $("a#" + id).click(function(){$("div#viewer").load(id + '.html')});  
}

main.html:

<a href="#" id="about" onclick="onScreen('about')">About Us</a>
<a href="#" id="account" onclick="onScreen('account')">My Account</a>

etc.

<div class ="article" id="viewer">
    <p>welcome to this awesome site! </div>

There is an "about.html" file (and all other necessary files) in the same folder. Again, the code functions, just not as it is supposed to.

Upvotes: 1

Views: 2345

Answers (6)

Julien Ch.
Julien Ch.

Reputation: 1261

The first click execute onScreen, which associate the load function to the click event. The load function is thus triggered the second time you click.

Edit

A solution could be to remove the onclick attributes on your <a href=#> tags

$(function(){
    $("a[href='#']").click(function(){$("div#viewer").load(this.id + '.html')});
})

Upvotes: 5

Adrian Bratu
Adrian Bratu

Reputation: 508

try 

$(document).ready(function(){
  $("a").click(function(){
    $("div#viewer").load(this.id + '.html')
  });
});

Upvotes: 0

Lix
Lix

Reputation: 47956

You simply have some redundant code there. You attached two click events.

  1. Inline in the markup with the onClick attribute.
  2. In the onScreen() function with .click().

Only after you click the link does the actual .click() handler get created. So you had to click once to create a handler and then the second click would trigger the callback function.

You can remove the .click() and leave the code within that function. So your onScreen() function would look like this - 

function onScreen(id){
  $("div#viewer").load(id + '.html');
}

You could also improve on the code by using this syntax instead - 

$('a.internalLink').on('click',function(
  $("div#viewer").load($(this).id + '.html');
));

This assumes that you give all your <a> tags that you want to behave like this a class attribute of internalLink. Its much easier to give similar elements the same class name so that you can easily group them with a jQuery selector.

The newer .on() function are preferred since jQuery 1.7+

Upvotes: 2

Aadaam
Aadaam

Reputation: 3739

Hmm... first off, this is not the nicest solution. a nicer solution would be:

<a href="about.html" class="scriptable" id="about">About Us</a>
<a href="account.html" class="scriptable" id="account">My Account</a>

and

$(document).ready(function(){
     function displayScreen(screenname){
         var url_to_load = screenname + '.html';
         $('#viewer').load(url_to_load);

     }
     $('.scriptable').live("click", function(ev){
         var screenname = $(this).attr('id');
         displayScreen(screenname);
         ev.preventDefault();
     });
});

Facebook does a similar solution, albeit they do it with rel="ajaxify" attribute, but the principle is exactly the same.

(Next step: use some kind of history api to make URLs follow user navigation)

Upvotes: 2

Michael Robinson
Michael Robinson

Reputation: 29498

Seeing as you're using jQuery, ditch the inline onclick and bind instead. This makes your code cleaner, and easier to understand & modify.

<a href="#" id="about" class="viewer">About Us</a>
<a href="#" id="account" class="viewer">My Account</a>
<div class ="article" id="viewer">
    <p>welcome to this awesome site!</p>
</div>
​<script>
$(function(){
    $("a.viewer").click(function(){
        alert($(this).attr('id') + '.html');
        $("div#viewer").load(this.id + '.html')
    });  
})​;
</script>

Working JSFiddle

Upvotes: 1

Horen
Horen

Reputation: 11382

Change onScreen to

function onScreen(id){
   $("div#viewer").load(id + '.html'); 
}

Explanation:

What you did before was attaching a click event to the link when clicked. That means when you clicked for the first time it enabled the link to load your content for the next click thus only working the second time.

Upvotes: 2

Related Questions