CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggablejquery-ui-droppable
andrew
andrew

Reputation: 83

Jquery on drop remove helper

I use jquery draggable and jquery droppable , in draggable function I use helper clone, and when I drop the dragged element it should remove the clone and show another div, in the droppable place I have a div inside that is invisible and on drop it should be visible , this is my code

$('#external-events .fc-event').each(function() {
                        // store data so the calendar knows to render an event upon drop

                        // make the event draggable using jQuery UI
                        $(this).draggable({
                            helper:'clone',
                            zIndex: 999999,
                            containment: 'window',
                            appendTo:'body',
                            scroll: false,
                            revert: true,      // will cause the event to go back to its
                            revertDuration: 0,  //  original position after the drag
                            // start: function(){
                            //     $(this).fadeOut();
                            //
                            // },
                            // stop: function(){
                            //     $(this).fadeIn();
                            // }
                        });

                    });

and this is my droppable function 

 $(to).droppable({

                drop: function ( event, ui ){
                 $("ui.draggable").clone().hide();
                    var avatar = '';
                    var user = ui.helper[0].id;
                    console.log("user", user);
                    var fullname = $('#'+user+' .fullName').text();
                    var hiddenInput = $('#'+user+' .userId').val();
                    console.log("ID: ", hiddenInput);
                    console.log(fullname);
                    $('#uname_here').text(fullname);
                    var userId = '#' + ui.helper[0].id + ' .userId';
                    $('.whenDropOwnerHideThis').hide();
                    $("div#dropedUser").show();
                    $('#dropUserForHeadOfProjectInput').val(hiddenInput);
                    $("#dropUserForHeadOfProject").removeClass('error_empty');
                    $("#drop_head_project").removeClass('error_empty');

                }
            });

like this it doesn't work, It shows errors 

Uncaught Error: Syntax error, unrecognized expression: # .fullName

Upvotes: 1

Views: 513

Answers (3)

andrew
andrew

Reputation: 83

the problem was that I couldn't get the id correctly so this is how i get it now and it works fine , 

var user = ui.helper.context.id;

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

You must have a unique id in your HTML and if not then you can use data-* attributes to select any element.

Also from your code, try to remove space from selector if your element's id has class fullname like,

var fullname = $('#'+user+'.fullName').text();
               // --------^^ remove the space from here

Do the same for class userId,

var hiddenInput = $('#'+user+'.userId').val();

As per your error message I think you are not getting user-id from the statement,

var user = ui.helper[0].id;// make sure it should not blank &  
                           // an element having this id exists in DOM

Upvotes: 1

Ali Soltani
Ali Soltani

Reputation: 9927

I think you want get element by id that it's id is like user.fullname and you made a mistake in code below:

var fullname = $('#'+user+' .fullName').text();

To use any of the meta-characters (such as !"#$%&'()*+,./:;<=>?@[\]^``{|}~ ) as a literal part of a name, it must be escaped with two backslashes \\ . For example, an element with id="foo.bar", can use the selector $("#foo\\.bar"). (More information)

So you need to change your code like this:

var fullname = $('#'+user+'\\.fullName').text();

Upvotes: 1

Related Questions