using multiple templates on the same popover button - javascript

I'm trying to user multiple templates for bootstrap popover , the scenario I follow is click on button on load page, first template will be shown with a link to change class f popover button. So it should display the second template when I click on the same button again ! but it seems popover save the class for button and binding the popover on it. I tried to destroy it and bind popover again on the new class but not work. find example on fiddle here.
I've a solution by replace the button html with the same button but with the new class. and It worked. see here working example I made. link
but I'm trying to find another or better solution .
var popoverTemplate = ['<div class="first-pop popover" role="tooltip">',
'<div class="arrow"></div>',
'<button type="button" class="close" onclick="$(\'.popover\').popover(\'hide\')" aria-hidden="true">×</button>',
'<h3 class="popover-title">test</h3>',
'<div class="popover-content">ONE',
'</div>',
'</div>'].join('');
var firstTemplate = ['<div class="firstTmp-pop popover" role="tooltip">',
'<div class="arrow"></div>',
'<button type="button" class="close" onclick="$(\'.popover\').popover(\'hide\')" aria-hidden="true">×</button>',
'<div class="popover-content">',
'</div>',
'</div>'].join('');
var firstTmpContent = ['<div class="firstTmpContent-post clearfix"><a class="changetemp" href="#">Change template</a>',
'</div>',].join('');
var content = ['<div>Content</div>',].join('');
var secondOptions = {
trigger: "click"
, html: true
, template: popoverTemplate
, content: content
};
var firstOptions = {
trigger: "click"
, html: true
, template: firstTemplate
, content: firstTmpContent
};
$('.box').popover(firstOptions);
$(document).on('click','.box2',function(e){
$(this).popover(secondOptions);
});
$(document).on('click','.changetemp',function(e){
e.preventDefault();
$('[rel="popover"]').popover('hide');
$('.box').removeClass('box').addClass('box2');
});


var obj = '';
$('.box').click(function(){
obj = $(this).clone();
});
$(document).on('click','.changetemp',function(e){
e.preventDefault();
$('[rel="popover"]').popover('hide');
obj.addClass('box2').removeClass('box');
$('.box').replaceWith(obj);
$('.box2').popover(secondOptions);
});

Related

Zoom in dynamically displayed image with materialbox

So i'd like to zoom on my dynamically displayed image when I click on it. I'm using cordova and materializecss. I'd like to use the materialbox function. (materialbox here) I've tried many ways but didn't manage to figure it out. Here's my simplified code :
Displaying images :
function createHtmlGall(imgTab) {
let htmlGall = ""
imgTab.forEach(function(element) {
htmlGall += '<div class="col s12 m4 l3">'
htmlGall += '<img src="' + element + '" class="materialbox responsive-img card">'
htmlGall += '</div>'
})
$( "#imagesDiv" ).html(htmlGall)
}
trying to set a zoom effect on click :
$(document).on( "click", ".materialbox").materialbox()
I'd like to use jquery if possible.

Dynamically Load a React Component using Javascript

I want to load a React Component from a Javascript file when a click event is triggered.
So basically,
function checkScript()
{
var tab_content = document.getElementById('tab-content');
var a = '<div id="notifications" class="tab-pane fade">'+
'<h2 class="notify">Notify</h2>'+
'<div id="NotifyComponent">'+
'Waiting to load notify'+
'</div>'+
'</div>';
tab_content.innerHTML = tab_content.innerHTML + a;
loadScript('/components/notifications.js', null);
}
$('#ap').click(function(e)
{
checkScript();
});
This is a piece of code from my index.js file which I am using to load the React File, but the file isn't getting rendered.
However, if I use the following code, the rendering works just fine.
function checkScript()
{
var tab_content = document.getElementById('tab-content');
var a = '<div id="notifications" class="tab-pane fade">'+
'<h2 class="notify">Notify</h2>'+
'<div id="NotifyComponent">'+
'Waiting to load notify'+
'</div>'+
'</div>';
tab_content.innerHTML = tab_content.innerHTML + a;
loadScript('/components/notifications.js', null);
}
checkScript();
This script loads the react component just fine, the only difference is that it's called directly when the Javascript file is loaded, not when a event is triggered.
So, what changes do I make to load the react component on click event.!!

You might want to wrap it up in document.ready
$(document).ready(function() {
$('#ap').click(function() {
checkScript();
});
});

Delegating click function to appended div

