Связывание загрузки файла с кнопкой в ​​таблице с использованием идентификатора, переданного из базы данных

Question

Работаю с устаревшим кодом и пытаюсь добавить некоторые функции.Страница предназначена для выгрузки.Внизу страницы находится таблица файлов, связанных с расположением.Эти файлы (вложения) хранятся в таблице базы данных, и каждый файл имеет свой собственный идентификатор.

Клиент хочет, чтобы кнопка «заменить» была добавлена ​​в таблицу в каждой строке рядом с каждой записью (кнопка загрузки и удаления уже есть).После щелчка открывается форма загрузки файла.Что должно произойти, это файл, который клиент загружает, должен заменить вложение в таблице идентификатором.Однако, когда я нажимаю на кнопку «заменить», в верхней части таблицы отображается форма для замены вложения.

Как связать кнопку с формами по идентификатору (переданному через таблицу базы данных)?

Вот таблица ... '' '

<table class="table table-striped table-bordered table-hover table-hover table-full-width">
    <thead>
        <tr>
            <th class="center hidden-xs"></th>
            <th style="display:none;">ID</th>
            <th>File Name</th>
            <th>Figure Name</th>
            <th>Date Uploaded</th>
            <th>Rearrange Order</th>
        </tr>
        </thead>
    <tbody>
    <cfset loopCount = 1 />
    <cfset ids = '' />
    <cfset allowDown = #qAttachments.recordCount# />
    <cfloop query = "qAttachments">
    <cfset ID = "#qAttachments.id#">
    <cfset fileName="#qAttachments.filename#">
    <cfset fileExt=ListLast(fileName,".")>
    <cfset filePath = "/secure/edFiles/edAttachments/ED_#session.module.id#/#url.edID#/#fileName#"><!---removed.pdf--->
        <tr>
            <div id="replaceAtt" style="display: none" >
                <div class="col-md-6">
                  <div class="fileupload fileupload-new" data-provides="fileupload">
                            <div class="input-group">
                                <div class="form-control uneditable-input">
                                    <i class="fa fa-file fileupload-exists"></i>
                                    <span class="fileupload-preview"></span>
                                </div>
                                <div class="input-group-btn">
                                    <div class="btn btn-blue btn-file">
                                        <span class="fileupload-new"><i class="fa fa-folder-open-o"></i> Select file</span>
                                        <span class="fileupload-exists"><i class="fa fa-folder-open-o"></i> Change</span>
                                        <input type="file" id="replaceEDFile" name="replaceEDFile" title="Select File to Replace #ID#">
                                    </div>
                                    <a href="" class="btn btn-blue fileupload-exists" data-dismiss="fileupload">
                                        <i class="fa fa-times"></i> Remove
                                    </a>
                                </div>
                            </div>
                        </div>
                </div>

                <div class="col-md-2">
                    <div class = "btn btn-blue btn-block" value="#ID#" type = "submit" name ="replaceFile"  onClick="location.href='edFormData.cfm?replaceFile=#ID#&m=#url.m#&edID=#url.edID#&#r#&ai=#url.ai#'">
                          Upload File <i class = "fa fa-arrow-circle-right" ></i>                                
                    </div>
                </div>
            </div>
        </tr>
        <tr>

            <td class="center hidden-xs">
                <a href="#filePath#"><button type = "button" class="fa" name="download" id="download" value="#ID#" onClick="location.href='edFormData.cfm?download=#ID#&m=#url.m#&edID=#url.edID##r#&ai=#url.ai#'">           <img src="../assets/Icons/viewdoc.png"></button></a>   

                <cfif readonly NEQ "readonly">

                <button type = "button"  class="fa" name="Delete" id="Delete" value ="#ID#" onClick="location.href='edFormData.cfm?del=#ID#&m=#url.m#&edID=#url.edID##r#&ai=#url.ai#'">
                <img src="../assets/Icons/trash-o_ff0400_20.png"></button>

                <button id="replace" type = "button" class ="replace" name="replace" value="#ID#" title="Replace attachment #ID#" >
                 <img src="../assets/Icons/file_replace_000000.png">
                </button>
                </cfif>
            </td>
            <td style="display:none;">#ID#</td>
            <td id="file_#ID#">#qAttachments.filename#</td>
            <td id="figure_#ID#">#qAttachments.figureName#</td>
            <td id="uploaded_#ID#">#qAttachments.uploaded#</td>
            <td>
                <cfif loopCount NEQ 1>
                    <div class = "btn btn-green btn-block" id="moveUP_#ID#">Move Up</div><br />
                </cfif>
                <cfif loopCount NEQ allowDown>
                    <div class = "btn btn-blue btn-block" id="moveDown_#ID#">Move Down</div>
                </cfif>
            </td>
        </tr>

        <cfif loopCount NEQ allowDown>
            <cfset ids = #ids#&"#ID#," />
        <cfelse>
            <cfset ids = #ids#&"#ID#" />
        </cfif>
        <cfset loopCount=(#loopCount#+1) />
    </cfloop>
    <input type="hidden" id="possibleIDs" value="#ids#" />
</tbody>
</table> 

'' '

А вот и JavaScript ....' ''

<script>
    $(document).ready(function(){
        $('.replace').click(function(e){        
            e.preventDefault();
            $("#replaceAtt").slideToggle('fast');
        });
});

</script>

'' '

Answer 1

Это больше обзор кода / комментарий, чем полный ответ.В этом блоке кода происходит много всего.Как сказал Джеймс, ваш код смешивает таблицы и элементы div и добавляет некоторые Bootstrap.В ней много переменных, неясно, в какой области они находятся (например, readonly), и множество переменных, которые на самом деле не нужны (например, loopcount и allowDown).Есть также пара переменных, которым не нужны кавычки и фунты (например, <cfset ID = "#qAttachments.filename#">, которые могут быть просто <cfset ID = qAttachments.ID>), и пара мест, где переменная URL используется непосредственно в коде.И пару других вещей.

Это устаревший код, поэтому я полностью понимаю.Это то, что есть, и если это код CF11, вероятно, многое было улучшено с момента его написания.Здесь легко быть квотербеком в понедельник утром.

Тем не менее, вы можете значительно сократить то, что вы делаете на этой странице, между вашими tbody тегами.

Чтобы упростить ситуацию, я пропустил большую часть вашего HTML, над которым вы работаете.

Поскольку вы используете цикл запросов, вам не нужно отслеживать количество циклов, потому что оно уже является частью запроса, результатом которого является currentRow.И вам не нужно устанавливать allowDown, потому что вы ссылаетесь на него только один раз.Единственное, что вам действительно нужно - это инициализировать ids, чтобы вы могли ListAppend() вместо того, чтобы пытаться понять, как обрабатывать запятую.

<cfset ids="">

<cfoutput>

<cfloop query="qAttachments">
    <!--- HTML Display Code In This Block --->
    EXAMPLE: WE ARE ON ID = #id# 
    <!--- Move Buttons --->        
    <cfif currentRow NEQ 1> MOVE UP </cfif>
    <cfif currentRow NEQ qAttachments.recordcount> MOVE DOWN </cfif>
    <br>
    <!--- --->
    <!--- Build ID list for hidden form. --->
    <cfset ids = ListAppend(ids,id)>
</cfloop>

<br>
< hiddenFormInput > possibleIDs = "#ids#" < /hiddenFormInput >

</cfoutput>

https://cffiddle.org/app/file?filepath=870efd11-b974-4905-8d47-9afb41fa2a10/e47a5d00-1a86-4cd9-8996-f256ad72dff5/49648087-5075-48c1-9a96-23d20b6e2d82.cfm

Опять же, это всего лишь концептуальный код для лучшего построения вашего цикла.И на этом примечании, так как это CF11, вам будет гораздо лучше использовать цикл cfsccript, а не cftags.И я бы порекомендовал отделить ваш код CFML от кода вашего дисплея, возможно, с помощью функции CF, которая может возвращать набор данных для циклического просмотра вашего дисплея.

И последнее, что я прокомментирую, - это использование ID в качестве общего имени.Внутри вашего цикла у вас есть 3 различных ID используемых переменных: 1) session.module.id 2) ID из вашего запроса 3) и переменная ID, основанная на запросе вашего цикла ID.В этом конкретном случае вы получаете значения, которые вы намереваетесь, но, как правило, плохая идея иметь на странице несколько переменных с одним и тем же именем, и ID это легко сделать.Все, что для этого нужно, - это изменить порядок оценки, и это вызовет головную боль, которую трудно отладить.

