2016-06-16 6 views
0

私は結果のテーブルを動的に生成していますが、各行の1つのセルにオートコンプリートが含まれています。 Select2を使用してオートコンプリートオプションを表示し、各行に固有のカスタムデータとajaxデータからドロップダウンを入力しています。私のajaxデータは私のPython appメソッドから来ています。私はPOSTを使って、Pythonメソッドに変数を送ってカスタムデータを生成しています。これはセットアップ方法です:select2の値を使用:ajaxオートコンプリートデータパラメータへの入力としてコールを開く

$(".js-example-tokenizer-ajax-data").select2({ 
      tags: true, 
      createTag: function (params) { 
       return { 
        id: params.term, 
        text: params.term, 
        newOption: true 
       } 
      }, 
      templateResult: function (data) { 
       var $result = $("<span></span>"); 
       $result.text(data.text); 
       if (data.newOption) { 
        $result.append(" <em>(new)</em>"); 
       } 
       return $result; 
      }, 
      placeholder: 'Select an option', 
      maximumSelectionLength: 3, 
      ajax: { 
       url: '{{ url_for("select2Autocomplete") }}', 
       contentType: 'application/json', 
       method: "POST", 
       dataType : 'json', 
       data: JSON.stringify({variable:myValue}), 
       processResults: function (data) { 
        return { 
         results: data.resource_list 
        }; 
       } 
      } 
     }); 

私のJinjaテンプレートからの値にselect要素のidを設定しました。

<select onfocus="this.selectedIndex = -1;" id="{{ key }}" class="js-example-tokenizer-ajax-data" multiple="multiple" miriamId="{{ value }}" style="width:100%"> 
    <option value="{{ key }}" selected>{{ miriam_name_dict[value] }}</option> 
</select> 

ダイナミックなので、私はそのIDが各選択に対して何であるか分かりません。私はこのような値を取得することができています:

$('.js-example-tokenizer-ajax-data').on('select2:opening', function (evt) { 
      myValue = document.getElementById(this.id).getAttribute('id'); 
      console.log("myValue: ", myValue) 
    }); 

私はデータ変数を経由して、私のpythonの方法に送り返す変数としてmyValueを使用したいと思います。オートコンプリートコードで使用するmyValueにアクセスする方法はありますか?

+0

'$(this)を使用して値を取得できるようです。 attr( 'id') 'をajax呼び出しのmyValueの代わりに使用し、select2:openingコードスニペットを使用しないでください。 Python関数に '$(this).attr( 'id')'を渡すと、値が 'jsonData = request.json ['variable']' – tw1742

答えて

0

Iは次のようにユーザがクリック選択要素のオートコンプリート方法にデータをバック通過することができた:「($(この).ATTR:私は{変数を使用することができなかった

$(".js-example-tokenizer-ajax-data").select2({ 
      tags: true, //Allows for free text input of tag values 
      createTag: function (params) { 
       return { 
        id: params.term, 
        text: params.term, 
        newOption: true 
       } 
      }, 
      templateResult: function (data) { 
       var $result = $("<span></span>"); 
       $result.text(data.text); 
       if (data.newOption) { 
        $result.append(" <em>(new)</em>"); 
       } 
       return $result; 
      }, 
      placeholder: 'Select an option', 
      maximumSelectionLength: 3, 
      ajax: { 
       url: '{{ url_for("select2Autocomplete") }}', 
       contentType: 'application/json', 
       method: "POST", 
       dataType : 'json', 
       data: function() { 
        var myValue = $(this).attr('id'); 
        return JSON.stringify({variable: myValue}) 
       }, 
       processResults: function (data) { 
        return { 
         results: data.resource_list 
        }; 
       } 
      } 
     }); 

id ')}を直接dataパラメータの値として使用し、値にJSON.stringifyを使用してPythonメソッドの値を取得する必要がありましたjsonData = request.json["variable"]

関連する問題