He estado tratando de crear un formulario simple en el que ingresa una URL de alimentación y mostrará el contenido en la página HTML. Estoy usando "https://jquery-plugins.net/rss" como plantilla de prueba para feedUrl, ya que funciona normalmente.
Aquí estaba la guía que utilicé para colocar los elementos de FeedEk en su lugar: https://jquery-plugins.net/FeedEk/FeedEk.html
Aquí está el código que he encontrado hasta ahora:
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="FeedEk.min.js"></script> <form method="post" id="form"> <span>Paste the feed url here:</span> <input type="text" id="rssUrl"> <input type="submit" value="submit"> </form> <div id="divRss"> <script> var form = document.getElementById("form"); var url = document.getElementById("rssUrl"); form.onsubmit = function() { $('#divRss').FeedEk({ FeedUrl : url, MaxCount : 16, }); } </script> </div>Creo que el problema puede estar en el envío, ya que sigue recargando la página cuando envío, aunque no estoy seguro. ¿Cómo debo hacer para que un usuario envíe un trabajo?
-
Editar: CBroe ofreció una solución alternativa que terminó haciendo que el código funcionara de la manera que pretendía.
Esto es lo que cambié en el HTML:
<input type="submit" value="submit">a
<input type="button" value="enter" id="enter">y en el javascript
<script> var form = document.getElementById("form"); form.enter.onclick = function() { var url = document.getElementById("rssUrl").value; $('#divRss').FeedEk({ FeedUrl : url, MaxCount : 16, }); } </script>¡El cambio terminó dando exactamente lo que quería!
También creo que la respuesta de Rory es buena si aún desea tener un botón de envío, al mismo tiempo que evita que la página se restablezca, y gracias por mencionar que he estado usando una versión obsoleta y darnos más solución optimizada al problema!
Ahora marcaré este problema como resuelto, ¡gracias por la ayuda a todos!
El problema principal en su código es que debe evitar que el formulario envíe los datos. Para hacer eso, agregue un argumento a su controlador de eventos que acepte el evento que se genera y llame a preventDefault() para detener el envío.
También tenga en cuenta que mientras carga jQuery para implementar la biblioteca FeedEk, también puede mantener el código consistente y usarlo para adjuntar sus controladores de eventos y trabajar con el DOM.
Luego, debe recuperar la propiedad de value del campo de entrada #rssUrl , no pasar todo el objeto Element en la solicitud. Para hacer eso en jQuery usa el método val() .
Finalmente, tenga en cuenta que jQuery 1.9.1 es muy antiguo, de hecho tiene 8,5 años, y debe actualizarse. La última versión en el momento de esta respuesta es 3.6.0.
Con todo lo dicho, prueba esto:
$('#form').on('submit', e => { e.preventDefault(); var url = $("#rssUrl").val(); $('#divRss').FeedEk({ FeedUrl: url, MaxCount: 16, }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FeedEk/3.1.1/js/FeedEk.min.js" integrity="sha512-Uosz6p3yP153Q89RIlaNgC80VzYrhBieLERzmSoePYUMyFF1IAs+weU4QtK9qLGs0kBpsrWeYCDAMVFK8Tuopw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/FeedEk/3.1.1/css/FeedEk.css" integrity="sha512-bjtPNxnJiFsQXL5I9OayKNOCrg3IDSclupjp4vaZzExR21PSqv3uCybarA1HMTHXVB8gVPX+ANGYncVnsBUDOA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <form method="post" id="form"> <span>Paste the feed url here:</span> <input type="text" id="rssUrl" value="http://feeds.bbci.co.uk/news/rss.xml" /> <button type="submit">Submit</button> </form> <div id="divRss"></div>