CODEWITHSUNDEEP
javascriptbackbone.js
Mehmet Kagan Kayaalp
Mehmet Kagan Kayaalp

Reputation: 565

Changing source of an img

HTML

<div class="r dd-menu-container fs18" id="header-status">
  <a href="#" id="availability" class="dd-trigger" style="display: block; padding: 10px;">
    <span>
       <img id="availabilityImage" src="{{STATIC_URL}}img/crm/online.png">
                    </span>&nbsp;ONLINE
    <span class="icon-down-dir"></span>
  </a>
  <ul class="dd-menu">
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/away.png"></span>&nbsp;AWAY</a>
    </li>
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/inacall.png"></span>&nbsp;IN A CALL</a>
    </li>
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/inabreak.png"></span>&nbsp;IN BREAK</a>
    </li>
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/online.png"></span>&nbsp;ONLINE</a>
    </li>
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/offline.png"></span>&nbsp;OFFLINE</a>
    </li>
  </ul>
</div>

Javascript

menuApp = Backbone.View.extend({
  el: $('nav, #header-middle, #header-status'),
  events: {
    'click .dd-menu li a': 'optionChange',
  },
  optionChange: function(e) {
    var $a = $(e.currentTarget);
    var $img = $a.find('img');
    var selectedItemText = $a.text();
    var
      selectedItemSrc = $img.attr('src');
    $("#availability").text(selectedItemText);
    $("#availabilityImage").attr('src', selectedItemSrc);
  }
});

When I click the menu and select for example "Online" with green ball, I expected to change the img of it from this code. 

$("#availabilityImage").attr('src', selectedItemSrc);

But it does not change my img, it only changes text. Do you have any idea about my problem?

Thanks

Upvotes: 3

Views: 83

Answers (2)

Mehmet Kagan Kayaalp
Mehmet Kagan Kayaalp

Reputation: 565

Simply I solved it with fewer code; 

    optionChange: function(e) {
    var selectedElm = $(e.currentTarget).clone();
    $("#availability").html(selectedElm);
    $(this.dd_menu).removeClass('selected');
}

Thank you :)

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075239

The problem is here:

<a href="#" id="availability" class="dd-trigger" style="display: block; padding: 10px;">
    <span>
    <img id="availabilityImage" src="{{STATIC_URL}}img/crm/online.png">
    </span>&nbsp;ONLINE<span class="icon-down-dir"></span>
</a>

#availabilityImage is inside #availability, so when you do

$("#availability").text(selectedItemText);

you remove the image entirely, so the next line has no effect because that img element is no longer in the DOM.

Options:

  1. Move #availabilityImage outside #availability.

  2. Put a span around the text you want to change, e.g.:

    <a href="#" id="availability" class="dd-trigger" style="display: block; padding: 10px;">
    <span>
    <img id="availabilityImage" src="{{STATIC_URL}}img/crm/online.png">
    </span>&nbsp;<span class="text">ONLINE</span><span class="icon-down-dir"></span>
    <!-- Note ---^^^^^^^^^^^^^^^^^^^------^^^^^^^    -->
</a>

    ...and then do

    $("#availability .text").text(selectedItemText);

    to replace just the text inside that span.

Upvotes: 4

Related Questions