jquery and javascript if...else problem

Question

I've been trying to figure this one out for some time now, but no luck.

I use simplest jquery and ajax to load content into my page when navigation bar or sidebar links are clicked. I simply put this in document.ready:

$("#nav ul li a").click(function(){content_load($(this).attr('href'));return false;});

My content_load function is this:

function content_load(toLoad)
  {
  $('#content').hide('fast',loadContent);  
  function loadContent() 
    {  
    $('#content').load(toLoad,'',function(){showNewContent();tb_init('a.thickbox, area.thickbox, input.thickbox');});  
    }  
    function showNewContent()
      {  
      $('#content').show('fast');
      }  
   }

This works!

But...when I put simple if...else statement in function_load(), instead of simple ajax load, I get navigated to the page I wanted to load with load() function. It's like "return false" is ignored...

So this is the code that "breaks" everything:

function content_load(toLoad)
  {
  if(toLoad=="content/page1.html") {//do something}
  else
    { 
    $('#content').hide('fast',loadContent);  
    function loadContent() 
      {  
      $('#content').load(toLoad,'',function(){showNewContent();tb_init('a.thickbox, area.thickbox, input.thickbox');});  
      }  
      function showNewContent()
        {  
        $('#content').show('fast');
        }  
     }
   }

Any idea why???

Thanks! Newman

Well I know this is always a matter of taste, but that indentation style is really hard to read. — Pointy
– Pointy, Commented Mar 14, 2011 at 11:06
Ya DO know that the {// do something} comments OUT the close bracket. — Mark Schultheiss
– Mark Schultheiss, Commented Mar 14, 2011 at 12:40

Felix Kling · Accepted Answer · 2011-03-14 11:24:37Z

2

Maybe it is a weird scope problem. Put the functions outside the if...else statement, or even better, use anonymous functions:

function content_load(toLoad) {
   if(toLoad=="content/page1.html") {
      //do something
   }
   else { 
      $('#content').hide('fast', function() {
         $(this).load(toLoad, function() {
             $(this).show('fast');
             tb_init('a.thickbox, area.thickbox, input.thickbox');
         });
      });
   }
}

That you are redirected to the page means that your function errors somewhere. If you have code where you have //do something, you should examine it too.

The error console of your browser should give you at least some information.

Instead of return false you can also call the appropriate methods of the event object:

$("#nav ul li a").click(function(event){
    // event.preventDefault();  <-- put here to always prevent reload, 
    //                              even on error (but should be avoided)
    content_load(this.href);
    event.preventDefault();
});

edited Mar 14, 2011 at 11:24

answered Mar 14, 2011 at 11:07

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

4 Comments

Newman Over a year ago

This works!!! Thanks you so much! It seems there was some scope problem. You saved my day ;)

Felix Kling Over a year ago

@Newman: You're welcome :) Actually I'm not sure why, but I know that Firefox treats functions created in control statements differently. In which browser did you test it? Don't forget to accept this answer by clicking the tick outline next to it ;)

Newman Over a year ago

Iceweasel :) I also changed "return false" to "e.preventDefaul()"...so I guess that's it. Thanks again!

Felix Kling Over a year ago

@Newman: Well, that could be it. Afaik Iceweasle is more or less Firefox.

sushil bharwani · Accepted Answer · 2011-03-14 10:55:22Z

2

is it that your comment in first line commenting out the closing brace of your if statement

answered Mar 14, 2011 at 10:55

sushil bharwani

30.2k30 gold badges98 silver badges130 bronze badges

Comments

The_Butcher · Accepted Answer · 2011-03-14 10:54:25Z

1

Don't know if that's a typo but the closing parentheses is commented out.

//do something}

That will cause it to break

answered Mar 14, 2011 at 10:54

The_Butcher

2,4982 gold badges27 silver badges38 bronze badges

12 Comments

The_Butcher Over a year ago

yes, I would suggest deleting everything and just putting an if else statement with alerts in each branch - alert('inside if branch') and alert('inside else branch'). We will then see if the return false works(which it should).

Newman Over a year ago

Already tried it, this also works. In this it doesn't navigate to the other page, it just pops up the alert. It's really strange, as I said, it seems like that "return false" gets ignored. I don't know...

The_Butcher Over a year ago

can you have a function within a function in js?

Newman Over a year ago

Well, it works without if-else. And these are callback functions, dont know any other way to use them...

The_Butcher Over a year ago

wow! you learn new things every day!! What is the advantage of this?

|

Collectives™ on Stack Overflow

jquery and javascript if...else problem

3 Answers 3

4 Comments

Comments

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related