I am having trouble understanding how to attach a click function to an element inside my appended portion. I looked through the answers of previous question but can’t figure out out to apply it to my code. Can anyone help? What I am trying to achieve: When the user clicks on news, a news feed toggles down. The sections of news seen can be clicked to remove the current toggle into a new section (concerts).
edit: The problem is that the ’news feed’ is inside a container. When the user clicks a menu tab either box-toggle 1,2,3, etc will remove the contents of the container (news feed) and replace it with the new appended box-toggle. Im trying to get the news1clone to act in the same manner. Deleting in the contents (news feed) and appending the appropriate box toggle.
$('#news').click(function() {
$('.nav li').removeClass('active');
$(this).addClass('active');
$('.box-toggle').remove();
$('.box-toggleclone').remove();
$('.box-toggle1').remove();
$('.box-toggle2').remove();
$('.box-toggle3').remove();
$('#box').removeClass('box-zoom');
$('#box').addClass('box-reg');
$('.placer2').append('<div class = "box-toggleclone">'+
'<div class = "newsbodyclone">'+
'<div class = "newsheaderclone"><h1>News</h1></div>'+
'<div class = "news1clone">'+
'<div class = "news1clone-photo">'+
'</div>'+
'<div class = "news1clone-info">'+
'<p>MAY XX, 2015</p>'+
'<h2>OPENING<br>'+
'SPRING FASHION PARTY<h2>'+
'</div>'+
'</div>'+
'<div class = "news2clone">'+
'<div class = "news2clone-photo">'+
'<img src="album-cover/tyler.jpg" alt = "photo-carosel">'+
'</div>'+
'<div class = "news2clone-info">'+
'<p>MAY 28, 2015</p>'+
'<h2>TYLER THE CREATOR<br>'+
'Primavera Sound Concert<h2>'+
'</div>'+
'</div>'+
'<div class = "news3clone">'+
'<div class = "news3clone-photo">'+
'<img src="album-cover/jcole.jpg" alt = "photo-carosel">'+
'</div>'+
'<div class = "news3clone-info">'+
'<p>J. Cole, Latest album</p>'+
'<h2>2014 Forest Hills Drive<br>'+
'(2014)<h2>'+
'</div>'+
'</div>'+
'</div>'+
'</div>');
$('.placer2').delegate('click','.news2clone',(function() {
$('.box-toggle').remove();
$('.box-toggleclone').remove();
$('.box-toggle1').remove();
$('.box-toggle2').remove();
$('.box-toggle3').remove();
$('#box').removeClass('box-zoom');
$('#box').addClass('box-reg');
$('.placer2').append('<div class = "box-toggle2">'+
'<div class = "concert-body">'+
'<div class = "concert1">'+
'<div class = "concert1-photo">'+
'<img src="album-cover/dmx.jpg" alt = "photo-carosel">'+
'</div>'+
'<div class = "concert1-info">'+
'<p>Sunday, May 24 2015</p>'+
'<h2>DMX CONCERT<br>'+
'<h2>'+
'</div>'+
'</div>'+
'<div class = "concert2">'+
'<div class = "concert2-photo">'+
'<img src="album-cover/tyler.jpg" alt = "photo-carosel">'+
'</div>'+
'<div class = "concert2-info">'+
'<p>Thursday, May 28 2015</p>'+
'<h2>TYLER THE CREATOR<br>'+
'Primavera Sound<h2>'+
'</div>'+
'</div>'+
'</div>'+
'</div>');
})
);
});

