CODEWITHSUNDEEP
jquerycoldfusion
volume one
volume one

Reputation: 7563

Invoke ColdFusion method with on click in JQuery

I have a page which displays a list of files that a user has uploaded. Its like this:

<ul id="FileUploader">
<li>
<a href="directory/filename1.pdf">Filename1</a> 
<a href="#" class="DeleteFileUpload">Delete</a>
</li>
<li>
<a href="directory/filename2.pdf">Filename2</a> 
<a href="#" class="DeleteFileUpload">Delete</a>
</li>
</ul>

I have a CFC with a method which needs to know which file to delete. Because this is not Form, I'm not sure how to pass the data to the CFC to get it to delete the file.

CFC example:

<cffunction name="DeleteUpload" access="remote" returnformat="JSON">

<cfargument name="Filename" required="true"> //which filename to delete
<cffile action = "delete" file = "c:\files\upload\#Arguments.Filename#"> //delete the file

   <cfquery> // Update SQL table to remove filename reference
       DELETE FROM UploadsTable
       WHERE Filename = '#Arguments.Filename#'
    </cfquery>
<cfset success = true> // all done so set variable to true
<cfreturn success> // returns success as JSON to notify Jquery of deletion
</cffunction>

How can I use JQuery Ajax to pass the value of the Filename to the CFC so that it knows which one to delete and then after receiving the successful result inform the user with an alert?

I know how to do the above with a FORM, but because this is not a form I'm a bit confused. This is as far as my JQuery has come:

$("#FileUploader").on('click', '.DeleteFileUpload', function () {
    $(this).parent('li').remove();
});

This only removes the <li> from the DOM. I also need to get the Filename and pass it to the CFC somehow.

Upvotes: 2

Views: 1804

Answers (2)

Joe Rinehart
Joe Rinehart

Reputation: 763

(New to participating stackoverflow, can't comment yet.)

Don't just remove the element and pray. Removing it immediately, having it fail, and then showing a "Hey, whoopsie!" message is embarrassing and confusing.

Instead, satisfy the immediate feedback goal by showing the item is on its way to the wastebin, and then kill it when it's gone:

$("#FileUploader").on('click', '.DeleteFileUpload', function (event) {
  event.preventDefault();

  // Do something showing that we're trying a delete...
  $(this).text('Deleting...')  

  var uri = '/path/to/your.cfc?method=DeleteUpload&Filename=' + encodeURI(     $(this).attr('href')) )

  $.ajax(uri)
    .done( function() {
      $(this).parent('li').remove();
    })
    .fail( function() {
      // Let them know we have a goof and let them try again
      alert('Whoa! That couldn't be deleted!')
      $(this).text('Deleted...')  
    })    
});

You'd then want to consider preventing the user from clicking twice by un/re-binding the handler.

Upvotes: 3

Jelle Kralt
Jelle Kralt

Reputation: 990

You'll need to add an ajax call to the CFC:

$("#FileUploader").on('click', '.DeleteFileUpload', function (event) {
    event.preventDefault();
    $(this).parent('li').remove();
    $.ajax('/path/to/your.cfc?method=DeleteUpload&Filename=' + $(this).attr('href'));
});

You'd need to change the href of the delete link to the file path (as a reference) and disable the click by using preventDefault()

<a href="directory/filename2.pdf" class="DeleteFileUpload">Delete</a>

If you don't like to put the file path in the href you could always put it in a data attribute or get the href from the sibling link.

Upvotes: 5

Related Questions