Icono en botón submit con jquery-ui y ajax

[Jorge]

Al parecer para poner un icono en un bot�n tipo input (submit o reset)
hay que realizar las modificaciones que tengo comentadas en el siguiente
c�digo (ver c�digo posterior).

Sin embargo, cuando las hago me dibuja correctamente el icono sobre el
bot�n de submit, pero ya no funciona ajax porque al haberlo reconvertido
a una etiqueta <button> se pierde el 'id=login_button' y ajax no env�a
los datos de manera as�ncrona.

�Se puede hacer que el bot�n de submit tenga el icono de la jquery-ui
sin prescindir de ajax?

Este es el c�digo de mi p�gina:

<script type="application/javascript">
$(document).ready(function() {

function updateLogin(data) {
$("#dialog_message")
.html(data.message)
.css("background", 'url('+data.background+') no-repeat right')
.dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
},
show: "scale",
hide: "puff"
})
};

$('#login_button').click(function() {
var ident = $('.ident').val();
var password = $('.password').val();
$.ajax({
url: "<?php echo site_url('restricted5/dologin'); ?>", //
We will call the function of the user controller
type: 'POST', // We use post for the login form
cache: false,
dataType: "json", // It is the type of the data we send. A
json looks like: { "success": "yes", "message": "in a bottle" }
data: 'ident='+ident+'&password='+password, // The data we
sent to the url, the inputs of the form have id=ident and id=password
success: updateLogin // What happens when the function
success, now I separate this from the ajaxForm
});
return false;
});

/*
$('input:submit, input:reset').each(function(){
$(this).replaceWith('<button type="' + $(this).attr('type') +
'">' + $(this).val() + '</button>');
});

$('button:submit').button({
icons: {
secondary: 'ui-icon-circle-check'
}
});
$('button:reset').button({
icons: {
secondary: 'ui-icon-circle-close'
}
});
*/

$('#login_button').button({
icons: {
secondary: 'ui-icon-circle-check'
}
});

});
</script>
<style type="text/css" >
#dialog_message{
display: none;
}
</style>

