NIDEZ » Javascript

jqueryUI – javascript – adicionar option em combo via form em modal

Fernando Binasco — Sat, 01 Aug 2009 00:47:07 +0000

Uma implementação feita por mim para que abra em modal um form e o mesmo adicione o valor na combobox. Util para evitar que o usuário tenha que sair da página para adicionar um campo na combo.

Foi utilizado:
PHP, Jquery, JqueryUI.

O próprio jqueryUI possui uma area para modal-form, se encontra na parte de dialog mas não vi exemplo trabalhando junto com as combos, então resolvi postar.

[exemplo online]
[download dos arquivos]

$(function() {
		var name = $("#nome"),allFields = $([]).add(name),tips = $("#validateTips");
		var id = null;

		function updateTips(t) {
			tips.text(t).effect("highlight",{},1500);
		}

		function checkLength(o) {
			if ( o.val().length <= 0){
				o.addClass('ui-state-error');
				updateTips("Preencha o campo abaixo");
				return false;
			} else {
				return true;
			}
		}

		$("#dialog").dialog({
			bgiframe: true,
			autoOpen: false,
			height: 200,
			modal: true,
			buttons: {
				'Gravar': function() {
					var bValid = true;
					allFields.removeClass('ui-state-error');
					bValid = bValid && checkLength(name);
					if (bValid) {
						/* atualiza valor na combo */
						$.post(
							'atualiza.php',
							{ valor : name.val() },
							function(resposta){
								$('#'+id).append(resposta);
							}
						);
						//$.post('../../php/jq_busca_estados.php',{ pais : $(this).val() },function(resposta){$('#estado').html(resposta);});
						/*  */
						$(this).dialog('close');
					}
				},
				'Cancelar': function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				allFields.val('').removeClass('ui-state-error');
			}
		});

		/** Abre o dialog do formulario */
		$('.adicionar').click(function() {
			id = $(this).attr('combo');
			$('#dialog').dialog('open');
		})
		.hover(
			function(){
				$(this).addClass("ui-state-hover");
			},
			function(){
				$(this).removeClass("ui-state-hover");
			}
		).mousedown(function(){
			$(this).addClass("ui-state-active");
		})
		.mouseup(function(){
				$(this).removeClass("ui-state-active");
		});

	});

No caso do php eu fiz apenas um option, mas pode ser aproveitado o post para gravar em banco o valor inserido pelo form no modal.

Jquery – Javascript – Combos carregarem dinamicamente

Fernando Binasco — Thu, 30 Jul 2009 03:41:17 +0000

Vejo que uma das coisas mais comum em formulários são as combos que quando o usuário escolhe uma opção da primeira as demais carregam automaticamente suas opções com os valores do banco de dados, muito utilizadas em combos de país / cidade / estado.

Abaixo segue um exemplo feito com jquery, para tornar mais fácil o entendimento de como funciona não fiz com uso de banco de dados e sim com um array feito manualmente, mas batendo os olhos já da pra entender facilmente. Caso tenha alguma duvida comente o post ou me envie um e-mail que ajudo ok?

[EXEMPLO ONLINE]
[DOWNLOAD]

[Javascript]

[HTML]


		
			
				Escolha(combo1):
				
			
			
				Modelos(combo2):

[PHP]



 $valor){
		foreach($valor as $key => $value){
			if($chave == $_POST['id']){
				?>

Jquery – Javascript – mascara de moedas para formulários

Fernando Binasco — Wed, 29 Jul 2009 04:34:43 +0000

Navegando pela internet encontrei o plugin para jquery chamado maskedmoney, é uma mascara desenvolvida pelo Aurelio Saraiva com colaborações do Raul Pereira, ela permite fazer com que os usuários de seus formulários preencham os campos de moedas (valores) corretamente, é possível utiliza-la para dólar, reais, euro ou demais tipos moedas.

No site do desenvolvedor, neste instante (da escrita do post) o mesmo diz ter feito testes apenas no Firefox, eu realizei testes nos seguintes navegadores: Firefox 3.5, Iceweasel, Opera, IE5.5, IE 6, IE7 e IE8. Em todos funcionou sem problemas.

Segue links com exemplos e download do código:
[Exemplo]
[Download]
[Site do desenvolvedor]

(javascript/jquery) Limite de caracteres em textarea

Fernando Binasco — Wed, 17 Jun 2009 23:02:55 +0000

Para quem quiser adicionar limite de caracteres e avisar ao usuário quando o mesmo for atingido, pode fazer o uso deste script

para visualizar Clique aqui
Para baixar os arquivos Clique aqui

jQuery.fn.limite = function() {

	$(this).each(function(){

		var qtd = $(this).attr('maxlen');

		var length = $(this).val().length;

		var num = qtd - length;

		var posicao = $(this).attr('posicao');		

		$(this).after("" + num + " caracteres restantes" + "<\/div>");

		$(this).keyup(function(){

			var new_length = $(this).val().length;

			var num = qtd - new_length;

			if(new_length <= qtd && num > 0){

				$(this).parent().find('#limite'+posicao).html( num + ' caracteres restantes.');

			}else{

				$(this).parent().find('#limite'+posicao).html('Total de caracteres permitido já foi digitado.');

				$(this).val($(this).val().substring(0,qtd));

			}

		});

	});

}

Jquery(javascript) Mostra e Esconde conteúdos de uma div

Fernando Binasco — Fri, 29 May 2009 15:53:00 +0000

Codigo que mostra e esconde conteúdos de uma div através de um checkbox, voce pode colocar em link ou onde desejar, já que ele trabalha com ID

HTML


	Clique nos checkboxs
	DIVs 1 e 3
	DIV 2
	
		Conteudo da div 1 ...
	
	
		Conteudo da div 2 ...
	
	
		Conteudo da div 3 ...

JAVASCRIPT

$(document).ready(function(){

	// Divs 1 e 3
	$("#divUm").hide();
	$("#divTres").hide();
	$("#um").click(function () {
		$("#divUm").slideToggle("slow");
		$("#divTres").slideToggle("slow");
	});
	// Div 2
	$("#divDois").hide();
	$("#dois").click(function () {
		$("#divDois").slideToggle("slow");
	});
});

VISUALIZAR

Jquery(javascript) – lightbox+stepcarousel – slide de imagens

Fernando Binasco — Thu, 28 May 2009 01:22:53 +0000

Junção de 2 scripts, o slide com o lightbox.

Link para baixar: BAIXAR

VISUALIZAR

Para quem for utilizar as configurações se encontram em

/js/jquery.lightbox.conf.js
/js/jquery.stepcarousel.conf.js

/css/jquery.lightbox.conf.css
/css/jquery.stepcarousel.conf.css

Jquery(javascript) – Adicionar / Remover campos através de selectbox

Fernando Binasco — Thu, 28 May 2009 00:23:36 +0000

Logo abaixo um exemplo de inserção de campos em formulário utilizando selectbox e o famoso Jquery.

Arquivos necessários:
jquery.highlightFade.js

jquery.js

config.js

index.htm

Estarei detalhando aqui o config.js, já que o jquery.js é o framework javascript e o jquery.highlightFade.js é um plugin.

function addFormField() {
   /* pega valor inicial pelas ids dos elementos e guarda em vaiaveis */
	var id = document.getElementById("id").value;

	var objcat = document.getElementById("categoria");
	var categoria = objcat.options[objcat.selectedIndex].text;

	var objcur = document.getElementById("curso");
	var curso = objcur.options[objcur.selectedIndex].text;

	/*utilizando o jquery.js substitui valor em elemento com id = dicTxt
o html pode ser alterado mas deve sempre ser escrito em apenas uma linha para não gerar erros
*/
	$("#divTxt").append(""+categoria+""+curso+"Remove");

/*Utiliza jquery.highlightFade.js para fazer efeito em amarelo ao exibir uma linha*/
	$('#row' + id).highlightFade({
		speed:1000
	});

	id = (id - 1) + 2;
	document.getElementById("id").value = id;

}
/*remove campo pela id usando jquery.js*/
function removeFormField(id) {
	$(id).remove();
}

Exemplo em funcionamento e fonte:
VER EM FUNCIONAMENTO
BASE EM : http://mohamedshaiful.googlepages.com/add_remove_form.htm

API google maps e o erro de chave usada em outro website

Fernando Binasco — Thu, 07 May 2009 00:46:36 +0000

1) O primeiro passo a seguir é entrar no link abaixo

http://code.google.com/intl/pt-BR/apis/maps/

2) Faça o login com sua conta do Google

3)Abaixo preencha o input com a url de seu website

5) Coloque o código que eles passam em seu website e caso apareça o seguinte erro:

“The Google Maps API key used on this web site was registered for a
different web site. You can generate a new key for this web site at
http://code.google.com/apis/maps/.”

A solução é simples, observe que no codigo JS que ele mostra na página junto com sua chave existe essa linha:

sensor=true_or_false

Nesta parte é necessário escolher true ou false, senão o erro aparece.

deixe assim:

Obvio, com sua chave.
exemplo:



  
    
    Google Maps JavaScript API Example: Simple Map