Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
mauricio baroni

Problema com ajax -jquery

Recommended Posts

Boa noite, sou novo no fórum e estou com algumas duvidas. Estou realizando um trabalho na faculdade no qual devo montar uma loja virtual. Os produtos já estão em um servidor fornecido pelo professor. A primeira parte do trabalho está feita, que era pegar os produtos do servidor e colocá-los no site, montando o layout. O problema está na segunda parte, onde preciso adicionar os produtos no carrinho, não sei como fazer isso :( . Deve ser feito com o AJAX. Espero que me ajudem, obrigado. (html em anexo).

 

código:

<DOCTYPE! html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<style type="text/css">

body{
    background-color: #2F4F4F;
}

#cabecalho{
    background-color: #8B4C39;
    top:0;
    position: fixed;
    width: 100%;
    left: 0px;
    font-size: 20px;
    color: #FFFFE0;
    font-family: ;
    display: inline;    
    display: fixed;
    z-index: 2;
}
#links{
    list-style: none;
    text-align: center;
    padding-right: 120px;
}
.link{
    display: inline;
    padding: 10px;
    background-color: #E9BE01;
    color: black;
    border:none;
    text-align: center;
    font-family: arial;
}
#produto,#inicio{
padding-top: 60px;
color: white;
width: 100%;
float: left;
text-align: center;
}
</style>

</head>
<body>
    <div id= "cabecalho" >
        <ul id="links">
            <input class="link" id="home" type= "button" value="TODOS OS PRODUTOS">
            <input class="link" id="cozinha" type= "button" value="COZINHA">
            <input class="link" id="quarto" type= "button" value="QUARTO">
            <input class="link" id="sala" type= "button" value="SALA">
            <input class="link" id="carrinho" type= "button" value="CARRINHO">
            
        </ul>
    </div>
    <div id="produto"> 

    </div>
    <div id="inicio"> 
        <h1>bem vindo ao site, clique nos botões acima para ser redirecionado a categoria desejada</h1>
    </div>
    <script type="text/javascript">    
        $(".link").click(function   () {
             var data;
            var id = $(this).attr('id');        //pega a id do botao
            if(id == "cozinha" ) {    
                $("#produto").empty();
                data =1;
                ajax();
            }else if (id=="quarto" ){
                $("#produto").empty();
                data=2;
                ajax();
            }else if (id =="sala" ) {
                $("#produto").empty();
                data=3;
                ajax();
            }else if (id =="home" ){
                 $("#produto").empty();
                for(var i=1;i<=3;i++){
                    data= i;
                    ajax();
                }
            }
            
        function ajax() { 
            
            
            $("#inicio").css("display","none");
            $.ajax({
                url: "http://********.com.br/loja/lojaVirtual.php",    
                method: "GET",
                dataType:"jsonp",
                data:{categoria: data},
                success: function(resposta){
                        
                        
                    for(var i=0; i<=resposta.length;i++ ) {
                    
                        
                        
                        $("#foto").css("margin-left", "50px");
                        $(".prod").css("border", "2px solid black");
                        $(".prod").css("width", "30%");
                        $(".prod").css("text-align", "center");
                        $(".prod").css("float", "left");
                        $(".prod").css("height", "60%");
                        $(".prod").css("margin-top", "10px");
                        $(".prod").css("overflow", "auto");
                        $(".prod").css("margin-left", "10px");
                        $(".prod").css("display","absolute");
                            //botao comprar
                        $(".comprar").css("padding", "5px");
                        $(".comprar").css("border", "none");
                        $(".comprar").css("background-color", "#077A24");
                        $(".comprar").css("color", "white");
        
                        var prodDaVez = "<div id= 'produto" +resposta.idProduto +" '>";
                        prodDaVez+= "<div class= 'prod'>";
                        prodDaVez +="<p >nome: " + resposta.nome + "</p>";
                        prodDaVez +="<img id='foto' width = '100' src='" + resposta.urlFoto + "'>";
                        prodDaVez +="<p > descricao: " + resposta.descricao + "</p>";
                        prodDaVez+= "<input class='comprar'' type= 'button' value='comprar'>"
                        prodDaVez+="</div>";
                        prodDaVez+="</div>";
                        $("#produto").append(prodDaVez);
                         
                    }
                },
                error: function(erro) {
                        console.log(erro);
                }
        
            });
        }

        })
    </script>

</body>
</html>

wwww.zip

wwww.zip

 
Editado por DiF
Inserir o código com o botão CODE <>

Compartilhar este post


Link para o post
Compartilhar em outros sites

@mauricio baroni Olá, seja bem vindo em nosso Fórum do Clube do Hardware.

 

Basicamente, um dos erros que vejo é que você está usando a versão 3.1.1 do jQuery mas está utilizando algumas funções antigas e obsoletas do $.ajax()

 

Troque o success  por  done()  depois da função.

 

exemplo:

$.ajax({
   //opcçoes
}).done(function(resposta){
    //faz algo se for bem sucedido 
}).fail(function(resposta){
    //faz outra coisa se der errado
});

Fora isso,  vejo outras coisas.. como o evento de click.  tente usar o ON()   ao invés do click()

 

Sobre seu carrinho, bom.. aqui eu diria que o ideal é você fazer com sessões e armazenar os produtos nele. Só que para isso você precisa criar um novo arquivo php  chamado carrinho.php que você chamará via ajax...  neste arquivo é recebido o produto e cria um vetor de produtos na sessão. Isso vai permitir que os produtos não se percam do carrinho ao fechar o "site".

Agora deixo uma pergunta.  É necessário que os produtos sejam inseridos com javascript?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×