Блог

Главная - Вопросы по программированию - Как заставить плагин брать код из js-файла?

Как заставить плагин брать код из js-файла?

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

Я создал код для простого выбора и вставки в базу данных. Этот код работает при тестировании из html в веб-браузере (Firefox и Chrome). Однако это было сделано как плагин, у плагина были свои ошибки, файл json уже был исправлен, и он вставляет информацию. Однако произошла проверка информации в JS, и плагин пропускает эту часть.

В форме есть 5 полей, которые необходимо заполнить, и переключатель, после этого пользователь нажимает кнопку «Сохранить», Js проверяет информацию и, если она правильная, отправляет ее на PHP, который вставляет информацию, это работает при выполнении в Интернете. Но в плагине он пропускает эту проверку и отправляет информацию, однако она заполнена в PHP для ее вставки.

После поиска я уже видел руководство для разработчиков Google extensions и firefox, особенно это (https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution )

Мне удалось вывести сообщение на экран, однако оно проверяет поля при активации кнопки плагина, а не кнопки отправки.

index_FINAL.js * Я сократил код, просто поместив несколько строк для проверки вместо всех

 var ok = true;

function valida(f) {
    ok = true;
    var msg = "Empty fields:nn";

    if(f.id_own.value == "")
    {
      msg  = "Ticket Ownern ";
      ok = false;
    }
    if(f.Ticket.value == "")
    {
      msg  = "Ticket IDn";
      ok = false;
    }
    if(ok == false)
      alert(msg);
    else { }
    return ok;
  };  

  document.addEventListener('DOMContentLoaded', function () {
  var x = document.getElementById("btn_save");
  x.addEventListener("click", valida());
});

index_FINAL.html
* Я сократил код, просто поместив конец html-кода там, где находятся кнопки и скрипты.

 
 <div id="tick_but">
              <br>
                <button type="submit" class="btn btn-success" id="btn_save">Save</button>
                <button type="reset" class="btn btn-danger" id="btn_cancel">Cancel</button>
            </div>
    </form>
  </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
    <script src="index_FINAL.js" type="text/javascript"></script>
  </body>
</html>

Когда я пытаюсь активировать плагин, я получаю сообщение, сгенерированное js, указывающее, что у меня есть пустые поля, вместо вызова функции valida() при нажатии кнопки сохранить.

Я ожидаю, что он проверяет, когда я нажимаю кнопку сохранить, а не раньше.

Ответ №1:

Функция обратного вызова valida() должна вызываться при событии отправки. Следующая демонстрация представляет собой упрощенный макет того, к чему привязываться, и как разместить valida() в качестве обратного вызова для события отправки. Предполагается, что он <form> является первым или единственным <form> на этой конкретной веб-странице (ie index_FINAL.html )

 document.forms[0].addEventListener("submit", valida);

// This is just a dummy callback for proof of concept
function valida(e) {
  e.preventDefault();
  console.log(e.type   ' event has been triggered and callback function valida() has been invoked.');
}  
 <form>
  <button type="submit">Save</button>
</form>

Комментарии:

1. Хорошо, я протестировал фрагмент кода, который вы мне прислали, и в веб-браузере он сработал, но в плагине я не вижу консоль. Однако в веб-браузере я перехожу к типам активаций .. вроде как говоря, когда я изменил его, чтобы вызвать фактическую функцию valida, она говорит undefined и submit. Например, «было запущено событие sumbit и была вызвана функция обратного вызова valida()» и сразу после этого: «было запущено неопределенное событие и была вызвана функция обратного вызова valida()»

2. Хорошо, теперь я вижу, что неопределенное событие, которое я получаю, связано с вызовом функции, которая у меня есть в моей форме. <идентификатор формы=»f» действие=» anubis.amxdigital.net/test/jsontest.php » method=»POST» name=»f» onsubmit= «return valida(это)»>

3. Теперь при запуске в CHROME в качестве расширения я получаю эту ошибку: Uncaught TypeError: не удается прочитать свойство ‘value’ неопределенного значения в первом поле if (f.id_own.value == «»), если я не ошибаюсь, это означало бы, что он больше не принимает значения из html, верно?

4. "return valida(this)" конфликтует с фиктивным, valida() попробуйте удалить атрибут on-event в <form> и просто используйте document.forms[0].addEventListener("submit", valida); и удалите остальное. Загляните в документацию плагина и посмотрите, требуются ли для него такие параметры, как this . Плагины обычно обрабатываются this внутренне, избавляя нас от неоднозначной природы this . Опять же, мой опыт работы с расширениями браузера ограничен, потому что политика моей компании заключается в том, что пользователям никогда не нужно использовать что-либо, кроме браузера, ничего лишнего.

Ответ №2:

Большое спасибо Zer00ne за ваш ответ, это не сработало для моего кода, но я смог увидеть другой путь к решению этой проблемы.

Поскольку плагины не принимают встроенное кодирование, я удалил функцию onsubmit, которая была в HTML-форме, и после этого мне нужно было сделать JS доступным для отправки ответа submit в HTML.

Здесь я прикрепляю фрагмент кода, который я изменил.

 $(function() {
$('#btn_save').click(function(event){
    event.preventDefault();
    var HTF = document.getElementById("f");
    valida(f);
    //alert(ok);
    if (ok) {
    HTF.submit();
    }
});
});

Однако плагин не работает в CHROME, но хорошо работает в Firefox, и это то, что мне было нужно.

С уважением