Freitag, 8. Februar 2013

using jquery's spinner in custom component


Assumtion/prerequirements
  1. You are using jQuery
  2. You are using jQuery UI

By using jquery ui's autocomplete you get this nice spinner in your input-tag.
It is pretty easy to reuse the spinner in you own component.





$('#user_id').addClass( "ui-autocomplete-loading");





$('#user_id').removeClass( "ui-autocomplete-loading");




In my case I used an following ajax-call:

$('#user_suchen').click(function() {
  $('#user_id').addClass( "ui-autocomplete-loading" );
  var userId = $('#user_id').val();
  $.ajax({
    url : '${getUserData}',
    data : { "userId" : userId },
    dataType : "json",
    success : function(data, textStatus, jqXHR) {
      $('#name').val(data.name);
      $('#oe').val(data.oe_bezeichnung);
      $('#user_id').val(data.userId);
      $('#user_id').removeClass( "ui-autocomplete-loading" );
    },
    error : function( jqXHR, jqXHR, textStatus,errorThrown ) {
      $('#user_id').removeClass( "ui-autocomplete-loading" );
    }
  });
});

Keine Kommentare:

Kommentar veröffentlichen