Javascript：如何将带有html内容的变量注入附加的数据属性？

Question

I wish to insert a variable that contains an HTML code in a DATA attribute (a href ... data-content= ...) it not work very well because the code inserted deletes some characters and suddenly it does not display properly.

Here is the code used

        function uploadProgress(file)
        {

            var ext = file.split('.').pop();
            var fileUrl = '/playerFiles/'+file;

            if(ext == 'mp4')
            {
                var preview = '<video autoplay loop muted width="250"><source src="'+fileUrl+'" type="video/mp4">Your browser does not support the video tag.</video>';
            }
            else
            {
                 var preview = '<img src="'+fileUrl+'" width="250">';
            }

            var showtime = $('#'+id).find('td.showtime');
            showtime.html('<a href="#" class="preview" data-toggle="popover" data-html="true" data-content="'+preview+'"><i class="fa fa-file-o"></i> &nbsp; Aperçu</a>');

        }

AND my HTML output return this :

<a href="#" class="preview" data-toggle="popover" data-html="true" data-content="&lt;img src=" playerfiles="" img_0006.jpg"="" width="250" data-original-title="" title="" aria-describedby="popover45746">"&gt;<i class="fa fa-file-o"></i> &nbsp; Aperçu</a>

Why it doesn't work ? What should I do?

Thank You

Answer 1

well, lets fix this for the first: you have double quotes in the preview var you should escape them with '\\' eg:

var preview = '<img src=\"' + url + '\" width=\"250\">';

or better use single quotes inside the var

var preview = "<img src='" + url + "' width='250'>";

but I think it's not good approach to store html in this attr - would be better to store here url only and html in the separate template. or render the hidden element on page load

Answer 2

The problem with your code is there is special characters in the preview value . If you use code given below then you can override the problem and this is not the proper way and avoid this kind of coding style.Use data attributes for integers,small string values etc.. contents like html or long string values etc either use public properties or hidden controls.

function uploadProgress(file)
{

    var ext = file.split('.').pop();
    var fileUrl = '/playerFiles/'+file;

    if(ext == 'mp4')
    {
        var preview = '<video autoplay loop muted width="250"><source src="'+fileUrl+'" type="video/mp4">Your browser does not support the video tag.</video>';
    }
    else
    {
         var preview = '<img src="'+fileUrl+'" width="250">';
    }

    var showtime = $('#'+id).find('td.showtime');
    showtime.html('<a href="#" class="preview" data-toggle="popover" data-html="true" ><i class="fa fa-file-o"></i> &nbsp; Aperçu</a>');

      $(".preview").data("content",preview);


}