Working with some legacy code, and am trying to append some functionality. The page is for a disposition upload. At the bottom of the page is a table of files related to the disposition. These files(attachments) are held inside a table on the database and each file has it's own ID.
The client wants a "replace" button added to the table, on each row beside each entry (there is already a download and delete button). Once clicked, a file upload form is reveled. What should happen is the file the client uploads should replace the attachment in the table by ID. However when I click on of the "replace" buttons, it displays the form to replace the attachment at the top of the table.
How to I link the button to the forms by ID (passed through the database table)?
Here is the table... '''
<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>
'''
And here is the JavaScript.... '''
<script>
$(document).ready(function(){
$('.replace').click(function(e){
e.preventDefault();
$("#replaceAtt").slideToggle('fast');
});
});
</script>
'''
I want to thank everyone who commented and helped out on this. I know the code is janky at best, but when I start messing with whats already in the loop, something somewhere else breaks. But I did find out the issue (with the help of a much-smarter-than-I co-worker) of why I couldn't link the button to the div and show the correct upload form for that row of the table! It was the image... yes, the image. I decided to have the JS just put up an alert of the ID name when the button was hit. After some hacking I got it to work sometimes, and just put out NaN other times. Well with some "Inspect Element" magic it was discovered that it was outputting either the ID or NaN based on where I clicked on the button. This led us to realize the image itself needed an id, because that was attempting to be pulled when clicked.
So, this is what I've changed to the code posted above:
First I pulled the div that held the upload form out of the loop, so I don't have multiple forms populate and I can switch attachment replacements without reloading the page of having a bunch of moving things on screen.
Second, the actual button itself:
<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>
Third, the 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>
Thanks again to everyone on their input. The ideas you all suggested I did try, and while I couldn't get any of them to work (that's more of a comment on my own skill) it did teach me some new tools and methods. You guys rock!