Segundo click fail

[Nerdmonkey 3]

Boa noite. Uma dúvida que vem me perseguindo a muito tempo. Porque em uma situação onde:

 

 

function functionToggleCardapio(){
 
$( '#lanches' ).slideDown( 'slow' );
$( '.cardapio_main li' ).first().addClass( 'selected' );
$( '.cardapio_main' ).on( 'click', 'li', function(){
 
var this_classe = $( this ).attr( 'class' );
 
$( '.cardapio_main li' ).removeClass( 'selected' );
$( '.cardapio_hidden_box' ).slideUp( 'slow' );
$( this ).addClass( 'selected' );
 
$( '#' + this_classe ).slideDown( 'slow' );
});
 
}

 

O segundo click não funciona ? Ele exibe a div escondida no primeiro click, porém se clicar, o efeito esperado é que ele ficasse recarregando a div ou mantê-la aberta. Porém ele aplica o .slideUp() e pronto, só clicando em outro elemento para que o evento volte a funcionar. Alguma sugestão ?

[Lucas Guima 164]

Difícil dizer sem ver o HTML e sem saber qual o efeito esperado (sua explicação não foi o suficiente).

[William Bruno 1501]

Muito estranho vc ter o .click() dentro de uma função.

 

Pq fez isso ?

[Nerdmonkey 3]

Porque ainda estou aprendendo a criar essas belezinhas Bruno. Me ajudem ai, o que está errado e como melhorar ?

 

HTML

 

<ul class="cardapio_main">
<li class="lanches">Lanches</li>
<li class="acrescimos">Acréscimos</li>
<li class="acai">Açai e Creme de Frutas</li>
<li class="bebidas">Bebidas</li>
<li class="porcoes">Porções</li>
</ul>
<ul id="lanches" class="cardapio_hidden_box">
...conteudo
</ul>

<ul id="acrescimos" class="cardapio_hidden_box">
...conteudo
</ul>
....

[Lucas Guima 164]

Você está tentando fazer um menu dropdown? Tem muita coisa pronta, se mata pra isso não.

[William Bruno 1501]

Okay, nesse caso, vamos começar corrigindo o html:

 

<ul class="cardapio_main">
<li class="lanches">Lanches
   <ul id="lanches" class="cardapio_hidden_box">
   ...conteudo
   </ul>
</li>
<li class="acrescimos">Acréscimos
   <ul id="acrescimos" class="cardapio_hidden_box">
    ...conteudo
   </ul>
</li>
<li class="acai">Açai e Creme de Frutas</li>
<li class="bebidas">Bebidas</li>
<li class="porcoes">Porções</li>
</ul>

Okay ?

Assim até o ID é desnecessário.

 

A principio, sempre que vc fizer .on('event', function(){}) isso não deve ficar dentro de outra função que será invocada, e sim diretamente para já ser executada assim que carregar o html.

[Nerdmonkey 3]

Ok Bruno, vou testar o seu exemplo. Não Lucas, não quero um dropdown. Quero entender o conceito rs

Dá uma olhada Bruno, vê se é uma boa soluão rs

 

HTML

<div class="teste1-toggle-click-ul-li">
<h3>--Teste1--</h3>
<ul class="cardapio_main">
<li class="lanches">Lanches
  <ul id="lanches" class="cardapio_hidden_box">
  ...conteudo <b>Lanches</b>
  </ul>
</li>
<li class="acrescimos">Acréscimos
  <ul id="acrescimos" class="cardapio_hidden_box">
...conteudo <b>Acréscimos</b>
  </ul>
</li>
<li class="acai">Açai e Creme de Frutas
<ul id="acai" class="cardapio_hidden_box">
...conteudo <b>Açai e Creme de Frutas</b>
</ul>
</li>
<li class="bebidas">Bebidas
<ul id="bebidas" class="cardapio_hidden_box">
...conteudo <b>Bebidas</b>
</ul>
</li>
<li class="porcoes">Porções
<ul id="porcoes" class="cardapio_hidden_box">
...conteudo <b>Porções</b>
</ul>
</li>
</ul>
</div>

jQuery

 

 

$( function(){
    $( '.cardapio_main' ).on( 'click', 'li', function( toggle ){
        $( '.cardapio_main li ul' ).not( $( this ).children( 'ul' ) ).slideUp( 'slow' );
        $.each( $( this ).children( 'ul' ), function(){
            $( this ).slideToggle( 'slow' );
        });
    });
});
 

Ai dessa forma, poderia por exemplo, Bruno, colocar uma class default em vários menus dentro de uma mesma página que o efeito se aplicaria a todos os itens sem causar bug ? Por que utilizei o this e como ele referencia ao objeto em questão se aplicaria no caso ao ul clicada, certo ?

