Javascript innerhtml은 나뭇 가지 태그와 함께 작동하지 않습니다

Question

DB에서 일부 값을 선택하고 선택 상자를 표시하는 나뭇 가지에 함수가 있습니다. div의 내용을 변경하려고합니다. 문제는 innerHTML {{가 따옴표없이 새 줄을 만들고 오류와 같이 표시된다는 것입니다. 따옴표가 없기 때문에 선택 상자가 표시되지 않습니다.

$(document).ready(function() { 
       $type = $("select[name='dtl[USER_TYPE]']"); 

       $type.change(function() { 

        if ($(this).val() == "AUTOR") { 
         var content = '{{ mm.select(holdersdata, data.USER_TYPE_OBJECT_KOD, 'dtl[USER_TYPE_OBJECT_KOD]') }}'; 
         document.getElementById("kodi").innerHTML = '"'+ content + '"'; 
        } 
       }); 
      }); 

macros.twig

<select data-placeholder="{{ translate('ZGJIDH_NJE') }}" name="{{ name }}" class="form-control input-sm chosen-select"> 
     <option {% if not options.allowNull %}disabled{% endif %} selected value>{{ translate('ZGJIDH_NJE') }}</option> 
     {% for f in dataset %} 
      <option value="{{ f[kodField] }}" {% if f[kodField] | trim == selectedVal %}selected{% endif %}> 
       {% if f[labelField] %} 
        {{ f[labelField] }} {% if f[kodField] %}&mdash; ({{ f[kodField] }}){% endif %} 
       {% else %} 
        {{ f[kodField] }} 
       {% endif %} 
      </option> 
     {% endfor %} 
    </select> 

EDIT 이것은 콘솔에 나타낸다. {{따옴표없이 새 줄을 만듭니다.

var content = "   
    <select data-placeholder="Zgjidh nje..." name="dtl[USER_TYPE_OBJECT_KOD]" class="form-control input-sm chosen-select"> 
     <option disabled selected value>Zgjidh nje...</option> 
      </select> 

Answer 1

문제는 나뭇 가지 구문이 자바 스크립트 구문을 위반하고 있다는 것입니다. 단지 '

   if ($(this).val() == "AUTOR") { 
        var content = '{{ mm.select(holdersdata, data.USER_TYPE_OBJECT_KOD, 'dtl[USER_TYPE_OBJECT_KOD]') }}'; 
        document.getElementById("kodi").innerHTML = '"'+ content + '"'; 
       } 

"에 대한 올바른 코드를 변경, 아래 참조 : 출력의 내용이 JS뿐만 아니라 파괴되어

  if ($(this).val() == "AUTOR") { 
       var content = "{{ mm.select(holdersdata, data.USER_TYPE_OBJECT_KOD, 'dtl[USER_TYPE_OBJECT_KOD]') }}"; 
       document.getElementById("kodi").innerHTML = '"'+ content + '"'; 
      } 

인해.

var content = "{{ mm.select(holdersdata, data.USER_TYPE_OBJECT_KOD, 'dtl[USER_TYPE_OBJECT_KOD]') | escape_for_js }}"; 

더 많은 나뭇 가지를 here

Answer 2

필요가 없습니다 연장에 대해 :

$twig = new Twig_Environment($loader); 
$twig->addFilter($filter 

이 필터를 사용 :

$filter = new Twig_SimpleFilter('escape_for_js', function ($string) { 
    $needles= array(
     "\n", 
     "\r", 
     '"', 
    ); 
    $replaces = array(
     '', 
     '', 
     '\"', 
    ); 
    return str_replace($needles, $replaces, $string); 
}); 

가 나뭇 가지에이 필터를 추가 : U는 확장 나뭇 가지에 의해이 문제를 해결할 수 나뭇 가지를 넓히기 위해서. 그냥 json_encode를 사용

var content = {{ mm.select(holdersdata, data.USER_TYPE_OBJECT_KOD, 'dtl[USER_TYPE_OBJECT_KOD]') | json_encode }}; 

주의 따옴표의 부족. json_encode가 그들을 추가 할 것입니다.