Вызвать метод ColdFusion при щелчке в JQuery

Question

У меня есть страница, которая отображает список файлов, которые пользователь загрузил. Это примерно так:

<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> 

У меня есть CFC с методом, который должен знать, какой файл удалить. Поскольку это не Form, я не уверен, как передать данные в CFC, чтобы удалить его.

CFC Пример:

<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> 

Как я могу использовать JQuery Ajax, чтобы передать значение имени файла в CFC, так что он знает, какой из них удалить, а затем после получения успешного результата информирует пользователя с оповещать?

Я знаю, как это сделать с помощью FORM, но поскольку это не форма, я немного смущен. Это, насколько пришел мой JQuery:

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

Это удаляет только <li> из DOM. Мне также нужно получить имя файла и передать его CFC каким-то образом.

Answer 1

Вам нужно добавить вызов Ajax в CFC:

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

Вы должны были бы изменить HREF от удаления ссылки на путь к файлу (в качестве ссылки) и отключить щелчок по используя preventDefault()

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

Если вам не нравится, чтобы поместить путь к файлу в HREF вы всегда можете поставить его в атрибуте данных или получить HREF по ссылке родственного.

Answer 2

(Новый принять участие StackOverflow, пока не может прокомментировать.)

Не просто удалить элемент и молиться. Немедленно удалив его, не получив его, а затем показывая «Эй, крик!». сообщение смущает и запутывает.

Вместо удовлетворения непосредственной цели обратной связи, показывая деталь на своем пути к wastebin, а затем убить его, когда он ушел:

$("#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...') 
    })  
}); 

Вы бы затем рассмотреть вопрос о предотвращении пользователю нажав дважды путем un/re-binding обработчика.