Can't set HTML using jQuery

Question

For some reason, my script isn't writing out the text after I remove the textbox element. Am I incorrectly using the .html or is something else wrong?

        $('.time').click(function () {
            var valueOnClick = $(this).html();
            $(this).empty();
            $(this).append("<input type='text' class='input timebox' />");
            $('.timebox').val(valueOnClick);
            $('.timebox').focus();
            $('.timebox').blur(function () {
                var newValue = $(this).val();
                var dataToPost = { timeValue: newValue };
                $(this).remove('.timebox');
                if (valueOnClick != newValue) {
                    $.ajax({
                        type: "POST",
                        url: "Test",
                        data: dataToPost,
                        success: function (msg) {
                            alert(msg);
                            $(this).html("88");
                        }
                    });
                } else {
                    // there is no need to send 
                    // an ajax call if the number
                    // did not change
                    alert("else");
                    $(this).html("88");
                }
            });
        });

OK, thanks to the comments, I figured out I was referencing the wrong thing. The solution for me was to change the blur function as follows:

            $('.timebox').blur(function () {
                var newValue = $(this).val();
                var dataToPost = { timeValue: newValue };
                if (valueOnClick != newValue) {
                    $.ajax({
                        type: "POST",
                        url: "Test",
                        data: dataToPost,
                        success: function (msg) {
                        }
                    });
                } else {
                    // there is no need to send 
                    // an ajax call if the number
                    // did not change
                }
                $(this).parent().html("8");
                $(this).remove('.timebox');
            });

Did you mean to use $(this).val('88')? In the blur event, this repersents the textbox and "html" of the textbox is going to be empty since the input contains no child html elements inside of it. — Nick Bork
– Nick Bork, Commented Feb 2, 2012 at 16:56
Are you saying this line isn't working? $('.timebox').val(valueOnClick); — j08691
– j08691, Commented Feb 2, 2012 at 17:03

Johan · Accepted Answer · 2012-02-02 16:55:41Z

3

$(this) in your success handler is refering to msg, not $('.timebox') (or whatever element that you want to append the html to)

answered Feb 2, 2012 at 16:55

Johan

35.4k62 gold badges191 silver badges309 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cody Over a year ago

+1, but the $(this) was referring to .timebox, it should have been referring to it's parent - .time. I edited my question to contain the fixed code.

halit · Accepted Answer · 2012-02-02 17:00:42Z

0

$(this) = '.timebox'  element but you have removed it already, 

  $.ajax({
                        type: "POST",
                        url: "Test",
                        data: dataToPost,
                        success: function (msg) {
                            alert(msg);
  $(this).html("88");  // This = msg
                        }

and 

 else {
                    // there is no need to send 
                    // an ajax call if the number
                    // did not change
                    alert("else");
                    $(this).html("88"); // this = '.timebox'  element but you have removed it already, 
                }

answered Feb 2, 2012 at 17:00

halit

1,1381 gold badge11 silver badges27 bronze badges

Comments

SoWhat · Accepted Answer · 2012-02-02 17:03:41Z

The value of this changes if you enter a function. So when u use this in the blur function handler, it actually points to '.timebox'

    $('.time').click(function () {
        var valueOnClick = $(this).html();
        var $time=$(this);//If you want to access .time inside the function for blur
                          //Use $time instead of$(this)

        $(this).empty();
        $(this).append("<input type='text' class='input timebox' />");
        $('.timebox').val(valueOnClick);
        $('.timebox').focus();
        $('.timebox').blur(function () {
            var newValue = $(this).val();
            var dataToPost = { timeValue: newValue };
            $(this).remove(); //Since $(this) now refers to .timebox
            if (valueOnClick != newValue) {
                $.ajax({
                    type: "POST",
                    url: "Test",
                    data: dataToPost,
                    success: function (msg) {
                        alert(msg);
                        $(this).html("88");
                    }
                });
            } else {
                // there is no need to send 
                // an ajax call if the number
                // did not change
                alert("else");
                $(this).html("88");
            }
        });
    });

Collectives™ on Stack Overflow

Can't set HTML using jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related