[Resolvido] multiplos botões com gif animado

[gremio10 14]

Galera, assim, crio uma listagem em uma tabela que vai se multiplicando, e crio um botão que irá enviar ajax para salvar esses dados.

Só que assim, eu testo o ajax e no beforeSend: é para ele mostrar na minha div , um gif animado de loading... só que ele não funciona, não consigo fazer com que ele descubra qual foi clicado e apareça...

 

Alguem teria alguma ideia ?

 

código:

Ps.:tem alguns códigos em Smarty

		<table class="list" id="produtos">
			<tr>
				<th>Ref.</th>
				<th>Nome</th>
				<th>De</th>
				<th>Para</th>
                <th>Prazo</th>
				<th>Peso</th>
				<th>Alt.</th>
                <th>Larg.</th>
                <th>Comp.</th>
				<th class="tools"> </th>
			</tr>
			{foreach from=$products item="product"}
          	<form class="form">
			<tr>
				<td nowrap="nowrap">
					{$product.reference}
					<!--<a href="#" title="Atributos" onClick="var w = window.open('{$rootUrl}manager/referenceAttribute/create/reference/{$product.reference}', 'attributes', 'width=800,height=500,scrollbars=yes'); w.focus(); return false;">
					<img src="{$rootUrl}imgs/manager/ico_atributos.png" alt="Atributos"/ align="middle">
					</a>-->
				</td>
				<td>
                
                {textField object="product" property="name" class="text3"}
                </td>
				<td>
                {assign var="shopProduct" value=$product->shopProduct[0]}
                R$ {textField object="shopProduct" property="value" class="text2"}
				<!--	{if $product.imageThumbName != "" }
					<a href="{$rootUrl}upload/referenceAttribute/{$product.imageThumbName}" target="_blank">Clique para ver</a>
					{/if} -->
				</td>
				<td>
                {assign var="shopProduct" value=$product->shopProduct[0]}
                R$ {textField object="shopProduct" property="promotionalValue" class="text2"}
                <!--{$product.isActiveString}-->
                </td>
                <td>
                {assign var="shopProduct" value=$product->shopProduct[0]}
                {textField object="shopProduct" property="deliveryTime" class="text2"}
                </td>
				<td>
				<input type="text" name="weight" value="{$product.weight}" class="text2" />
                <!--{$product.hasStockString}-->
                </td>
				<td>
                <input type="text" name="height" value="{$product.height}" class="text2" />
                <!--<a href="#" onClick="var w = window.open('{$rootUrl}manager/productRelated/create/id/{$product.id}', 'product_related', 'width=800,height=500,scrollbars=yes'); w.focus(); return false;">Clique para ver</a>-->
                </td>
                <td>
                <input type="text" name="width" value="{$product.width}" class="text2" />
                </td>
                <td>
                <input type="hidden" value="{$product.reference}" name="reference" />
                <input type="hidden" name="id" value="{$product.id}" class="text2" />
				<input type="text" name="length" value="{$product.length}" class="text2" />
                </td>
				<td>
                <button class="o">Ok</button>
                <div class="loading"></div>
                	<a href="#" title="Atributos" onClick="var w = window.open('{$rootUrl}manager/referenceAttribute/create/reference/{$product.reference}', 'attributes', 'width=800,height=500,scrollbars=yes'); w.focus(); return false;">
					<img src="{$rootUrl}imgs/manager/ico_atributos.png" alt="Atributos" border="0" align="middle">
					</a>
                	
					{linkTo module="manager" action="edit" id=`$product->id` htmlTitle="Editar"}<img src="{$rootUrl}imgs/manager/ico_edit.png" alt="Editar"/>{/linkTo}
					
					{linkTo module="manager" action="delete" id=`$product->id` htmlTitle="Excluir" htmlOnclick="return confirm('Tem certeza que deseja excluir este produto?');"}<img src="{$rootUrl}imgs/manager/ico_delete.png" alt="Excluir"/>{/linkTo}
									</td>
			</tr>
           </form>
			{/foreach}
		</table>
	{/if}
</div>
<script>
{literal}
jQuery(document).ready(function(){


	jQuery(".form").bind('submit', function(){        
        var button = jQuery('button',this).attr('disabled',true);
        var params = jQuery(this.elements).serialize();
//		alert (params);
//alert(button);
		var loading = jQuery(".form").parent("td").find(".loading");
   		
        jQuery.ajax({
            type: 'POST',
            url: '{/literal}{$rootUrl}{literal}manager/product/tableEdition',
            data: params,
            beforeSend: function(){
                loading.show();
                loading.html('<img src="{/literal}{$rootUrl}{literal}imgs/manager/ajax-loader.gif" alt="Carregando..."/>');
            },
            success: function(){
                loading.html("<img src='{/literal}{$rootUrl}{literal}imgs/manager/ico_ok.gif' alt='Ok'/>");
            },
            error: function(){
                loading.html("Erro");
            }
        })
		return false;
    });
	
});
{/literal}
</script>

[Henrique Barcelos 290]

Não sei se inserir códigos Smarty com JS funciona, mas creio que não...

Precisa inserir código HTML padrão para funcionar...

[gremio10 14]

Cara , o pior é que funciona sim, testei separado e vai tranquilo, so nao consigo saber qual linha foi clicada para que ele apenas mostre a img naquela linha em especifica...

[gremio10 14]

Resolvido ...