1. ホーム
  2. 質問と答え
  3. スクロール位置が後の私は、AJAXを介してデータの後にスクロール充電で少し問題を抱えているjQueryの

スクロール位置が後の私は、AJAXを介してデータの後にスクロール充電で少し問題を抱えているjQueryの

2016-06-19 2 views
0

をリロード、私はそれが何をするか、このJavaがあるのJsスクロール位置が後の私は、AJAXを介してデータの後にスクロール充電で少し問題を抱えているjQueryの

$('select#mes').on('change',function(){ 
     var valor = $(this).val(); 
     var route = "../../public/ADIC/ListaM"; 
     var token = document.getElementById('token').getAttribute('content') 

     if(valor != null){ 

     $.ajax({ 
     url: route, 
     headers: {'X-CSRF-TOKEN': token}, 
     type: 'POST', 
     dataType: 'json', 
     data:{mes: valor}, 
      beforeSend: function() { 
       $("#resultado").html('<i class="fa fa-refresh fa-spin"></i>'); 
       $('#limpiar tbody').empty(); 
      }, 
      success: function(data){ 
       $("#resultado").html(''); 

       var tbody = $('.table.table-striped > tbody'); 
        $(data.users).each(function(index, user){ 
         if(user.Check_J1 == 1 && user.Check_J2 == 1){ 
          $('<tr class="success" />') 
          .append($('<td />').html(user.Fecha)) 
          .append($('<td />').html(user.Cancha)) 
          .append($('<td />').html(user.EquipoA +' vs '+ user.EquipoB + ' (' + user.Categoria +')')) 
          .append($('<td />').html(user.Numero_J1 +' - '+ user.Nombre_J1 + ' ' + user.Apellido_J1)) 
          .append($('<td />').html(user.Numero_J2 +' - '+ user.Nombre_J2 + ' ' + user.Apellido_J2)) 
          .append($('<td />').html('<button class="btn register btn-skin-green btn-xs" data-store-code='+ user.id +' ><i class="fa fa-fw fa-eye"></i>Ver</button>')) 
          .appendTo(tbody); 
         }else{ 
          $('<tr class="danger" />') 
          .append($('<td />').html(user.Fecha)) 
          .append($('<td />').html(user.Cancha)) 
          .append($('<td />').html(user.EquipoA +' vs '+ user.EquipoB + ' (' + user.Categoria +')')) 
          .append($('<td />').html(user.Numero_J1 +' - '+ user.Nombre_J1 + ' ' + user.Apellido_J1)) 
          .append($('<td />').html(user.Numero_J2 +' - '+ user.Nombre_J2 + ' ' + user.Apellido_J2)) 
          .append($('<td />').html('<button class="btn register btn-skin-green btn-xs" data-store-code='+ user.id +' ><i class="fa fa-fw fa-eye"></i>Ver</button>')) 
          .appendTo(tbody); 
         }     
        }); 
       $('.register').click(function() { 
        var storeCode = $(this).data('storeCode'); 
        $("#capa_modal").show(); 
        $("#capa_para_edicion").show(); 
        var url = storeCode+"/edit"; 
         $.get(url,function(resul){ 
          $("#capa_para_edicion").html(resul); 
         }); 
       }); 
      }, 
      error: function() { 

      } 
     }); 
     }else{ 
     } 
    });

..

表示するようにステップ選択ボックスの変数を収集し、データを収集してテーブルに表示するajaxステートメントを作成します。

同時に、posivilidadを持つモーダルウィンドウを開くボタンを作成します情報を変更します。

viwer

