We Keep Coding

Links are not working in Sortable container (in Android )

In the image below is my sortable container and individual image can be dragged and dropped to sort. But the action links(icons) in the box are not working on the android browser because of the Js. When I remove sortable JS the links work fine. How can I make both of them work together?
Sortable Js
$("#sortable").sortable({
cursor: "move",
start: function (event, ui) {
ui.item.startPos = ui.item.index();
},
stop: function (event, ui) {
var id = ui.item.attr("id");
var PropID = $("#PropID").html();
var obj = {
PropID: PropID,
ID: id,
Pos1: ui.item.startPos ? ui.item.startPos : 0,
Pos2: ui.item.index() ? ui.item.index() : 0
}
try {
$.ajax({
type: "POST",
url: "/members/pm-add-photos.aspx/MovePhoto",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var result = msg.d;
if (result.toLowerCase().indexOf('error') > -1) {
triggertoast("", "We're sorry, there seems to have been an error.", "error");
}
},
error: function (response) {
console.log(response);
},
});
}
catch (err) {
triggertoast("", "We're sorry, there seems to have been an error.", "error");
}
}
});
$("#sortable").disableSelection();

How to get target / class name when draggable stop

I use Jquery UI draggable,
I would like add menu on favorite menu when draggable list menu ...
I using options appendTo, but the problem, how the way menu add to favorite menu when I drag until favorite container...
Sorry for my bad english ...

$("YourSelector").draggable(
{
start: function(event, ui)
{
//This Occurs when drag start
selectedClass = $(this).attr('data-value');
console.log(selectedValue);
},
stop: function() {
//This Occurs when drag stop
selectedClass = $(this).attr('data-value');
console.log(selectedValue);}
});

