JQuery load dynamic url into dynamic list of items

Question

Hi I have a dynamically generated list of items generated by php mysql.

Below a content section there is a link basically "Load Related" link in this case the content is a bunch of thumbnails. I dont want to load the thumbs with the list when the page loads, instead I want to load them with Ajax using JQuery.

The code below loads the data triggered by clicking an anchor "a.related" into one statically named div eg "div#pimgs" however it populates all divs named #pimgs

$('a.related').bind('click', function(e) {           
    var url = $(this).attr('href');
    $('div#pimgs').load(url);
    e.preventDefault();
});

<a class="related32" href="external-content.php?id=32"></a> 
<div id="pimgs32"></div>

I want to load data driven content into a dynimacilly named div eg"div#pimgs123" when you click an anchor named say "a.related123" or into a JQuery generated container directly below the anchor which is clicked.

Can someone help with this? Hope I'm making some sense...

sounds like you're using the same ID for different divs, if that's the case, remember that IDs must be unique in the page — Juan
– Juan, Commented Jul 24, 2014 at 16:58
Yes I'm using the MYSql row id like id="pimgs(my-record-id)" — Jimmy G
– Jimmy G, Commented Jul 24, 2014 at 17:00
<a class="related32" href="external-content.php?id=32"></a> <div id="pimgs32"></div> — Jimmy G
– Jimmy G, Commented Jul 24, 2014 at 17:06

rlatief · Accepted Answer · 2014-07-24 17:07:47Z

2

Can you start from this?

$( 'a.related' ).bind( 'click', function( e ) {  
    var url = $( this ).attr( 'href' );
    var id = $( this ).attr( 'data-id' );
    $( 'div#pimgs' + id ).load( url );
    e.preventDefault();
} );

In your dynamically generated <a>, put the numbers into data-id attribute (ref).

So maybe:

 <a href="foo" class="related" data-id="<?php echo $id; ?>">bar</a>
 <div id="pigms<?php echo $id; ?>"></div>

answered Jul 24, 2014 at 17:07

rlatief

7225 silver badges15 bronze badges

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

1 Comment

Jimmy G Over a year ago

This worked a dream.... never thought about using a data-id attribute.. Thanks rlatief

PeterKA · Accepted Answer · 2014-07-24 17:18:37Z

0

demo

Don't use duplicate ID's.

$('a[class^="related"]').bind('click', function(e) {
    e.preventDefault();
    var id = $(this).attr('class').split(' ').filter(function(v) {
        return v.indexOf('related') > -1;
    })[0];           
    var url = $(this).attr('href');
    $('#' + id).load(url);
});

edited Jul 24, 2014 at 17:18

answered Jul 24, 2014 at 17:05

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

JQuery load dynamic url into dynamic list of items

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related