[Resolvido] Janela modal (alert, confirm) com Fallr

[Buthy 0]

Dae galera, existem esses alerts aqui:

 

http://amatyr4n.com/codecanyon/fallr/

 

Segue o código de alguns:

<script>
		$(window).load(function() {
			$('#alert').click(function() {
				$.fallr({
					content : "<h1>Testando acentuação</h1><p>Hello from fallr!</p>",
					position : 'center',
					autoclose : 3000
				});
			});

			$('#confirm').click(function() {
				var clicked = function(){
					alert('congrats, you\'ve deleted internet');
					$.fallr('hide');
				};

				$.fallr('show', {
					buttons : {
						button1 : {text: 'Yes', danger: true, onclick: clicked},
						button2 : {text: 'Cancel', onclick: function(){$.fallr('hide')}}
					},
					content : '<p>Are you sure you want to delete internet?</p>',
					icon    : 'error'
				});
			});

			$('#prompt').click(function() {
				var clicked = function(){
					var yourname = $(this).children('form').children('#yourname').val();
					alert('Hello, ' + yourname);
					$.fallr('hide');
				};

				$.fallr('show', {
					buttons : {
						button1 : {text: 'Submit', onclick: clicked},
						button2 : {text: 'Cancel'}
					},
					content : '<p>Give me your name</p><form><input type="text" id="yourname" /'+'></form>',
					icon    : 'form'
				});
			});


			$('#form').click(function(){
				var login = function(){
					var user = $(this).children('form').children('input[type="text"]').val();
					var pass = $(this).children('form').children('input[type="password"]').val();
					if(user.length < 1 || pass.length < 1){
						alert('Invalid!\nPlease fill all required forms');
					} else {
						alert('username: '+user+'\npassword: '+pass);
						$.fallr('hide');
					}
				}

				$.fallr('show', {
					icon        : 'secure',
					width       : '320px',
					content     : '<h4>Sign in</h4>'
								+ '<form>'
								+     '<input placeholder="Username" type="text"/'+'>'
								+     '<input placeholder="Password" type="password"/'+'>'
								+ '</form>',
					buttons : {
						button1 : {text: 'Submit', onclick: login},
						button4 : {text: 'Cancel'}
					}
				});                    
			});

			$('#no-overlay').click(function(){
				$.fallr('show', {
					content     : '<p>Yay, no overlay!</p>',
					icon        : 'info',
					useOverlay  : false
				});
			});
		});

	</script>

 

O que eu queria fazer, é substituir o alert tradicional que eu uso para cadastrar/alertar algo por esse em jquery.

 

O que uso atualmente é nesse estilo:

<script> alert('Este e-mail já está sendo utilizado.');</script>

 

Como eu faria para exibir esse alert sem clicar em nada?

 

Creio que a parte do código é essa:

$('#alert').click(function() {
				$.fallr({
					content : "<h1>Testando acentuação</h1><p>Hello from fallr!</p>",
					position : 'center',
					autoclose : 3000
				});
			});

 

Talvez substituir o click por algo, mas o que?

 

Muito obrigado!

[William Bruno 1501]

basta remover o click, ne?!

 

<script>
$.fallr({
  content : "<h1>Testando acentuação</h1><p>Hello from fallr!</p>",
  position : 'center',
  autoclose : 3000
});
</script>

 

lembrando que isso deve vir depois de você carregar o arquivo do plugin.

[Buthy 0]

Ok!

 

Mas é o seguinte, eu faço o formulário em certo arquivo, e o envio dos dados para o BD em outro arquivo...

 

Daí essa janela modal deveria aparecer depois que o dado for cadastrado...

Só que carrega muito rápido, e não dá tempo de aparecer a janela...

 

Teria algum delay? Ou talvez fazer de outro jeito...

 

Tem o formulário normal, daí no arquivo php que faz o envio dos arquivos estaria mais ou menos assim:

 

if ($email_check > 0){
   	echo "<script>
			$(window).load(function() {
				$.fallr({
					content : '<h5>Erro ao cadastrar</h5><p>O e-mail que você digitou já está sendo utilizado por outro usuário.</p>',
					icon : 'alert',
					autoclose : 3000
				});
			});
		</script>";

       unset($email);

   }
   echo "<script> window.location='../index.php?pri=cad_usu';</script>";

 

Alguma idéia?

[William Bruno 1501]

Oi @Buthy, nesse caso eu sugiro que você mude a interação.

 

Ou você envia com ajax os dados para o banco, ou você só mostra a mensagem depois q o cadastro fizer o redirect de volta.

[Buthy 0]

Se eu optar por fazer depois que o cadastro fizer o redirect, eu teria que passar algum valor pela url, dai utilizar algum if na página para exibir o alert, isso?

 

Ajax eu não entendo muito, teria algum tutorial de como fazer isso?

 

Lembrando que serao vários cadastros...

 

Obrigado!

[William Bruno 1501]

Se eu optar por fazer depois que o cadastro fizer o redirect, eu teria que passar algum valor pela url, dai utilizar algum if na página para exibir o alert, isso?

sim, pensei em exatamente isso.

 

 

Ajax eu não entendo muito, teria algum tutorial de como fazer isso?

exemplo com ajax:

http://wbruno.com.br/2012/01/20/enviar-formulario-para-php-sem-refresh-jquery-ajax/

[Buthy 0]

sim, pensei em exatamente isso.

 

 

exemplo com ajax:

http://wbruno.com.br/2012/01/20/enviar-formulario-para-php-sem-refresh-jquery-ajax/

 

Certo, eu fiz sem Ajax...

 

