Dar estilo a una funcion ajax

satjaen · #1 (**permalink**) 20/04/2013, 13:02

Hola, por favor a ver si podeis ayudarme. Tengo esta funcion y lo que quiero es darle estilo a las filas donde estan los item que me imprime, pero no me sale.

Código Javascript:

Ver originalfunction filtrar()
 
{
      
         $.ajax({
         data: $("#frm_filtro").serialize()+ordenar,
         type: "POST",
         dataType: "json",
         url: "ajax_mobile.php?action=listar",
         beforeSend:function(){
        $('.carga1').css('display','block');
        $('.carga1').html("<img src='imagenes_menu/ajax-loader4.gif' align='center' /><br />Cargando...");
        },   
        complete: function() {
 
            $(".carga1").show();
 
            $(".carga1").hide();
 
        },            
        success: function(data){ 
        var html_user ='' ;
        if(data.length > 0){ 
        $.each(data, function(i,item){ 
 
 html_user += '<ul data-role="listview" data-inset="true" >';
 html_user += '<li data-role="list-divider" role="heading">'+item.recambio+'<span class="ui-li-count">Stock:</span></li>';
 html_user += '<li data-theme="c">';
 html_user += '<a href="#">';
 html_user += '<h4>'+item.denominacion+'</h4>';
 html_user += '       <p>Lorem ipsum</p>';
 html_user += '    <span class="ui-li-count">1</span>';
 html_user += '   <p class="ui-li-aside">Aside</p>';
 html_user += '   </a><a href="#">Pvp:'+item.pvp+'</a></li>';
 html_user += ' </ul>';
                         
        });                     
    } 
    if(html_user == '') 
    html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
    $("#data tbody").html(html_user);

Gracias

David · #2 (**permalink**) 20/04/2013, 13:53

Puedes agregarle estilos en línea (con el atributo style) o simplemente colocarle una clase a los elementos y usar una hoja de estilos para darle el estilo que quieras.

satjaen · #3 (**permalink**) 20/04/2013, 14:04

Gracias David, pero como ves ya les estoy dando clase, pero no sale.

Código Javascript:

Ver originalhtml_user += '<ul data-role="listview" data-inset="true" >';
 html_user += '<li data-role="list-divider" role="heading">'+item.recambio+'<span class="ui-li-count">Stock:</span></li>';
 html_user += '<li data-theme="c">';
 html_user += '<a href="#">';
 html_user += '<h4>'+item.denominacion+'</h4>';
 html_user += '       <p>Lorem ipsum</p>';
 html_user += '    <span class="ui-li-count">1</span>';
 html_user += '   <p class="ui-li-aside">Aside</p>';
 html_user += '   </a><a href="#">Pvp:'+item.pvp+'</a></li>';
 html_user += ' </ul>';

David · #4 (**permalink**) 20/04/2013, 14:06

¿Y en tu hoja de estilos tienes las referencias a esas clases?

satjaen · #5 (**permalink**) 20/04/2013, 14:15

Pero el estilo lo hacen los enlaces de jquery no? Te pongo el cod:

Código Javascript:

Ver original<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>Aplic. Web de jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1-rc.1/jquery.mobile-1.1.1-rc.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.1-rc.1.min.js"></script>
<script>
function filtrar()
 
{
      
         $.ajax({
         data: $("#frm_filtro").serialize()+ordenar,
         type: "POST",
         dataType: "json",
         url: "ajax_mobile.php?action=listar",
         beforeSend:function(){
        $('.carga1').css('display','block');
        $('.carga1').html("<img src='imagenes_menu/ajax-loader4.gif' align='center' /><br />Cargando...");
        },   
        complete: function() {
 
            $(".carga1").show();
 
            $(".carga1").hide();
 
        },            
        success: function(data){ 
        var html_user ='' ;
        if(data.length > 0){ 
        $.each(data, function(i,item){ 
 
 html_user += '<ul data-role="listview" data-inset="true" >';
 html_user += '<li data-role="list-divider" role="heading">'+item.recambio+'<span class="ui-li-count">Stock:</span></li>';
 html_user += '<li data-theme="c">';
 html_user += '<a href="#">';
 html_user += '<h4>'+item.denominacion+'</h4>';
 html_user += '       <p>Lorem ipsum</p>';
 html_user += '    <span class="ui-li-count">1</span>';
 html_user += '   <p class="ui-li-aside">Aside</p>';
 html_user += '   </a><a href="#">Pvp:'+item.pvp+'</a></li>';
 html_user += ' </ul>';
                         
        });                     
    } 
    if(html_user == '') 
    html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
    $("#data tbody").html(html_user);
    $('.carga').html('');
</script>
</head> 
<body> 
 
 
 
    <div id="principal" data-role="page" data-theme="b" >
 
        
 
        <div data-role="header" data-theme="a">
 
            <h1>Buscar Referencia</h1> 
 
            <a href="materialpendiente.php" data-icon="delete" data-iconpos="notext" data-theme="f" data-ajax="false" class="ui-btn-right"></a>
 
        </div>  
 
        
 
        <div data-role="content">
 
        <form id="frm_filtro" method="post" action="menu4.php" name="form12">
 
            <input type="hidden" name ="edTipoReferencia" id="edTipoReferencia" value="" />
 
            <input id="edIdArtFact" name="edIdArtFact" type="hidden" value=""/>
 
                  
 
            <div class="ui-bar-b ui-corner-all ui-shadow" style="padding:1.4em;align:center;">
 
                <fieldset class="ui-grid-a" >
 
                    <input name="recambio" id="recambio" align="center" type="search" data-theme="b" value="" style="text-transform:uppercase;width:92%"/>
 
                    <button type="button" name="btnfiltrar" id="btnfiltrar" data-theme="b" data-icon="search" value="Buscar">Buscar</button>
 
                </fieldset>
 
            </div>                  
 
            <br />
 
            
 
            <!--aqui la busqueda-->
         <table id="data">
         <tbody>
         <!--aqui es donde salen las filas-->   
            </tbody> 
             </table>      
 
          
                <!--aqui acaba el script de la busqueda -->
 
            <input name="data1" id="data1" type="hidden" value="" />                    
 
        </form>
 
                </div>
    </div>
 
</body>
 
</html>

David · #6 (**permalink**) 20/04/2013, 14:29

No me había fijado que estabas trabajando con jQuery Mobile, puedes intentar llamando manualmente al método listview() luego de haber insertado la lista:

Código Javascript:

Ver original$("#data tbody ul").listview();

satjaen · #7 (**permalink**) 20/04/2013, 14:49

Perdona, pero no sabia donde poner la consulta. Lo he puesto así pero no me saca registros.

Código Javascript:

Ver originalif(html_user == '') 
    html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
    $("#data tbody ul").listview().html(html_user);

David · #8 (**permalink**) 20/04/2013, 14:51

Estás intentando llamar al método listview antes de que la lista exista, lo cual no tiene sentido.

Hazlo después de haberlo insertado en el documento.

satjaen · #9 (**permalink**) 20/04/2013, 14:54

Si, vuelve a perdonarme:

Código Javascript:

Ver originalif(html_user == '') 
    html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
    $("#data tbody").html(html_user);
    $("#data tbody ul").listview();

Gracias