Answer 2

Я хочу поблагодарить всех, кто прокомментировал и помог в этом.Я знаю, что код в лучшем случае неоправданный, но когда я начинаю возиться с тем, что уже есть в цикле, что-то еще ломается.Но я выяснил проблему (с помощью сотрудника, который намного умнее меня), почему я не смог связать кнопку с элементом div и показать правильную форму загрузки для этой строки таблицы!Это был образ ... да, образ.Я решил, что JS просто поставит оповещение об имени ID, когда будет нажата кнопка.После некоторого взлома я иногда заставлял его работать, а иногда просто выкладывал NaN.Хорошо с некоторой магией "Inspect Element" было обнаружено, что он выводил либо ID, либо NaN в зависимости от того, где я нажал на кнопку.Это привело нас к пониманию того, что само изображение нуждается в идентификаторе, потому что его пытались извлечь при нажатии.

Итак, я изменил код, указанный выше:

Сначала я вытащил div, который удерживал форму загрузки, из цикла, поэтому у меня нет нескольких форм.Заполните, и я могу переключать замены вложений, не перезагружая страницу с кучей движущихся вещей на экране.

Во-вторых, сама кнопка:

<button type = "button" class ="replace" name="replace" id="replace_#ID#" value="#ID#" title="Replace #qAttachments.figureName#" >
    <!--- Gave the image an ID, so if it is clicked it can still split properly. --->   
    <img id="replaceImg_#ID#" src="../assets/Icons/file_replace_000000.png">
</button>

В-третьих, JavaScript.

<script>

    $('[id^="replace_"], [id^="replaceImg_"]').click(function(e){

        // Split the ID to get the number (lines up with DB ID).
        var replaceID = e.target.id.split("_")[1];

        // Set this to let the user know which file is being replaced (by figure name).
        var figNameRep = $('#figure_'+replaceID).text();

        // If the upload replacement is not showing yet, make it show now.
        if ($('#replaceAtt').css("display") == 'none'){
            $('#replaceAtt').slideToggle("fast");
        }

        // Don't worry about hiding and unhiding, just switch the IDs around as needed.
        $('#figNameReplace').text("Replacing file for Figure Name: " + figNameRep);
        $('#replaceFile').val(replaceID);
    });

    </script>

Еще раз спасибо всем за их вклад.Идеи, которые вы все предложили, я попробовал, и хотя я не смог заставить ни одну из них работать (это скорее комментарий к моему собственному мастерству), он научил меня некоторым новым инструментам и методам.Вы, ребята, рок!