We Keep Coding

Can't target JSON-created block

For some reason I'm having a hard time implementing draggable (either jquery's or draggabilly) on JSON/jquery-created elements.
This is my jQuery along with the JSON.
var setTotal = function (){
var total = 0;
$('.block').each(function(){
total = total+parseInt($(this).data('cost'));
});
$('.totalSum').html(total);
};
window.onload = function(){
$.getJSON( "ajax/test.json", function( data ) {
$.each( data.createButton, function( key, val ) {
var button = $('<button class="btn" id="' + val.name +'" style="background: ' + val.color + '">' + val.name + '</button>');
button.on("click", function(){
//console.log("button " + val.name + " was clicked!");
var block = $('<div id="draggable" class="block ' + val.name + '-piece">'+ val.name + '<div class="close">-</div></div>');
block.data('cost', val.cost);
block.on("click", ".close", function(){
$(this).parent().remove();
// call set total to refresh it when item is removed
setTotal();
});
$('#boxes').append(block);
// call set total to calculate total blocks' cost
setTotal();
});
$('#field').append(button);
});
});
};
and this is how it's called in the html document;
<!-- Grab Google CDN's jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<!-- Grab draggable -->
<script src="//cdnjs.cloudflare.com/ajax/libs/draggabilly/1.2.0/draggabilly.pkgd.min.js"></script>
<!-- My own scripts -->
<script src="js/main.js" type="text/javascript"></script>
<script>
var $draggable = $('#draggable').draggabilly({
// options...
});
</script>
<!-- End scripts -->
Now for some reason I can't target the ID (for testing only) nor the class (block) of the block variable. Does anyone know why? The draggable works fine with any other element on the page.
Sincerely, Sebastian

Two things :
you are appending multiple elements with id="draggable". Ids should be unique.
there's no evidence of invoking draggabilly on the appended elements.
Draggabilly needs to be invoked on :
any blocks that already exist on page load
dynamically created blocks after they have been appended
Personally, I would write the code something like this :
window.onload = function() {
var draggabilly_options = {
// options...
};
function create_button(key, val) {
$('<button/>', {
'id': val.name,
'class': 'btn',
'style': 'background-color:' + val.color,
'html': val.name,
})
.appendTo("#field")
.on('click', create_block.bind(val));
}
function create_block() {
$('<div/>' {
'class': 'block ' + this.name + '-piece',
'html': this.name + '<div class="close">-</div>'
})
.appendTo('#boxes')
.draggabilly(draggabilly_options) //invoke draggabilly on the div.block just added
.data('cost', this.cost)
.find('.close')
.on('click', close);
}
function close() {
$(this).closest(".block").remove();
setTotal();
}
function setTotal() {
var total = 0;
$(".block").each(function() {
total += parseInt($(this).data('cost'));
});
$('.totalSum').html(total);
};
$.getJSON( "ajax/test.json", function(data) {
$.each(data.createButton, create_button);
setTotal();
});
//You need this only if the page loads with any "draggable" blocks already in place.
$("#boxes .block").draggabilly(draggabilly_options);
};

