0

Hola como dice el el titulo tengo un problema a al usar jquery con electron. He estado siguiendo este tutorial ya que he aprendido algo de desarrollo web y recientemente descubrí jquery y como en el tuto no lo usa pense usarlo para variar.

la cosa es que en renderer hace una validacion de un input

// DOM Elements
const linksSection = document.querySelector('.links')
const errorMessage = document.querySelector('.error-message')
const newLinkForm = document.querySelector('.new-link-form')
const newLinkURL = document.querySelector('.new-link-url')
const newLinkButton = document.querySelector('.new-link-button')
const clearStorageButton = document.querySelector('.clear-storage')

newLinkURL.addEventListener('keyup', () => {
  newLinkButton.disabled = !newLinkURL.validity.valid;
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Electron App</title>
</head>

<body>

  <h1>My Favorite Websites</h1>

  <div class="error-message"></div>

  <section class="add-new-link">
    <form class="new-link-form">
      <input type="url" class="new-link-url" placeholder="URL" size="100" required autofocus>
      <button type="submit" class="new-link-button" disabled>
                Save
            </button>
    </form>
  </section>

  <section class="links"></section>

  <section class="controls">
    <button class="clear-storage">Clear Storage</button>
  </section>
  <!-- Jquery & renderer -->
</body>

</html>

entonces intenté hacerlo con jquery

// Mi codigo
const link_section = $(".links");
const error_message = $(".error-message");
const link_form = $(".new-link-form");
const url_txt = $(".new-link-url");
const link_btn = $(".new-link-button");
const clear_storage = $(".clear-storage");

url_txt.keyup(function (e) {
    link_btn.disabled = !url_txt.validity.valid;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Electron App</title>
</head>

<body>

  <h1>My Favorite Websites</h1>

  <div class="error-message"></div>

  <section class="add-new-link">
    <form class="new-link-form">
      <input type="url" class="new-link-url" placeholder="URL" size="100" required autofocus>
      <button type="submit" class="new-link-button" disabled>
                Save
            </button>
    </form>
  </section>

  <section class="links"></section>

  <section class="controls">
    <button class="clear-storage">Clear Storage</button>
  </section>
  <!-- Jquery & renderer -->
</body>

</html>

Y pues alli la falla ¿Por que sale undefinido? ¿Hay alguna diferencia al hacerlo con querySelector?

Intenté cambiar link_btn.disabled = !url_txt.validity.valid; por link_btn.prop("disabled", false) = !url_txt.valid(); pero no funcionó, ¿de que forma se podria hacer con jquery?

Espero puedan ayudarme, ya que estoy aprendiendo y no me gusta quedarme con la duda, sino solo hubiera copiado el codigo tal y como esta en el tutorial :)

1 respuesta 1

0

Después de travesear en la consola con los console.log me di cuenta que cuando uso jquery para seleccionar $("element"), así sea un id siempre los guarda en un array, mi solución fue esta

// Mi codigo
const link_section = $(".links");
const error_message = $(".error-message");
const link_form = $(".new-link-form");
const url_txt = $("#new-link-url");
const link_btn = $("#new-link-button");
const clear_storage = $(".clear-storage");

$(url_txt).keyup(function (e) {
    $(link_btn).prop("disabled", !$(url_txt)[0].validity.valid);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Electron App</title>
</head>

<body>

    <h1>My Favorite Websites</h1>

    <div class="error-message"></div>

    <section class="add-new-link">
        <form class="new-link-form">
            <input type="url" id="new-link-url" placeholder="URL" size="100" required autofocus>
            <button type="submit" id="new-link-button" disabled>
                Save
            </button>
        </form>
    </section>

    <section class="links"></section>

    <section class="controls">
        <button class="clear-storage">Clear Storage</button>
    </section>
    <!-- Jquery & renderer -->
</body>

</html>

Los volví a poner en un $(element) y con .prop("disabled") de jquery.

La parte de !$(url_txt)[0].validity.valid le añadí el [0] por que es un array, al parecer su validity.valid de jquery se hace con una libreria que es jQuery Validation plugin pero ya lo deje así nada mas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.