代码之家  ›  专栏  ›  技术社区  ›  Jacqueline Connors

CF组件不重置变量

  •  2
  • Jacqueline Connors  · 技术社区  · 7 年前

    我有一些表格,每个表格中的每个问题都有“说明”。我试图添加一个按钮,弹出一个模式来显示每个问题的说明。问题是每个按钮都链接到第一个问题的说明。后面有说明-如果我开始回答问题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>
    

    (问题2)

    <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>
    
    1 回复  |  直到 5 年前
        1
  •  1
  •   rrk Manish Jangir    7 年前

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

    因此,当您尝试使用 #exampleModal 它将打开文档中的第一个元素。你需要做的是让情态动词有不同的ID,比如这样。

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

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

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