<div class="form-group"> 
    <div class='row'> 
     <div class='col-md-1'></div> 
     <div class='col-md-10'> 
     @foreach($resp as $respuesta) 
      {!!Form::hidden('id',$respuesta->id, ['id'=>'id'])!!} 

      {!!Form::label('numero','Fecha: ')!!} 
      {!!$respuesta->Fecha!!}<br> 
      {!!Form::label('numero','Cancha: ')!!} 
      {!!$respuesta->Cancha!!}<br> 
      {!!Form::label('nombre','Partido: ')!!} 
      {!!$respuesta->EquipoA!!} vs {!!$respuesta->EquipoB!!}({!!$respuesta->Categoria!!})<br> 

      <div id="datos1"> 
      {!!Form::label('nombre','Primer Juez: ')!!} 
      @if($respuesta->Check_J1 == '1') 
       {!!$respuesta->Numero_J1!!} - {!!$respuesta->Nombre_J1!!} {!!$respuesta->Apellido_J1!!} <span class="btn label label-success">ok</span> 
       <span id="show_1" class=" btn label label-warning">Editar</span></a><br> 
      @else 
       {!!$respuesta->Numero_J1!!} - {!!$respuesta->Nombre_J1!!} {!!$respuesta->Apellido_J1!!} <span class="btn label label-danger" >Error</span> 


       <span id="1_juez" class="btn label label-primary"> 
       @foreach($Juez1 as $Juez1) 
        {!!$Juez1->numero1!!} - {!!$Juez1->nombre1!!} {!!$Juez1->apellido1!!}</span> 
        {!!Form::hidden('Numero_J1',$Juez1->numero1, ['id'=>'Numero_J1'])!!} 
        {!!Form::hidden('Nombre_J1',$Juez1->nombre1, ['id'=>'Nombre_J1'])!!} 
        {!!Form::hidden('Apellido_J1',$Juez1->apellido1, ['id'=>'Apellido_J1'])!!} 
       @endforeach 
       <span id="show_1" class=" btn label label-warning">Editar</span></a><br> 

      @endif 
      </div> 
      <div id=edit_1> 
       <div class='row'> 
       <div class='col-md-2'> 
       {!!Form::text('Numero_J1_e',$respuesta->Numero_J1, ['id'=>'Numero_J1_e','class'=>'form-control input-sm ', 'placeholder' => 'Numero'])!!} 
       </div> 
       <div class='col-md-3'> 
       {!!Form::text('Nombre_J1_e',$respuesta->Nombre_J1, ['id'=>'Nombre_J1_e','class'=>'form-control input-sm', 'placeholder' => 'Nombre'])!!} 
       </div> 
       <div class='col-md-5'> 
       {!!Form::text('Apellido_J1_e',$respuesta->Apellido_J1, ['id'=>'Apellido_J1_e','class'=>'form-control input-sm', 'placeholder' => 'Apellido'])!!} 
       </div> 
       <div class='col-md-2'> 
       <span id="1_juez_e" class=" btn label label-success">Confirmar</span></a> 
       </div> 
       </div> 
      </div> 


     <div id="datos2"> 
      {!!Form::label('nombre','Segundo Juez: ')!!} 
      @if($respuesta->Check_J2 == '1') 
       {!!$respuesta->Numero_J2!!} - {!!$respuesta->Nombre_J2!!} {!!$respuesta->Apellido_J2!!} <span class="btn label label-success">ok</span> 
       <span id="show_2" class=" btn label label-warning">Editar</span></a><br><br> 
      @else 
       {!!$respuesta->Numero_J2!!} - {!!$respuesta->Nombre_J2!!} {!!$respuesta->Apellido_J2!!} <span class="btn label label-danger" >Error</span> 

      @foreach($Juez2 as $Juez2) 
      @if($Juez2->numero2 !='') 
       <span id="2_juez" class="btn label label-primary"> 
        {!!$Juez2->numero2!!} - {!!$Juez2->nombre2!!} {!!$Juez2->apellido2!!}</span> 
        {!!Form::hidden('Numero_J2',$Juez2->numero2, ['id'=>'Numero_J2'])!!} 
        {!!Form::hidden('Nombre_J2',$Juez2->nombre2, ['id'=>'Nombre_J2'])!!} 
        {!!Form::hidden('Apellido_J2',$Juez2->apellido2, ['id'=>'Apellido_J2'])!!} 

      @else 
       No hay datos 
      @endif 
      @endforeach 
       <span id="show_2" class=" btn label label-warning">Editar</span></a><br> 

      @endif 
      </div> 

      <div id=edit_2> 
        <div class='row'> 
        <div class='col-md-2'> 
        {!!Form::text('Numero_J2_e',$respuesta->Numero_J2, ['id'=>'Numero_J2_e','class'=>'form-control input-sm ', 'placeholder' => 'Numero'])!!} 
        </div> 
        <div class='col-md-3'> 
        {!!Form::text('Nombre_J2_e',$respuesta->Nombre_J2, ['id'=>'Nombre_J2_e','class'=>'form-control input-sm', 'placeholder' => 'Nombre'])!!} 
        </div> 
        <div class='col-md-5'> 
        {!!Form::text('Apellido_J2_e',$respuesta->Apellido_J2, ['id'=>'Apellido_J2_e','class'=>'form-control input-sm', 'placeholder' => 'Apellido'])!!} 
        </div> 
        <div class='col-md-2'> 
        <span id="2_juez_e" class=" btn label label-success">Confirmar</span></a> 
        </div> 
        </div> 
       </div> 
      {!!Form::hidden('valor',$respuesta->Mes, ['id'=>'valor'])!!} 
     @endforeach 


     <a id="salir" class="label label-danger "><i class='fa fa-link'></i> <span>Volver</span></a> 
     </div> 
    </div>   
