Material Didático

Cursos / Informática para Internet / Desenvolvimento Web II / Aula

Aula 12 - Adotando o jQuery no Sistema da Livraria

Arquivos fontes modificados

A seguir, você pode ver os arquivos modificados em suas versões completas, já com as novas funções Javascript utilizando o jQueryo jQuery. O código comentado em cada função seria sua versão usando Javascript puro, sem o jQuery para se obter um efeito similar. Começamos pelo arquivo catalogo.jsp, da pasta livros:

<%@ include file="/cabecalho.jsp" %>
<script type="text/javascript">

function verCarrinho(limpar,remover){ 
                  
    //var url = "mostrarCarrinho?limpar="+limpar+"&remover="+remover; 
    //var options = "height=500,width=700,location=no,menubar=no,resizable=no,scrollbars=no,titlebar=no, status=no, toolbar=no"; 
    //    
    //window.open(url,"carrinho",options,true);

var url = "mostrarCarrinho?limpar="+limpar+"&remover="+remover; 
    $("#carrinho").load(url); 
    $("#carrinho").dialog({ 
        height:600,
        width:700,
        modal:true, 
        title:"Carrinho de Compras" 
        });
}

function verDetalhes(url){ 
      
    // Sem jQuery 
    //var catalogo = document.getElementById("catalogo").attributes; 
    //catalogo.getNamedItem("style").nodeValue="visibility: hidden; height: 0px;";

// Com jQuery 
    $("#catalogo").hide(); 
    carregarDetalhes(url);
            
}

function verCatalogo(){ 
      
    // Sem jQuery 
    //var catalogo = document.getElementById("catalogo").attributes; 
    //catalogo.getNamedItem("style").nodeValue=""; 
    // 
    //var detalhes = document.getElementById("detalhes").attributes; 
    //detalhes.getNamedItem("style").nodeValue="visibility: hidden; height: 0px;";

// Com jQuery 
    $("#catalogo").show(); 
    $("#detalhes").hide();  
            
}

function carregarDetalhes(url){

// Sem jQuery 
    /* 
    var ajaxReq = new XMLHttpRequest();
    ajaxReq.onreadystatechange = function() {
        if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
              var resp = ajaxReq.responseText;
              var detalhes = document.getElementById("detalhes");
              detalhes.innerHTML=resp;
              detalhes.attributes.getNamedItem("style").nodeValue="";
        }
    };

ajaxReq.open("GET", url, true);
    ajaxReq.send();
    */

// Com jQuery 
    $("#detalhes").load(url); 
    $("#detalhes").show(); 
      
}

function adicionarLivro(url){

// Sem jQuery 
    /* 
    var ajaxReq = new XMLHttpRequest();
    ajaxReq.onreadystatechange = function() {
        if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
              var resp = ajaxReq.responseText;
              var livroAdicionado = document.getElementById("livroAdicionado");
              livroAdicionado.innerHTML="Você adicionou o livro <em>"+ resp +"</em> ao seu carrinho de compras.";
        }
    };

ajaxReq.open("GET", url, true);
    ajaxReq.send();
    verCatalogo();
    */

// Com jQuery 
    $("#carrinhoVazioMsg").hide(); 
    $.get(url, function(dados){ 
        $("#livroAdicionado").html("Você adicionou um livro ao seu carrinho de compras.");
    });
    $('#carrinhoVazioMsg').hide();
    $('#carrinhoLinks').show();  
    verCatalogo();
    verCarrinho();
}
</script>
        <jsp:useBean id="livrariaBean" class="livraria.negocio.LivrariaBean" scope="page" >
            <jsp:setProperty name="livrariaBean" property="sistema" value="${sistemaLivraria}" />
        </jsp:useBean>
        
        <p><h3><font id="livroAdicionado" color="red" size="+2"> </font></h3></p>
        
        <div id="carrinhoLinks" style="display: none;">
        <c:url var="url" value="javascript:verCarrinho(0,0)">
        </c:url>
        <p>
            <a href="${url}">Ver carrinho de compras</a>
            <c:url var="url" value="/livros/comprar" />
            <a href="${url}">Finalizar compras</a></strong>
        </p>
        </div>
        <div id="carrinhoVazioMsg" style="display: none;">Seu carrinho de compras está vazio.</div>
        <c:choose> 
             <c:when test="${sessionScope.cart.numeroItens > 0}">
                <script type="text/javascript">
                    $('#carrinhoVazioMsg').hide();
                    $('#carrinhoLinks').show();
                </script>
             </c:when> 
             <c:otherwise>
                <script type="text/javascript">
                    $('#carrinhoVazioMsg').show();
                    $('#carrinhoLinks').hide();
                </script>
             </c:otherwise> 
        </c:choose> 
        <br>
        <br>
        <div id="carrinho">
        </div> 
          
        <div id="detalhes">
        </div>
        
        <div id="catalogo">
          <h3>Livros disponíveis para compra:</h3>
          <%
          // variável buscarValue mantem o termo de busca no formulário ou colocar uma string vazia.
          String buscarValue = request.getParameter("buscar");
          if (buscarValue == null) {
              buscarValue = "";
          }
          %>
          <form method="GET">
            <input type="hidden" name="Add" value="" />
            Busca: <input type="text" name="buscar" value="<%= buscarValue %>" />
            <input type="submit" value="Buscar" />
          </form>
          <table summary="layout">
             <c:forEach var="livro" begin="0" items="${requestScope.livros}">
             <tr>
                <c:set var="idLivro" value="${livro.idLivro}" />
                <td bgcolor="#ffffaa"> 
                   <c:url var="url" value="/livros/detalhesLivro" >
                      <c:param name="idLivro" value="${idLivro}"/>
                   </c:url>
                   <strong><a href="javascript:verDetalhes('${url}');"><strong>${livro.titulo}</strong></a>
                </td>  
                <td bgcolor="#ffffaa" rowspan=2>
                    <fmt:formatNumber value="${livro.preco}" type="currency"/> 
               </td> 
               <td bgcolor="#ffffaa" rowspan=2> 
                  <c:url var="url" value="/livros/catalogo" >
                     <c:param name="Add" value="${idLivro}"/>
                  </c:url>
                  <a href="javascript:adicionarLivro('${url}')"> Adicionar livro ao carrinho </a>
               </td>
             </tr> 
             <tr> 
               <td bgcolor="#ffffff"> 
                    <em>${livro.autores} </em>
               </td>
             </tr>
             </c:forEach>
          </table>
        </div>

<%@ include file="/rodape.jsp" %>

Termo de uso

arrow_back Aula 12 - Adotando o jQuery no Sistema da Livraria

Arquivos fontes modificados

Aula 12 - Adotando o jQuery no Sistema da Livraria