时间戳

首页 > 解决方案 > 使用从数据库传递的 id 将文件上传链接到表中的按钮

javascript - 使用从数据库传递的 id 将文件上传链接到表中的按钮

问题描述

使用一些遗留代码，并试图附加一些功能。该页面用于处置上传。页面底部是与处置相关的文件表。这些文件（附件）保存在数据库的表中，每个文件都有自己的 ID。

客户希望在表格中添加一个“替换”按钮，在每个条目旁边的每一行上（已经有一个下载和删除按钮）。单击后，将显示文件上传表单。应该发生的是客户端上传的文件应该用 ID 替换表中的附件。但是，当我单击“替换”按钮时，它会在表格顶部显示替换附件的表单。

如何按 ID（通过数据库表传递）将按钮链接到表单？

这是桌子......'''

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

'''

标签： javascriptsqlcoldfusioncoldfusion-11jasny-bootstrap

解决方案

这是更多的代码审查/评论，而不是完整的答案。在这段代码中发生了很多事情。正如詹姆斯所说，您的代码混合了表格和 div 并抛出了一些引导程序。有很多变量在其中浮动，但不清楚它们在哪个范围内（如readonly），还有很多不是真正需要的变量（如loopcount和allowDown）。还有几个变量不需要引号和磅（就像<cfset ID = "#qAttachments.filename#">那样可以是<cfset ID = qAttachments.ID>），还有几个地方直接在代码中使用 URL 变量。还有其他几件事。

这是遗留代码，所以我完全理解。它就是这样，如果它是 CF11 代码，自它首次编写以来可能已经改进了很多东西。在这里很容易成为周一早上的四分卫。

tbody也就是说，您可以在标签 之间显着减少您在此页面中所做的事情。

为了简化一些事情，我省略了您正在循环的大部分 HTML。

由于您使用的是查询循环，因此您不需要跟踪循环计数，因为它已经是currentRow. 而且您不需要 set 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，因此使用 cfscript 而不是 cftags 循环会好得多。而且我建议将您的 CFML 代码与显示代码分开，也许使用 CF 函数可以返回一组数据以循环显示您的显示。

我要评论的最后一件事是ID用作通用名称。在您的循环中，您使用了 3 个不同ID的变量：1) session.module.id2)ID来自您的查询 3) 和一个ID变量，基于您的循环的 query ID。在这种特定情况下，您将获得您想要的值，但在页面上拥有多个具有相同名称的变量通常不是一个好主意，而且ID很容易做到。只需要改变评估的顺序，它会让你头疼，很难调试。

推荐阅读