Thank you for all responses. I took some advice from your code you published and put it like this;
// Start this after window is loaded
window.onload = function(){
// Init draggabilly
var draggabilly_options = {
// Dragabilly options
containment: '#boxes',
grid: [ 100, 100 ]
};
and also defined it further down in the button click function like so;
button.on("click", function(){
var block = $('<div id="block-' + val.id + '" class="block ' + val.name + '-piece"></div>');
var close = $('<div class="close">-</div>');
$(block).append(close);
block.data('cost', val.cost);
block.draggabilly(draggabilly_options);
This appeared to solve it for me! Thank you for the help and answers, they solved my problem :)

How to use focus bootstrap popover?

I have a popover like this. And i need it to work as focus, the only thing when i click on quantity field it disappears, because the link is not focused.
Here is the code:
var popover = $("[data-toggle=popover]").popover({
trigger : 'focus',
placement : 'right',
container: 'body',
html: 'true'
}).on('show.bs.popover', function() {
product_id = $(this).attr('data-product-id');
popover = $(this);
$.ajax({
url : '/product/short_description/' + product_id,
success : function(html) {
popover_id = popover.attr('aria-describedby');
$('#' + popover_id + ' .popover-content').html(html);
}
});
});

Try this:
var popover = $("[data-toggle=popover]").popover({
trigger: 'manual',
placement : 'right',
container: 'body',
html: 'true'
}).on('show.bs.popover', function() {
product_id = $(this).attr('data-product-id');
popover = $(this);
$.ajax({
url : '/product/short_description/' + product_id,
success : function(html) {
popover_id = popover.attr('aria-describedby');
$('#' + popover_id + ' .popover-content').html(html);
}
});
}).click(function(e){
$(this).popover('show');
e.preventDefault();
}).addClass('mypopover');
Then :
$('html').click(function() {
$(".mypopover").hide();
});
$('.mypopover').click(function(event){
event.stopPropagation();
});

Only one tooltip at a time

I have a table in my website and when i hover over a link i create a tooltip, the issue is that when i move my mouse over the links quickly multiple tooltips will be displayed as seen in the screenshot below,
I need to have only one tooltip on screen at a time and remove it if the user is no longer hovering. I create the tooltips in side the success function of an ajax call so i will only display the tooltip if the controller returns a status of true. The code for this can also be found below. Any suggestions on how i can ensure only one tooltip is displayed at a time. Thank you for any help you can give.
function tooltip(){
$('#tblOrder').on('mouseenter', '#alarmsTooltip', function(event) {
var id = $(this).attr('value');
var statusResponse;
var selector = $(this);
$.ajax({
url: '<%=Url.Action("Alarms") %>',
type: 'POST',
data: {id: id},
dataType: "json",
success: function (Response) {
if(Response.status == true)
{
var alarmTrans = '<%=GetTranslation(TranslationType.Label, "Alarms.tooltip", "Alarms") %>';
var warningTrans = '<%=GetTranslation(TranslationType.Label, "Warnings.tooltip", "Warnings") %>';
var html = "<table border='1' style= 'border: 1px solid black; border-collapse: collapse;'> <tr><th>" + alarmTrans + "<img src='" + '<%=Url.Content("~/App_Themes/Shared/Icons/bullet_red.png")%>' + "' style='float: right' >" + "</th><th> " + warningTrans + "<img src='" + '<%=Url.Content("~/App_Themes/Shared/Icons/bullet_orange.png")%>' + "' style='float: right'>" + "</th></tr>";
$(selector).qtip({
content: {
text: html + Response.Response,
title: {
text: '<%=GetTranslation(TranslationType.Label, "Alarms and Warnings.tooltip", "Alarms and Warnings") %>'
}
},
position: {
target: 'mouse',
adjust: {x:5,y:5}
},
show: {
ready: true,
effect: function () {
$(this).slideDown();
}
},
style: {
//classes: 'qtip-dark'
classes: 'qtip-green'
},
hide: {
effect: function () {
$(this).slideUp();
}
},
api: {
beforeShow: function() {
$('.qtip:visible').not(this.elements.tooltip).qtip('hide').qtip('disable');
},
beforeHide: function() {
$('.qtip:visible').not(this.elements.tooltip).qtip('enable');
}
}
}, event);
}
}
});
});
};
Again thank you for any help.

Right now your function is called on the event mouseenter.
Create another event mouseleave with a function that aborts the ajax call with storedAjax.abort(). However for this to work you need to store the ajax call in a global variable first.

Store the AJAX call in a global variable
requestAjax = $.ajax({ ... });
On the top of the function tooltip() just do
if(requestAjax) requestAjax.abort();
and then hide all the tooltips and and then proceed with the rest of the code.
and Add
$("#tblOrder").mouseleave(function(){
$(this).qtip("hide");;
});

Change the zoom level of Google map in Jquery

I have tried the following code. Please let me know how can i change zoom level inside the autocomplete of the textbox.
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 6 };
$('#places').live('pageinit', function() {
demo.add('places_1', function() {
$('#map_canvas_3').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
console.log(self);
var control = self.get('control', function() {
$(self.el).append('<div id="control"><div><input id="places-search" class="ui-bar-d ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-d ui-autocomplete-input" type="text"/></div></div>');
self.autocomplete($('#places-search')[0], function(ui) {
self.clear('markers');
self.set('bounds', null);
$("#map_canvas_3").gmap({'zoom':15});
$('#map_canvas_3').gmap('refresh');
//self.set('zoom', 15);
//self.gmap('refresh');
self.placesSearch({ 'location': ui.item.position, 'radius': '5000' }, function(results, status) {
if ( status === 'OK' ) {
$.each(results, function(i, item) {
self.addMarker({ 'id': item.id, 'position': item.geometry.location, 'bounds':true }).click(function() {
self.openInfoWindow({'content': '<h4>'+item.name+'</h4>'}, this);
});
});
}
});
});
return $('#control')[0];
});
self.addControl(new control(), 1);
}});
}).load('places_1');
});
I have taken this code from
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#places
I meant i have to change zoom level dynamically.
Thanks in advance.

