jQuery .replaceWith() method not working

Question

I have a problem using the .replaceWith(), it's working for the first blur, but not for the second one, here's my code :

$("#wilaya").blur(function () {
  $("#wilayaRow .tdrequired").css("color", "#333");
  if ($("#wilaya").val() !== "Selectionnez une wilaya...") {
    $("#wilayaRow .tdrequired label").replaceWith("<img src='../../Images/check-mark-md.png' width='20px' height='28px'></img>");
  }
  else {
    $("#wilayaRow .tdrequired label").replaceWith("<img src='../../Images/red-wrong-cross-md.png' width='20px' height='28px'></img>");
  }
});

And here's the html part :

<table>
  <tr id="wilayaRow">
    <td class="tdtitle">
      <label for="wilaya">Wilaya d'immatriculation</label>
    </td>
    <td class="tdinput">
      <select name="wilaya" id="wilaya">
        <option>Selectionnez une wilaya...</option>
        <option>Khalil</option>
        <option>Moh</option>
      </select>
    </td>
    <td class="tdrequired">
      <label>*</label>
    </td>
  </tr>
  ...
</table>

Thanks for your help in advance :)

Can you demonstrate the problem in a fidle (the best would be to use the *code snipped* feature of SO)? — Denys Séguret, Dec 19 '15 at 13:54
Possible duplicate http://stackoverflow.com/questions/19506502/jquery-replacewith-not-working — kartikmaji, Dec 19 '15 at 13:58
I just figured it out, when replacing with , there's no more label to replace an image with! Hope that this could help... — Khalil Hamani, Dec 19 '15 at 14:02
@Tushar I actually tried printing the .val() on an alert message and it gives me the text in the option! Thank you. — Khalil Hamani, Dec 19 '15 at 14:04
@Tushar close, but the if statement is a "not equal to" so the clause will always evaluate true. — Sami, Dec 19 '15 at 14:05
@Sami aah! didn't notice that, and now can't edit the comment :( — Tushar, Dec 19 '15 at 14:05
The `` tag is self-closing (an empty tag), it shouldn't have a closing tag e.g. `` — SidOfc, Dec 19 '15 at 14:09

Khalil Hamani · Accepted Answer · 2015-12-21T18:36:25.547

Here's the working jQuery code I just implemented :

    $("#wilaya").blur(function () {
            $("#wilayaRow .tdrequired").css("color", "#333");
            if ($("#wilaya").val() !== "Selectionnez une wilaya...") {
                    $("#wilayaRow .tdrequired label").replaceWith("<label><img src='../../Images/check-mark-md.png' width='20px' height='28px'></img></label>");
            }
            else {
                    $("#wilayaRow .tdrequired label").replaceWith("<label><img src='../../Images/red-wrong-cross-md.png' width='20px' height='28px'></img></label>");
            }
    });

If I have to replace the label with an image, I must put it in a label, so the next replacement could be possible. Otherwise, the label tag won't be found (because it doesn't exist anymore), and it won't be replaced by an image, or anything else.

Also the use of :

    $("#wilaya").prop("selectedIndex") === 0

As a condition is better.

score -1 · Answer 2 · answered Dec 19 '15 at 14:43

$("#wilaya").blur(function () {
  $("#wilayaRow .tdrequired").css("color", "#333");
  if ($("#wilaya").val() !== 0) {
    $("#wilayaRow .tdrequired label").replaceWith("<img src='../../Images/check-mark-md.png' width='20px' height='28px'></img>");
  }
  else {
    $("#wilayaRow .tdrequired label").replaceWith("<img src='../../Images/red-wrong-cross-md.png' width='20px' height='28px'></img>");
  }
});

this is jquery part.

 <table>
  <tr id="wilayaRow">
    <td class="tdtitle">
      <label for="wilaya">Wilaya d'immatriculation</label>
    </td>
    <td class="tdinput">
      <select name="wilaya" id="wilaya">
        <option value="0">Selectionnez une wilaya...</option>
        <option value="1">Khalil</option>
        <option value="2">Moh</option>
      </select>
    </td>
    <td class="tdrequired">
      <label>*</label>
    </td>
  </tr>
</table>

this is html part. try out. i hope this helps.

jQuery .replaceWith() method not working

2 Answers2