Javascript : how inject a variable with html content to a data-attribute appended?

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

It's not a good idea to store html in a data attribute. Store it in a hidden div with an ID for you to access later. — lshettyl
– lshettyl, Commented Mar 5, 2015 at 9:17

Optimus · Accepted Answer · 2015-03-05 09:30:37Z

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);


}

godblessstrawberry · Accepted Answer · 2015-03-05 09:35:31Z

1

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

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

edited Mar 5, 2015 at 9:35

answered Mar 5, 2015 at 9:27

godblessstrawberry

5,1584 gold badges45 silver badges71 bronze badges

Collectives™ on Stack Overflow

Javascript : how inject a variable with html content to a data-attribute appended?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related