Ajax GET HTML returning undefined 'src' for images

Question

I have worked with this before and had no problem targeting div's but this time I am targeting images buried in a table that has been on the intranet site for a long time. I finally found the code for it and added a class name to the table called $('.targetTable'). Now I am trying to extract certain elements from the table to display inside a div on my new page. Here is the code that pulls the HTML from the table:

$(document).ready(function(){

$mission = $('#targetDiv');

$.ajax({
  url: "http://example.com/values/values.cfm?val=commitment",
  cache: false
}).done(function( html ) {
    $div = $('table.targetTable', html);

    $img = $div.children('tr:eq(3)').children('td').find('img').attr('src');

    $mission.append('<img src="'+$img+'" />');

});



});

Here is the table that is extracted by the AJAX call:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>commitment</title>
</head>
<body>


<table border="0" style="border: 1px solid gray;" cellspacing="0" class="targetTable">
    <tr style="background-color: #FFDDBB;">
        <td align="center" style="padding: 8px;">

            <img src="../mp_images/values/commitment_med.jpg" width="600" height="439">
        </td>
    </tr>

    <tr style="background-color: #FFDDBB;"> 
        <td valign="top" style="padding: 8px;">     
                <div style="text-align:center; letter-spacing: 4px; font-size: 140%; font-weight: bold; margin-bottom: 30px;">COMMITMENT</div>

                <div style="font-family:Georgia, 'Times New Roman', Times, serif; font-size: 100%">
                We recognize Commitment as a fundamental cornerstone underpinning our everyday activities.  Our commitment is a steadfast devotion to our people, our licensees, and to the public to responsibly carry out the mission of the agency, unwavering from the highest standards of safety, excellence, and professionalism.
                </div>
        </td>

    </tr>

    <tr style="background-color: #FFDDBB;">
        <td style="border-bottom: 1px solid gray;">&nbsp;

        </td>
    </tr>


    <tr bgcolor="white">
        <td align="center" colspan="3" style="padding: 8px;">
            <a href="../values/values.cfm?val=Commitment" ><img src="../mp_images/values/commitment_small.jpg" border="0" /></a>
            <a href="../values/values.cfm?val=Cooperation"><img src="../mp_images/values/cooperation_small.jpg"  border="0" /></a>
            <a href="../values/values.cfm?val=Excellence"><img src="../mp_images/values/excellence_small.jpg"  border="0" /></a>
            <a href="../values/values.cfm?val=Integrity"><img src="../mp_images/values/integrity_small.jpg" border="0" /></a>
            <a href="../values/values.cfm?val=Openness"><img src="../mp_images/values/openness_small.jpg" border="0" /></a>
            <a href="../values/values.cfm?val=Respect"><img src="../mp_images/values/respect_small.jpg" border="0" /></a>
            <a href="../values/values.cfm?val=Service"><img src="../mp_images/values/service_small.jpg" border="0" /></a>
            <a href="../values/values.cfm?val=Mission"><img src="../mp_images/values/Mission_small.jpg" border="0" /></a>
            <a href="../values/values.cfm?val=Vision"><img src="../mp_images/values/Vision_small.jpg" border="0" /></a>
        </td>
</tr>


</table>
</body>
</html>

Now every time I target the img src it comes back as undefined. Am I targeting wrong or something else like doctype or CFM compatibility? Also for some reason I cannot figure out is that Chrome throws errors. It is telling me that my AJAX has turned all the relative paths in the HTML to absolute paths but the absolute paths point to my page instead of the old page and image locations. If someone can figure that one out I will point you to a page where I asked that question previous and you will get a double check mark.

Sorry, it is there now I changed some things around to better make it understood what I was looking for... BTW that is the incoming HTML not my HTML. My HTML is generated in the append() tag — Erik Grosskurth, Apr 09 '13 at 15:55

Kevin B · Accepted Answer · 2013-04-09T15:56:11.103

3

The table is a direct child of body, and when body gets removed (which it will be) the table will be a top level element. Change

$div = $('table.targetTable', html);

to

$div = $(html).filter('table.targetTable');

and to avoid other issues, use:

$div = $($.parseHTML(html)).filter('table.targetTable');

edited Apr 09 '13 at 15:56

answered Apr 09 '13 at 15:47

Kevin B

94,570
16
163
180

You also should be declaring those variables somewhere instead of letting them get to global scope, naming them appropriately would be a good idea too. – Kevin B Apr 09 '13 at 15:48
The image source is still coming back as undefined. – Erik Grosskurth Apr 09 '13 at 15:49
The $img variable is what is being returned as 'Undefined' – Erik Grosskurth Apr 09 '13 at 15:51
@DJERock do normal debugging. Does `$div` contain the table? does the first part of the $img = ... selector select the correct table row? does the 2nd part select the correct td? does the 3rd part select the correct image? – Kevin B Apr 09 '13 at 15:53
Small problem there, I am on a govt intranet so no firebug, yeah I KNOW, but any suggestions on how I can check this? If I put this in the done function: $mission.append(html); it will actually put the table in my div but all the image links will be broken – Erik Grosskurth Apr 09 '13 at 15:57
the image links are relative, most likely the relative paths aren't correct in the page where you are loading it. – Kevin B Apr 09 '13 at 16:03
they show up fine, on your page? or the original page where you are getting the content from. – Kevin B Apr 09 '13 at 16:05
WOW MAN SO THIS SNEAKY TBODY TAG WHICH DOESN'T SHOW UP IN THE PAGE SOURCE WAS CAUSING IT. I GUESS IT WAS INSERTED AFTER THE PAGE LOAD. SNEAKY SNEAKY BASTARD!!! #frontEndForLife #IHateTables – Erik Grosskurth Apr 09 '13 at 16:11
1

@DJERock you can thank your browser for that, making html valid and all, :p – Kevin B Apr 09 '13 at 16:18

Ajax GET HTML returning undefined 'src' for images

1 Answers1