</div> 
<script> 
$(document).ready(function(){ 
    $("#edit_1").hide(); 
    $("#edit_2").hide(); 

    $('#show_1').click(function(f) { 
     $("#edit_1").slideToggle(); 
    }); 
    $('#show_2').click(function(r) { 
     $("#edit_2").slideToggle(); 
    }); 

    $('#1_juez').click(function(e) { 
     var dato = $("#id").val(); 
     var dato1 = $("#Numero_J1").val(); 
     var dato2 = $("#Nombre_J1").val(); 
     var dato3 = $("#Apellido_J1").val(); 

     var route = "http://localhost/UJOBB/public/ADIC/edito1"; 

     var token = document.getElementById('token').getAttribute('content') 

     $.ajax({ 
     url: route, 
     headers: {'X-CSRF-TOKEN': token}, 
     type: 'POST', 
     dataType: 'json', 
     data:{id: dato, Numero_J1: dato1, Nombre_J1: dato2, Apellido_J1: dato3}, 
       beforeSend: function() { 
        $("#datos1").html('<i class="fa fa-refresh fa-spin"></i>'); 
       }, 
       success: function() { 
        $("#datos1").load(dato+"/edit" + " #datos1"); 
        $("#edit_1").hide(); 
       }, 
       error: function() { 

       } 
      }); 
     $("#edit_1").hide(); 
    }); 

    $('#2_juez').click(function(e) { 
     var dato = $("#id").val(); 
     var dato1 = $("#Numero_J2").val(); 
     var dato2 = $("#Nombre_J2").val(); 
     var dato3 = $("#Apellido_J2").val(); 

     var route = "http://localhost/UJOBB/public/ADIC/edito2"; 

     var token = document.getElementById('token').getAttribute('content') 

     $.ajax({ 
     url: route, 
     headers: {'X-CSRF-TOKEN': token}, 
     type: 'POST', 
     dataType: 'json', 
     data:{id: dato, Numero_J2: dato1, Nombre_J2: dato2, Apellido_J2: dato3}, 
       beforeSend: function() { 
        $("#datos2").html('<i class="fa fa-refresh fa-spin"></i>'); 
       }, 
       success: function() { 
        $("#datos2").load(dato+"/edit" + " #datos2"); 
        $("#edit_2").hide(); 
       }, 
       error: function() { 

       } 
      }); 
     $("#edit_2").hide(); 
    }); 

    $('#1_juez_e').click(function(e) { 
     var dato = $("#id").val(); 
     var dato1 = $("#Numero_J1_e").val(); 
     var dato2 = $("#Nombre_J1_e").val(); 
     var dato3 = $("#Apellido_J1_e").val(); 

     var route = "http://localhost/UJOBB/public/ADIC/edito1"; 

     var token = document.getElementById('token').getAttribute('content') 

     $.ajax({ 
     url: route, 
     headers: {'X-CSRF-TOKEN': token}, 
     type: 'POST', 
     dataType: 'json', 
     data:{id: dato, Numero_J1: dato1, Nombre_J1: dato2, Apellido_J1: dato3}, 
       beforeSend: function() { 
        $("#datos1").html('<i class="fa fa-refresh fa-spin"></i>'); 
       }, 
       success: function() { 
        $("#datos1").load(dato+"/edit" + " #datos1"); 
        $("#edit_1").hide(); 
       }, 
       error: function() { 

       } 
      }); 
    }); 

    $('#2_juez_e').click(function(f) { 
     var dato = $("#id").val(); 
     var dato1 = $("#Numero_J2_e").val(); 
     var dato2 = $("#Nombre_J2_e").val(); 
     var dato3 = $("#Apellido_J2_e").val(); 

     var route = "http://localhost/UJOBB/public/ADIC/edito2"; 

     var token = document.getElementById('token').getAttribute('content') 

     $.ajax({ 
     url: route, 
     headers: {'X-CSRF-TOKEN': token}, 
     type: 'POST', 
     dataType: 'json', 
     data:{id: dato, Numero_J2: dato1, Nombre_J2: dato2, Apellido_J2: dato3}, 
       beforeSend: function() { 
        $("#datos2").html('<i class="fa fa-refresh fa-spin"></i>'); 
       }, 
       success: function() { 
        $("#datos2").load(dato+"/edit" + " #datos2"); 
        $("#edit_2").hide(); 
       }, 
       error: function() { 

       } 
      }); 
    }); 

    $('#salir').click(function() { 
    //funcion para ocultar las capas modales 
     var valor = $("#valor").val(); 
     $("#capa_modal").hide(); 
     $("#capa_para_edicion").hide(); 
     $("#capa_para_edicion").html(""); 

     var route = "../../public/ADIC/ListaM"; 
     var token = document.getElementById('token').getAttribute('content') 

     $.ajax({ 
     url: route, 
     headers: {'X-CSRF-TOKEN': token}, 
     type: 'POST', 
     dataType: 'json', 
     data:{mes: valor}, 
      beforeSend: function() { 
       $("#resultado").html('<i class="fa fa-refresh fa-spin"></i>'); 
       $('#limpiar tbody').empty(); 
      }, 
      success: function(data){ 
       $("#resultado").html(''); 

       var tbody = $('.table.table-striped > tbody'); 

       $(data.users).each(function(index, user){ 
        if(user.Check_J1 == 1 && user.Check_J2 == 1){ 
         $('<tr class="success" />') 
         .append($('<td />').html(user.Fecha)) 
         .append($('<td />').html(user.Cancha)) 
         .append($('<td />').html(user.EquipoA +' vs '+ user.EquipoB + ' (' + user.Categoria +')')) 
         .append($('<td />').html(user.Numero_J1 +' - '+ user.Nombre_J1 + ' ' + user.Apellido_J1)) 
         .append($('<td />').html(user.Numero_J2 +' - '+ user.Nombre_J2 + ' ' + user.Apellido_J2)) 
         .append($('<td />').html('<button class="btn register btn-skin-green btn-xs" data-store-code='+ user.id +' ><i class="fa fa-fw fa-eye"></i>Ver</button>')) 
         .appendTo(tbody); 
        }else{ 
         $('<tr class="danger" />') 
         .append($('<td />').html(user.Fecha)) 
         .append($('<td />').html(user.Cancha)) 
         .append($('<td />').html(user.EquipoA +' vs '+ user.EquipoB + ' (' + user.Categoria +')')) 
         .append($('<td />').html(user.Numero_J1 +' - '+ user.Nombre_J1 + ' ' + user.Apellido_J1)) 
         .append($('<td />').html(user.Numero_J2 +' - '+ user.Nombre_J2 + ' ' + user.Apellido_J2)) 
         .append($('<td />').html('<button class="btn register btn-skin-green btn-xs" data-store-code='+ user.id +' ><i class="fa fa-fw fa-eye"></i>Ver</button>')) 
         .appendTo(tbody); 
        }    
       }); 
       $('.register').click(function() { 
        var storeCode = $(this).data('storeCode'); 
        $("#capa_modal").show(); 
        $("#capa_para_edicion").show(); 
        var url = storeCode+"/edit"; 
         $.get(url,function(resul){ 
          $("#capa_para_edicion").html(resul); 
         }); 
       }); 
      }, 
     }) 
    }); 
}); 




</script>

窓が行われた変更を表示するための情報を再ロードする閉じるには...

問題であり、その情報はにスクロールを再充電するときトップ、

あなたが最後の行にいる場合、あなたが宿泊した場所に非常に面倒です。

あなたは小さなサイクル 

var y = $(document).scrollTop();

Yで行うことができます終わり

出典

2016-06-19 Alejandro Muñoz

答えて

0

は...その後、

$(document).scrollTop(y);

と後のJSに置き、スクロールの位置を決定する変数でありますテーブルを再ロードするには、スクロールを以前のポジションに下げるステートメントを配置します

出典

2016-06-20 14:57:25

関連する問題

 関連する問題