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");
}
});
}
},
Related
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();
i was implementing Jquery autocomplete in website and the issue with it is event of text change is not triggred if we press and hold back button in android devices
$("#user_name4").autocomplete({
source: function( request, response ) {
if (user_id_4 != 0 ) {
user_id_4 = 0;
my_entry_fees = my_entry_fees - entry_fees;
document.getElementById("join_btn").value= "Pay "+my_entry_fees+" Rs;";
my_joined--;
}
$.ajax({
url: "../API/v1/SearchUser",
data: 'value='+request.term,
dataType: "json",
headers:
{
'Authorization':'Basic dGVzdDp0ZXN0',
'Authorizations': tokensdb,
},
type: "POST",
success: function (data) {
response(data.data);
}
});
},
minLength: 1,
select: function(event, ui) {
user_id_4=ui.item.user_id;
var username=ui.item.username;
$('#user_name4').val(username);
my_entry_fees = my_entry_fees + entry_fees;
document.getElementById("join_btn").value= "Pay "+my_entry_fees+" Rs";
my_joined++;
},
html: true,
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000);
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
var path = "http://graph.facebook.com/"+item.facebook_id+"/picture?type=square";
return $( "<li><div><img alt= '' src='"+path+"'><span>"+item.username+"<br>"+item.label+"</span></div></li>" ).appendTo( ul );
};
});
here is the code that i was using for autocomplete
I found the solution for that:
$("#user_name4").keyup(function() {
if (!this.value) {
if (user_id_1 != 0 ) {
user_id_1 = 0;
my_entry_fees = my_entry_fees - entry_fees;
document.getElementById("join_btn").value= "Pay "+my_entry_fees+" Rs";
my_joined--;
}
}
});
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);
}
});
});
I have autocomplete working on my site with the following:
$(function () {
$("#client").autocomplete({
source: "/appointments/clients.json",
minLength: 1,
select: function (event, ui) {
$('input[name="clientid"]').val(ui.item.id);
$('#app-submit').html('Add Appointment for ' + ui.item.value);
}
});
});
What I want to do now is that when a user types in something that is not shown on the dropdown, I'd like for the following to take place:
$('input[name="clientid"]').val('');
$('#app-submit').html('Add Appointment');
I tried using the following but it didn't work:
$(function () {
$("#client").autocomplete({
source: "/appointments/clients.json",
minLength: 1,
select: function (event, ui) {
if(typeof(ui.item)){
$('input[name="clientid"]').val(ui.item.id);
$('#app-submit').html('Add Appointment for ' + ui.item.value);
} else {
$('input[name="clientid"]').val('');
$('#app-submit').html('Add Appointment');
}
}
});
});
the select evevnt is only triggered when you select an item in dropdown
you could do it on search event
$(function () {
$("#client").autocomplete({
source: "/appointments/clients.json",
minLength: 1,
select: function (event, ui) {
$('input[name="clientid"]').val(ui.item.id);
$('#app-submit').html('Add Appointment for ' + ui.item.value);
},
search: function() {
$('input[name="clientid"]').val('');
$('#app-submit').html('Add Appointment');
}
});
});
I don't know what the whole idea is without seeing markup. But my guess is:
$("#client").autocomplete({
source: function( request, response ) {
$.ajax({
url: "/appointments/clients.json",
dataType: "jsonp",
success: function( data ) {
var suggestions = $.map( data, function( item ) {
return {
label: item.value,
value: item.id
}
});
// idea: whatever I have, extend to extra item.
suggestions.push({
label: 'Add appointment',
value: 0
});
response( suggestions );
}
});
},
select: function(evt, ui){
if( ui.item.label == 'Add appointment'){
/* do something special with it */
}else{
/* blah blah */
}
}
});
My question is:I does not work drag-an-drop feature of jQuery UI on IE9.What should I do?
Here is my code:
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc.js" ></script>
<script type="text/javascript" src="js/jquery.json-2.2.min.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" ></script>
<script type="text/javascript" >
$(function() {
$(".dragbox")
.each(function() {
$(this).hover(function() {
$(this).find("h2").addClass("collapse");
}, function() {
$(this).find("h2").removeClass("collapse");
})
.find("h2").hover(function() {
$(this).find(".configure").css("visibility", "visible");
}, function() {
$(this).find(".configure").css("visibility", "hidden");
})
.click(function() {
$(this).siblings(".dragbox-content").toggle();
updateWidgetData();
})
.end()
.find(".configure").css("visibility", "hidden");
});
$(".column").sortable({
connectWith: ".column",
handle: "h2",
cursor: "move",
placeholder: "placeholder",
forcePlaceholderSize: true,
opacity: 0.4,
start: function(event, ui) {
//Firefox, Safari/Chrome fire click event after drag is complete, fix for that
if ($.browser.mozilla || $.browser.safari)
$(ui.item).find(".dragbox-content").toggle();
},
stop: function(event, ui) {
ui.item.css({ "top": "0", "left": "0" }); //Opera fix
if (!$.browser.mozilla && !$.browser.safari)
updateWidgetData();
}
})
.disableSelection();
});
function updateWidgetData() {
var items = [];
$(".column").each(function() {
var columnId = $(this).attr("id");
$(".dragbox", this).each(function(i) {
var collapsed = 0;
if ($(this).find(".dragbox-content").css("display") == "none")
collapsed = 1;
var item = {
id: $(this).attr("id"),
collapsed: collapsed,
order: i,
column: columnId
};
items.push(item);
});
});
var sortorder = { items: items };
$.ajax({
type: "POST",
url: "not.aspx/siralamakaydet",
data: "{list:'" + $.toJSON(sortorder) + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
error: function() {
alert("hata");
},
success: function(msg) {
alert(" Sıralama yapıldı...");
}
});
//Pass sortorder variable to server using ajax to save state
// $.post('updatePanels.php', 'data=' + $.toJSON(sortorder), function(response) {
// if (response == "success")
// $("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000);
// setTimeout(function() {
// $('#console').fadeOut(1000);
// }, 2000);
// });
}
</script>
I think it's your JQuery and JQuery UI version. Check out this related question:
Jquery drag drop bug in IE9
works for that guy in: jquery 1.6.2 & jquery ui 1.8.14