[William Bruno 1501]

Exatamente.

 

A mágica está em usar:

$( this ).children( 'ul' )

ou

$( this ).find( 'ul' )

[Nerdmonkey 3]

Uma dúvida, é bem parecida e até envolve o mesmo script, então achei que seria desnecessário iniciar um novo post.

/**
 * Function: Pre load
 * Action: Show the default img loading in the box content
 */
function pre_load( div_effect ){
    $( '.' + div_effect ).html( '<div class="loading"><img src="./view/img/assets/AjaxLoader.gif" alt="Configurando interface" title="Configurando interface" /><p>Configurando interface</p></div>' ); 
}
/**
 * Function: Load data
 * Action: Loads the contents of the url in informed div
 */
function load_data( urrl, div_d ){
    $( '.' + div_d ).load( urrl, { 'no_footer' : 1, 'no_header': 1 } );// no_footer e no_header é para não incluir o rodapé nem o cabecalho novamente na página
}
 
$( function(){
    /**
     * Function: click
     * Action: load url in content. the url is the class of the item
     */
    $( '.toggle-click' )
    .on( 'click', 'li:not(.excluir)', function(){
 
         // Show the loading img
         pre_load( 'load_itens_adm' );
 
        // Remove the class of all li
        $( this ).parents( '.toggle-click' ).children( 'li' ).removeClass( 'select' );
 
        // Add a select class for the clicked li
        $( this ).addClass( 'select' );
 
        // Load the content
        load_data( $( this ).attr( 'class' ), 'load_itens_adm' );
    });
});

Mas ai tem um problema com esse código. Ao clicar pela segunda vez na mesma li, ela carrega o pre-load, porém, não carrega o load. Fora o fato de eu ter que chamar novamente os scripts

<script>
pre_load( 'load_itens_adm' ); 
setFLi( 'sec-main-nav-adm' )
load_data( 'adm/cad/cad_anuncios', 'load_itens_adm' );
</script>

Em toda página que está sendo carregada via .load(), porque se não, ela não funciona. Parece que não herda os arquivos javascript que estão no footer. Lembrando que ele não é incluido nas páginas por causa do no_footer. Pensei ser um problema. Dai tirei, ai quem não funciona é a função load que fica em loop carregando a página.

A index é isso, o .htaccess faz com que tudo seja tratado nela, logo imagino que tenha uma treta no meio disso tudo, porque algumas coisas não funcionam como deveriam funciona e essas coisas são as que citei acima

index.php

<?php
error_reporting( 0 );
ini_set( 'display_errors', 0 );
 
session_start();
 
header( "Content-Type: text/html; charset=utf-8" );
ob_start();
 
$urr = addslashes( trim( $_GET[ 'url' ] ) ) ? addslashes( trim( $_GET[ 'url' ] ) ) : addslashes( trim( $_POST[ 'url' ] ) );
$sep = explode( '/', $urr );
$one = $sep[ 0 ];
$two = $sep[ 1 ];
 
// Conection
include_once __DIR__ . '/controller/define_conn.php';
$pdo = Database::conexao();
 
// Log user
include_once __DIR__ . '/controller/define_log.php';
 
if( ( !isset( $_POST[ 'no_header' ] ) ) && ( !isset( $_POST[ 'no_footer' ] ) ) ){
 
// Inc. Header
include_once __DIR__ . '/view/inc/header.php';
 
} 
 
// Define page
include_once __DIR__ . '/controller/define_page.php';
$page = new Pagina;
$page->setPage( $urr, $one );
 
if( ( !isset( $_POST[ 'no_header' ] ) ) && ( !isset( $_POST[ 'no_footer' ] ) ) ){
 
// Inc. Footer
include_once __DIR__ . '/view/inc/footer.php';
}

[William Bruno 1501]

Sim, é isso mesmo.

 

Usar navegação com ajax vai te trazer esse tipo de problema.

[Nerdmonkey 3]

Pode crer. Era isso que precisa saber. Então não tem nenhuma técnica atualmente pra resolver esse problema ? Não creio que em pleno 2015 isso seja uma falha da biblioteca rs

?

[William Bruno 1501]

Sim, existem diversas técnicas para resolver.

 

Mas ai vc tem q dar uma boa estudada em EventDelegation, e sempre servir seus js na primeira chamada da página ou utilizar AMD.

[Nerdmonkey 3]

Então Bruno, me dê um exemplo com base na minha index. Como eu chamaria todo o javascript, que não no topo nem no rodapé, um exemplo apenas. A delegação estou de boas rs, estou relendo a documentação do .load no site do jQuery, mas é basicamente isso mesmo.

 

Não dá pra fazer igual no css um @import não ? kk

