Как я могу изменить Bootstrap Toggle с помощью динамического значения? - PullRequest
Новая
       29

Как я могу изменить Bootstrap Toggle с помощью динамического значения?

0 голосов
/ 11 ноября 2019

Я выполняю действие по обновлению, когда пользователь нажимает на элемент в таблице, а затем изменяет значение, переключая переключатель bootstrap , но я не знаю, как и где мне делатьизменить.

Это мой код:

Сначала пользователь может щелкнуть элемент, отправив идентификатор: 

<div class="btn fa-hover col-md-3 col-sm-4 col-xs-12" data-toggle="modal" onclick='wordEditModal({{key.id}})' data-target="#wordUpdateModal"><i class="fa fa-edit"></i>

Затем он вызывает wordEditModalфункция, чтобы сделать запрос к конечной точке django: 

url:'/socialanalyzer/dictionary_edit_modal/',

Возвращает полярность слова, по которому щелкнули, и одновременно в HTML открывается модальное окно, здесь я должен отобразить значение, возвращаемое с помощью переключателя начальной загрузки: 

<form method="get" novalidate>
{% csrf_token %}
    <fieldset>
        <div class="form-group">
        <!-- Now, this bootstrap toggle always display Positive value, I want that it display dynamically from the endpoint the value-->
            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="polaridad">Polarity:</label>
            <input id="toggle-polarity" checked type="checkbox" data-on="Positive" data-off="Negative" data-onstyle="success" data-offstyle="danger" data-width="100">
        </div>
        <br/><br/><br/>
      <div class="modal-footer">
        <input class="btn btn-success" type="submit" onclick='wordUpdate()' value="Guardar" />
        <button type="button" class="btn btn-default" onclick="" data-dismiss="modal">Close</button>
      </div>
    </fieldset>
</form>

Это моя функция ajax: 

function wordEditModal(wordId) {
    $.ajax({
        url:'/socialanalyzer/dictionary_edit_modal/',
        type: 'GET',
        data: {
          word_id: wordId
     },success: function(data) {

        if (data.data.code==200) {

            // This is what I tried, but didn't work
            if (data.data.polarity.toLowerCase() == 'p'){
                $('#toggle-polarity').bootstrapToggle('Positive')
            }else {
                $('#toggle-polarity').bootstrapToggle('Negative')
            }
        }else{
            console.log('Error to load modal',data);
          }
        }
    })
}

Мой вопрос: как я могу динамически изменить значение переключателя начальной загрузки в соответствии со значением, которое возвращает конечную точку?

Положительные и Отрицательные являются возможными значениями, поэтому, если пользователь щелкнул слово с отрицательной полярностью, при открытии модального режима должен отображаться переключатель начальной загрузкиОтрицательныйr) опция, если слово "Позитив", тогда переключатель начальной загрузки должен отображать опцию "Позитив (успех)".

Я пробовал также что-то подобное в функции Ajax, но не сработало: 

if (data.data.polarity.toLowerCase() == 'p'){
    $("#toggle-polarity").val("success")
}else {
    $("#toggle-polarity").val("danger")
}

Любая помощь будет признательна.

1 Ответ

0 голосов
/ 11 ноября 2019

Следуя предложению @Chris G, это было мое решение: 

function wordEditModal(wordId) {
    $.ajax({
        url:'/socialanalyzer/dictionary_edit_modal/',
        type: 'GET',
        data: {
          word_id: wordId
     },success: function(data) {
        if (data.data.code==200) {
            //console.log($('#toggle-polarity').bootstrapToggle()[0]['value'])
            if (data.data.polarity.toLowerCase() == 'p'){
                $('#toggle-polarity').bootstrapToggle('on')
                //console.log('Is positive')
            }else {
                $('#toggle-polarity').bootstrapToggle('off')
                //console.log('Is negative')                
            }

        }else{
            console.log('Error to load modal',data);
          }
        }
    })
}

Надеюсь, это будет полезно для всех остальных.

...