Tem outra coisa...

 

Teria um link:

<a href="remover.php?id=$id>" id="remover">Remover</a>

 

Daí para exibir um alerta para confirmar:

 

<script>
	$('#remover').click(function() {
		var clicked = function(){
			alert('congrats, you\'ve deleted internet');
			$.fallr('hide');
		};

		$.fallr('show', {
			buttons : {
			button1 : {text: 'Sim', danger: true, onclick: clicked},
				button2 : {text: 'Cancelar', onclick: function(){$.fallr('hide')}}
			},
			content : '<h5>Atenção</h5><p>Você tem certeza de que deseja remover estes dados?</p>',
			icon    : 'error',
			position: 'center'
		});
	});
</script>

 

O alerta está carregando, mas não dá tempo de aparecer totalmente, pois ele já vai para o remover.php, sem exibir o Sim e o Cancelar...

 

No lugar do "alert('congrats, you\'ve deleted internet');" o que eu teria que por para ir para o remover.php somente depois de clicar em Sim?

 

E caso clicar em Cancelar, para não ir p/ o remover.php e continuar na mesma página?

[William Bruno 1501]

$('#remover').click(function( e ) {
   e.preventDefault();

[Buthy 0]

$('#remover').click(function( e ) {
   e.preventDefault();

 

Então cara, eu fiz assim...

Ele apareceu e tudo, mas ele não para até que responda a pergunta.. ele aparece e depois segue pro remover.php...

 

<script>
	$('#remover').click(function() {
		var clicked = function( e ){
			e.preventDefault();
		};

		$.fallr('show', {
			buttons : {
			button1 : {text: 'Sim', danger: true, onclick: clicked},
				button2 : {text: 'Cancelar', onclick: function(){$.fallr('hide')}}
			},
			content : '<h5>Atenção</h5><p>Você tem certeza de que deseja remover estes dados?</p>',
			icon    : 'error',
			position: 'center'
		});
	});
</script>

[William Bruno 1501]

você fez errado.

 

$('#remover').click(function( e ) {
   e.preventDefault();//impede q siga

    var clicked = function(){
         document.location.href = 'remover.php';//agora sim, manda seguir, pois só cai aqui, se clicar em SIM
    };

[Buthy 0]

Certo..

 

E como eu passaria o valor do id que é uma variável php?

[William Bruno 1501]

$('#remover').click(function( e ) {
   e.preventDefault();//impede q siga

   var $this = $( this );

    var clicked = function(){
         document.location.href = $this.attr('href');//agora sim, manda seguir, pois só cai aqui, se clicar em SIM
    };

 

pronto.

[Buthy 0]

$('#remover').click(function( e ) {
   e.preventDefault();//impede q siga

   var $this = $( this );

    var clicked = function(){
         document.location.href = $this.attr('href');//agora sim, manda seguir, pois só cai aqui, se clicar em SIM
    };

 

pronto.

 

Opa! Certinho agora...

Muito obrigado William!

 

Aproveitando...

 

você sabe algum curso bom de JavaScript/Jquery? Tava vendo um na Caelum, mas não sei se talvez tem algum outro lugar melhor ou mais barato...

 

Valeuu!

[Bruno Augusto 417]

William, posso perguntar porque não só você mas vários outros entendidos do assunto fazem isso:

 

var $this = $( this );

Quando há problemas na resolução do escopo this, e consequentemente $(this), eu até entendo, mas nesses outros casos, não.

 

A propósito, achei esse Fallr muito bacana. Talvez eu até use nos meus projetos, já que o jQuery UI Dialog é um sufoco de estilizar.

[Buthy 0]

A propósito, achei esse Fallr muito bacana. Talvez eu até use nos meus projetos, já que o jQuery UI Dialog é um sufoco de estilizar.

 

Poisé cara, tinha testado vários outros, mas o melhor que encontrei foi o Fallr, você consegue deixar ele praticamente do jeito que quiser ehehe

[William Bruno 1501]

Quando há problemas na resolução do escopo this, e consequentemente $(this), eu até entendo, mas nesses outros casos, não.

ok.. imagine o seguinte, @Bruno chará:

$('.elemento').click(function(){
   e.preventDefault();
   $( this ).addClass('tal');
   $( this ).parent('li').addClass('tal');
   $( this ).find('span').addClass('tal');
});

fiz 3 chamadas à função básica do jQuery $(), certo ?

$('.elemento').click(function(){
   e.preventDefault();
   var $this = $( this );
   $this.addClass('tal');
   $this.parent('li').addClass('tal');
   $this.find('span').addClass('tal');
});

 

Dessa vez fiz uma única chamada, guardei em uma var, e usei esse objeto pronto.

Não precisei ir novamente buscar algo que eu já tinha. (muito mais rápido).

 

Ou ainda posso fazer:

$('.elemento').click(function(){
   e.preventDefault();
   with ( $( this ) )
   {
       addClass('tal');
       parent('li').addClass('tal');
       find('span').addClass('tal');
   }
});

Dessa última forma, tenho o desempenho melhor por apenas buscar o $( this ), uma única vez, e além disso, não usar nem espaço extra na memória apenas para guardar uma variável 'lixo'.(temporária)

 

Questão de performance mesmo. :lol:

 

 

ps: conheço uma forma com css muito melhor de resolver o problema que propus aqui, mas leve em consideração apenas como exemplo, e abstraia a implementação, e aplicação real.

[Francisco Brito 0]

So mesmo para agradecer aos exemplos do William Bruno e dizer que este post foi muito útil para mim.

 

Obrigado!