tracker issue : CF-4203437

select a category, or use search below
(searches all categories and all time range)
Title:

Space injected into HTML Attribute

| View in Tracker

Status/Resolution/Reason: Open//

Reporter/Name(from Bugbase): Kevin Staton / ()

Created: 11/02/2018

Components: CFForm, HTML

Versions: 2016

Failure Type: Incorrect w/Workaround

Found In Build/Fixed In Build: Latest for CF16 /

Priority/Frequency: Normal / All users will encounter

Locale/System: English / Win 2012 Server x64

Vote Count: 0

When I’m inserting a numeric into the ID attributes on some of my HTML tags I’m getting a space prepended to the numeric value.  It happened to me again today.

In the following example, the value in the data-saqid attribute and the id attribute are the problems. You can see the prepended space in front of the ID numbers.

HTML:
<li class="list-group-item" draggable="true" data-saqid=" 14" id="saq- 14" ondragstart="assignment.drag(event)">
                <b>2018</b> - SAQ D
</li>


Custom Tag:
<cfscript>
      param name="attributes.merchant" default="#application.factory.getMerchant(1)#";
      
      assignedSAQs = attributes.merchant.getAssignedSAQs();
      campus = attributes.merchant.getCampus();
      school = campus.getSchool();
      unassignedSAQs = school.getCurrentUnassignedSAQs(attributes.merchant);
</cfscript>

<style>
      .card {
            width: 100%
      }
</style>

<cfoutput>
      <div class="col">
            <form action="" class="form" id="frmAssignment" name="frmAssignment">
                  <div class="row">
                        <div class="col">
                              <div class="card" id="masterSAQs" ondragover="assignment.allowDrop(event)" ondrop="assignment.drop(event)">
                                    <div class="card-header">Master SAQs</div>
                                    <ul class="list-group list-group-flush">
                                          <cfloop array="#unassignedSAQs#" item="saq">
                                                <li class="list-group-item" draggable="true" data-saqID="#saq.getID()#" id="saq-#saq.getID()#" ondragstart="assignment.drag(event)">
                                                      <b>#saq.year#</b> - #saq.name#
                                                </li>
                                          </cfloop>
                                    </ul>
                              </div>
                        </div>
                        <div class="col">
                              <div class="card" id="assignedSAQs" ondragover="assignment.allowDrop(event)" ondrop="assignment.drop(event)">
                                    <div class="card-header">Assigned SAQs</div> 
                                    <ul class="list-group list-group-flush">
                                          <cfloop array="#assignedSAQs#" item="saq">
                                                <li class="list-group-item" draggable="true" data-saqID="#saq.getID()#" id="saq-#saq.getID()#" ondragstart="assignment.drag(event)">
                                                      <b>#saq.year#</b> - #saq.name#
                                                </li>
                                          </cfloop>
                                    </ul>
                              </div>
                        </div>
                  </div>
            </form>
      </div>
</cfoutput>


SAQ.getID():
      <cffunction name="getID" access="public" returntype="Numeric" hint="returns the ID">
            <cfreturn variables.id>
      </cffunction>

I have a workaround where I construct the ID strings as local variables outside of the HTML attribute and then use the local variable inside the attribute.  This seems to work but is not ideal.

Attachments:

Comments:

You should put this one up on Stackoverflow, Someone else might have seen this or have a workaround. The getCurrentUnassignedSAQs(), is that an Entity or is it powered by a query?
Comment by James Mohler
29915 | November 09, 2018 04:55:56 PM GMT