function ajax and async on Datatable Editor

aneto2400

Hi Allan,
I think that a have a problem related to async using function ajax call on Datatable editor 1.4. I explain:
I’ve on index.html I have two pages jqm:
In page-1 I´ve a form that get (nombreUsuario) and password and assign into respective vars.

In page-2 , I want to use the previous (nombreUsuario) for to get table that match with this nombreUsuario via AJAX on Datatable Editor 1.4.

My problem is that in page-1 the AJAX call is executed before that I enter (nombreUsuario) , therefore when pass to page-2 the table is empty , due the AJAX call was executed with variable empty , without (nombreUsuario) entry.
I´m working in base on https://datatables.net/reference/option/ajax .

How can I do to the AJAX call wait or postpone ?. How to do for AJAX call wait until user enter your credentials?

My code:

index.html

<div data-role="page" id="page0">

<form id="formulario" >
        <label> Usuario </label>
        <input type="text" id="nombredeusuario" name="nombredeusuario">
        <label> Password </label>
        <input type="password" id="clave" name="clave" >
        <input type="submit" value="Login" id="botonLogin">
</form> 

...

<div data-role="page" id="page1">

<table id="example" class="display" cellspacing="0" width="100%"> 
        <thead>
            <tr>
                <th>Establecimiento</th>
                <th>Telefono</th>
                <th>E-mail</th>
                <th>Nº de Plazas</th>
                <th>Precio medio</th>
                <th>E-mail (responsable)</th>
                <th>Prueba (1) / Contrato (2)</th>
            </tr>
        </thead>
....

JS:
(form)

