Got a nice solution for my project on stack but I test now some days for a solution to save data after switch in db.
The original post: change switch position behavior
$(function()
{
$(".swapable").
draggable({ revert: true }).
droppable(
{
drop:function(event,ui)
{
swapNodes($(this).get(0),$(ui.draggable).get(0));
}
});
});
function swapNodes(a, b)
{
var aparent= a.parentNode;
var asibling= a.nextSibling===b? a : a.nextSibling;
b.parentNode.insertBefore(a, b);
aparent.insertBefore(b, asibling);
}
http://jsfiddle.net/keGuN/1/
Now I want use the stop to save something after drop.
$(function() {
$(".swapable").
draggable(
{
revert: true,
stop:function()
{
// put new div combination in db
}
}).
droppable(
{
drop:function(event,ui)
{
swapNodes($(this).get(0),$(ui.draggable).get(0));
}
});
});
function swapNodes(a, b)
{
var aparent= a.parentNode;
var asibling= a.nextSibling===b? a : a.nextSibling;
b.parentNode.insertBefore(a, b);
aparent.insertBefore(b, asibling);
}
How to find a way to put new div combination put in database?
My problem is how to get the right way to show new div combination.
Related
I have get this old code
// myenter.js, enter key is binded to insertParagraph command.
$.summernote.addPlugin({
name : 'myenter',
events : {
// redefine insertParagraph
'insertParagraph' : function(event, editor, layoutInfo) {
//you can use summernote enter
//layoutInfo.holder().summernote('insertParagraph');
// also you can use your enter key
layoutInfo.holder().summernote('insertNode', document.createTextNode("\r\n"));
// to stop enter key
//e.preventDefault();
}
}
});
$('.summernote').summernote({ height : 300 });
but now method of add plugin has changed and i want this functionality with new version by this code
$.extend($.summernote.plugins, {
'myenter': function (context) {
console.log('myenter');
}
});
but it is not called at all
I had tried to get same functionality by
summernote.onEnter
and
summernote.keyPress
but it gives error..
$.extend($.summernote.plugins, {
'brenter': function (context) {
this.events = {
'summernote.enter': function (we, e) {
// insert 2 br tags (if only one br tag is inserted the cursor won't go to the next line)
document.execCommand('insertHTML', false, '<br><br>');
e.preventDefault();
}
};
}
}
I managed to fix it like this:
$('#summernote').summernote('destroy');
$.extend($.summernote.plugins, {
'brenter': function (context) {
this.events = {
'summernote.enter': function (we, e) {
//get hold of the enter event and trigger a shift+enter keypress
e.trigger($.Event("keydown", {
keyCode: 13, // ENTER
shiftKey: true
}));
//stop the normal event from happening
e.preventDefault();
}
};
}
});
// then do summernote as normal...
$('#summernote').summernote({
I am attempting to have a view where after every fetch of 20 different products from my backend (.fetch()), the DOM will display a product ad. The problem I am running into is that every time the collection fires the add event, the CompositeView is re-rendered.
How can I add Children Views to a CompositeView without re-rendering the whole parent?
define(["marionette", "lodash", "text!fonts/products/template.html",
'fonts/products/item-view', 'fonts/products/model', 'eventer'],
function(Marionette, _, templateHTML, ProductItemView, ProductsModel, eventer) {
'use strict';
var ProductsView = Marionette.CompositeView.extend({
template: _.template(templateHTML),
childView: ProductItemView,
childViewContainer: '.items',
productsLimit: 150,
initialize: function() {
this.listenTo(eventer, 'sort:products', this.sortCollection, this);
this.listenTo(this.collection, 'reset sort add', this.render, this);
this.listenTo(this.collection, 'sync', this.setupSync, this);
},
sortCollection: function(field) {
this.collection.sortByKey(field);
},
setupSync: function() {
this.setupWindowScrollListener();
this.render();
},
productsEnd: function() {
eventer.trigger('products:end');
},
setupWindowScrollListener: function() {
var $window = $(window),
$document = $(document),
that = this,
collectionSize = that.collection.length;
if(collectionSize <= that.productsLimit) {
$window.on('scroll', _.throttle(function() {
var scrollTop = $window.scrollTop(),
wHeight = $window.height(),
dHeight = $document.height(),
margin = 200;
if(scrollTop + wHeight > dHeight - margin) {
eventer.trigger('fetch:more:products');
$window.off('scroll');
}
}, 500));
} else {
that.productsEnd();
}
},
});
return ProductsView;
});
Generate Ad Code
Here is the code I am using to try to generate ads
https://gist.github.com/dennismonsewicz/aecf9bd0befe63e96ee6
What's causing your parent view to re-render, is that you're calling a render on a collection add event :)
this.listenTo(this.collection, 'reset sort add', this.render, this);
Unless you really want to re-render that parent CompositeView you don't need this listener at all because Marionette handles:
collection#add: _onCollectionAdd will render and place new childviews in the default (based on a comparator, if none then id) sort order
collection#reset: Marionette already has a listener on your CompositeView that will call this.render for you if your collection is reset
collection#sort: If you provide your view { sort: true } as an option to your CompositeView, it will handle 'sort' events on your collection. The default is to sort the children views and then call render on the CompositeView. If you don't want your CompositeView to be re-rendered, pass { reorderOnSort: true } and the children view will be efficiently reordered without re-rendering anything (parent nor children), simply moving the children DOM elements in the sort order dictated by the collection.comparator.
Is there a way to query jsPlumb in order to retrieve all connections whose "source" and "target" properties have the same parent div? Currently, I am manually setting the "scope" property of each connection (based on the parent div's id), and this works. However, feels hacky. I feel as if there should be some way to query jsPlumb like
jsPlumb.select('#parentDiv').each(function(connection) {
/*do stuff here*/
});
At the time of connection creation itself you can check and store those connections separately instead of checking for it later. Code:
jsPlumb.bind("jsPlumbConnection", function(ci) {
var s=ci.sourceId,c=ci.targetId;
var f=$('#'+s).parent().attr("id");
var g=$('#'+c).parent().attr("id");
if( f===g ){
// store ci.connection
console.log("Connection:"+ ci.connection +" has same parent div");
}
});
This is how you can confined it to a specific parent div & use 'instance' for each jsPlumb operation :
jsPlumb.ready(function () {
instance = jsPlumb.getInstance({
DragOptions: { cursor: 'pointer', zIndex: 2000 },
ConnectionOverlays: [
["Arrow", { width: 12, length: 15, location: -3 }],
],
Container: "parent" //put parent div id here
});
});
function containsCycle() {
var return_content = false;
$('.item:visible').each(function() {
$(this).addClass("white");
});
$('.item:visible').each(function() {
$vertex = $(this);
if ($vertex.hasClass("white")) {
if (visit($vertex)) {
return_content = true;
return false;
}
}
});
return return_content;
}
function visit(vertex) {
vertex.removeClass("white")
.addClass("grey");
var vertex_connections = jsPlumb
.getConnections({
source: vertex
});
for (var i = 0; i < vertex_connections.length; i++) {
if ($('#' + vertex_connections[i].targetId)
.hasClass("grey")) {
return true;
} else if ($('#' + vertex_connections[i].targetId)
.hasClass("white")) {
if (visit($('#' + vertex_connections[i].targetId))) {
return true;
}
}
}
vertex.removeClass("grey")
.addClass("black");
return false;
}
Use this code to find the cycle connection
I want to know the coordinates of the mouse pointer when I r-click on CKEditor
I added a few items to the context menu of CKEditor.
i want when I select a certain item, the other a notice appeared also in place i r_click
$(document).ready(function () {
var ck = CKEDITOR.replace('txtNoidungBR', 'vi');
var $DK = $('#divAddDK');
/*Thêm điều kiện*/
ck.on('instanceReady', function (e) {
ck.addCommand("addDK", {
exec: function (ck) {
/*I want to set coordinates to $DK = coordinates of context menu when i r-click*/
$DK.css({ 'left': 600, 'top': 400 }).toggle(300);
}
});
ck.addMenuGroup('BRDT');
var addDK = {
label: 'Thêm điều kiện',
command: 'addDK',
group: 'BRDT'
};
ck.contextMenu.addListener(function (element, selection) {
return {
addDK: CKEDITOR.TRISTATE_OFF
};
});
ck.addMenuItems({
addDK: {
label: 'Thêm điều kiện',
command: 'addDK',
group: 'BRDT',
order: 1
}
});
});
});
help me. thaks
You'll need to track the mouse yourself, as ckeditor doesn't give you the mouse event.
See this answer for details on that:
How to get the mouse position without events (without moving the mouse)?
collapsing Graph could expand table but expanding graph immediately shall bring both the graph and table to be visible too,Vice versa.
You need to implement a collapse and expand function handlers.
$("#panelbar").kendoPanelBar({
expandMode: "single",
expand: function (e) {
...
},
collapse: function (e) {
...
}
});
On these handlers you check which item is being collapsed (or expanded) and decide which ones to expand and collapse according to your algorithm.
For knowing which item is being collapse / expanded you should use inside the handler:
var itemId = $("span", e.item).attr("id");
The very last thing is remember that if you want more than one bars opened you should switch you expandMode to multiple.
EDIT: As first approach to what you need:
$("#panelbar").kendoPanelBar({
expandMode: "multiple",
expand : function (e) {
var itemId = $("span", e.item).attr("id");
if (itemId === "Span1") {
this.expand($("#Span2").closest("li"));
} else {
this.collapse($("Span1").closest("li"));
}
},
collapse : function (e) {
var itemId = $("span", e.item).attr("id");
if (itemId === "Span1") {
this.expand($("#Span2").closest("li"));
} else {
this.collapse($("Span1").closest("li"));
}
}
});