$(".navbar-menu").draggable({
appendTo: ".navbar-favoritebody ul",
axis: "y",
containment: ".navbar-left",
handle: "a:not([data-disabled]):not([data-type='favorite']):not(:contains('Dashboard'))",
helper: "clone",
start: function(ev, ui) {
$("body").prepend("<div class=\"ondrag\"></div>");
var _this = $(this);
_this.find("a").attr("data-href","favorite/create");
},
drag: function(ev, ui) {},
stop: function(ev, ui) {
$(".ondrag").remove();
var _this = $(this),
desc = parsing.toUpper(_this.find("a").attr("data-slug").replace(/\-/g, " "), 2);
var target = $(event.target);
console.log(target.prop('className'));
if(target.prop("className") == "navbar-favoritebody") {
$.ajax({
type: "POST",
url: location.pathname+"?r="+_this.find("a").attr("data-href"),
data: {
"Favorite[menu_id]": _this.find("a").attr("data-menu"),
},
dataType: "text",
error: function(xhr, errors, message) {
console.log(xhr, errors, message);
},
beforeSend: function() {
navigasi.process("load");
},
success: function(data) {
if(!$.trim(data)) {
notification.open("danger", "Menu "+ desc +" sudah ada di Favorite.", 2000);
} else {
$(".navbar-favoritebody").html(data);
notification.open("success", "Menu "+ desc +" berhasil ditambah ke Favorite.", 2000);
}
},
complete: function() {
navigasi.process("destroy");
_this.find("a").removeAttr("data-href");
}
});
}
},

Close modal window and clean hash in the same function

I load content into a div via ajax. This changes the website hash to #WhateverYouClickedOn, that's fine. I want to clean the hash once the user clicks the x button that closes this modal window. How could i do that?
This is my code
Ajax call
function getPage() {
return window.location.hash.replace(/^#/, '');
}
function updatePage(page, html) {
var navItems = [
'products',
'about',
'storelocator',
'media',
'faq',
'contact'
];
$('.overlay').trigger('show');
// Remove the arrow from the previously selected item
if (navItems.indexOf(page) != -1) {
$(".w-container .w-nav-menu a").removeClass("active");
}
$("#" + page + "-link").addClass("active");
$('.content')
.hide()
.html(html)
.fadeIn();
}
function retrieveContent() {
$('.overlay').trigger('show');
var page = getPage();
if (!page) {
return;
}
$.ajax({
type: "POST",
url: "./load.php",
data: 'page='+page,
dataType: "html",
beforeSend: function() {
$('#canvasloader-container.wrapper').show();
},
complete: function() {
$('#canvasloader-container.wrapper').hide();
},
success: function(msg){
if (msg) {
updatePage(page, msg);
}
}
});
}
$(function() {
retrieveContent();
window.onhashchange = retrieveContent;
});
Overlay / Modal window
(function($) {
$.fn.overlay = function() {
overlay = $('.overlay');
overlay.ready(function() {
overlay.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
if (!$(this).hasClass('shown')) return $(this).css('visibility', 'hidden');
});
overlay.on('show', function() {
$(this).css('visibility', 'visible');
$(this).addClass('shown');
return true;
});
overlay.on('hide', function() {
$(this).removeClass('shown');
$(".content").html("")
return true;
});
overlay.on('hide', function() {
$(".w-container .w-nav-menu a").removeClass('active'); // Remove the active class when overlay is off
$(".content").html("")
return true;
});
$('a[data-overlay-trigger=""]').on('click', function() {
overlay.trigger('show');
});
$('a[data-overlay-trigger]:not([data-overlay-trigger=""])').on('click', function() {
$('.overlay.' + $(this).attr('data-overlay-trigger')).trigger('show');
});
})
};
})(jQuery);

tooltip not showing on mouse enter

I'm using qtip2 to display a tool tip from a link in a table, and i call it on mouse enter. The issue is the tool tip is not displaying but the the alert works and i cant figure out why the tool tip wont show. Thank you for any help.
$('#tblOrder tr td a').on('mouseenter',function(){
alert('');
var id = $('#tblOrder tr[id*="row"]').attr('id').substr(3);
$(".proper a").qtip({
content: {
text: 'Loading.....',
ajax: {
url: '<%=Url.Action("Alarms") %>',
type: 'POST',
data: {id: id},
success: function(data, status){
this.set('content.text', data);
},
error: function(xhr){
console.log(xhr.responseText);
console.log($('#tblOrder tr[id*="row"]').attr('id').substr(3));
}
}
},
show: {
effect: function() {
$(this).slideDown();
}
},
hide: {
effect: function() {
$(this).slideUp();
}
}
});
});
I have created a jsfiddle to go with this here

Here you are http://jsfiddle.net/f0sbo0vd/3/
$(document).on('mouseenter', '#tblOrder tr a', function(event) {
$(".proper a").qtip({
content: {
text: 'Loading.....',
ajax: {
url: '<%=Url.Action("Alarms") %>',
type: 'POST',
success: function (data, status) {
this.set('content.text', data);
},
error: function (xhr) {
console.log(xhr.responseText);
}
}
},
show: {
event: event.type,
ready: true,
effect: function () {
$(this).slideDown();
}
},
hide: {
effect: function () {
$(this).slideUp();
}
}
}, event);
});
EDIT
To show qtip on the link use this http://jsfiddle.net/f0sbo0vd/5/
Just change
$(".proper a").qtip({ ... });
to
$(this).qtip({ ... });

JQuery draggable and Javascript stop working after ajax call

I have an on click declared like so:
$('body').on('click', 'input#searchVariables', function () {
var datasetId = $('.TSDatasetID').val();
var term = $('#searchTextbox').val();
alert(term);
$.ajax({
type: "GET",
url: "trendssearchresults.aspx?datasetId=" + datasetId + "&term=" + term,
error: function (xhr, status, error) {
//alert the error if needed
alert('Error: ' + xhr.responseText);
},
success: function (responseData) {
$('#searcharea').html(responseData);
$('#searcharea').show();
}
});
});
It returns the data fine, but my onclick events in that code don't work.
After my ajax inputs the html to my page, none of the javascript works. How do I fix this?
Draggable code:
$(document).ready(function () {
$(".draggableVar").draggable({ revert: false, helper: 'clone', scroll: true, appendTo: 'body', start: function () {
$(this).data("startingScrollTop", $(this).parent().scrollTop());
},
drag: function (event, ui) {
var st = parseInt($(this).data("startingScrollTop"));
ui.position.top -= $(document).scrollTop() - st;
}
});

Try this:
$(document).ready(function () {
//On Dom ready load your draggable if you need to:
loadjs();
$('body').on('click', 'input#searchVariables', function () {
var datasetId = $('.TSDatasetID').val();
var term = $('#searchTextbox').val();
alert(term);
$.ajax({
type: "GET",
url: "trendssearchresults.aspx?datasetId=" + datasetId + "&term=" + term,
error: function (xhr, status, error) {
//alert the error if needed
alert('Error: ' + xhr.responseText);
},
success: function (responseData) {
$('#searcharea').html(responseData);
$('#searcharea').show();
loadjs(responseData);
}
});
});
});
Rebind your draggable :
function loadjs(responseData) {
$(".draggableVar").draggable({ revert: false, helper: 'clone', scroll: true, appendTo: 'body', start: function () {
$(this).data("startingScrollTop", $(this).parent().scrollTop());
},
drag: function (event, ui) {
var st = parseInt($(this).data("startingScrollTop"));
ui.position.top -= $(document).scrollTop() - st;
}
}

You need to rebind your dom elements with $.draggable after appending them to dom. ajax is async and append the elements after your initial draggable call.
function bindDraggables(outer) {
outer.find(".draggableVar").draggable({ revert: false, helper: 'clone', scroll: true, appendTo: 'body', start: function () {
$(this).data("startingScrollTop", $(this).parent().scrollTop());
},
drag: function (event, ui) {
var st = parseInt($(this).data("startingScrollTop"));
ui.position.top -= $(document).scrollTop() - st;
}
});
}
$('body').on('click', 'input#searchVariables', function () {
var datasetId = $('.TSDatasetID').val();
var term = $('#searchTextbox').val();
alert(term);
$.ajax({
type: "GET",
url: "trendssearchresults.aspx?datasetId=" + datasetId + "&term=" + term,
error: function (xhr, status, error) {
//alert the error if needed
alert('Error: ' + xhr.responseText);
},
success: function (responseData) {
var appendableElement = $('#searcharea');
appendableElement.html(responseData);
appendableElement.show();
bindDraggables(appendableElement);
}
});
});