I have a problem.
I drop element into #projectsActive. New element have been created there. Old element have been deleted with fadeOut
But ajax query sometimes isn't running.
What's the reason?
$("#projectsActive").droppable({
drop: function (event, elem)
{
var e = elem.draggable;
var linkToSend = "/Projects/Publish/" + $(e).attr("projectid");
$.ajax({ url: linkToSend });
var projectid = $(e).attr("projectid");
var innerText = "";
if ($(e).find("a").length > 0)
{
innerText = $(e).children("a").html();
}
else
{
innerText = $(e).html();
}
var newObject = '<li class="project dragg" projectid="' + projectid + '">' + innerText + '</li>';
$(e).fadeOut("fast", function ()
{
$("#projectsActive").append(newObject);
$(this).remove();
BindDrags();
});
}
});
Related
I am working to extend the Draggable widget by adding guides to the draggable element.
Example Fiddle: https://jsfiddle.net/Twisty/0mgrqy48/181/
JavaScript
$(function() {
$.widget("custom.guidedDrag", $.ui.draggable, {
options: {
autoShowGuides: true,
guideWidth: "1px",
guideStyle: "dashed",
guideColor: "#55f",
guideSides: ["top", "left"]
},
_create: function() {
this._makeGuides();
return this._super();
},
_makeGuides: function() {
var target = this.options.appendTo;
if (target == "parent") {
target = this.element.parent();
}
var self = this;
$.each(self.options.guideSides, function(i, side) {
var styles = {};
styles['border-' + side + '-width'] = self.options.guideWidth;
styles['border-' + side + '-style'] = self.options.guideStyle;
styles['border-' + side + '-color'] = self.options.guideColor;
styles.position = "absolute";
styles.top = 0;
styles.left = 0;
if (side == "top" || side == "bottom") {
styles.width = "100%";
styles.height = "";
$("<div>", {
class: "ui-draggable-guide-horizontal-" + side,
"data-elem-rel": self.uuid
}).css(styles).appendTo(target);
} else {
styles.width = "";
styles.height = "100%";
$("<div>", {
class: "ui-draggable-guide-vertical-" + side,
"data-elem-rel": self.uuid
}).css(styles).appendTo(target);
}
console.log("Guide Created for " + self.uuid + " on " + side + " side.");
});
},
_showGuides: function() {
if (this.options.autoShowGuides) {
this._moveGuides();
$("div[class*='ui-draggable-guide-'][data-elem-rel='" + this.uuid + "']").show();
}
},
_hideGuides: function() {
if (this.options.autoShowGuides) {
$("div[class*='ui-draggable-guide-'][data-elem-rel='" + this.uuid + "']").hide();
}
},
_moveGuides: function() {
var guides = $("div[class*='ui-draggable-guide-'][data-elem-rel='" + this.uuid + "']");
var t = this.element.position().top,
l = this.element.position().left,
b = t + this.element.outerHeight(),
r = l + this.element.outerWidth();
$(".ui-draggable-guide-horizontal-top", guides).css("top", t + "px");
$(".ui-draggable-guide-horizontal-left", guides).css("left", l + "px");
$(".ui-draggable-guide-horizontal-bottom", guides).css("top", b + "px");
$(".ui-draggable-guide-horizontal-right", guides).css("left", r + "px");
},
start: function(event, ui) {
console.log("Drag Start");
this._showGuides();
return this._super();
},
drag: function(event, ui) {
self._moveGuides();
return this._super();
},
stop: function(event, ui) {
console.log("Stop Drag");
self._hideGuides();
return this._super();
},
_destroy: function() {
$("div[class*='ui-draggable-guide-'][data-elem-rel='" + this.uuid + "']").remove();
return this._super()
}
});
$(".draggable").guidedDrag({
guideSides: ["top", "right"],
scroll: false
});
});
Currently, the guides are created and appear where expected. When I drag the element, the start event should be triggered and move the guides to the element (and unhide them later).
In console, I see the following, after running and dragging the element:
Guide Created for 0 on top side.
Guide Created for 0 on right side.
So I can tell that _create is running but start and stop do not seem to fire.
I have also tried to use .on() to bind to dragstart with no change. Example:
_create: function() {
this._makeGuides();
var self = this;
this.element.on("dragstart", function(event, ui){
console.log("Drag Start");
self._moveGuides();
});
return this._super();
}
Based on documentation, I should just be able to call the same widget and use _super().
To make the parent's methods available, the widget factory provides two methods - _super() and _superApply().
This never seems to work.
To resolve this, I have to make use of the _mouseStart, _mouseDrag, and _mouseStop event callbacks.
Example: https://jsfiddle.net/Twisty/0mgrqy48/245/
JavaScript
$(function() {
$.widget("app.guidedDrag", $.ui.draggable, {
options: {
autoShowGuides: true,
guideWidth: "1px",
guideStyle: "dashed",
guideColor: "#55f",
guideSides: ["top", "left"]
},
_create: function() {
this._makeGuides();
this._super();
},
_guideElems: {},
_makeGuides: function() {
var target = this.options.appendTo;
switch (target) {
case "parent":
target = this.element.parent();
break;
case "window":
target = $(window);
break;
case "document":
target = $(document);
break;
default:
target = $(target);
}
var self = this;
$.each(self.options.guideSides, function(i, side) {
var styles = {};
styles['border-' + side + '-width'] = self.options.guideWidth;
styles['border-' + side + '-style'] = self.options.guideStyle;
styles['border-' + side + '-color'] = self.options.guideColor;
styles.position = "absolute";
styles.top = 0;
styles.left = 0;
if (self.options.autoShowGuides) {
styles.display = "none";
}
if (side == "top" || side == "bottom") {
styles.width = "100%";
self._guideElems[side] = $("<div>", {
class: "ui-draggable-guide-horizontal-" + side,
}).data("ui-draggable-rel", self.uuid).css(styles).appendTo(target);
} else {
styles.height = "100%";
self._guideElems[side] = $("<div>", {
class: "ui-draggable-guide-vertical-" + side,
}).data("ui-draggable-rel", self.uuid).css(styles).appendTo(target);
}
console.log("Guide Created for " + self.uuid + " on " + side + " side.");
});
},
_showGuides: function() {
if (this.options.autoShowGuides) {
this._moveGuides();
$.each(this._guideElems, function(i, g) {
g.show();
});
}
},
_hideGuides: function() {
if (this.options.autoShowGuides) {
$.each(this._guideElems, function(i, g) {
g.hide();
});
}
},
_moveGuides: function() {
var t = this.element.position().top,
l = this.element.position().left,
b = t + this.element.outerHeight(),
r = l + this.element.outerWidth();
$.each(this._guideElems, function(i, g) {
if (g.hasClass("ui-draggable-guide-horizontal-top")) {
g.css("top", t + "px");
}
if (g.hasClass("ui-draggable-guide-horizontal-bottom")) {
g.css("top", b + "px");
}
if (g.hasClass("ui-draggable-guide-vertical-left")) {
g.css("left", l + "px");
}
if (g.hasClass("ui-draggable-guide-vertical-right")) {
g.css("left", r + "px");
}
});
},
_mouseStart: function(event) {
this._moveGuides();
this._showGuides();
this._super(event);
},
_mouseDrag: function(event) {
this._moveGuides();
return this._super(event);
},
_mouseStop: function(event) {
this._hideGuides();
return this._super(event);
},
_destroy: function(event) {
$(this._guideElems).remove();
return this._super(event);
}
});
$(".draggable").guidedDrag({
guideSides: ["top", "right"],
scroll: false
});
});
I am struggling to get the required functionality from my current code.
Two Lists (grid style) List 1 - List 2
List 1 items are draggable to list 2, NOT sortable, cloned (but then disabled as you can only add item once)
List 2 droppable, you can sort, entire item html copies over from list 1.
Code Pen script
$(function () {
$('.box').draggable({
appendTo: "body",
helper: "clone"
});
$("#sortable2").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
//add first element when cart is empty
if ($(this).find('.placeholder').length > 0) {
$(this).find('.placeholder').remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this);
} else {
//used as flag to find out if element added or not
var i = 0;
$(this).children("li").each(function () {
if ($(this).offset().top >= ui.offset.top) {
//compare
$("<li class='box'></li>").text(ui.draggable.text()).insertBefore($(this));
i = 1;
return false; //break loop
}
});
if (i !== 1) {
//if element dropped at the end of cart
$("<li class='box'></li>").text(ui.draggable.text()).appendTo(this);
}
}
}
})
$(function() {
$( "#sortable2" ).sortable({
placeholder: "highlight",
items: "li:not(#sortable1)",
sort: function () {
$(this).removeClass("ui-state-default");
}
});
});
});
//Display action in text
$(function DisplayWhatDropped() {
var area = "Area Dropped";
var item = "fId of the item";
$(".result").html(
"[Action] <b>" + item + "</b>" + " dropped on " + "<b>" + area + "</b>"
);
});
Any assistance would be greatly appreciated.
I've got this code, I've try to change a little bit with var v = value.statistics.viewCount; but nothing work for me, I've try to find a answer but without any result...
$(document).ready(function () {
$( $grid ).masonry( 'reloadItems' );
$( $grid ).masonry( 'layout' );
$('.add1').click(function (event) {
event.preventDefault();
var searchTerm = $('#query').val();
getRequest(searchTerm);
});
});
function getRequest(searchTerm) {
url = 'https://www.googleapis.com/youtube/v3/search';
var params = {
part: 'snippet',
key: 'AIzaSyA8OmKcw2DMNkJicyCJ0vqvf90xgeH52zE',
q: searchTerm,
maxResults:10
};
$.getJSON(url, params, function (searchTerm) {
showResults(searchTerm);
});
}
function showResults(results) {
var html = "";
var entries = results.items;
$.each(entries, function (index, value) {
var title = value.snippet.title;
var thumbnail = value.snippet.thumbnails.high.url;
var v = value.statistics.viewCount;
var description = value.snippet.description;
var videoID = value.id.videoId;
html += '<div class="item" title="' + title + '">' + '<img class= "vidth" id="' + videoID + '" src="' + thumbnail + '" ><div class="info"><p1>' + title+'</p1><hr><p2>'+description+'</p2><hr><p3>'+v+'</p3></div></div>';
});
$('.masonry').append(html);
$( $grid ).masonry( 'reloadItems' );
$( $grid ).masonry( 'layout' );
}
any ideas ?
You are trying to get viewCount from the statistics part, but you only queried for the snippet part.
You can only query for the statistics from the videos.list endpoint - it is not available through the search endpoint.
You will have to take the ids from the search results and then do a videos.list query for those ids to get the statistics on each and therefore the viewCount. See https://developers.google.com/youtube/v3/docs/videos/list
I have created a grid and customized a column to contain a jquery UI menu like in the Split Button example
Everything works fine except for the fact that the menu window appear inside the cell causing a bad visual effect, that is, the cell height increase to make room for the menu window.
Have a look at the following screenshot for a visual explanation (nevermind about the menu item in disabled state).
Is there any way way to make the menu window appear on top of the table element in term of z-index?
Thanks very much for your valuable help, community :)
EDIT as per comment request:
The code to create the splitbutton menu is the following. First the column model markup
{ name: 'act', index: 'act', width: 80, sortable: false, search: false, align: 'center',
formatter: function (cellvalue, options, rowObject) {
var markup = "<div>" +
"<div class='actionsButtonset'>" +
"<button class='dshbd_ConfirmMonth' rel='" + rowObject.UmltID + "' rev='" + rowObject.IsConfirmAvailable + "' plock='" + rowObject.IsPeriodLocked + "' alt='Confirm'>Confirm</button>" +
"<button class='btnSelectMenu' rev='" + rowObject.IsUmltLocked + "' " + ">Select</button>" +
"</div>" +
"<ul class='actionMenu'>" +
"<li><a class='dshbd_UnlockMonth' href='#' rel='" + rowObject.UmltID + "' alt='Unlock'>Unlock</a></li>" +
"</ul>" +
"</div>";
return markup;
}
}
Then, inside the gridComplete event I have the following code (please note that some code is needed to enable/disable menu items
var confirmMonthBtn = $('.dshbd_ConfirmMonth');
$.each(confirmMonthBtn, function (key, value) {
var button = $(this);
var umltID = button.attr('rel');
button.button().click(function (event) {
event.preventDefault();
});
var isPeriodLocked = (button.attr('plock') === 'true');
if (!isPeriodLocked) {
var isConfirmAvailable = ($(this).attr('rev') === 'true');
if (!isConfirmAvailable) {
button.button({ disabled: true });
}
} else {
button.button({ disabled: true });
}
});
var currentPeriod = GetCurrentPeriod();
var period = GetCurrentViewPeriod();
var isCurrent = false;
if (currentPeriod != null && period != null) {
isCurrent = period.PeriodID == currentPeriod.PeriodID;
}
var selectBtns = $('.btnSelectMenu');
$.each(selectBtns, function (key, value) {
var button = $(this);
button.button({ text: false, icons: { primary: 'ui-icon-triangle-1-s'} });
button.click(function (event) {
var menu = $(this).parent().next().show();
menu.position({
my: 'left top',
at: 'left bottom',
of: this
});
$(document).on('click', function () {
menu.hide();
});
return false;
});
$('div.actionsButtonset').buttonset();
var menuElement = button.parent().next();
menuElement.hide();
menuElement.menu({
select: function (event, ui) {
var umltID = ui.item.children().attr('rel');
event.preventDefault();
}
});
if (!isCurrent) {
var isPeriodLocked = ($(this).attr('plock') === 'true');
if (isPeriodLocked) {
menuElement.menu({ disabled: false });
} else {
var isUmltLocked = ($(this).attr('rev') === 'true');
menuElement.menu({ disabled: !isUmltLocked });
}
} else {
//The current period is always unlocked
menuElement.menu({ disabled: true });
}
});
I prepared the demo for you which demonstrates how Split Button can be used inside of jqGrid. It displays
More detailed explanation of the demo I'll post later. Probably you will understand all yourself after examining of the code.
I am a new to JSON, I am trying to make the menu that can click and display the data.
All the objects are return from the Controller of my asp.net mvc project.
This is my code :
<script language="javascript" type="text/javascript">
function ViewProduct() {
var searchVal = $("#txtsearch").val();
$.getJSON(url, function (data) {
var mainMenu = $("#content ul#navmenu-v");
$.each(data, function (index, dataOption) {
var new_li = $("<li class='level1' id='select_list'><a href='javascript:void(0);' id='" + dataOption.ID + "' class ='selectedcategory'>" + dataOption.Name + "</a>");
mainMenu.append(new_li);
$('a#' + dataOption.ID).click(function () {
var urlGetProByDep = '<%: Url.Content("~/") %>' + "Products/GetProductsByDepList";
t = dataOption.ID;
var data = {};
if (searchVal != "") {
data.depID = t;
data.Q = searchVal;
} else {
data.depID = t;
}
$(".brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
$(".brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
$.each(product.ja, function (index, value) {
$(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
});
});
});
});
}
$(document).ready(function () {
ViewProduct();
});
The other block of menu code works very well , just have a problem with this block of my code above :
$.getJSON("ProductListing/Index", data, function (product) {
$(".brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
$.each(product.ja, function (index, value) {
$(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
});
});
});
It is the block that I take the the object of JSON to display the in my view, but when I click on the menu , It shows only the element at the last of JSON object.
This is my JSON :
{"ja":
[
{"Name":"ABC1","PictureName1":"my image name1","ID":1},
{"Name":"ABC2","PictureName2":"my image name2","ID":2}
]}
Each menu is the department of each product. And if I do not loop the product data in the menu block, I cannot take the ID of the department to query to get the product in each department.
Any idea or question are welcome, Thanks you for taking your time.
You seem to have a copy&paste-error in your code, you will do 2 request to exactly the same url after each other - not even using the results of the first request. I guess you only wanted something like
$(".brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
$.each(product.ja, function (index, value) {
$(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
});
});
But your problem is the .html() method. You are looping over your products, and in each turn you set the html of each .brand_id-element to a new value. So the result you see is what you have set to all elements in the last iteration. What you would need to do is set the HTML of each element on its own, each with a different content.
Yet, instead of emptying the list items and readding new contents to them (maybe the number of your products changes each query request), I'd rather remove all items and append new ones:
$(".brand_id").remove();
$.getJSON("ProductListing/Index", data, function (product) {
var $parent = $("#parent"); // the parent node of the product list
$.each(product.ja, function (index, value) {
$parent.append('<li class="brand_id">' + value.Name + '<br />' + value.PictureName + '<br />' + value.ID + '</li>');
});
});
(edit) ...or, if brand_id really is an id:
var $parent = $("#brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
$.each(product.ja, function (index, value) {
$parent.append('<div>' + value.Name + '<br />' + value.PictureName + '<br />' + value.ID + '</div>');
});
});
You are subscribing to the .click event of the anchor inside a $.each call. But since you have captured the dataOption variable you are using to prepare the AJAX request in a closure, it is obvious that by the time you click on the link, this dataOption variable is already pointing to the last element of the array you are looping over. So you could pass the argument to the click callback like this:
<script type="text/javascript">
function ViewProduct() {
// TODO: There's some url variable used here which is nowhere defined => define it
$.getJSON(url, function (data) {
var mainMenu = $("#content ul#navmenu-v");
$.each(data, function (index, dataOption) {
$(mainMenu).append(
$('<li/>', {
'class': 'level1',
// TODO: find an unique id or you get broken HTML
'id': 'select_list',
'html': $('<a/>', {
'href': '#',
'id': dataOption.ID,
'class': 'selectedcategory',
'text': dataOption.Name,
'click': function(arg) {
return menuClick(arg);
}({ dataOption: dataOption })
})
})
);
});
});
}
function menuClick(arg) {
var urlGetProByDep = '<%= Url.Action("GetProductsByDepList", "Products") %>';
var t = arg.dataOption.ID;
var data = { };
var searchVal = $('#txtsearch').val();
if (searchVal != '') {
data.depID = t;
data.Q = searchVal;
} else {
data.depID = t;
}
$('.brand_id').empty();
var url = '<%= Url.Action("Index", "ProductListing") %>';
// TODO: Are those 2 nested AJAX calls really necessary here?
$.getJSON(url, data, function (product) {
$('.brand_id').empty();
$.getJSON(url, data, function (product) {
$.each(product.ja, function (index, value) {
$('.brand_id').html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
});
});
});
}
$(document).ready(ViewProduct);
</script>
Also notice that I have moved the searchVal declaration inside the click callback in order to account for changes of its value between the time the page is loaded and the user actually clicking on the link.