Develop Reference

How do i make draggable move to the correct position onclick dynamically

The app is working fine but am not able to make them to move them to the correct container on click of get solution under submit button.
Please have a look dragNdrop
function getSolutions(event, ui) {
$("#submitModal").modal('hide');
alert("onclick get solution draggable move to correct container dynamically");
}

Tablesaw not getting triggered inside Bootstrap Carousel

I'm using the Tablesaw plugin to get responsive tables.
At some point I need to include different tables inside different items/slides of a Bootstrap Carousel.
On load, the table on the active Item of the Carousel will display correctly (Tablesaw is initiated properly), but once I move to the next slide/item, the tables in there won't be properly displayed (Tablesaw not initiated).
Tablesaw includes an extra JS file to initiate upon load:
$( function(){
$( document ).trigger( "enhance.tablesaw" );
});
This seems to work for the first slide/item but not for the rest.
Any clue on why this might be happening?
I've created a Plunker to illustrate the issue.

The problem is in the Tablesaw intialization. Tablesaw needs to know during initialization (which is done in the tablesaw-init.js) the size of the element. You have two tablesaw elements placed inside the bootstrap Carousel, while one is active and the other is not. When you look at the Carousel css, you can see that the display property of the Carousel item which is not currently active is set to none. Elements which are not displayed have width and height set to 0.
So the solution could be changing the code inside the file tablesaw-init.js to this:
;(function($) {
$(function(){
// Show all carousel items before Tablesaw intialization
$(".carousel-inner > .item").css("display", "block");
// Initialize the Tablesaw
$( document ).trigger( "enhance.tablesaw" );
// Remove the style added before initialization
$(".carousel-inner > .item").removeAttr("style");
});
})(jQuery);
After this change there is no need to handle the slid event.
Here is your original code sample with the mentioned change, so you can see it is working https://plnkr.co/edit/Ocd0axmKLS1KDtGYlU4K?p=preview

You can't initialize Tablesaw on hidden tables.
So you have to set your custom initialization script to only initialize visible tables:
;(function($) {
$(function(){
// Initialize Tablesaw on the active carousel slide
$('#carousel-einzelwerte .item.active').trigger('enhance.tablesaw');
// Initialize Tablesaw on slide change
$('#carousel-einzelwerte').on('slid.bs.carousel', function(e) {
$(e.relatedTarget).trigger('enhance.tablesaw');
});
});
})(jQuery);
Demo: https://plnkr.co/edit/JxOnj6dJVcmpyBrzEzrs?p=preview

Unable to rebind draggable events in jqueryUI

I am trying to use draggable in jquery UI to drag the images .
However , I am able to drag image, disable dragging and enable dragging.
But after disabling the dragging I am unable to enable the dragging again.
Here's the fiddle:
Code:
//Please Check this fiddle
[Fiddle] : http://jsfiddle.net/Subhasish2015/yrLbyzfg/8/

You should use jquery draggable enable and disable method, like this:-
// sets draggable the element with id="dg"
$("#disable").on('click', function() {
$( "#im" ).draggable( "disable" );
});
$("#enable").on('click', function() {
$('#im').draggable({
containment: "#drg"
});
$( "#im" ).draggable( "enable" );
});
Fiddle

Bootstrap popovers for table row hover: Not possible to click link inside popover

I have table rows where I display additional information in a twitter bootstrap popover.
A few notes from the interaction design I work with:
Popovers must show up when you hover the row
Popovers will contain 1 or more links
Now, the link part is the hard part. If you move the mouse from the table row, to the popover (which contains the link), the popover will disappear!
I am creating the the popover with this code:
var options = {placement: 'bottom', trigger: 'hover', html: true};
$(this).popover()
-- which assumes relevant html including the link is generated and put in data-content attribute
Notice this {placement: 'bottom' }. In order to make it possible to move the mouse to the popover, I tried {placement: 'in bottom'} (added in keyword, which generates popover dom element inside the selector).
Problem is for table rows, that is not really legal HTML-wise. Perhaps that's why placement: 'in bottom' renders even more ugly: The popover glues to the top of my viewport.
Try my demo in My example on JSFiddle
It contains the examples ...
My question is how should I define my popover, so that it is possible to click the links -- given the limitations set by the interaction design?

The problem is obvisously that the popover does what it is supposed to do. When you attach popovers to <tr>'s, and let the popover respond to hover - and the popover hangs below the <tr>'s bottom - you will never be able to reach the content of the popover.
Trigger:hover can easily be mimicked by trigger:manual like this
$('table').on('mouseenter', 'tr', function() {
$(this).popover('show');
});
$('table').on('mouseleave', 'tr', function() {
$(this).popover('hide');
});
Setting trigger:manual enable us to manipulate the popover behaviour. The solution below adds a little delay to the mouseenter / mouseleave-events, and then check if the mouse is inside the popover (by attaching events to the popover themselves). If the mouse is inside a popover, a new popover will not be shown, and the active popover will not be hidden, even if there has been a mouseenter-event in another <tr>. Forked jsfiddle : http://jsfiddle.net/xZxkq/
var insidePopover=false;
function attachEvents(tr) {
$('.popover').on('mouseenter', function() {
insidePopover=true;
});
$('.popover').on('mouseleave', function() {
insidePopover=false;
$(tr).popover('hide');
});
}
$('table').on('mouseenter', 'tr', function() {
var tr=$(this);
setTimeout(function() {
if (!insidePopover) {
$(tr).popover('show');
attachEvents(tr);
}
}, 200);
});
$('table').on('mouseleave', 'tr', function() {
var tr=$(this);
setTimeout(function() {
if (!insidePopover) $(tr).popover('hide');
}, 200);
});

Can JQuery UI Dialog remember its position between opening and closing

I have a JQuery dialog that I dynamically open and close. Everything is working fine except the position of the dialog is not remembered after it is closed and then reopened.
The size is maintained but the position is not.
I have tried hooking into the 'Open' event but it appears that the position is being reset by JQuery UI after I manually reposition the element.
Is maintaining the size of the dialog possible? I certainly think it should be.

You could use the jQuery UI Dialog "beforeclose" event to store the position and size. You can set both position and size using the "option" method.
Here is what currently works for me:
$(function() {
$("#dialog").dialog({
beforeclose: function(){
$(this).dialog('option', 'position', [$(this).offset().left, $(this).offset().top]);
$(this).dialog('option', 'width', $(this).width());
$(this).dialog('option', 'height', $(this).height());
}
});
});
$('#dialog').dialog('open')

You can override the standard close method by returning false on 'beforeclose' and using jquery to hide the dialog:
$.ui.dialog.defaults.beforeclose = function() {
$(this).closest('.ui-dialog').hide();
return false;
};
and this to reopen:
$('#list').closest('.ui-dialog').show();

Take a look at jquery changeset.
You'll also find a fix for this