Jquery (Jeditable) laten wachten op Ajax call

[renevanh]

In een mooi projectje waar ik mee bezig ben, gebruik ik DataTables en Jeditable - beide Jquery plugins - om data uit een database weer te geven en aan te kunnen passen.
Direct na aanpassen wordt de data door middel van een Ajax call opgeslagen in de database. Dat werkt allemaal prima.

Nu wil ik gebruik kunnen maken van TAB om snel naar het volgende veld te springen. Die functie werkt in essentie ook.

De combinatie gaat alleen mis. Op het moment dat ik een veld aanpas en TAB druk wordt het volgende veld in eerste instantie wel editable, maar wordt gedeselecteerd door de return van de Ajax call. Het Jeditable inputveld moet dan eerst weer aangeklikt worden voordat het bewerkt kan worden.

Een eenvoudige oplossing lijkt om het doorspringen en editable maken van het volgende veld (Javascript actie) te laten wachten op de return van de Ajax call. En dat krijg ik niet voor elkaar.

Eerst heb ik iets bedacht met een timeOut, maar dat is natuurlijk onbetrouwbaar. Een iets tragere verbinding met de server geeft alsnog hetzelfde probleem.

De Ajax functies in Jquery kunnen asynchroon gezet worden, maar dat werkt niet of ik implementeer het verkeerd, het probleem blijft. Ook hiervoor telt... niet echt een ideale oplossing.

Ik kwam deze thread tegen en de laatste alinea van de laatste post klinkt veelbelovend. Ik snap er alleen weinig van en weet niet waar te zoeken omdat ik niet zo bekend ben met Jquery.

Eigenlijk zit de kern van het probleem in het feit dat Jquery/Jeditable de AJAX call voor me doet, het frameworkje wat ik op anders gebruik (Zaxas) geeft me de mogelijkheid om de readystate van een XMLHttpRequest af te wachten, dat kan ik niet terugvinden in Jquery.

Iemand een idee, hint, tip, oplossing om ervoor te zorgen dat Javascript/Jquery netjes op z'n beurt wacht?
De huidige code voor de initialisatie van DataTables en Jeditable staat hieronder.

JavaScript:

var category;
var oTable;

$(document).ready(function() {         
    oTable = $('#table').dataTable( {
      "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
        $('td', nRow).addClass('edit');
      },
      "fnDrawCallback": function( oSettings ) {
        $('td', oTable.fnGetNodes()).editable( '<?php echo MERP_ROOT ?>Materials/save_material_details.php', {
        "onblur" : "submit",
        "callback": function( sValue, y ) {
          var aPos = oTable.fnGetPosition( this );
          oTable.fnUpdate( sValue, aPos[0], aPos[1] );
        },
        "submitdata": function ( value, settings ) {
          return {
            "row_id": this.parentNode.getAttribute('id'),
            "column": oTable.fnGetPosition( this )[2]
          };
        },
      });      
        $('.edit').bind('keydown', function(evt) {
          if(evt.keyCode==9) {
            /* Submit the current element */
            $('input', this)[0].blur();             
            /* Activate the next element or jump to first element on new line */
            
            if ( $(this).next('td').length == 1 ){
              $(this).next('td').click();
            }
            else if ( $('td', $(this.parentNode).next()).length > 0 ){
              $('td:eq(1)', $(this.parentNode).next().click());
            }
            return false;
          }
        });
      },
      "bProcessing": false,
      /* We're actually doing client side sorting and triggering of events */                  
      "bServerSide": false,
      /* Width is decided in aoColumns */
      "bAutoWidth": false,
      /* 
       * Language file still hardcoded
       * TODO: Set language file from user preferences
       */
      "oLanguage": {
        "sUrl": "<?php echo MERP_ROOT; ?>/Lang/Dutch/dataTables.dutch.txt"
      },
      "sAjaxSource": "<?php echo MERP_ROOT; ?>/Materials/category_content.php?id=" + category,
      "aoColumns" : [
        <<EVEN KNIP>>
      ],
      <NOG WAT INTERFACE DETAILS>>
  });
});

[ Voor 10% gewijzigd door renevanh op 19-01-2013 22:38 ]

[renevanh]

Na enige tijd zelf kunnen oplossing.
Het was eigenlijk vrij simpel, de code voor het editable maken van het volgende veld in de callback van de Ajax call zetten en het werkt.
Beetje een DUH! momentje na flink wat uurtjes zoeken en proberen.

Laat mooi mijn ervaring met Javascript zien

JavaScript:

var category;
var oTable;
var tabbed = false;

$(document).ready(function() {         
    oTable = $('#table').dataTable( {
      "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
        $('td', nRow).addClass('edit');
      },
      "fnDrawCallback": function( oSettings ) {
        $('td', oTable.fnGetNodes()).editable( '<?php echo MERP_ROOT ?>Materials/save_material_details.php', {
        "onblur" : "submit",
        "callback": function( sValue, y ) {
          var aPos = oTable.fnGetPosition( this );
          oTable.fnUpdate( sValue, aPos[0], aPos[1] );
          /* Activate the next element or jump to first element on new line */
          if (tabbed) {
            if ( $(this).next('td').length == 1 ){
                $(this).next('td').click();
            }
            else if ( $('td', $(this.parentNode).next()).length > 0 ){
              $('td:eq(1)', $(this.parentNode).next().click());
            }
            tabbed = false;
          }
        },
        "submitdata": function ( value, settings ) {
          return {
            "row_id": this.parentNode.getAttribute('id'),
            "column": oTable.fnGetPosition( this )[2]
          };
        },
      });      
        $('.edit').bind('keydown', function(evt) {
          if(evt.keyCode==9) {
            /* Submit the current element */
            tabbed = true;
            $('input', this)[0].blur();                      
            return false;
          }
          else {
            tabbed = false;
          }
        });
      },
<<UND SO WEITER>>

[ Voor 21% gewijzigd door renevanh op 20-01-2013 13:26 ]