Bran Bran - 6 months ago 30
Javascript Question

Jquery to replace a specific image with an iframe

I am trying to customize a bio page for an employee where I work, and my jQuery I've written isn't working and I'm lost on how to get it to work. The employee bios get their info from a database, and within these pages are thumbnail images of the employee's work samples, which get their specifics (such as "RobertThumb1.jpg") from the database. I don't want to rewrite the html or php on the page just to accommodate one employee, and then have to go back in and fix 1000+ employees' database entries for that field, so I want to use jQuery to replace his thumbnail image with an iframe from the site he puts his music on. I've made a jsfiddle of this problem using fake info (other than the real iframe), and you can see what I've done there. https://jsfiddle.net/0vfyduk2/12/

Here's the html from my fiddle:

<!--this works-->
<span id="phone"><strong>Phone:&nbsp; </strong>999-999-Robert</span>
<p>&nbsp;</p>
<!--this works-->
<a id="firstthumb" target="_blank" href="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif">Gary</a>
<p>&nbsp;</p>
<!--this is the one that my jquery isn't working on-->
<a id="secondthumb" target="_blank" href="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif"><img class="publicationthumbnails contrast2" style="width:19%; height:auto; float:left; margin-right:1%; padding:0;" src="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif"></a>
<p>&nbsp;</p>
<!--for the 4th one, which doesn't work either-->
<a id="thirdthumb" target="_blank" href="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif"><img class="publicationthumbnails contrast2" style="width:19%; height:auto; float:left; margin-right:1%; padding:0;" src="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif"></a>


and the jQuery is below

$(document).ready(function() {

/*this works (if you remove my code below that does not work)*/
$('span#phone:contains("999-999-Robert")').html("<strong>Phone:&nbsp; </strong>222-333-9999");

/*this works (if you remove my code below that does not work)*/
$('a#firstthumb:contains("Gary")').html("bob");

/*this is what I need help with to make it work*/
$("a#secondthumb:contains('img[src*="profile-placeholder.gif"]')").html("<iframe width="100%" height="265" scrolling="no" frameborder="no" src="https://www.reverbnation.com/widget_code/html_widget/artist_2472492?widget_id=55&pwc[included_songs]=1&context_type=page_object&pwc[size]=small&pwc[color]=light" style="width:0px;min-width:100%;max-width:100%;"></iframe>");

/*this is a simplified version without the iframe code of what isn't working above, and it doesn't work either*/
$("a#thirdthumb:contains('img[src*="profile-placeholder.gif"]')").html("Larry");

});


Can a jQuery expert figure out what I'm doing wrong? I can't even get the selector to even select what I'm trying to select.

Answer

The :contains() selector is predominately used for text content and not actual selectors. If you wanted to use in that manner, simply target the element as expected and then set it's contents :

// Find find all of the img tags that meet your criteria and replace the parents
$("a#secondthumb img[src*='profile-placeholder.gif']").each(function(){
    // Find the closest <a> tag and set the contents
    $(this).closest('a').html("<iframe width='100%' height='265' scrolling='no' frameborder='no' src='https://www.reverbnation.com/widget_code/html_widget/artist_2472492?widget_id=55&pwc[included_songs]=1&context_type=page_object&pwc[size]=small&pwc[color]=light' style='width:0px;min-width:100%;max-width:100%;'></iframe>");
});

Likewise, if you just wanted to replace the images themselves, you could just use :

$("a#secondthumb img[src*='profile-placeholder.gif']").html(...);

Additionally, you appeared to have some quote-related mixups (i.e. unescaped quotes or mismatched single and double quotes that could have caused jQuery to have trouble reading your content.

Example

enter image description here

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <!--this works-->
  <span id="phone"><strong>Phone:&nbsp; </strong>999-999-Robert</span>
  <p>&nbsp;</p>
  <!--this works-->
  <a id="firstthumb" target="_blank" href="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif">Gary</a>
  <p>&nbsp;</p>
  <!--this is the one that my jquery isn't working on-->
  <a id="secondthumb" target="_blank" href="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif">
    <img class="publicationthumbnails contrast2" style="width:19%; height:auto; float:left; margin-right:1%; padding:0;" src="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif">
  </a>
  <p>&nbsp;</p>
  <!--for the 4th one, which doesn't work either-->
  <a id="thirdthumb" target="_blank" href="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif">
    <img class="publicationthumbnails contrast2" style="width:19%; height:auto; float:left; margin-right:1%; padding:0;" src="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif">
  </a>
  <script>
    $(function() {
      /*this works (if you remove my code below that does not work)*/
      $('span#phone:contains("999-999-Robert")').html("<strong>Phone:&nbsp; </strong>222-333-9999");

      /*this works (if you remove my code below that does not work)*/
      $('a#firstthumb:contains("Gary")').html("bob");

      /*this is what I need help with to make it work*/
      $("a#secondthumb img[src*='profile-placeholder.gif']").each(function() {
        $(this).closest('a').html("<iframe width='100%' height='265' scrolling='no' frameborder='no' src='https://www.reverbnation.com/widget_code/html_widget/artist_2472492?widget_id=55&pwc[included_songs]=1&context_type=page_object&pwc[size]=small&pwc[color]=light' style='width:0px;min-width:100%;max-width:100%;'></iframe>");
      });

    });
  </script>
</body>

</html>