Angular UI Bootstrap Popover w/HTML not functioning - javascript

I have the snippet below in my HTML:
<a ng-href="#" popover popover-template="views/popovers/cu.html" popover-trigger="click" popover-placement="top">
<img ng-src="{{chat.avatar}}" width="50" height="40">
</a>
Clicking the a tag does not trigger the popover. Popover's in my application work without HTML, but not with.
I've essentially copied the "Popover with Template" section from the docs here: https://angular-ui.github.io/bootstrap/#/popover
But it still does not function as it does in the example above.
What's wrong?

Try this: Assuming that you're not using the script tag, and you're using a separate html file, add an extra single quote in your popover-template. See my example on plunkr. So that should be popover-template="'cu.html'" instead of popover-template="cu.html".
<a ng-href="#" popover-template="'cu.html'" popover-trigger="click" popover-placement="top" >
<img ng-src="{{chat.avatar}}" width="50" height="50">
</a>
Edit: Another way to achieve this is using the script tag and having 'text/ng-template' as the type. The id would be the text that you place inside the popover-template. Take a look at this version on plunkr.
So I would look this:
<a ng-href="#" popover-template="'cu.html'" popover-trigger="click" popover-placement="top">
<img ng-src="{{chat.avatar}}" width="50" height="50">
</a>
<script type="text/ng-template" id="cu.html">
<div>
Hey there!
</div>
</script>

Related

Add class inside another element via javascript?

I want to add a class to a class to a specific element, that is in another element via javascript. In my case I have a div with the class "jet-woo-product-thumbnail" inside this div I have a linked image inside an a-tag like this
<div class="jet-woo-product-thumbnail">
<a href="https://example.com" rel="bookmark">
<img width="300" height="300" src="https://example.com/image.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="">
</a>
Now i need to add the class to the hyperlink element like:
<div class="jet-woo-product-thumbnail">
<a href="https://example.com" class="my_class" rel="bookmark">
<img width="300" height="300" src="https://example.com/image.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt=""></a>
I tried:
jQuery('div.jet-woo-product-thumbnail').find('a').addClass('my_class');
but this did not work. Is there any error.
It works:
https://stackblitz.com/edit/js-jquery-find-in-a-doc-addclass?file=index.html
You used it in a doc ready function, like this?
$(document).ready(function(){
jQuery('div.jet-woo-product-thumbnail').find('a').addClass('my_class');
});
Make sure you've closed the div tag correctly. In your example code it is not closed:
<div class="jet-woo-product-thumbnail">
...
</div>
Otherwise jquery will not work.

Reducing .parent and .children calls to get to desired parameter

I have an eCommerce page of products with some small thumbnails below. When I mouse moused over a thumbnail I want to swap the different variation image into the product image. I have this working using the code below but I assume this isn't the best way to do this? Can anyone suggest a better way for me to grab the "product-image" src= tag and update it? The number of parent / child calls I've used to set the right data seems excessive.
Thanks in advance. Tim
<script>
$(document).ready(function(){
$('.nSwatchProduct').hover(function(){
var newSource = $(this).attr('data-variation-image');
$(this).parent('._itmspec_listitm').parent('.nColourSwatch').parent('.categoryswatch').parent('.caption').parent('.thumbnail').children('.thumbnail-image').children('.product-image').attr('src', newSource);
});
});
</script>
web page hierarchy
<div class="thumbnail">
<a href="https://www.website.com/productpage" class="thumbnail-image">
<img src="/assets/thumbL/imagename.jpg" itemprop="image" class="product-image" alt="" rel="itm">
</a>
<div class="caption">
<div class="nColourList categoryswatch">
<a class="_itmspec_lnk thumbnail nColourSwatch" href="https://www.website.com/productpage" ref="1_83" data-toggle="tooltip" data-placement="top" title="" data-original-title="Blue">
<div class="_itmspec_listitm" ref="1_83">
<img class="nSwatchProduct" src="/assets/thumb/variationimage.jpg" alt="Blue" data-variation-image="/assets/thumb/variationimage.jpg">
</div>
</a>
Use .closest to select nearest common parent and then .find that element you need
$(this).closest('.thumbnail').find('.thumbnail-image .product-image')

