Question

I am getting an $("<div/>").text(value).html is not a function is not a function error in the code below:

function htmlEncode(value) { 
    return $('<div/>').text(value).html(); 
}

function startImageUpload(imageuploadform, imagefilename){

    $('.imagef1_cancel').eq(window.lastUploadImageIndex).html(
        '<div>' + 
        htmlEncode(imagefilename) + 
        '<button type="button" class="imageCancel" cancel_image_file_name="' + 
        imagefilename + 
        '">CANCEL</button><br/><hr/></div>'
    );

    $('.imagef1_cancel').eq(window.lastUploadImageIndex)
        .find(".imageCancel")
        .on("click", function(event) {
            var cancel_image_file_name = $(this).attr('cancel_image_file_name');
            console.log(cancel_image_file_name) 
            jQuery.ajax("cancelimage.php?imagefilename=" + cancel_image_file_name)
            return stopImageUpload(2, cancel_image_file_name);
    });       
    return true;
}

But what I don’t get iis that it works in with the code below which is very similar.

function htmlEncode(value) { 
    return $('<div/>').text(value).html(); 
}

function stopImageUpload(success, imagefilename) {
    imagecounter++;
    $('.listImage').eq(window.lastUploadImageIndex).append(
        '<div>' + 
        htmlEncode(imagefilename) +
        '<button type="button" class="deletefileimage" image_file_name="' +
        imagefilename + 
        '">Remove</button><br/><hr/></div>'
    ); 

    var _imagecounter = imagecounter;

    $('.listImage').eq(window.lastUploadImageIndex)
        .find(".deletefileimage")
        .on("click", function(event) {

            var image_file_name = $(this).attr('image_file_name');

            jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)
                .done(function(data) {
                    $(".imagemsg" + _imagecounter).html(data);
                }
            );
            $(this).parent().remove();
        }
    );    
    return true;   
}

Why is this and how can the error be fixed?

Answer 1

I’m guessing, from that error, that you are at some point passing in a jQuery object into your method htmlEncode().

When you use the text method of jquery, it needs to be text or something that can be interpreted as text. (for instance a string of HTML would be input and interpreted as just a normal string)

take a look at this jsFiddle

or just put this into your console :

$('<div/>').text($('<div/>')).html()

I think your error actually comes from where you are calling “startImageUpload” and what you are passing into it. I would have to see the rest of your code to be sure.