<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>NIDEZ &#187; JqueryUI</title>
	<atom:link href="http://www.nidez.com.br/category/linguagem-de-programacao/javascript/jqueryui/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.nidez.com.br</link>
	<description>design and codes</description>
	<lastBuildDate>Thu, 29 Jul 2010 03:49:44 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>jqueryUI &#8211; javascript &#8211; adicionar option em combo via form em modal</title>
		<link>http://www.nidez.com.br/linguagem-de-programacao/javascript/jqueryui-javascript-adicionar-option-em-combo-via-form-em-modal/</link>
		<comments>http://www.nidez.com.br/linguagem-de-programacao/javascript/jqueryui-javascript-adicionar-option-em-combo-via-form-em-modal/#comments</comments>
		<pubDate>Sat, 01 Aug 2009 00:47:07 +0000</pubDate>
		<dc:creator>Fernando Binasco</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[JqueryUI]]></category>
		<category><![CDATA[Jquery]]></category>

		<guid isPermaLink="false">http://www.nidez.com.br/?p=226</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>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.</p>
<p>Foi utilizado:<br />
<a href="http://www.php.net" target="_blank">PHP</a>, <a href="http://www.jquery.com" target="_blank">Jquery</a>, <a href="http://www.jqueryUI.com" target="_blank">JqueryUI</a>.<br />
<span id="more-226"></span><br />
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.</p>
<p><a href="http://speibsi.site90.com/online/jquery/ui/development-bundle/demos/dialog/comboeform.html" target="_blank">[exemplo online]</a><br />
<a href="http://speibsi.site90.com/arquivos/Fontes/javascript/[www.nidez.com.br]combomodal.zip" target="_blank">[download dos arquivos]</a></p>
<pre class="brush: jscript;">
$(function() {
		var name = $(&quot;#nome&quot;),allFields = $([]).add(name),tips = $(&quot;#validateTips&quot;);
		var id = null;

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

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

		$(&quot;#dialog&quot;).dialog({
			bgiframe: true,
			autoOpen: false,
			height: 200,
			modal: true,
			buttons: {
				'Gravar': function() {
					var bValid = true;
					allFields.removeClass('ui-state-error');
					bValid = bValid &amp;&amp; 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(&quot;ui-state-hover&quot;);
			},
			function(){
				$(this).removeClass(&quot;ui-state-hover&quot;);
			}
		).mousedown(function(){
			$(this).addClass(&quot;ui-state-active&quot;);
		})
		.mouseup(function(){
				$(this).removeClass(&quot;ui-state-active&quot;);
		});

	});
</pre>
<p>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.</p>
<pre class="brush: php;">
&lt;option value=&quot;teste&quot; selected=&quot;selected&quot;&gt;&lt;?php echo $_POST['valor']; ?&gt;&lt;/option&gt;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.nidez.com.br/linguagem-de-programacao/javascript/jqueryui-javascript-adicionar-option-em-combo-via-form-em-modal/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