Jquery Rondell Multiple Images Not Working

I'm using Jquery Rondell plugin for thumbnail carousel as following:
<div id="rondellCarousel">
<a target="_blank" rel="rondell" href="image/US.png" title="...">
<img src="image/US.png" alt="Band" title="Click to enlarge">
<h5>Awesome concert</h5>
<p>My favourite band.</p>
</a>
</div>
<script type="text/javascript">
$(function () {
$("#rondellCarousel").rondell({
preset: "carousel"
});
});
</script>
The result shows only one image correctly. However, when adding multiple sources as following
<div id="rondellCarousel">
<a target="_blank" rel="rondell" href="image/US.png">
<img src="image/US.png" alt="Band" title="Click to enlarge">
<h5>Awesome concert</h5>
<p>My favourite band.</p>
</a>
<a target="_blank" rel="rondell" href="image/US2.png">
<img src="image/US2.png" alt="Band" title="Click to enlarge">
<h5>Awesome concert</h5>
<p>My favourite band.</p>
</a>
</div>
The second image is not shown in the navigation carousel and instead, when I click on the only image shown in the navigation carousel two images are shown in the appearing lightbox.
Ok, this is weird. after some trial and error, I found that there is a problem with the Git version. I have downloaded the library again from a different source (their own website) and it worked!
#fareed I'm the developer of the plugin. Could you tell me which version you used initially and which one you use now?
You can find the information at the top of the js file.

Javascript variable not acting global

I'm just learning Javascript after starting out in PHP.
I'm trying some basic stuff, but for some reason the below code doesn't act as I expect. I have researched it, and from what I can tell it should work.
<script type="text/javascript">
showIndex=4;
function test(){
showIndex++;
alert(showIndex);
}
</script>
I am calling the script with an image:
<div style="display:inline-block;margin-left:25px;">';
<a href="" onclick="test()" ><img src="_images/next.png" width="100" /> </a>
</div>
It runs fine the first time, but when I hit the button again, it still has the initial variable plus one. (which makes me think it's acting as a local variable...)
It seem so straight forward... what am I doing wrong?
Remove the <a> and have the event on the image, it's refreshing the page. You don't need to have it wrapped in an <a> tag for a onclick event:
<img src="_images/next.png" onclick="test()" width="100" />
The empty link just reloads the page. You can insert # in it:
<div style="display:inline-block;margin-left:25px;">
<a href="#" onclick="test()" >www </a>
</div>
Then everything works as intended.
The empty href attribute on the <a> tag is messing you up. Either remove the href attribute, or change it to # or javascript:void(0)
Alternatively, you can call your method from the href attribute like this
<div style="display:inline-block;margin-left:25px;">';
<a href="javascript:test()" ><img src="_images/next.png" width="100" /> </a>
</div>

Dojo Query need help in selecting the elements in a page

I have HTML page with following elements
<img src='some link' id='_id_portlet1_1234' > link </img>
<img src='some link' id='_id_portlet2_4567' > link </img>
I has to select all the id elements with a pattern of _id_portlet* with dojo.query. Can you guys help in providing the dojo.query to get list of above id elements. Here the source code is generated by a template file and every time the page is rendered a random number will be appended to the id. I need to select all the elements which are following the pattern of _id_portlet*. Thanks for your help
The very first thing - the <img> has no closing tag, so instead of invalid
<img src="some link" id="_portlet1_1234" class="portlet"> link </img>
you should use
<img src="some link" id="_portlet1_1234" class="portlet" />
And for selecting the images try this
dojo.query('img[id^="_id_portlet"]').style("border", "5px solid red");
DEMO
You should use classes:
<img src="some link" id="portlet1_1234" class="portlet"> link </img>
<img src="some link" id="portlet2_4567" class="portlet"> link </img>
And then I don't know dojo, but in normal javascript you can use
document.getElementsByClassName("portlet");
Adding _id_ at the beggining of the id it's a pleonasm.

Categories

Resources