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

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="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>">
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?

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

Related

Input checkbox inside an anchor tag

I have the following structure in my html code. Due to unavoidable circumstances I can't change the html structure. I want both Link and the checkbox to be worked independently. How this can be done via Javascript or Jquery ?
<a href="#">
<span class="fa fa-chevron-right blue"></span>
Early Math
<label class="label-checkbox">
<input type="checkbox" data-field-type="checkbox"><i class="fa fa-2x icon-checkbox"></i>
</label>
</a>
I do not believe that a checkbox inside of an anchor can be made to work reliably. But even if you are unable to change the HTML directly, you can still manipulate it through Javascript/JQuery:
$(document).ready(() => {
$('a input').insertAfter("a");
});
(This does assume only one <a> tag and one <input> tag).

Changing Bootstrap Glyphicon on click

I'm wanting to swap the second class of Bootstraps 'glyphicon' span, but instead of toggling the class, It's adding it behind, thus not changing the class at all.
I'm new(ish) to jQuery / Javascript and I just can't get my head around this.
Heres the
<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
<span class="glyphicon glyphicon-tasks" id="whiter"></span>
</a>
And the script is below:
$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-chevron-up');
I get all the classes instead of just glyphicon-chevron-up, Im getting:
<span class="glyphicon glyphicon-tasks glyphicon-chevron-up"></span>
Removing the glyphicon-tasks class on Element inspect displays the Chevron, so some how it is being blocked and the tasks glyph isnt being swapped.
I think you want to swap glyphicon-tasks and glyphicon-chevron-up. You need to toggle both class like following.
$(this).toggleClass('glyphicon-tasks glyphicon-chevron-up');
This is because your function is set to class, which mean all elements with the given class.
To focus a specific element, provide, for example, an unique ID.
Here, you already got one.
$('#whiter').click(function() {
$(this).toggleClass('glyphicon-chevron-up');
});
I guess this can help
$('.glyphicon').click(function(){
$(this).removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-up');
}
If you want to have a bit more control, use jQuery to its fullest, apply a data variable to multiple glyphicons (chances are that you'll be checkboxes, folder icons, tree icons):
<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
<span><i class="glyphicon glyphicon-tasks" data-tasks="firstCollection" data-mycolor="white" data-icontype="taskIcon"></i></span>
</a>
...plus, elsewhere in your page, another glyphicon, for example (this will not be used, affect or be affected by our code):
<i class="glyphicon glyphicon-unchecked" id="checkbox_Analytics" data-foldername="group_Analytics" data-icontype="groupCheckbox"></i>
...while, on the other hand, this will be affected by our code (because of foldername match):
<i class="glyphicon glyphicon-check" data-foldername="2014" data-icontype="childCheckbox"></i>
...and in JS, toggle their values without affecting each and every other glyphicon:
$('i[data-icontype="taskIcon"]').on('click', function() {
$('i[data-tasks="firstCollection"]').toggleClass('glyphicon-tasks glyphicon-chevron-up');
console.log("current state now displays CHEVRON UP (true/false)? ["+$(this).hasClass('glyphicon-chevron-up')+"]");
});
...
$('i[data-icontype="childCheckbox"]').on('click', function() {
$('i[data-foldername="2014"]').toggleClass('glyphicon-check glyphicon-unchecked');
// Notice that you can also access the `data-foldername` variable directly for each element which has it
var layerFolderName = $(this).closest('i').data('foldername');
console.log("Changed glyphicon chevron in: "+layerFolderName);
});
NOTE1: one style of using glyphicons, places them inside <i> tags and references them directly thusly.
NOTE2: "white" is not, in general, a good idea for an id. I recommend another data variable, data-mycolor, which might in turn be germane to your code's logic. In this example, it is set, but not really used.

Basic HTML/JavaScript confusion re single/double quotes in Bootstrap popover

Trying to add a link in a Bootstrap popover (to go to a "Help" page). Seen all sorts of complicated solutions of getting a link inside a popover but someone suggested a simple onclick window.open. Seemed an interesting solution BUT I am in double/single quote hell.
I am using phpStorm which does a pretty good job highlighting errors. What I am trying is:
<i class="explain fa fa-question-circle text-primary"
data-toggle="popover" data-trigger="focus" tabindex="0" title="Popover title"
data-content="And here's some amazing content. It's very engaging.<a href='#'
onclick='window.open("http://www.google.com/");' title='test add link'>
link to content</a> Right?"></i>
Here is the original I copied:
link
My problem is that when I switch single to double I get an error at the initial " of ("http://www.google.com/"); and have an unclosed tag.
What am I not understanding re this call please.
Try using " within the HTML attribute:
<i class="explain fa fa-question-circle text-primary"
data-toggle="popover" data-trigger="focus" tabindex="0" title="Popover title"
data-content="And here's some amazing content. It's very engaging.<a href='#'
onclick="window.open('http://www.google.com/');" title='test add link'>
link to content</a> Right?"></i>
Compare here: How to properly escape quotes inside html attributes?
You need to include data-html="true" along with your other data-*
Here is the jsFiddle

Insert <a> Into a div generated by a plugin with javascript or jQuery

I am working with a plugin that provides IDX data for listings on a WordPress website. The plugin uses jQuery to query a database for information that it displays on the page. The plugin is not very customizable past simple styling and I would like to insert a link to save to favorites
The link for saving to favorites can be found by viewing this page:
http://angelandpatty.com/homes-for-sale-details/8635-La-Entrada-Avenue-Whittier-CA-90605/PW14217291/306/
All the property details pages have the "save to favorites" button at the top of the page. This is what I found with the inspector:
<a data-toggle="modal" data-target="#ihfsaveListing" class="btn btn-primary btn-detail-leadcapture save-listing-btn"> <span class="hidden-xs"> <i class="glyphicon glyphicon-heart fs-12"></i> Save To Favorites </span> <span class="visible-xs fs-12"> Save To<br>Favorites </span> </a>
I am assuming the data-target is what is causing the button to take action.
What I would like to do is find a way to insert this same button, perhaps with a different icon like a thumbs up or a star, into the property stubs.
The property stubs are viewable on pages like this:
http://angelandpatty.com/homes-for-sale-in-friendly-hills/
I would like to find a way to insert this possibly after #ihf-main-container .col-xs-9
If there is any way to do this with Javascript or with jQuery I sure would like to know.
Thank you for all of your assistance. I tried searching for some situation like this but was unlucky
Are you looking for the following answer?
var button = $('<a data-toggle="modal" data-target="#ihfsaveListing" class="btn btn-primary btn-detail-leadcapture save-listing-btn"> <span class="hidden-xs"> <i class="glyphicon glyphicon-heart fs-12"></i> Save To Favorites </span> <span class="visible-xs fs-12"> Save To<br>Favorites </span> </a>');
$('#ihf-main-container .col-xs-9:first').after(button);
See: http://api.jquery.com/after/
.after(content [, content ] )
Description: Insert content, specified by the parameter, after each element in the set of matched elements.
You may need to initialize the button as required.

CSS/Javascript dynamic styling not getting applied after Ajax data is returned

I am working in zend framework. I am attaching code which is troubling me. Please suggest answers. Below is my controller function which I am triggering through ajax:
public function fnshowinfoAction()
{
$this->_helper->layout->disableLayout();
$this->_helper->viewRenderer->setNoRender();
$categoryid= $this->_getParam('categoryid');
//echo $categoryid;die();
$bestsellerscategory=$this->view->bestsellerscategory=$this->lobjindexmodel->fngetbestsellerscategoryimages($categoryid);
$tabledata="";
$tabledata.='<ul id="flexiselDemo"> ';
foreach($bestsellerscategory as $bestsellerscategory)
{
$tabledata.='<li>
<div class="ipad text-center">
<img src="'.$this->view->baseUrl().$bestsellerscategory['Modifiedname'].$bestsellerscategory['Mainimage'].'" alt="" />
<h4>'.$bestsellerscategory['Productname'].'</h4>
<h3>'.$bestsellerscategory['ProductMRP'].'</h3>
<ul>
<li><i class="cart-1"></i></li>
<li><a class="cart" href="#">Add To Cart</a></li>
</ul>
<div class="clearfix"></div>
<ul>
<li><i class="heart"></i></li>
<li><a class="cart" href="#">Add To Wishlist</a></li>
</ul>
</div>
</li>';
}
$tabledata.='</ul>';
echo $tabledata;
}
When this data is retrieved in view file, then no classes are appearing dynamically which are supposed to re-evaluate this html elements on loading of layout.
Please Help.
You can place your complete code of creating table into respective phtml view file and can then send that view instead of echoing complete as string from controller, as calling a view via ajax returns only view without adding layout.
From above code everything seems fine with the code. Might be there can be issue in the view file from where you are calling the ajax.

Categories