jQuery Mobile es una tecnología basada en la web que se puede usar para crear contenido receptivo para sitios web a los que se puede acceder en todo tipo de teléfonos inteligentes, tabletas y computadoras de escritorio.
En este artículo, usaremos el evento loadfailed de jQuery Mobile Pagecontainer . Este evento se activa si falla la solicitud de carga de la página.
Sintaxis:
Inicializando el contenedor de páginas con el evento loadfailed.
$( ".selector" ).pagecontainer({
loadfailed: function( event, ui ) {}
});
Vincular un detector de eventos al evento pagecontainerloadfailed.
$( ".selector" ).on( "pagecontainerloadfailed",
function( event, ui ) {} );
Parámetros: Estos son los siguientes parámetros que se aceptan.
- evento: este evento se activa si falla la solicitud de carga de la página.
- ui: este parámetro es de tipo objeto con las siguientes opciones.
- url: este parámetro es la URL absoluta o relativa que la persona que llama pasó a loadfailed().
- absUrl: este parámetro es la versión absoluta de la URL. Si la URL era relativa, se resuelve con la URL utilizada para cargar la página actualmente activa.
- dataUrl: este parámetro es la versión filtrada de absUrl que se utilizará al identificar la página y actualizar la ubicación del navegador cuando la página se active.
- options: este parámetro es el objeto que contiene las opciones que se pasaron a loadfailed().
- xhr: este parámetro es el objeto jQuery XMLHttpRequest que se usa cuando se intenta cargar la página con error. Esto es lo que se pasa como el tercer argumento de la devolución de llamada exitosa $.ajax() del marco.
- textStatus: este parámetro es la string que describe el estado. Este parámetro también puede ser nulo.
- toPage: este parámetro es el objeto de colección jQuery que contiene el elemento DOM de la página de destino.
- prevPage: este parámetro es el objeto de colección jQuery que contiene el elemento DOM de la página de formulario en un estado separado.
Enlace CDN: a continuación se muestran algunos scripts de jQuery Mobile que se necesitarán para su proyecto, así que agréguelos a su proyecto.
<enlace rel=”hoja de estilo” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css” />
<script src= ”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile -1.5.0-alpha.1.min.js”></secuencia de comandos>
Ejemplo: este ejemplo describe el evento de error de carga de jQuery Mobile Pagecontainer.
HTML
<!doctype html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
<script src=
"//code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
</script>
</head>
<body>
<center>
<div data-role="page" id="GFG1">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Pagecontainer loadfailed Event</h3>
<div data-role="header">
<h2>First Page</h2>
</div>
<div role="main">
<a href="#GFG2" data-transition="slide">
Go To Second Page</a>
</div>
<input type="button" id="Button"
value="Loadfailed the external page">
<div id="log"></div>
</div>
<div data-role="page" id="GFG2">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Pagecontainer loadfailed Event</h3>
<div data-role="header">
<h2>Second Page</h2>
</div>
<div role="main">
<a href="#GFG1"
data-rel="back"
data-transition="slide">
Go Back To First Page
</a>
</div>
<input type="button" id="Button"
value="Loadfailed the external page">
</div>
</center>
<script>
$(document).ready(function () {
$("#Button").on('click', function () {
$("#GFG1").pagecontainer({
loadfailed: function (event, ui) { }
});
alert('<b>External page from the DOM has been loadfaileded</b>');
});
});
</script>
</body>
</html>
Producción:
jQuery Mobile Pagecontainer evento de error de carga
Referencia: https://api.jquerymobile.com/pagecontainer/#event-loadfailed
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA