CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapasp.net-mvc-5
Rhys Stephens
Rhys Stephens

Reputation: 899

ASP.NET MVC5 Bootstrap Popover string with double quotes inside single quotes

I'm using jQuery 2.1.4 I have a popup working on a html element that is rended using MVC5 Razor view helper:

<a href="javascript:void(0);" class="btn" rel="popover" data-placement="left" data-original-title="@benefit.Name" data-html="true" data-content='@Html.Raw(benefit.ShortDescription)'>
   @benefit.Name<br />

I've put single quotes around the html in data-content, which means it renders on the page fine. However, I am using DataTables and am trying to export all the data and strip the html tags out of it.

This is what the view renders:

<a href="javascript:void(0);" class="btn" rel="popover" data-placement="left" data-original-title="Benefits for Practitioners" data-html="true" data-content="Credit Paraplanning is designed to assist the Practitioners clients utilise appropriate finance options: <br />
<ul>
<li><span style=&quot;font-size: 13px;&quot;>Maximising the range of services the Practitioner is seen to provide access to, </span></li>
<li><span style=&quot;font-size: 13px;&quot;>Saving time in research and preparing applications</span></li>
</ul>">

Benefits for Practitioners<br>
</a>

So it renders in double-quotes even though I specified single.

Now, when I try to get the html to strip the html tags out I get a jquery error:

"Syntax error, unrecognized expression: Credit Paraplanning is designed to assist the Practitioners clients utilise appropriate finance options: <br ></a>↵<ul>↵<li><span style="font-size: 13px;">Maximising the range of services the Practitioner is seen to provide access to, </span></li>↵<li><span style="font-size: 13px;">Saving time in research and preparing applications</span></li>↵</ul>"

Here is the code:

var datacontent = $(value).data("content");
if (datacontent === null) {
   return '';
}

if ($(datacontent).text()) {// Throws error here.
   // Get the string without html
}

I can understand that this $(datacontent) then causes the error. But how can I get around that so it works? How can I get the html tags stripped out?

Upvotes: 1

Views: 897

Answers (1)

Rhys Stephens
Rhys Stephens

Reputation: 899

The way I solved this was by loading the content from a hidden div instead of setting it in the data-content property of the anchor.

<a href="javascript:void(0);" class="btn" rel="popover" data-placement="left" data-original-title="@benefit.Name" data-html="true">
    @benefit.Name<br />
</a>
<div class="content" style="display:none;">
    @Html.Raw(benefit.ShortDescription)
</div>

Then in the javascript:

$('[rel="popover"]').popover({
    html: true,
    content: function () {
        return $($(this).next('.content')).html();
    }
});

Upvotes: 1

Related Questions