Salve amici,
sto sviluppando un'applicazione con jquery mobile in cui vengono effettuate chiamate ajax/ASP ad un DB.
Utilizzando JQUERY avrò un'unica pagina per tutti i contenuti che conterranno i dati estratti da pagine dinamiche.
Ad esempio ho l'elenco degli ultimi 10 movimenti bancari, dei miei clienti, di prenotazioni ecc.
Ora però ho inserito un modulo per l'inserimento di nuovi clienti....
L'inserimento riesce correttamente con relativo alert di errore o successo, il problema però è che vorrei che dopo l'inserimento mi aggiornasse in automatico l'elenco clienti!
Scrivo un po di codice per farvi capire:
In questo esempio ho una pagina unica con i prenotati del giorno e l'inserimento di nuovi prenotati.codice:<div data-role="page" id="page2" data-add-back-btn="true"> <div data-role="header"> <h1>Prenotati del giorno</h1> </div> <script type="text/javascript"> $(document).ready(function() { $("#prenotatiOggi").load("http://www/appDroid/prenOggi.asp"); $("#msg").ajaxError(function(event, request, settings){ $(this).append("[*]Error requesting page " + settings.url + ""); }); }) </script> <script src="jquery/dFormat.js" type="text/javascript"></script> <script src="jquery/md.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $(window).resize(function (t) { var top = ($(window).height() - $('.jqmWindow').height()) / 2; if (top < 0) { top = 0; } $('.jqmWindow').css('left', ($(window).width() - $('.jqmWindow').width()) / 2 + 'px').css('top', top + 'px'); }); $('.jqmWindow').css('left', ($(window).width() - $('.jqmWindow').width()) / 2 + 'px'); // alert('here'); //$('#dStr').html(new Date().format("fullDate")); var cd = new Date(); /*Defaults*/ $('#dStr').html(dateFormat(cd, "isoDate")); $('#mon').val(dateFormat(cd, "mmm")); $('#day').val(dateFormat(cd, "dd")); $('#year').val(dateFormat(cd, "yyyy")); //$('#year').val(cd.getFullYear()); /*Mods*/ $('#pyear').tap(function () { cd.setYear(cd.getFullYear() + 1); // $('#year').val(cd.getFullYear()); updateF(); //$('#year').focus(); return false; }); $('#pmon').tap(function () { cd.setMonth(cd.getMonth() + 1); updateF(); return false; }); $('#pday').tap(function () { cd.setDate(cd.getDate() + 1); updateF(); return false; }); $('#myear').tap(function () { cd.setYear(cd.getFullYear() - 1); updateF(); // $('#year').focus(); return false; }); $('#mmon').tap(function () { cd.setMonth(cd.getMonth() - 1); updateF(); return false; }); $('#mday').tap(function () { cd.setDate(cd.getDate() - 1); updateF(); return false; }); /*Functions*/ function updateF() { $('#year').val(dateFormat(cd, "yyyy")); $('#mon').val(dateFormat(cd, "mmm")); $('#day').val(dateFormat(cd, "dd")); $('#dStr').html(dateFormat(cd, "fullDate")); $('#setfoc').focus(); return false; } $('#dialog').jqm({ modal: true }); $('#show_date,#final').tap(function () { //$('#divpd').dialog('open'); $('#dialog').jqmShow(); $('#setfoc').focus(); return false; }); $('#close').tap(function () { $('#dialog').jqmHide(); return false; }); $('#set').tap(function () { $('#final').val(dateFormat(cd, "yyyy-mm-dd")); $('#dialog').jqmHide(); return false; }); }); </script> <style> .jqmWindow { display: none; position: fixed; background-color: #EEE; color: #333; border: 1px solid black; } .jqmOverlay { background-color: #000; } </style> <script type="text/javascript"> $(document).ready(function() { //al click sul bottone del form $("#bottone").click(function(){ //associo variabili var cognome = $("#cognome").val(); var coperti = $("#coperti").val(); var ora = $("#ora").val(); var giorno = $("#final").val(); //chiamata ajax $.ajax({ type: "POST", url: "http://www/appdroid/inserisci_prenotati.asp", data: "cognome=" + cognome + "&coperti=" + coperti +"&ora=" + ora+"&giorno=" + giorno, dataType: "html", success: function(msg){ $("#risposta").html(msg); }, error: function() { alert("Chiamata fallita, si prega di riprovare..."); } }); }); }); </script> <div data-role="content" id="risposta"> <div data-role="fieldcontain"> <label for="cognome">Cognome:</label> <input type="text" name="cognome" id="cognome" value="" /> <label for="coperti"> Coperti:</label> <input name="coperti" type="text" id="coperti" placeholder="yyyy-mm-dd" value="" size="3" maxlength="3" /> <label for="ora" class="select">Ora:</label> <select name="ora" id="ora"> <option value="20.00" selected>20.00</option> <option value="20.15" >20.15</option> <option value="20.30" >20.30</option> <option value="20.45" >20.45</option> <option value="21.00" >21.00</option> <option value="21.15" >21.15</option> <option value="21.30" >21.30</option> <option value="21.45" >21.45</option> <option value="22.00" >22.00</option> <option value="22.15" >22.15</option> <option value="22.30" >22.30</option> </select> <label for="final"> Giorno:</label> <input name="giorno" type="text" disabled="disabled" id="final"> <button role="main" id="show_date" class="ui-content ui-body-b ui-corner-all-1" data-role="content" data-theme="a">...</button> <button data-icon="refresh" data-iconpos="left" id="bottone">Prenota</button> </div> <div class="jqmWindow jqmID1" id="dialog" style="z-index:3000;display:none;top:0px; left:5px"> <table ... </table> </div> </div> <div style="position:absolute; left:-9999px;"></div> <ul id="prenotatiOggi" data-role="listview" data-theme="a">[/list] </p> </div>
Se inserisco un nuovo prenotato, ovviamente non me lo mostrerà perchè l'elenco dei prenotati viene mostrato al caricamento della pagina in automatico!
Stavo pensando di caricare il nuovo elenco sostituendo il precedente al successo della chiamata di inserimento, però volevo qualcosa di più fluido!
Qualche idea?
Rispondi quotando
