CODEWITHSUNDEEP
javascriptjquery
Ryan
Ryan

Reputation: 10049

JQuery: Why am I getting an error?

My fiddle is here: http://jsfiddle.net/6yb7cv5c/

Visit the above fiddle, and you will see in the "result" window (bottom right) that when you click the 3 dots it changes into a textbox, you click out and it changes into text again, but clicking it again to change it into a textbox gives this error:

Uncaught TypeError: Cannot read property 'style' of undefined

which is this line:

$(this).find("span")[0].style.display="none";

Upvotes: 1

Views: 52

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

The problem is in the static markup(at the beginning) the em element has a span as its child inside which you have the content, but when you edit it you are not putting it back

$(".editINPUT").blur(function () {
    $(this)[0].style.display = "none";

    if ($(this)[0].value == "") {
        $(this).prev()[0].innerHTML = "<span>...</span>";
    } else {
        $(this).prev().html($('<span />',{text:this.value}))
    }
    $(this).prev().show();

    //var i  = $(this)[0].attr("id");
    var i = $(this)[0].id;

    var ii = $(this)[0].value;
    console.log(i + " " + ii + " " + $("#tempData").data("data"));
});


$(document).ready(function() {
  $(".editDIV").dblclick(function() {
    var $this = $(this),
      text = $this.find('span').text();
    $("#tempData").data("data", text);

    $this.find("span").hide();
    $this.find("input").val(text).show().focus();
  });
  $(".editINPUT").blur(function() {
    var $this = $(this),
      value = this.value;
    $this.hide();

    var $span = $('<span />', {
      text: value == "" ? '...' : this.value
    });
    $this.prev().html($span).show();

    //var i  = $(this)[0].attr("id");
    var i = this.id;

    var ii = this.value;
    console.log(i + " " + ii + " " + $("#tempData").data("data"));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="picFilename editDIV">
  <em><span class="editESPAN" style="display:block;">...</span></em> 
  <input class="editINPUT" style="display:none;" type="text" id="2_1_c" />
</div>
<div class="picFilename editDIV">
  <em><span class="editESPAN" style="display:block;">...</span></em> 
  <input class="editINPUT" style="display:none;" type="text" id="2_2_c" />
</div>
<div class="editDIV">
  <span class="editESPAN" style="display:block;">asd</span>
  <input class="editINPUT" style="display:none;" type="text" id="asdf1" />
</div>
<div class="editDIV">
  <span class="editESPAN" style="display:block;">asd</span>
  <input class="editINPUT" style="display:none;" type="text" id="asdf2" />
</div>
<div id="tempData"></div>

Upvotes: 1

Related Questions