jqueryajaxhtml-tablesrctargeting

Ajax GET HTML returning undefined 'src' for images

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.

Solution

  • 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');