Question

This is a followup to the solution for this question.

I am using jQuery’s load() function to pull a headline within a div tag from one page to another within my site. This works wonderfully.

The problem is, load() also pulls the div tag itself, which I do not want, as it then gets formatted via CSS like the source page.

Here is the PHP:

function get_team_articles($team_id, $feat=0) {
    .
    .
    .
    while ($row = mysql_fetch_assoc($r)) {
        $page = explode('_', $row['page_id']);
        (is_numeric($page[1]))
            ? $pre = 'wk_'
            : $pre = '';
        $arr[] =    $page[0] . " | " . $pre . $page[1] . ": " . "
                    <a linked_div='news_header'
                    linked_path='../news/" . $page[0] . "/" . $pre . $page[1] . "/" . $page[1] . "_" . $page[2] . ".html'
                    href='index.php?view=news&yr=" . $page[0] . "&wk=" . $page[1] . "&pg=" . $page[2] . "'></a>";
    }

    $articles = implode('<br/>', $arr);
    return $articles;
}

Notice the linked_div and linked_path attributes within the anchor tag, which are used in my jQuery:

function set_team_headlines(){
    $('#section-articles > a').each(function() {
        var a = $(this);
        a.load(a.attr('linked_path') + ' #' + a.attr('linked_div'));
    });
}

Obviously I cannot strip the HTML tags within the anchor tags in PHP, because the server doesn’t have the text within the anchor tags upon loading; so I assume I need to strip the HTML in jQuery after the load() call…and that is what I cannot figure out how to do. 🙂

The result I want is:

<a href="...">My headline</a>

The result I’m getting is:

<a href="..."><div id="news_header">My headline</div></a>

Hopefully this makes sense. I think I provided more detail than I needed to. Thanks!

Answer 1

Navigate down one more level in your .load selector

a.load(a.attr('linked_path') + ' #news_header');

If your news_header id isn’t unique, it isn’t valid to select by that id (ID’s must be unique!)

To get around that issue, use this:

a.load(a.attr('linked_path') + ' #' + a.attr('linked_div') + ' div');

Edit:
.load actually includes the targeted element when appending html instead of appending the target element’s children. I would move to using $.get().

$.get(a.attr('linked_path')).done(function(html) {
    a.text($(html).filter("#news_header").text());
});