Issue with onclick function

Question

Hi I have written a GSP and Javascript code to perform on click remove file functionality.

JavaScript code

function remove(attachmentId) {
    $(document).ready(function(){
            $('.glyphicon-remove').click ( function(e){
                e.preventDefault();
                $(this).parent().parent().remove();

                $.ajax({
                           url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
                            data: {
                                    attachmentId: attachmentId
                            },
                            success: function(data){
                                    alert("Success");
                            }

                       });

                 });
            });

        }

GSP Code

               <g:each in="${fileList}" var="file">
                    <div>
                        <a href="#" onclick="remove('${file.attachmentId}')"> 
                        <span class="glyphicon glyphicon-remove"></span></a> 
                        <a href="/forms/landing/attachment/${file.attachmentId}" >${file.name}</a> 
                        </br>
                    </div>
                </g:each>

Groovy Code

def deleteSelectedFile() {
        String attachmentId= params.attachmentId
        activitiService.deleteAttachemnt(attachmentId)
    }

I am not getting why exactly it is taking double click for deleting the first record.

Please help me.

Note: Application is running in Internet Explorer.

You have a click handler inside another click handler which doesn't look right! — lshettyl, Jul 30 '15 at 09:45

Tahir Ahmed · Answer 1 · 2015-07-30T09:45:14.150

I think removing the $(document).ready(function() {...}) part as well as $('.glypeicon-remove') part from the remove function but keeping the stuff happening inside of these untouched, should fix your problem.

So your code should look like:

JavaScript:

function remove(attachmentId) {
    $(this).parent().parent().remove();
    $.ajax({
        url: '${g.createLink(controller: '
        landing ', action: '
        deleteSelectedFile ')}',
        data: { attachmentId: attachmentId },
        success: function (data) { alert('Success'); }
    });
}

Hope this helps.

Arun P Johny · Answer 2 · 2015-07-30T10:04:43.403

1

The problem is, in your case the jQuery event handler is registered only after the first click, so in the second click the event handler is getting triggered.

Looks like you are dealing dealing with dynamic elements. In that case instead of using inline event handlers use event delegation and remove the inline event handler

<a href="#" class="delete-attachment" data-attachment-id="${file.attachmentId}">

then

$(document).ready(function(){
    $(document).on('click', '.delete-attachment', function(e){
        e.preventDefault();
        $(this).parent().parent().remove();

        $.ajax({
            url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
            data: {
            attachmentId: $(this).data('attachment-id')
        },
               success: function(data){
            alert("Success");
        }

    });
});

edited Jul 30 '15 at 10:04

answered Jul 30 '15 at 09:46

Arun P Johny

384,651
66
527
531

Hi Arun, I even tried this as well. But the problem here would be how exactly I could pass the required parameter "attachmentId". For now I am passing it as onclick=remove("attachmentId"). If I remove this code, I wont be able to pass the attachmentId right? – Santosh Anantharamaiah Jul 30 '15 at 09:51
I am sorry this solution is also not working for me. Now the file is not getting deleted. Note: Application is running in IE10. – Santosh Anantharamaiah Jul 30 '15 at 10:01

score 1 · Accepted Answer · edited Jul 30 '15 at 10:11

The issue is you have bound a click event in a function. Because you have not called that function at page load, it is registering the click event on first click and on second click, it is getting executed.

To overcome this issue you have two ways either just use your inline handler and just call the ajax, don't try to bind any click in it:

function remove(attachmentId, elem) {
    $(elem).parent().remove();
    $.ajax({
       url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
       data: {attachmentId: attachmentId},
        success: function(data){
            alert("Success");
        }

   });
}

and in the view you have to pass this in the function:

<a href="#" onclick="remove('${file.attachmentId}', this)">

Second way is to use event delegation syntax:

$(static-parent).on(event, selector, callback);

so if you update your function as above and remove the inline event handler from the view and use data-* attribute. you can use it this way:

<a href="#" data-attachmentId='${file.attachmentId}'> 

function remove() {
    var attachmentId = $(this).parent().data('attachmentId');
    $(this).closest('div').remove();
    $.ajax({
       url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
       data: {attachmentId: attachmentId},
        success: function(data){
            alert("Success");
        }

   });
}
$(document).on('click', '.glyphicon-remove', remove);

Thank you so much Jai, your first solution worked out for me. I just changed parent().parent() to parent() to make it perfect. Thanks a lot. — Santosh Anantharamaiah, Jul 30 '15 at 10:13

score 0 · Answer 4 · answered Jul 30 '15 at 09:58

I am not sure its working or not but as per jQuery rules try below code.

function remove(attachmentId) {
     $(document).on('click','.glyphicon-remove', function(e){
       e.preventDefault();
       $(this).parent().parent().remove();

       $.ajax({
          url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
          data: {
             attachmentId: attachmentId
          },
          success: function(data){
             alert("Success");
         }
   });
});        
}

Issue with onclick function

4 Answers4