Image is not refreshed after changing 'src' attribute

Question

I would like to refresh the image after selecting another item from menu:

<html>
  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>

    $(function() {
      $( "#selectable" ).selectable({
        stop: function() {
          $( ".ui-selected", this ).each(function() {
            // Works on FF; doesn't work on Chrome and IE
            d = new Date();
            $("#chart_image").prop("src", this.id + "?" + d.getTime());
          });
        }
      });
    });

    $(function() {
      // Selects the first <li> element
      $( "#selectable" ).selectable().children().first().addClass('ui-selected');
    });

    </script>

  </head>
  <body>
    <?php

      header('Cache-Control: no-cache, no-store, must-revalidate');
      header('Pragma: no-cache');
      header('Expires: 0');

      $dirname = "charts/";
      $images = glob($dirname."*.svg");

      echo '<ol id="selectable">';
      foreach($images as $image) {
        echo '<li class="ui-widget-content" id="'.$image.'">'.basename($image, ".svg").'</li>';
      }
      echo '</ol>';

      echo '<figure><embed id="chart_image" type="image/svg+xml" src="'.$images[0].'"></embed></figure>';
    ?>
  </body>
</html>

The above code works well on FF. However, on Chrome and IE nothing happens after selecting different menu items. I have tried the trick with appending current timestamp to the end of the file. I also tried with the cache headers - no results.

Thanks!

Tried changing to `$("#chart_image").attr("src", this.id + "?" + d.getTime());` ? — Justinas, Jul 10 '15 at 12:10
As far as I am thinking Caching is not the issue here, cause caching is done for same url, here url is changing so caching won't come in picture — Parag Bhayani, Jul 10 '15 at 12:11
@Justinas : That would not work, if it was other way around then might worked -> http://stackoverflow.com/questions/5874652/prop-vs-attr — Parag Bhayani, Jul 10 '15 at 12:12
Unrelated, but, why do you need an `.each()` when you're setting the source of just one image? — lshettyl, Jul 10 '15 at 12:17
I don't know PHP, but are you sure you want to use `this.id` for the `src`? By any chance could it be `$(this).text()`? See this fiddle which works just fine: http://jsfiddle.net/abhitalks/jfm1gqrf/1/ — Abhitalks, Jul 10 '15 at 12:21
Parag, here's the jsfiddle: http://jsfiddle.net/ju2L1fyp/ . I just realized that the fiddle works fine. What's the difference between the fiddle and the code I have just provided? — mateusz.b, Jul 10 '15 at 12:28
Abhitalks, I have the src stored in 'id'. But thanks for an idea ;) This is weird - jsfiddle works nice while in the application I still can't refresh the picture. Can it be something with the svg picture? Ishettyl, thanks for jsfiddle, but it still doesn't work on my browser — mateusz.b, Jul 10 '15 at 12:36
@mateusz.b: That is strange. `svg` works just fine. Try changing the `type` to `image/png` to treat that as a png. It should work as-is. See this: http://jsfiddle.net/abhitalks/jfm1gqrf/2/ — Abhitalks, Jul 10 '15 at 13:16

lshettyl · Accepted Answer · 2015-07-10T12:52:48.473

So, the problem seems to the embed type type="image/svg+xml" Firefox seems to support it for svgs and normal images such as jpg, gif etc. whereas other browsers don't. So, one way to make it work on all browsers is to change the type to type="image/jpeg" as long as the image is not an svg. If all your images are of type svg, then use type="image/svg+xml". Another way to deal with this is to simply skip the type attribute or use an img tag.

I have also:

Removed double initialization of selectable
Removed .each() as it's unnecessary as you'd set the last selected id as the embed source

Take a look at the below code where I used type="image/jpeg and it works on Chrome/FF/Safri etc.

$(function() {
    $( "#selectable" ).selectable({
        stop: function() {
            $("#chart_image").attr({
                "src": $( ".ui-selected", this )[0].id
            });
        }
    })
    .children().first().addClass('ui-selected');
});

  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<ol id="selectable">
  <li class="ui-widget-content" id="https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Blue_morpho_butterfly.jpg/531px-Blue_morpho_butterfly.jpg">Item 1</li>
  <li class="ui-widget-content" id="http://www.potentash.com/wp-content/uploads/2013/03/butterfly.jpg">Item 2</li>
  <li class="ui-widget-content" id="http://smwv.org/wp-content/uploads/2013/11/blue-butterfly2.png">Item 3</li>
</ol>
    
<figure><embed id="chart_image" type="image/jpeg" src="http://smwv.org/wp-content/uploads/2013/11/blue-butterfly2.png" /></figure>

Thank you very much - it was the problem with svg graphics. Switching to solved the problem! — mateusz.b, Jul 10 '15 at 13:13

score 0 · Answer 2 · answered Jul 10 '15 at 12:41

You can use selecting option

  selecting: function(event, ui) { 

    last_selected_value = ui.selecting.value;
    last_selected_id = ui.selecting.id;
            $("#chart_image").attr({
            "src": last_selected_value
        });

   }

Check out the JS Fiddle

Hope this helps

score 0 · Answer 3 · answered Jul 10 '15 at 12:49

0

You need to change the src attribute, not the property. According to the jQuery documentation for the prop() method, it should be used to set the following: selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, or defaultSelected.

So the solution is:

$("#chart_image").attr('src', this.id + "?" + d.getTime());

answered Jul 10 '15 at 12:49

bcr

3,791
18
28

The jQuery doc says "*it should be used*" not "*it should **only** be used*". You also failed to read further on - "*Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.*" – Abhitalks Jul 10 '15 at 13:05
@Abhitalks so what is your suggestion? To use the `prop()` method that clearly does not rerender the image over and over until magic happens? Changing image attributes is literally the example used in the [documentation for attr()](http://api.jquery.com/attr/) – bcr Jul 10 '15 at 13:29

Image is not refreshed after changing 'src' attribute

3 Answers3