<?php echo form_open();?>
<br /><br /><br /><br />
<div id="dialog_message" title="Validation complete"></div>
<div id="main_content_login">
<div class="login_usuarios_fila">
<div class="login_usuarios_cabecera">Login:</div>
<div class="login_usuarios_dato"><?php echo
form_input(array('name'=>'ident','value'=>'','class'=>'ident
textbox','size'=>'53'));?></div>
<div id="message" class="login_usuarios_error"></div>
</div>
<div class="login_usuarios_fila">
<div class="login_usuarios_cabecera">Password:</div>
<div class="login_usuarios_dato"><?php echo
form_password(array('name'=>'password','value'=>'','class'=>'password
textbox','size'=>'53'));?></div>
<div class="login_usuarios_error"><?php echo
form_error('passwordlogin');?></div>
</div>
<div class="login_usuarios_fila">
<div class="login_usuarios_cabecera"></div>
<div class="login_usuarios_dato"></div>
</div>
<div class="login_usuarios_fila">
<div class="login_usuarios_cabecera"><?php echo
form_submit('submit','Login','id="login_button"');?></div>
<div class="login_usuarios_dato"></div>
</div>
</div>
<br /><br /><br /><br />
<br /><br /><br /><br />

<?php echo form_close();?>

[Hector hernandez]

El 4 de diciembre de 2012 06:19, Jorge <jorg...@gmail.com> escribió:

        <div class="login_usuarios_cabecera"><?php echo form_submit('submit','Login','id="login_button"');?></div>

La verdad desconozco la expresion que estas haciendo a la hora de mandar a pintar el boton de login, pero puedes intentar colocar tu boton sin etiquetas de php, por ejemplo:

<input type="submit" name="submit" value="" class="button_login" id="bt1"/>

y ya en tu script:

$("#bt1").click(function(event){

        event.preventDefault();  //paras la ejecucion del Submit

        var peticion = $('#save').attr('action');

        //alert (peticion);

        var metodo = $('#save').attr('method');

        var id_actividad           =parseInt($('input#id_actividad').val());

        var trimestre              =$('select#trim').val();

        var num_actividades        =parseInt($('select#combo-actividad').val());

        var act_programadas        =parseInt($('input#act_programadas').val());

        $.ajax({

              type: metodo,

               url: '../home/almacena_actividad',

              data: {id_actividad:id_actividad, trimestre:trimestre, num_actividades:num_actividades, act_programadas:act_programadas},

                success: function(resp){

                console.log("uhm at");

                 $('#gracias').dialog('open');

                 //alert("salio bien");

                }

        }); event.preventDefault();  

      });//fin btn_actividad

[Jorge]

On 04/12/2012 15:42, Hector hernandez wrote:
> El 4 de diciembre de 2012 06:19, Jorge <jorg...@gmail.com

> <mailto:jorg...@gmail.com>> escribi�:
>
> <div class="login_usuarios___cabecera"><?php echo
> form_submit('submit','Login','__id="login_button"');?></div>

>
>
>
> La verdad desconozco la expresion que estas haciendo a la hora de mandar
> a pintar el boton de login, pero puedes intentar colocar tu boton sin
> etiquetas de php, por ejemplo:
> <input type="submit" name="submit" value="" class="button_login" id="bt1"/>
>

Ya, ya lo s�. Lo he probado y tampoco funciona. En realidad esto ...
<input type="submit" id="login_button" value="Login"/>
... es lo mismo que esto ...

<?php echo form_submit('submit','Login','id="login_button"');?>

Igual no me he explicado demasiado bien. El problema est� en que a la
hora de intentar darle formato al bot�n mediante jQueryUI, esto es con ...

$('#login_button').button({
icons: {
secondary: 'ui-icon-circle-check'
}
});

... consigo d�rselo (se ve el bot�n con el estilo de mi tema de
jQueryUI) pero no sale el icono a la derecha, como sale sin problemas
cuando el bot�n no es tipo submit o reset.

Quiero un bot�n de submit estilo jQueryUI con icono que env�e los datos
a ajax.

[Daniela Blanco]

Entiendo que eso pasa porque esta esperando que sea del tipo button cuando
en jquery haces:

$('#login_button').button({

Eso selecciona los button con id login_button, si es type submit no esta
seleccionandolo.

-----Mensaje original-----
De: codeignit...@googlegroups.com
[mailto:codeignit...@googlegroups.com] En nombre de Jorge
Enviado el: martes, 04 de diciembre de 2012 06:02 p.m.
Para: codeignit...@googlegroups.com
Asunto: Re: [codeigniter-spanish] Icono en botón submit con jquery-ui y ajax

On 04/12/2012 15:42, Hector hernandez wrote:
> El 4 de diciembre de 2012 06:19, Jorge <jorg...@gmail.com

> <mailto:jorg...@gmail.com>> escribió:

>
> <div class="login_usuarios___cabecera"><?php echo
> form_submit('submit','Login','__id="login_button"');?></div>
>
>
>
> La verdad desconozco la expresion que estas haciendo a la hora de
> mandar a pintar el boton de login, pero puedes intentar colocar tu
> boton sin etiquetas de php, por ejemplo:
> <input type="submit" name="submit" value="" class="button_login"
> id="bt1"/>
>

Ya, ya lo sé. Lo he probado y tampoco funciona. En realidad esto ...

<input type="submit" id="login_button" value="Login"/> ... es lo mismo que
esto ...
<?php echo form_submit('submit','Login','id="login_button"');?>

Igual no me he explicado demasiado bien. El problema está en que a la hora
de intentar darle formato al botón mediante jQueryUI, esto es con ...

$('#login_button').button({
icons: {
secondary: 'ui-icon-circle-check'
}
});

... consigo dárselo (se ve el botón con el estilo de mi tema de

jQueryUI) pero no sale el icono a la derecha, como sale sin problemas cuando

el botón no es tipo submit o reset.

Quiero un botón de submit estilo jQueryUI con icono que envíe los datos a
ajax.

--
De-suscripción: codeigniter-spa...@googlegroups.com
Antes de responder revisa: http://es.wikipedia.org/wiki/Netiquette
Regístrate en el Censo CI: http://bit.ly/miembroscodeigniteres

[Jorge]

> Igual no me he explicado demasiado bien. El problema est� en que a la hora
> de intentar darle formato al bot�n mediante jQueryUI, esto es con ...

>
> $('#login_button').button({
> icons: {
> secondary: 'ui-icon-circle-check'
> }
> });
>

> ... consigo d�rselo (se ve el bot�n con el estilo de mi tema de

> jQueryUI) pero no sale el icono a la derecha, como sale sin problemas cuando

> el bot�n no es tipo submit o reset.
>
> Quiero un bot�n de submit estilo jQueryUI con icono que env�e los datos a
> ajax.
>

On 04/12/2012 22:05, Daniela Blanco wrote:> Entiendo que eso pasa porque

esta esperando que sea del tipo button cuando
> en jquery haces:
>
> $('#login_button').button({
>
> Eso selecciona los button con id login_button, si es type submit no esta
> seleccionandolo.

Esto hace que el bot�n cambie de formato ...

$('#login_button').button({
icons: {
secondary: 'ui-icon-circle-check'
}
});

... solo que no se muestra el icono. La cuesti�n es �c�mo lo puedo
conseguir?

[Daniela Blanco]

Por eso mismo, reitero no muestra el icono porque no esta entrando a este
codigo:

> $('#login_button').button({
> icons: {
> secondary: 'ui-icon-circle-check'
> }
> });

que le asiganaria el icono, eso es porque lo que estas haciendo es
seleccionar los button (html) que tengan de id login_button, y a ellos darle
de icono secundario
'ui-icon-circle-check', se entiende?

No encuentra ninguno que cumpla eso, porque es un submit no un button. Por
lo tanto no selecciona nada (no aplica el cambio de icono).

-----Mensaje original-----
De: codeignit...@googlegroups.com
[mailto:codeignit...@googlegroups.com] En nombre de Jorge

Enviado el: martes, 04 de diciembre de 2012 06:22 p.m.

Para: codeignit...@googlegroups.com
Asunto: Re: [codeigniter-spanish] Icono en botón submit con jquery-ui y ajax

> Igual no me he explicado demasiado bien. El problema está en que a la
> hora de intentar darle formato al botón mediante jQueryUI, esto es con ...

>
> $('#login_button').button({
> icons: {
> secondary: 'ui-icon-circle-check'
> }
> });
>

> ... consigo dárselo (se ve el botón con el estilo de mi tema de

> jQueryUI) pero no sale el icono a la derecha, como sale sin problemas

> cuando el botón no es tipo submit o reset.
>
> Quiero un botón de submit estilo jQueryUI con icono que envíe los

> datos a ajax.
>

On 04/12/2012 22:05, Daniela Blanco wrote:> Entiendo que eso pasa porque
esta esperando que sea del tipo button cuando > en jquery haces:
>
> $('#login_button').button({
>
> Eso selecciona los button con id login_button, si es type submit no esta
> seleccionandolo.

Esto hace que el botón cambie de formato ...

$('#login_button').button({
icons: {
secondary: 'ui-icon-circle-check'
}
});

... solo que no se muestra el icono. La cuestión es ¿cómo lo puedo
conseguir?

[Wolverinx]

Lo que dice daniela es cierto, básicamente te está diciendo es que para que te funcione debes poner tu boton submit sólo como boton:

<?php echo form_submit('submit','Login','id="login_button"');?>

a esto:
<input type="button" id="login_button" value="Login"/>

y no te preocupes por el submit ya que eso lo está haciendo la funcion:
$('#login_button').click(function() { .....

con eso creo que debería funcionar.

De-suscripción: codeigniter-spanish-unsub...@googlegroups.com

[mariano]

Hola no te funciona el codigo es porque estas reemplazando toda la etiqueta y por supuesto pierde el id, deberias volvérselo a poner, para que te funcione, y quizas usar live en ves de click solamente.

El martes, 4 de diciembre de 2012 07:49:56 UTC-4:30, Jorgeska escribió:

Al parecer para poner un icono en un bot�n tipo input (submit o reset)

hay que realizar las modificaciones que tengo comentadas en el siguiente

c�digo (ver c�digo posterior).

Sin embargo, cuando las hago me dibuja correctamente el icono sobre el

bot�n de submit, pero ya no funciona ajax porque al haberlo reconvertido
a una etiqueta <button> se pierde el 'id=login_button' y ajax no env�a
los datos de manera as�ncrona.

�Se puede hacer que el bot�n de submit tenga el icono de la jquery-ui
sin prescindir de ajax?

Este es el c�digo de mi p�gina:

[Jorge]

On 04/12/2012 22:50, Wolverinx wrote:
> Lo que dice daniela es cierto, b�sicamente te est� diciendo es que para
> que te funcione debes poner tu boton submit s�lo como boton:

>
> <?php echo form_submit('submit','Login','id="login_button"');?>
>
> a esto:
> <input type="button" id="login_button" value="Login"/>
>

> y no te preocupes por el submit ya que eso lo est� haciendo la funcion:
> $('#login_button').click(function() { .....
>
> con eso creo que deber�a funcionar.

Ahh, vale.
Pero he hecho este cambio y sigue sin mostrarse el icono.
En cambio si que he conseguido mostrarlo con ...

<button id="login_button">Login</button>

... que viene a ser la idea que explicaba Daniela.
Gracias a todos.
Un saludo.