$('#formulario').submit(function() { 
    // recolecta los valores que inserta el usuario
    var datosUsuario = $("#nombredeusuario").val()
    var datosPassword = $("#clave").val()
...

JS (datatable editor 1.4)

$('#example').DataTable( {
                    //check. start
                        initComplete: function(settings, json) {
                        alert( 'DataTables has finished its initialisation.' );
                            },
                    //check.end
                    dom: "Tfrtip",
                    ajax: {
                        async: false, // don't work
                        url:"http://tripntry.com/_country/spain/b.cartasconmenu.front.back.demo/alacarte/php/clientes.php",
                        type: "POST",
                        data: function ( d ) {
                             d.site = $("#nombredeusuario").val(); //  work but must to wait !
                             //d.site = datosUsuario; // ( same above)
                             //d.site = "34280001"; // only test. works - (of course)
                        },
....

PHP (server side)

include( "../../php/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Join,
    DataTables\Editor\Validate;


$site=$_POST['site']; 

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'clientes' )
    ->fields(
        Field::inst( 'tipo' )->validator( 'Validate::numeric' ), //this field another use
        Field::inst( 'site' )->validator( 'Validate::notEmpty' )
        )
        ->where( 'site', $site)

    ->process( $_POST )
    ->json();

allan

Sounds like you want to delay the initialisation of the second "page" once the first table has fully loaded. Is that correct?

if so, use initComplete to execute a function when the first table has fully loaded.

Regards,
Allan

aneto2400

Yes, is a delay question , but the problem are that I need delay the initialization of the table on page-2 and there are only a table. The page-1 is a simple form. The initialization of table on page-2 must to wait that the form be filled and send it, and after should to start the initialization of datatable. Any idea?. Thank you very much!

allan

What is filling in your form? You would need to modify your code to not create the DataTable until the form is populated, but I can't say what that change would be without knowing your code.

Allan

aneto2400

Hi Allan, the code of page-1 (page0) :

<div data-role="page" id="page0">
    <div data-theme="e" data-role="header">
       <br/><br/>    
    </div> <!-- de header -->
       <br/>
        <div data-role="content">
        <form id="formulario" >
                <label> Usuario </label>
                <input type="text" id="nombredeusuario" name="nombredeusuario">
                <label> Password </label>
                <input type="password" id="clave" name="clave" >
                <input type="submit" value="Login" id="botonLogin">
            </form> 
  </div> <!-- de content -->
     <div data-theme="e" data-role="footer" data-position="">
       <br/><br/>    
    </div> <!-- de footer -->
</div> <!-- de page -->

JS:

<script>
$('#formulario').submit(function() { 
    // get values that user enter
    var datosUsuario = $("#nombredeusuario").val()
    var datosPassword = $("#clave").val()
    archivoValidacion = "http://www.tripntry.com/_country/spain/b.cartasconmenu.front.back.demo/alacarte/php/validacion_de_datos.php?jsoncallback=?"
    $.getJSON( archivoValidacion, { usuario:datosUsuario, password:datosPassword})
    .done(function(respuestaServer) {
        //alert(respuestaServer.mensaje + "\n\nFecha: " + respuestaServer.hora + "\n" ) // Only for TEST
        
        if(respuestaServer.validacion == "ok"){
            // if server side validation its ok, goto page-1
            $.mobile.changePage("#page1")
        }else{
          /// show error or actions if fails 
        }
    })
    return false;
})
</script>

And code of page-2 (page1):

<div data-role="page" id="page1">
    <div data-theme="e" data-role="header">
            <a data-rel="back">Back</a>
            <a data-role="button" data-transition="fade" href="page2.html" rel="external" data-theme="e" data_ajax="false" class="ui-btn-right" >
                    Next
                </a>
       <br/><br/>    
    </div> <!-- de header -->
       <br/>
        <div data-role="content">
<!-- responsable en collapside. INICIO -->
  <br /><br />
<div id="" class="info_nota">Datos sobre Responsable y Establecimiento. (Paso 1)</div>
 <br />
<br /><br />
<div id="" class="sub_info_nota">1.1.- Establecimiento y Responsable. Información: </div>
 <br />
     <table id="example" class="display" cellspacing="0" width="100%"> 
        <thead>
            <tr>
                <th>Establecimiento</th>
                <th>Telefono</th>
                <th>E-mail</th>
                <th>Nº de Plazas</th>
                <th>Precio medio</th>
                <th>E-mail (responsable)</th>
                <th>Prueba (1) / Contrato (2)</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>               
            </tr>
        </tfoot>
    </table>
  </div> <!-- de content -->
     <div data-theme="e" data-role="footer" data-position="">
                    <a data-rel="back">Back</a>
            <a data-role="button" data-transition="fade" href="page2.html" rel="external" data-theme="e" data_ajax="false" class="ui-btn-right" >
                    Next
                </a>
       <br/><br/>    
    </div> <!-- de footer -->
</div> <!-- de page -->

and your JS:

                $('#example').DataTable( {
                    dom: "Tfrtip",
                    ajax: {
                        beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner
                        complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner
                        url:"http://tripntry.com/_country/spain/b.cartasconmenu.front.back.demo/alacarte/php/clientes.php",
                        type: "POST",
                        data: function ( d )    {
                                d.site = $("#nombredeusuario").val(); 
                                 //d.site = datosUsuario; //// same that above
                                 //d.site = "34280001"; // only for TEST 
                                            }   
                        },  
                    columns: [
                        //{ data: "title" },
                        //{ data: "name" },
                        { data: "nom_estbl" },
                        { data: "telefono" },
                        { data: "email_estbl" },
                        { data: "num_plaz" },
                        { data: "prec_med" },
                        { data: "email_resp" }, 
                        { data: "activacion" },                     
                    ],
                    tableTools: {
                        //sRowSelect: "multi",
                        sRowSelect: "os",
                        aButtons: [
                            { sExtends: "editor_edit",   editor: editor },
                            
                        ]
                    
                    }
                } ); 

Thank you for you help!!

allan

// if server side validation its ok, goto page-1
$.mobile.changePage("#page1")

Why not initialise the DataTable just after that?

aneto2400

Yes!, I confirm it's a way resolve the question. There are a collateral issue: when navigate to next pages (there are 4 jqm pages) when came back at this page, the table is empty. I don't know if it's because the initialization happen again or related to DOM (I don't know ) , but the content of variable (datosUsuario) "disappear" when you navigate across the pages and after came back. My solution to that: to use LocalStorage (jquery) to keep the variable.
Allan, Thank you very much !!