Passing a URL to a Javascript function

Question

I've spent a while going through numerous similar questions, but based on the answers given, I'm lead to believe I have this setup correctly - but it's not working, and I'm not sure why.

I'm a newbie with Javascript/jQuery, so it's very possible (or probable!) that I'm missing something completely obvious here.

I have a page with a large 'main' div, and I'm loading content into that using jQuery .load via the navigation. That all works fine. However, some of the target pages are data-heavy, so I'm trying to integrate something in between to indicate to the user that the page is loading. Because there are numerous navigation elements, rather than having multiple functions (i.e one for each navigation element) I'm trying to do it in a single function, like so...

<script type="text/javascript">
function loadPage(pgurl) {
    $('#main').html('<p align="center">Loading...</p>');
    $('#main').load(' +pgurl+ ');
}
</script>

The problem I have is the onclick within the navigation. Prior to this, I had the .load within the onclick (i.e onclick="$('#main').load('/pages/testpage/');") and that worked fine. Now I'm firing the loadPage function via onclick, it's loading a black page (which firebug tells me is the site root).

Here's my onclick code;

<a onclick="loadPage('/pages/testpage/');return false;">Test</a>

I get no errors returned. I can only assume that the loadPage function is getting a zero value, rather than /pages/testpage/ - but I have no idea why!

Pointers much appreciated - much head scratching going on here!

$('#main').load(' +pgurl+ '); should be $('#main').load(pgurl); — Pointy
– Pointy, Commented Jan 10, 2013 at 18:01

SeanCannon · Accepted Answer · 2013-01-10 18:01:26Z

3

It's already a string:

$('#main').load(pgurl);

answered Jan 10, 2013 at 18:01

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

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

1 Comment

Lee Over a year ago

Thank you - of all the things I tried, that wasn't one of them!

epascarello · Accepted Answer · 2013-01-10 18:01:26Z

2

$('#main').load(' +pgurl+ ');

needs to be

$('#main').load(pgurl);

You should probably write it as one line to prevent the second look up.

function loadPage (pgurl) {
    $('#main').html('<p align="center">Loading...</p>').load(pgurl);
}

answered Jan 10, 2013 at 18:01

epascarello

208k20 gold badges206 silver badges246 bronze badges

1 Comment

Lee Over a year ago

Thanks, also for the one line tip!

andy magoon · Accepted Answer · 2013-01-10 18:02:35Z

2

Is that a typo? Try changing:

$('#main').load(' +pgurl+ ');

to

$('#main').load(pgurl);

answered Jan 10, 2013 at 18:02

andy magoon

2,9192 gold badges21 silver badges14 bronze badges

Comments

kidwon · Accepted Answer · 2013-01-10 18:08:37Z

2

Because it seem you're not using the pgurl parameter, this thing in the load brackets is string a text of the variable name :)

$('#main').load(' +pgurl+ ');

use that instead

$('#main').load(pgurl);

Maybe you should look at that if you're not familiar with string concatenation http://www.youtube.com/watch?v=n17aX2TdQRk

edited Jan 10, 2013 at 18:08

answered Jan 10, 2013 at 18:01

kidwon

4,5345 gold badges31 silver badges46 bronze badges

1 Comment

Lee Over a year ago

Thanks - and also thanks for the youtube link, very useful and definitely something I need to brush up on!

Marcin Buciora · Accepted Answer · 2013-01-10 18:05:03Z

1

You have to change following line // you pass string not a variable //

$('#main').load(' +pgurl+ ');

to

$('#main').load(pgurl);

answered Jan 10, 2013 at 18:05

Marcin Buciora

4492 silver badges8 bronze badges

Collectives™ on Stack Overflow

Passing a URL to a Javascript function

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related