Компонент CF не сбрасывает переменные - PullRequest
Новая
       11

Компонент CF не сбрасывает переменные

0 голосов
/ 08 мая 2018

У меня есть несколько форм, и есть таблица с «инструкциями» для каждого вопроса, для каждой формы. Я пытаюсь добавить кнопку, которая выдает модальное отображение инструкции каждого вопроса. Проблема в том, что каждая кнопка ссылается на инструкцию по первому вопросу. Существуют более поздние инструкции - если я начну с вопроса 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>

1 Ответ

0 голосов
/ 08 мая 2018

Проблема здесь в том, что оба мода создаются с одинаковым идентификатором exampleModal.

Итак, при попытке открыть с помощью #exampleModal откроется первый элемент в документе. То, что вам нужно сделать, это сделать модалы с другим ID. Как то так. 

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

и аргументы кнопки, такие как data-target="##exampleModal#qxq_fieldGUID#".

Сказанное, создание такого большого количества html для каждого вопроса увеличит размер вашей страницы и в тех случаях, когда возникает много вопросов, которые могут даже вызвать сбой браузера. Вы должны попытаться сделать модальный динамический, используя объекты AJAX или JS, содержащие инструкции.

...