[William Bruno 1501]

Então, o seu problema não é onde vc chama e sim como vc chama.

o delegate resolve a maioria dos problemas (a não ser com plugins, mas o principio é o mesmo)

 

Os outros problemas vc resolve apenas chamando todos os teus js logo de cara, e nunca individualmente, entendeu ?

[Nerdmonkey 3]

O delegate que você fala é o .delegate() ? Como assim "...chamados todos os teus js logo de cara" ? Eu já tentei chamar eles no footer e não funcionou, mas a lib jQuery, por exemplo, e os arquivos css, eu não preciso chamar. Mesmo declarando true pro parametro no_header ou no_footer eles são incluidos normalmente na página.

 

Quando eu dou um .load() ele está passando pela index e pelo meu método $page->setPage não está ? Não está simplesmente dando carregando o documento .php ali na div ?

A ideia era ter apenas um arquivo functions.js com as funções e um load_functions.js chamando as funçoes. Incluido apenas uma vez no footer, mas estou tendo problema com isso a tempos já. Quebro a cabeça mas não consigo uma solução realmente 100% válida. Acredito que você conheça algum método, acompanho seu blog e sei que tem conhecimentos avançados na lib, já está me ajudando muito mas se conseguirmos resolver isso juntos vai ser um ótimo trabalho em equipe rs

[William Bruno 1501]

Ok, vamos fazer o seguinte.

 

Coloca um código mínimo funcional, junto com o problema em um repositório github.

Damos uma olhada e resolvemos o problema dai, que tal ?

[Nerdmonkey 3]

Shoooow

Calma ai que to preparando o código. Se for ficar por ai ainda hoje espera... preciso resolver esse problema rs

Mano, to levando uma surra la no Git rs. Isso é preguiça de ler o Guia prático ou falta de tempo. Vou escrever o código e colocar a árvore dos diretórios. Criei uma estrutura de 4 itens de menu, a princípio o pre_load() e o load funcionam corretamente o problema começa ao clicar em um dos itens do menu. Que deveriam carregar o documento conforme a classe li clicada porém....

 

index.html

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Procurando solução para o .load() da lib jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<link rel="stylesheet" href="./view/css/style.css">
</head>
<body>
<div class="container">
<header>
<h1>Título header</h1>
</header>
<section>
<aside class="content">
<ul class="toggle-click">
<li class="doc1.html">Menu tab 1</li>
<li class="doc2.html">Menu tab 2</li>
<li class="doc3.html">Menu tab 3</li>
<li class="doc4.html">Menu tab 4</li>
</ul>
</aside>
<article class="load_page content">
<h2>Aqui vem o conteúdo da página!</h2>
<div></div>
</article>
</section>
<footer>
<p>© 2015 - <a href="https://facebook.com/programacaocriativa" target="_blank">Programação Criativa</a></p>
</footer>
</div>
<!-- Include latest version of jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<!-- Functions - All functions use in this site -->
<script src="./view/js/functions.js"></script> 
<script>
/****************************************************
 Functions jQuery load when the document is ready
*****************************************************/
$( function(){
pre_load( 'load_page div' ); 
setFLi( 'toggle-click' )
load_data( './view/doc1.html', 'load_page div' );
 
/**
* Function: click
* Action: load url in content. the url is the class of the item
*/
$( '.toggle-click' )
.on( 'click', 'li', function( e ){
e.preventDefault();
 
// Show the loading img
pre_load( 'load_page div' );
 
// Remove the class of all li
$( this ).parents( '.toggle-click' ).children( 'li' ).removeClass( 'select' );
 
// Add a select class for the clicked li
$( this ).addClass( 'select' );
 
// Load the content
load_data( './view/' + $( this ).attr( 'class' ), 'load_page div', { 'no_header': 1, 'no_footer': 1 } );
});
});
</script>
</body>
</html>
 

 

functions.js

 

 

/****************************************************
  Functions for interact in jQuery
*****************************************************/
/**
 * Function: Pre load
 * Action: Show the default img loading in the box content
 */
function pre_load( div_effect ){
$( '.' + div_effect ).html( '<div class="loading"><img src="./view/img/assets/AjaxLoader.gif" alt="Configurando interface" title="Configurando interface" /><p>Configurando interface</p></div>' ); 
}
/**
 * Function: Load data
 * Action: Loads the contents of the url in informed div
 */
function load_data( urrl, div_d ){
$( '.' + div_d ).load( urrl, { 'no_footer' : 1, 'no_header': 1 } );
}
/**
 * Function: Set First li
 * Action: Define one classe for the set item
 */
function setFLi( classe ){
$( '.' + classe + ' li:first' ).addClass( 'select' );
}