CF 组件不重置变量

Question

我有一些表格，每个问题的每个表格都有一个 table 和 "instructions"。我正在尝试添加一个按钮，该按钮会弹出一个模式，显示每个问题的说明。问题是每个按钮都链接到第一个问题的说明。后面的说明存在 - 如果我开始 w/question 2，之后的所有内容都显示 Q2 的说明。就好像它被锁定在第一个字段上并且无法丢弃它。

组件代码如下：

<cfcomponent displayname="QxQ" output="false" hint="Gets QxQ information for display on data entry screen">

<cfparam name="qxq_instruct" default="">
<cfparam name="qxq_fieldGUID" default="">

<cffunction name="getFieldInstructions" hint="Gets the QxQ Instructions for the requesting field">

    <cfargument name="qxq_versionGUID" type="string" required="yes">

    <cfargument name="qxq_fieldName" type="string" required="yes">

    <!--- Get FieldGUID based on form VersionGUID and field name --->
    <cfquery name="qryGetqxqfieldGUID" datasource="#application.DSN#">
        SELECT
            FieldGUID
        FROM
            _sysformFields
        WHERE
            VersionGUID = <cfqueryparam cfsqltype="CF_SQL_VARCHAR" value="#qxq_versionGUID#">
        AND
            FieldName = <cfqueryparam cfsqltype="CF_SQL_VARCHAR" value="#qxq_fieldName#">
    </cfquery>


    <cfset qxq_fieldGUID = #qryGetqxqfieldGUID.FieldGUID#>

    <!--- Get instructions based on fieldGUID --->
    <cfquery name="qryGetFieldInstructions" datasource="#application.DSN#">
        SELECT
            instruct
        FROM
            _sysFormFieldInstructions
        WHERE
           fieldGUID = <cfqueryparam cfsqltype="CF_SQL_VARCHAR" value="#qxq_fieldGUID#">
    </cfquery>

    <cfif qryGetFieldInstructions.recordcount eq 1>
        <cfset qxq_instruct = #qryGetFieldInstructions.instruct#>
    </cfif>

    <cfset modalButton = '
        <!--- Modal Button --->
        <button type="button" class="btn btn-small" style="background-color: transparent; border: none" data-toggle="modal" data-target="##exampleModal">
            <i class="fa fa-question-circle-o fa-2x" style="color: ##8a0d25"></i>
        </button>

        <!--- Modal --->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <span style="text-align: left">
                            #qxq_versionGUID#<br>
                            #qxq_fieldName#<br>
                            #qxq_fieldGUID#<br><br>

                            #qxq_instruct#
                        </span>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
            </div>
        </div>
    </div>
    '>

    <cfreturn modalButton>

</cffunction>

这就是我尝试实现它的方式。这是 2 个问题，应该显示每个问题的说明。相反，两个按钮都显示 Q1 的信息。

<div class="form-group">
  <label class="col-sm-1 control-label">1.</label>
  <label for="oftndrink" class="col-sm-10 control-label" style="text-align:left">
    How often do you have a drink containing alcohol?
  </label>
  <br>
  <cfset form.qxq=createobject("component","#application.componentspath#.cfc_QxQ")>
  <label class="col-sm-1">
        #form.qxq.getFieldInstructions(qxq_versionGUID="#formInfo.versionGUID#",qxq_fieldName="oftndrink")#
  </label>
</div>

(Q2)

<div class="form-group">
  <label class="col-sm-1 control-label">2.</label>
  <label for="numdrinks" class="col-sm-10 control-label" style="text-align:left">
    How many drinks containing alcohol do you have on a typical day when you are drinking?
  </label>
  <br>
  <cfset form.qxq=createobject("component","#application.componentspath#.cfc_QxQ")>
  <label class="col-sm-1">
        #form.qxq.getFieldInstructions(qxq_versionGUID="#formInfo.versionGUID#",qxq_fieldName="numdrinks")#
  </label>
</div>

感谢您指出答案，事实证明这真的很简单！我现在正在运行一次的预处理中初始化组件：

<cfset form.qxq=createobject("component","#application.componentspath#.cfc_QxQ")>

并且只需插入一行即可添加带有正确指令的模态。（这部分很重要，因为我必须将它添加到大约 150 个表格的每个问题中）

<span style="text-align: left">#form.qxq.getFieldInstructions(qxq_versionGUID="#formInfo.versionGUID#",qxq_fieldName="varName")#</span>

Answer 1

这里的问题是两个模态框都是用相同的 ID 创建的 exampleModal。

因此，当您尝试使用 #exampleModal 打开时，它将打开文档中的第一个元素。您需要做的是使模态具有不同的 ID。像这样。

<div class="modal fade" id="exampleModal#qxq_fieldGUID#">

按钮参数如 data-target="##exampleModal#qxq_fieldGUID#".

也就是说，为每个问题创建这么多 html 会增加您的页面大小，并且在有很多问题的情况下甚至可能导致浏览器崩溃。您应该尝试使用 AJAX 或包含指令的 JS 对象来使模态动态化。

CF 组件不重置变量

CF Component Doesn't Reset Variables

coldfusion

modal-dialog

cfml