jQuery load with variable instead of element id

Question

i've got a slight jQuery problem. What i want is to load a particular area of an external html doc into a div, instead it loads the whole document, not the specified area.

This is the trigger:

$('a').click(function(){ // my link to trigger the load
    var pid = $(this).attr('href'); //the pid is the links href
    getproject(pid); //trigger the load function, pass variable
});

This is the triggered function:

function getproject(pid) {
    $('#container').load('data.html', pid);
}

So when i click my link, it should load the element with the id (#) specified by the link into my container, but it loads the whole data... i cant seem to find a solution to this.

The Link looks like this (cant use exact markup here): a href="#elementtoload"

The data document looks like this: div id="elementtoload" div id="..."

and loads of more elements with content, which should be loaded by id from the links href.

jbabey · Accepted Answer · 2011-07-08 12:59:33Z

1

Looking at the documentation for $ load, you should be able to do this:

function getproject(pid) {
   $('#container').load('data.html #' + pid);
}

answered Jul 8, 2011 at 12:59

jbabey

46.8k12 gold badges73 silver badges94 bronze badges

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

3 Comments

Michael Over a year ago

.load('data.html #' + pid); works, got damn it works! Thanks you so much!

Felix Kling Over a year ago

@Michael: That does not really make sense... that means you must have the # duplicated in your div's ID.

Jeff Parker Over a year ago

... unless a href="#elementtoload" was also a typo, and it doesn't include the hash in the actual markup.

Jeff Parker · Accepted Answer · 2011-07-08 12:46:51Z

1

http://api.jquery.com/load/

Second section, Loading Page Fragments. For us to say exactly how this is relevant, you'd need to provide an example of the triggering link, and ideally the document you're loading.

answered Jul 8, 2011 at 12:46

Jeff Parker

7,5671 gold badge24 silver badges25 bronze badges

3 Comments

Michael Over a year ago

I know, this is exactly what im trying to accomplish, just with a more dynamic variable

Jeff Parker Over a year ago

@Michael Could you provide an example of a link, and the data being loaded? that should help to clear this up.

Jeff Parker Over a year ago

@Michael That might be your problem then. div id="#elementtoload" should read div id="elementtoload". You don't need a hash in an ID attribute. In fact, that'll break it :P

Perception · Accepted Answer · 2011-07-08 12:48:44Z

0

Not sure what your actual intent is but it seems to me that you are going to alot of trouble to get the pid but then not using it in your load routine. I'm guessing the code should look more like this:

function getproject(pid) {
    $(pid).hide().load('data.html');
}

answered Jul 8, 2011 at 12:48

Perception

80.8k19 gold badges190 silver badges197 bronze badges

3 Comments

Michael Over a year ago

the pid is my links href attribute, why would i want to load my data into that? ;)

Perception Over a year ago

Who knows. Your passing that pid as the second argument into a function that expects a callback - and you didn't post whats in your data.html. You might want to clarify in your original question.

Michael Over a year ago

Updated my post, i thought this was the only way to post variables.

Felix Kling · Accepted Answer · 2011-07-08 13:07:18Z

0

String concatenation:

.load('data.html ' + pid);

Regarding your update:

<div id="#elementtoload"> should be <div id="elementtoload">

edited Jul 8, 2011 at 13:07

answered Jul 8, 2011 at 12:44

Felix Kling

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

6 Comments

Michael Over a year ago

Sorry, it does the exact same for me, loads the whole doc

Felix Kling Over a year ago

@Michael: Does the element with this ID exist in the document? Is it really only the ID or does pid contain other text as well?

Michael Over a year ago

It does exist, yes. There are multiple id's in the document, and i want to load one specific id by link. the pid contains the href (#example), i echoed it via alert, it gets passed nicely and should work.

Felix Kling Over a year ago

@Michael: These are the two only problems I could think of why it does not work. String concatenation should work.

Felix Kling Over a year ago

@Michael: The # should not be in the div's ID. Remove it and try again with string concatenation, it will work then ;)

|

darkheir · Accepted Answer · 2013-08-06 14:33:11Z

0

I was trying something similar and after some hours (...) michael came finally with something that works :) this did the trick for me, the # should be in the url string, like this:

$('#div1').load('data.html #' + x);

edited Aug 6, 2013 at 14:33

darkheir

8,9806 gold badges47 silver badges68 bronze badges

answered Aug 6, 2013 at 14:12

user729073

215 bronze badges

Collectives™ on Stack Overflow

jQuery load with variable instead of element id

5 Answers 5

3 Comments

3 Comments

3 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

3 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related