I would recommend using jquery's 'on' method instead of delegate. The trick here is setting the correct context. The first selector needs to be an element that is there on page load and not ajaxed in or injected later.
Try adding the 'document' as the context and it should work.
$(document).on('click','.news2clone',(function() {
// $(document) is your context and .news2clone would be the trigger inside that context.

Generally, you could use
$('<YOUR CSS SELECTOR HERE>').click(function(){<THE CODE THAT YOU WANT TO EXECUTE HERE>}).
You, you just have pass a selector that matches against any element that you want to attach this function and it is compatible with it.
You can also access the item that is executing the function with $(this).
For example, in your div that has a class named "box-toggle2":
$('div.box-toggle2').click(function(){
$(this).hide(); // JUST AS AN EXAMPLE, I'M TRYING TO HIDE THIS DIV.
});
I think that function within the click event handler will execute for all the divs that have the box-toggle2 class.

how to make bootstrap popover content depends on clicked button

I i want to display a bootstrap popover that contains informations about the clicked anchor . the anchor was added dynamically . this is the anchor code
html ::
<a id='reserveAnchorClone' offsetx="0.4882005899705015" offsety="0.41685144124168516" data-container="body" rel='popover' data-placement="left" class="reserveAnchor" >37</a>
js::
var popOverSettings = {
placement: 'left' ,
container: 'body',
html: true,
selector: '.reserveAnchor',
content: function(){return $('#popover_content_wrapper_add').html();},
}
$('body').popover(popOverSettings);
I want to display offsetX offsetY attribute of anchor in the popover , how can i do this.

Whenever you are adding the anchor dynamically just add something like this:
var popOverSettings = {
tite: $('#reserveAnchorClone').attr('id'),
content: function(){return $('#reserveAnchorClone').attr('offsetx') + "<br/>" + $('#reserveAnchorClone').attr('offsety');},
}
$('#reserveAnchorClone').popover(popOverSettings);
http://jsfiddle.net/e3g4h/3/

Can I use dynamic content in a Bootstrap popover?

I am using a Bootstrap Popover in a 'Repeat Region' which displays Testimonials. Each testimonials has a 'View Property Details' button which opens up the popover. In the Pop over I am wanting to display the image associated with each testimonial and details of the image. The image path is stored in a column in the database so to display the image for each testimonial I need to bind the image source to the content but it is not accepting PHP. I am using a script that allows me to write html into the content but the image needs to be created dynamically. Dynamic text works in the 'a' tag 'title' option but not for Content.
Can anyone shed light on this?
Here is what I have.
<script type="text/javascript">
$(document).ready(function() {
$("[rel=details]").popover({
placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
html: 'true', //needed to show html of course
content : '<div id="popOverBox"><img src="<?php echo $row_rsTstmnlResults['image']; ?>" width="251" height="201" /></div>' //this is the content of the html box. add the image here or anything you want really.
});
});
</script>
View Property

var popover = $("[rel=details]").popover({
trigger: 'hover',
placement: 'bottom',
html: 'true'
}).on('show.bs.popover', function () {
//I saw an answer here with 'show.bs.modal' it is wrong, this is the correct,
//also you can use 'shown.bs.popover to take actions AFTER the popover shown in screen.
$.ajax({
url: 'data.php',
success: function (html) {
popover.attr('data-content', html);
}
});
});

One year old :( but this may help another person
Remove your js script and Add This :
var content = $('[id*="yourDivId"]');
var title = "Your title, you can use a selector...";
$('[data-toggle="popover"]').popover({
html: true,
content: function () {
return content.html();
},
title: function() {
return title.html();
}
});

Here is the generic approach, but uses ASP.Net handler to process image. Use similar things in PHP to generate images dynamically
<script type="text/javascript">
$(document).ready(function() {
$("[rel=details]").popover({
placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
html: 'true', //needed to show html of course
content : getPopoverContent(this)// hope this should be link
});
});
function getPopoverContent(this)
{
return '<div id="popOverBox"><img src="/getImage.php?id="'+this.data("image-id")+'
width="251" height="201" /></div>'
}
</script>
<a href="#" rel="details" class="btn btn-small pull-right"
data-toggle="popover" data-image-id="5" data-content="">View Property</a>

$("selector").popover({
trigger : "manual",
placement : 'right',
html : true,
template : '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).popover("show");
$.ajax({
async : true,
url : url,
dataType : 'json',
success : function(d) {
$("#phover" + id).attr('data-original-title', d['heading']);
$('.popover-title').html(d['heading']);
$('.popover-content').html(d['body']);
},
beforeSend : function() {
var loadingimage = '<div align="center"><img src="assets/pre-loader/Whirlpool.gif"></div>';
$('.popover-title').html(loadingimage);
$('.popover-content').html(loadingimage);
}
});

my solution is based upon the previous solutions here, with a bit more.
i needed (as usually), all the complexity:
here's how you can create the popover content on demand when the event triggers,
and have the selected element passed to the creating function.
function displayProductPrice(a, tag) {
var div = a.closest('div');
var secs = ['aggregated', 'compare', 'list', 'saved', 'details'];
var title = '';
for (var c in secs) {
var obj = $('.product-price-' + secs[c], div);
if (obj.length) {
if (title) {
title += '<br />';
}
title += obj.html();
}
}
return '<' + tag + '>' + title + '</' + tag + '>';
}
$( document ).ready(function() {
$(".product-price-expand").popover({
content: function() {return displayProductPrice(this, 'h6')},
title: function() {
return $('.product-id', this.closest('div')).html();
},
html: true,
trigger: 'click focus',
placement: 'auto'
});
});
enjoy, hope this helps.

Categories

Resources