Search jQuery

jQuery Forum

Using jQuery

iamrichard

Loading a div by id based on href of link

in Using jQuery • 11 years ago

Apologies if this is really basic stuff, and it probably is!

I'm using the jmapping plugin and it's all working great - when you click on a location link in the side bar the map pans to the location. However what I also want to happen when I click the location link is to load more information about the location onto the page.

The idea is to load the div from infodivs.aspx which has an id that matches the href of the link that was clicked. I can make the whole page load without issue but I can't get my head around the syntax for identifying the href of the clicked link and then inserting that into the load statement as a div id.

I've tried this.href but if that's actually the right approach, I haven't phrased it right so far. Any help gratefully received, I've hit a bit of a mental block!

Here's the code:

$("a.map-link").click(function () {
$('div#moreinfo').empty().load('infodivs.aspx what goes here?');
});

Replies(9)

kerry.kim..

Re: Loading a div by id based on href of link

11 years ago

$("a.map-link").click(function () {
var id = '#' + $(this).attr('href');
$('div#moreinfo').empty().load('infodivs.aspx ' + id);
});

iamrichard

Re: Loading a div by id based on href of link

11 years ago

Thanks for that - I'm still not quite there when I try to implement it but the logic of it makes sense...

At the moment it's still loading the whole page instead of just the div, it seems to be ignoring the +id.

If I test a manual link like this it does work as expected:

$("a.map-link").click(function () {
$('div#moreinfo').empty().load('infodivs.aspx #3');
});

youri.bok

Re: Loading a div by id based on href of link

11 years ago

Why is there a space in your url? That can't be good. You might be looking for the data option on ajax calls. Instead of the shortcut $.load(), look into $.ajax, $.get, or $.post. You can very easily add additional data to be sent via AJAX, in this case the id.

iamrichard

Re: Re: Loading a div by id based on href of link

11 years ago

As I understand it the space is there to tell Jquery that the first part is the page url and the second part is the element of that page that you want to load. As above it works exactly as expected and loads just the div if I manually put in #3, but it seems to ignore the variable 'id' when I use that instead. It feels like it's very nearly there to me and I just have a bit of punctuation in the wrong place...

youri.bok

Re: Re: Loading a div by id based on href of link

11 years ago

Look at the documentation: http://api.jquery.com/load/

You cannot load only a certain element of a page via AJAX...

To show only part of the HTML of a page you need to use PHP conditionals or similar...

If that was not what you meant, look through that documentation and find what you need.

iamrichard

Re: Re: Loading a div by id based on href of link

11 years ago

Ok now I'm confused :)

I thought that you could show part of the HTML of a page using load,
ie the part titled on the load page description titled 'Loading Page Fragments' - which describes how it fetches the whole page, then filters out the element you requested and discards the rest.

This is what I'm trying to do and while I can do manually by specifying a particular id, it won't work with a variable. Are you saying that load just isn't set up to accept a variable? Apologies if I'm being dense.

kerry.kim..

Re: Re: Loading a div by id based on href of link

11 years ago

@iamrichard You're right. jQuery is capable of filtering out based on selectors you pass it through an ajax call. You're also right that it has to load the entire page first and then grab the element(s) you want. I'm not sure why it's ignoring the id part. If you print the string that's being passed to the ajax call, is it formatted right? Maybe you can provide some more code.

youri.bok

Reageren: Re: Loading a div by id based on href of link

11 years ago

Interesting, seems you are right. I haven't seen that option before.

It seems like you can just supply a selector there, using # means it will search for an id on the fetched page. Make sure the element you want to load actually has that id...

iamrichard