Here's what I am doing:
I have an accordion from which I need to be able to drag and drop a li element in an editable div and upon the drop I need to open a dialog box which has some additional options,which upon selection need to be appended to the original li element.
This is what the script looks like:
jQuery("#formula").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui)
{
/* Popup logic */
symbolicKey = ui.draggable.attr('title');
symbolicId = ui.draggable.attr('id');
var res = symbolicId.split(".");
if(res[0] == "customIndex")
{
jQuery("#periodOnly").dialog("open");
}
else
{
jQuery(this).find(".placeholder").remove();
jQuery("<span class='vt' id=" + symbolicId + " contenteditable=false></span>").text("[" + symbolicKey + "]").appendTo(this);
}
}
});
jQuery("#periodOnly").dialog({
autoOpen: false,
modal: true,
buttons: {
"OK": function()
{
var period = $('select[property="customPeriod"]').val();
symbolicId = symbolicId + "."+period;
symbolicKey = symbolicKey + "."+period;
jQuery("#formula").find(".placeholder").remove();
jQuery("<span class='vt' id=" + symbolicId + " contenteditable=false></span>").text("[" + symbolicKey + "]").appendTo("#formula");
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$( this ).dialog( "close" );
}
});
From my understanding, its these two functions which are calling each other recursively and thereby causing a stack overflow however I cant seem to find any alternative to solving the problem i.e removing the recursion.
Any help is appreciated.
Turns out it was the close method for the dialog box which was causing the recursion! Silly on my part!
Related
I would appreciate if someone can help me out,
here's my code :
`https://jsfiddle.net/m796a3ud/`
What I want to do is drag an image from these list of Images and be able to get a clone that's draggable, and when I put it inside the box it counts how many images are inside, it works good for the most part but when I try to drag the cloned image in and out of the box a couple of times the clone gets cloned it self which is not what I want, I would really appreciate the help!
thanks.
You have to call ui.helper.remove(); on the out event, try this:
$(function() {
// document.addEventListener('mousemove', function(event) {
// console.log($(':hover').hasClass('draggable'))
// })
var n = 0;
$( ".draggable" ).draggable({helper: 'clone'});
$( ".wrong" ).draggable();
$( "#droppable" ).droppable({
accept: ".draggable",
drop: function( event, ui) {
console.log(ui.draggable)
console.log($(':hover').hasClass('draggable'))
var new_signature = $(ui.helper).clone().removeClass('draggable');
new_signature.draggable();
$(this).append(new_signature);
if($(new_signature).hasClass("ui-draggable") && !$(new_signature).hasClass("dropped")){
$(new_signature).addClass("dropped draggable")
n++;
$(".count").text("There are " + n + " divs inside parent box detail.");
}
},
out: function(event, ui) {
ui.helper.remove();
if($(ui.draggable).hasClass("draggable") && $(ui.draggable).hasClass("dropped")) {
$(ui.draggable).removeClass("dropped")
console.log(ui.helper)
}
if( n > 0) {
n--
}
$(".count").text("There are " + n + " divs inside parent box detail.");
}
});
});
Ok, I have an issue with drag and drop.
What they do, they click a button, it initializes the whole drag and drop.
function sortElements() {
// Place droppable elements
var x = 0;
$("#content-body div[data-type='column'],#content-body div[data-type='carousel']").each(function() {
var el = $(this);
if(x == 0){
el.before('<div class="neoDroppableEle" id="neoDroppableEle-' + x + '"><\/div>');
x++;
}
el.addClass('edit_el').after('<div class="neoDroppableEle" id="neoDroppableEle-' + x + '"><\/div>');
x++;
el.append('<div class="drag-handle"><i class="fa fa-arrows"></i></div>');
var w = el.width();
el.css('width',w+'px');
});
$("#content-body div[data-type='insertable']").each(function() {
var el = $(this);
el.prepend('<div class="neoDroppableEle" id="neoDroppableEle-' + x + '"><\/div>');
x++;
});
// Swap entire columns
$("#content-body div[data-type='column']").draggable({
refreshPositions: true,
helper: "clone",
handle:'.drag-handle',
appendTo: "body",
zIndex: 10000,
start: function( event, ui ) {
$(".neoDroppableEle").addClass('dragging');
},
stop: function( event, ui ) {
$(".neoDroppableEle").removeClass('dragging');
}
});
$(".neoDroppableEle").droppable({
accept: "div[data-type='column']",
tolerance: "pointer",
hoverClass: "focus_in",
activeClass: "focus_in_active",
drop: function(event, ui) {
cur_ele = this.id;
var el = ui.draggable;
var html = el.html();
el.remove();
$("#" + cur_ele).replaceWith('<div class="row" data-type="column">'+html+'</div>');
}
});
// Swap individual photos within columns
$("#content-body div[data-type='imagewrap']").each(function(){
$(this).draggable({
revert: "invalid",
helper: "clone" ,
zIndex: 10001,
});
$(this).droppable({
accept: "div[data-type='imagewrap']",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
var draggable = ui.draggable, droppable = $(this);
draggable.swap(droppable);
}
});
});
}
When they are done, they click the button again.
function sortElementsComplete() {
$(".ui-droppable").droppable("destroy");
$(".ui-draggable").draggable("destroy");
$(".edit_el").removeAttr('style').removeClass('edit_el');
$(".neoDroppableEle").remove();
$(".drag-handle").remove();
}
This all runs and works great!
But now I am tryng to save the HTML code after each drop for undo's. And when I save the undo, I need to remove all additional classes and elements my function to drag and drop add's. Because they may not be in the sorting area when they click undo and do not want drag handles and my borders I set up as visual aids just appearing.
So now I have:
$(".neoDroppableEle").droppable({
accept: "div[data-type='column']",
tolerance: "pointer",
hoverClass: "focus_in",
activeClass: "focus_in_active",
drop: function(event, ui) {
cur_ele = this.id;
var el = ui.draggable;
var html = el.html();
el.remove();
$("#" + cur_ele).replaceWith('<div class="row" data-type="column">'+html+'</div>');
setTimeout(function(){
sortElementsComplete();
editor_add();
},1000);
}
});
The above with the timeout code always fails with:
Error: cannot call methods on droppable prior to initialization;
attempted to call method 'destroy'
How so? It IS initialized and running. After the drop I should be able to destroy it, make my save and rebuild it. Using disable gives the same error. To me the error makes no sense.
After editor_add() is ran, it re-builds whatever they were doing, in this case it will fire sortElements(); after the save.
But the below runs fine?
// Swap individual photos within columns
$(this).droppable({
accept: "div[data-type='imagewrap']",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
var draggable = ui.draggable, droppable = $(this);
draggable.swap(droppable);
setTimeout(function(){
sortElementsComplete();
editor_add();
},250);
}
});
It will error if I do not have the timeout above. Seems 250 is the min, anything lower it errors. But the first one will not ever work, no matter how long or short I make the timeout.
Really hope this makes sense.
Maybe if I used
var draggable = ui.draggable, droppable = $(this);
draggable.swap(droppable);
On it instead it would work. o.O
Currently in my website, I am displaying a ShowModalDialogue to display a warning. Recently I have been asked to modify the behavior of this as belows :
Earlier behavior :
I used to just show a warning message. The user can click OK or Close button of the dialogue box to proceed.
New behavior :
I have been asked to insert a text box in the same ShowModalDialogue. Now the user has to insert his initials before clicking OK button. Also now he can not close the dialogue by clicking Close button also. If he tries to close the dialogue by clicking either on Close button or OK button while text box is empty, same pop up has to open with warning. But the trouble is after closing the warning message dialogue is shifted randomly on screen even though its properties have been modified such that it will not move.
Now I have been asked to replace this ShowModalDialogue by something better.
I have two suggestions : 1. CSS div Popup 2. Ajax-control ModalPopup.
Which one of them is better?
Is there anything else which can be used instead that I can use?
My major concerns are good look and easy to handle.
Thanks in advance.
Wanna try qTip2? This one got lots of options for you.
http://craigsworks.com/projects/qtip2/demos/#dialogues
you can simply do it with jquery UI
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create an account": function() {
bValid = $("#d-form").valid();
if (bValid ){
$( "#users tbody" ).append( "<tr>" +
"<td>" + $( "#name" ).val() + "</td>" +
"<td>" + $( "#email" ).val() + "</td>" +
"<td>" + $( "#password" ).val() + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
Fiddle
Say I have the following link:
<a onclick="confirmDelete()" href="delete.do&xyz">Delete user</a>
and the following is the confirmDelete function:
function confirmDelete()
{
if(!confirm("delete user?"))
{
return false;
} else
{
return true;
}
}
Basically when click on link, it checks whether the user select ok or cancel and then perform based on it.
Problem: I have got hundreds of similar links on my platform and we decide to turn all the javascript alerts to jquery dialog.
I used the following to somehow override the alert:
$(function(){
window.confirm = function(message) {
$('#overrideAlert').text(message).dialog({
resizable: false,
modal: true,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
};
});
It works fine and the alert comes up as a jquery dialog but the issue is because of the fact that it is not possible to return something from a handler like dialog, I am not sure how to tell my button in the filed, that the user selected ok or cancel.
Basically I m not sure how to link them all together.
Please help
The issue is because of javascript asynchronous nature . As you are using jQuery . could try following method .
$('a[onclick="confirmDelete()"]')
.attr('onclick','')
.click( function(){
var anch = this,
message = "delete user?";
$('#overrideAlert').text(message).dialog({
resizable: false,
modal: true,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
alert( "window.location=" + anch.href );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
return false ;
});
I made jsfiddle http://jsfiddle.net/wB389/
Maybe like so:
"Ok": function() {
window.location=deleteURL;
$( this ).dialog( "close" );
},
It's probably a little more complicated that that since you use relative url's but you can get the current url using window.location.protocol + window.location.port + window.location. window.location.host + window.location.pathname
Edit: I'd still like to know the answer to this question for knowledge's sake. I managed to get a similar effect to what I want using the out event on a drop event though.
I have a working drag and drop that will record which box an image has been placed in. However, when I created a drag event to account for the fact a user removes an image from the box it breaks the drag and drop causing the images to be undraggable.
The only difference between the two code sections below is the latter has the addition of
start: handleDragEvent and it's associated function to write "Moved".
Code Works:
function init() {
$('#ImageE1, #ImageE2, #ImageE3').draggable({ containment: '#ForDualScreen', cursor: 'move', zIndex: 20000, handle: 'img'});
$('#BoxE1, #BoxE2, #BoxE3, #BoxE4, #BoxE5, #BoxE6, #BoxE7, #BoxE8, #BoxE9, #BoxE10, #BoxE11, #BoxE12, #BoxE13, #BoxE14, #BoxE15').droppable( {
drop: handleDropEvent
} );
}
function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
var draggableId = ui.draggable.attr("id") + 'PLACE';
var droppableId = $(this).attr("id");
alert( 'BLARGH "' + draggableId + '" was dropped onto me!' + droppableId );
document.getElementById(draggableId).value = droppableId;
}
Code no longer works:
function init() {
$('#ImageE1, #ImageE2, #ImageE3').draggable({ containment: '#ForDualScreen', cursor: 'move', zIndex: 20000, handle: 'img', start: handleDragEvent});
$('#BoxE1, #BoxE2, #BoxE3, #BoxE4, #BoxE5, #BoxE6, #BoxE7, #BoxE8, #BoxE9, #BoxE10, #BoxE11, #BoxE12, #BoxE13, #BoxE14, #BoxE15').droppable( {
drop: handleDropEvent
} );
}
function handleDragEvent( event, ui ) {
var draggable = ui.draggable;
var draggableId = ui.draggable.attr("id") + 'PLACE';
document.getElementById(draggableId).value = "Moved";
}
function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
var draggableId = ui.draggable.attr("id") + 'PLACE';
var droppableId = $(this).attr("id");
alert( 'BLARGH "' + draggableId + '" was dropped onto me!' + droppableId );
document.getElementById(draggableId).value = droppableId;
}
You need to pass in the event and ui parameters to your handleDragEvent() and handleDropEvent() functions.
function init() {
$('#ImageE1, #ImageE2, #ImageE3').draggable({ containment: '#ForDualScreen', cursor: 'move', zIndex: 20000, handle: 'img', start: handleDragEvent});
$('#BoxE1, #BoxE2, #BoxE3, #BoxE4, #BoxE5, #BoxE6, #BoxE7, #BoxE8, #BoxE9, #BoxE10, #BoxE11, #BoxE12, #BoxE13, #BoxE14, #BoxE15').droppable( {
drop: function(event, ui) { handleDropEvent(event, ui); }
});
}