I believe that mapname.setZoom(zoom) should work where mapname is the name you gave the map when you created it and zoom the zoom level you want the map to have. For future reference, check out the google maps api reference (it's not particularly great, but it'll tell you stuff like that once you've got used to using the API).

How to make infowindows have tabs in Google Map?

How can I make the my infoWindows have tabbed content? I tried things like:
google.maps.event.addListener(this, "domready", function(){ $("#info").tabs() });
*also tried to use infoWidnwow, infowindow, and iw instead of this keyword
and
.ready(function(){ $("#info").tabs();});
and
.bind('domready', function(){ $("#info").tabs(); });
None of these worked.
Code for creating markers and infowindows:
$('#map').gmap(mapOptions).bind('init', function(){
$.post('getmarkers.php', function(json){
var theMarkers = json;
$.each(theMarkers, function(i, element) {
$.each(element, function(object, attributes){
$('#map').gmap('addMarker', {
'position': new google.maps.LatLng(parseFloat(attributes.Lat), parseFloat(attributes.Lng)),
'bounds':true } ).click(function(){
$('#map').gmap('openInfoWindow', { 'content':'<div id="info"><ul><li><a href="#tab1">Tab1</li><li><a href="#tab2">Tab2</li></ul><div id="tab1"><h1>'+attributes.productName+'</h1></div><div id="tab2"><h2 style="color: grey"><h1>'+attributes.productPrice+'</h1></div></div>' }, this);
});
});
});
});
});
Somehow I need to tell this part:
$('#map').gmap('openInfoWindow', { 'content':'<div id="info"><ul><li><a href="#tab1">Tab1</li><li><a href="#tab2">Tab2</li></ul><div id="tab1"><h1>'+attributes.productName+'</h1></div><div id="tab2"><h2 style="color: grey"><h1>'+attributes.productPrice+'</h1></div></div>' }, this);
To tab the content that I pass to openInfoWindow.

There is a free jquery plugin that takes care of multiple tabs, positioning of each and styling i just found that has an intuitive interface for customization. Here is a demo
https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html

Remove the first three snippets you posted and use this:
$('#map').gmap(mapOptions).bind('init', function() {
$.post('getmarkers.php', function(json) {
var theMarkers = json;
$.each(theMarkers, function(i, element) {
$.each(element, function(object, attributes) {
$('#map').gmap('addMarker', {
'position': new google.maps.LatLng(parseFloat(attributes.Lat), parseFloat(attributes.Lng)),
'bounds': true
}).click(function() {
var ts = $.now();
$('#map').gmap('openInfoWindow', {
"<div id='" + ts + "info'>... your tab content ..."
}, this);
$('#' + ts + 'info').tabs();
});
});
});
});
});​
I created a unique string and used it to give the div a unique id, then used that to make the tabs.