CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvc-5
Austin
Austin

Reputation: 3080

Set img src with JQuery in View - mvc 5

In my View I show an image

<img src="~/Content/img/icon@(item.levelList.rank.Trim()).png" alt="@item.levelList.rank.Trim()" height="40" width="45">

I also have two spans, one is initially shown (the image above) and the other is hidden (an edit feature).

When Edit is clicked, the spans switch visibility, the img above is hidden, and a dropdownlist appears instead with additional image values.

When I click Save, the dropdownlist is re-hidden, the img is re-shown, and then the value of the dropdownlist is applied to the img's span - but is in text form not image form.

My problem is with the following code that set's the dropdownlist value to the img span value.

$(element).closest("td").prev("td").find("span.item-display")
.html($(element).closest("td").prev("td").find("span.item-field").find("option:selected").text().trim());

I have always used this to update text input values, never an image source value and so I am not sure how to turn that ^ into something that will update the img src.

Here is the View snippet showing both spans that are hidden and shown.

<td class="col-xs-2" style="vertical-align:middle">
     <span class="item-display">
           <span style="font-size: 17px">
                <img src="~/Content/img/icon@(item.levelList.rank.Trim()).png" alt="@item.levelList.rank.Trim()" height="40" width="45">
            </span>
      </span>
      <span class="item-field">
            @Html.DropDownList("elo", null, "Choose...", new { @id = "userElo", @class = "col-xs-10", @Style = "padding-left:0px" })         
      </span>
</td>

So I am looking for a way to update my img src tag, with the chosen dropdownlist value, via JQuery.

You may see the results by checking the live site here:MySite If you Click "Edit" then change the ELO rank and hit "Save" you will see that text takes it place, not an image. (no actual saves are occurring either so do not worry about mis-editing something)

Upvotes: 0

Views: 3442

Answers (1)

olingern
olingern

Reputation: 493

Visited your site briefly, but didn't dig into too deep. I think you want the jquery change event on your select box.

Edit: looked at your above HTML closer, and noticed you don't have any ID or class on the image. You'll need that to reference the image source change on the select change event

<img id="GiveMeAnID" src="~/Content/img/icon@(item.levelList.rank.Trim()).png" alt="@item.levelList.rank.Trim()" height="40" width="45">

For example, where you have this select box on your page

<select style="padding-left:0px" class="col-xs-10" id="userElo" name="elo"><option value="">Choose...</option>
<option value="1">Unranked       </option>
<option value="2">Bronze         </option>
<option value="3">Silver         </option>
<option value="4">Gold           </option>
<option value="5">Platinum       </option>
<option value="6">Diamond        </option>
<option value="7">Challenger     </option>
</select>

You can add code for the change event of the select element like below to change the image source.

$( "#userElo" ).change(function() {
    $("#yourimageID").attr("src","/yourpath/yourimage.jpg");
});

Upvotes: 2

Related Questions