Prevent Default Action on Hyperlink to Run AJAX

Question

I have a hyperlink on my page

<a id="delete-file" href="">
 <img border="0" src="images/delete_.png" alt="Delete File" width="20" height="20" />
</a>                

I'm trying to prevent the default action when it is clicked and run an AJAX function instead. For some reason when I click it, it just brings me to the top of the page and my my AJAX is not fired. No console error messages either.

Can someone help me with my syntax?

<!---Script to upload file link --->     
<cfoutput>
<script>
$(document).ready(function() {
        $('##upload-file').submit(function(event){
            event.preventDefault();
            $.each($('##upload')[0].files, function(i, file) {
                var formData = new FormData();
                formData.append('file-0', file);
                ajaxUpload(formData);
            });

        $('##delete-file').click(function(event){
            event.preventDefault();
                ajaxDelete();
            });

function ajaxUpload(formData) {
            console.log("ajaxUpload function called");
            $.ajax({
                type: 'POST',
                url: "actionpages/file_upload_action.cfm?ticket_id=#url.ticket_id#",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function(){
                    $('.loader').show();
                },
                complete: function(){
                     $('.loader').hide(3000);
                },
                success: function(data) {
                    console.log("File successfully sent.");

                    $("##addFileResponse").append( "File successfully sent." );
                    PopulateFileUploadDiv();
                    },
                error: function(data) {
                    console.log(data);
                }
            });
        }
    });

function ajaxDelete() {
            console.log("ajaxDelete function called");
            $.ajax({
                type: 'POST',
                url: "actionpages/delete_attachment.cfm?ticketID=#URL.ticket_id#&file_path=#filecheck.file_path#",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function(){
                    $('.loader').show();
                },
                complete: function(){
                     $('.loader').hide(3000);
                },
                success: function(data) {
                    console.log("File successfully deleted.");

                    $("##addFileResponse").append( "File successfully deleted." );
                    PopulateFileUploadDiv();
                    },
                error: function(data) {
                    console.log(data);
                }
            });
        }
    }); 
</script>
</cfoutput>

Answer 1

Ok, so my assumption of the error relating to the fact that my AJAX calls lost their uniqueness because the code for the AJAX was outside of my was correct. I basically had to ajust my code so that I my AJAX code was within my tag, but more importantly, that the functions were giving unique names and were passing the unique data from my output.

Here is my modified and correct code:

<cfoutput>
        <table width="50%" border="0" cellpadding="5">
            <tr bgcolor="##CCCCCC">

                <td width="8%">&nbsp;</td>
                <td width="67%" ><strong>Filename</strong></td>
                <td width="18%" ><strong>Actions</strong></td>
            </tr>
            <cfloop query="filecheck">

              <tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#" class="btnav" onmouseover="style.backgroundColor='##FFFFCC';"
onmouseout="style.backgroundColor='###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#'">

                <td><img src="images/Paper-Clip-icon.png" alt="Attachment" /><br /></td>
                <td><a href="https://#subscriber.hostName#.#subscriber.baseURL#/ticket-uploads/#filecheck.file_path#" target="_blank">#filecheck.file_path#</a>
                &nbsp;
                (Record-ID &nbsp; #ID#)
                </td>
                <td>
                 <a id="delete-file#ID#" class="delete-btn#ID#"  href="">
                <img  border="0" src="images/delete_.png" alt="Delete File" width="20" height="20" />
                 </a>

                 <!---Script to upload file link  --->   
                <script>
                $(document).ready(function(){
                    $(".delete-btn#ID#").on("click",function(e){
                        // ajaxDelete();
                        console.log("Start of prevent.");
                        e.preventDefault();
                        console.log("Calling AJAX with id of #ID#.");
                        ajaxDelete#ID#();
                    });

                function ajaxDelete#ID#() {
                            console.log("ajaxDelete function called");
                            $.ajax({
                                type: 'POST',
                                url: "actionpages/delete_attachment.cfm?fileID=#filecheck.ID#&ticketID=#URL.ticket_id#&file_path=#filecheck.file_path#&techID=#url.techID#&TT=#type.TT#",
                                data: #filecheck.ID#,
                                cache: false,
                                contentType: false,
                                processData: false,
                                beforeSend: function(){
                                    $('.loader').show();
                                },
                                complete: function(){
                                     $('.loader').hide(3000);
                                },
                                success: function(data) {
                                    console.log("File successfully deleted.");

                                    $("##addFileResponse").append( "File successfully deleted." );
                                    PopulateFileUploadDiv();
                                    },
                                error: function(data) {
                                    console.log(data);
                                    $("##addFileResponse").append( "Something went wrong." );
                                }
                            });
                        }
                    });

                </script> 


                </td>
              </tr>
            </cfloop><br />
        </table>
        </cfoutput>

Answer 2

This is a very long shot but I think the problem is that you are not escaping all of your hash signs. Notice at your urls:

url: "actionpages/delete_attachment.cfm?ticketID=#URL.ticket_id#&file_path=#filecheck.file_path#"
url: "actionpages/file_upload_action.cfm?ticket_id=#url.ticket_id#",

You are escaping the hash sign for your ids but not there so I'm guessing your server is malforming your Javascript, creating an error and preventing the code from executing. You should try double-pounding them too.

If it's truly an issue with the Id, then maybe you can use other jQuery Constructor like this:

jQuery ( element )

$(document.getElementById('delete-file'));

Answer 3

$(document).on("click","##delete-file",function(e){
    ajaxDelete();
    e.preventDefault();
});

Try placing any div wrapping the ##delete-file (loaded before the DOM) that you might have in place of the document.

$(document).ready(function(){
    $("#wrapper-div").on("click","##delete-file",function(e){
        ajaxDelete();
        e.preventDefault();
    });
});

If you can't get it to work with the ID because of Cold Fusion, try adding a class to the link:

<a id="delete-file" href="" class="delete-btn">

And then try

$(document).ready(function(){
    $(".delete-btn").on("click",function(e){
        ajaxDelete();
        e.preventDefault();
    });
});