Jquery Mobile e Ajax – Revista Mobile parte 2

Pré requisito:
1) Revista Mobile parte 1

Para consumir nosso Json na parte 1, usei o método $.getJSON fornecido pela jquery.
É bem simples o uso, podendo colocar funções nos eventos: SUCESS, ERROR ou COMPLETE.

 <script>
      var biJson = $.getJSON('http://www.byiorio.com/php/exemplo2/ClientesRest.php');
      biJson.success(function(json) { alert('sucesso');  alert(json);  });
      biJson.error(function(json) { alert('error')});
      biJson.complete(function(json) { alert('complete')});
 </script>

Construi uma página usando o JQUERY MOBILE, que foi relativamente simples, o problema maior foi achar um método que desse refresh na página após colocar itens dinâmicos, pegos no json, usei o .trigger(‘create’)

<!DOCTYPE html> 
<html>
<head>
	<title>List formatting</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 	
</head>

<body>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
		
		
	 <script>
			
			var biJson = $.getJSON('http://www.byiorio.com/php/exemplo2/ClientesRest.php');
			biJson.success(function(json) { 
					
					// ****************** Pagina 1
					//Adiciona imagem na primeira pagina
					$('<p/>').appendTo('#cdoPrimeiraPagina').append(
						$('<img />').attr('src', json.cliente[0].imagemCapa)
					);
					
					//adiciona botao na primeira pagina
					$('<p/>').appendTo('#cdoPrimeiraPagina').append(
						$('<a />').attr('href', '#two')
						.attr('data-role', 'button')
						.attr('data-theme', 'b')
						.attr('data-inline', 'true')
						.attr('id', 'btnEntrar')
						.text('Entrar')
					);
					
					//Executa um refresh no div para montar o botao na primeira pagina
					$('#cdoPrimeiraPagina').trigger('create');							
					
					// ****************** Pagina 2
					// for mais rapido que usar jQuery.each
					for( i=0; i < json.produto.length; i++){
						$('<li />').appendTo('#ulListaProdutos').append(
							$('<a />').attr('href', '#p' + i).append(
								$('<img />').attr('src', json.produto[i].imagemProduto)
							).append(
								$('<h3 />').text(json.produto[i].descricao)
							).append(
								$('<p />').text(json.produto[i].preco)
							)
						);
					}
					
			
					
					//******************* Pagina 3
					//Criando uma pagina para cada produto
					for( i=0; i < json.produto.length; i++){
						var linkN;
						var linkP;
						if (i ==0){
							linkP = '#two';
						}else{
							linkP = '#p' + (i-1);
						}
						
						if (i == json.produto.length - 1){
							linkN = '#two';
						}else{
							linkN = '#p' + (i+1);
						}
						
						$('<div/>').appendTo(document.body)
								.attr('data-role', 'page')
								.attr('id', 'p' + i).append(
								
									$('<div/>').attr('data-role', 'header')
											.attr('data-theme', 'b').append(
											
												$('<h1 />').text('by iorio')
										
											).append(
										
												$('<a />').attr('href', '#two')
														.attr('data-role', 'button')
														.attr('data-icon', 'home')
														.attr('data-iconpos', 'notext')
											)
								
						).append(
								$('<div/>').attr('data-role', 'content').attr('id', 'cdoP'+i).append(
												$('<h3 />').text(json.produto[i].descricao)
											).append(
												$('<img />').attr('src', json.produto[i].imagemProduto)
											).append(
												$('<p />').text(json.produto[i].preco)
											)
						
						).append(
								$('<div/>').attr('data-role', 'footer')
											.attr('data-theme', 'b').append(
												$('<fieldset />').attr('class', 'ui-grid-a').append(
													$('<div/>').attr('class', 'ui-block-a').append(
														$('<a />').attr('href', linkP)
														.attr('data-role', 'button')
														.attr('data-icon', 'arrow-l')
														.attr('data-iconpos', 'notext')
													)
												).append(
													$('<div/>').attr('class', 'ui-block-d').append(
														$('<a />').attr('href', linkN)
														.attr('data-role', 'button')
														.attr('data-icon', 'arrow-r')
														.attr('data-iconpos', 'notext')
													)
												)
											)
						
						);
			
						//Executa um refresh no div para montar o botao na primeira pagina
						$('cdoP'+i).trigger('create');	
		
					}
			})

			biJson.error(function() { alert("Falha ao acessar o site byiorio.com"); });
			biJson.complete(function() {
						//Atualiza a lista com os novos produtos
					$('#ulListaProdutos').listview('refresh');
			});
			
		
	</script>
	
	<div data-role="page" id="one" > 
		<div data-role="header" data-theme="b"> 
			<h1>by iorio</h1> 
		</div>
	 
		<div data-role="content" class="ui-content" role="main" id="cdoPrimeiraPagina"></div>
	
		<div data-role="footer" data-theme="b">
			<h4 role="heading">Bem Vindo</h4>
		</div>

	</div>

	<div data-role="page" id="two" > 
	 
		<div data-role="header" data-theme="b"> 
			<h1>by iorio</h1> 
			<a href="#one" data-role="button" data-icon="home" data-iconpos="notext"></a>
		</div>
		
		<div data-role="content" class="ui-content">	
			<ul data-role="listview" data-theme="c" id="ulListaProdutos"></ul>
		</div>
		
		<div data-role="footer" data-theme="b">
			<h4 role="heading">Produtos</h4>
		</div>
	</div>

</body>
</html>

O resultado pode ser visto AQUI

4 comentários em “Jquery Mobile e Ajax – Revista Mobile parte 2

  • 6 de março de 2012 em 01:30
    Permalink

    thanks for taking a time to help people with so great information, congratulations, your work is so dignifying.

    Resposta
  • 6 de março de 2012 em 13:13
    Permalink

    thank you for your information, i like the website very much

    Resposta
  • 6 de março de 2012 em 16:41
    Permalink

    it is really an informative post. thanks buddy

    Resposta
  • Pingback: Cate

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Blue Captcha Image
Atualizar

*

Facebook

Get the Facebook Likebox Slider Pro for WordPress
WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera