This is an old revision of the document!
JQuery Code Snippets
AJAX
- file sample.php
<?php date_default_timezone_set('America/New_York'); // set timezone before calling date() ?> <!DOCTYPE html> <html lang="en"> <head>...</head> <body> <div> <h4>Server Time: <div id="timeclock-server-time"><?= date("M d, Y, g:i:s a") ?></div> </h4> </div> <div> <h4>Local Time: <div id="timeclock-client-time"><?= date("M d, Y, g:i:s a") ?></div> </h4> </div> ... <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="./lib/jquery.min.js"></script> <script src="./lib/bootstrap.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="./lib/ie10-viewport-bug-workaround.js"></script> <!-- Our Utils routines --> <script src="./utils.js"></script> <!-- Initialize timers --> <script type="text/javascript"> // Get server time $( document ).ready(function() { if (window.console) { console.log( "Getting server & local time..." ); } var timerLocalTime = setInterval(function(){ getLocalTimeTimer() }, 1000); // update every 1 sec var timerServerTime = setInterval(function(){ getServerTimeTimer() }, 1000); // update every 1 secs }); </script> </body> </html>
- file utils.js
//--------------------------------------------------------------- // Get local time //--------------------------------------------------------------- function getLocalTimeTimer() { var curDate = new Date(); //curDate.toLocaleFormat('%b-%d-%Y'); // Dec-30-2011 var localTime = curDate.toLocaleTimeString(); //document.getElementById("timeclock-server-time").innerHTML = curDate + " " + localTime; document.getElementById("timeclock-client-time").innerHTML = "Local time: " + localTime; } //--------------------------------------------------------------- // Get server time //--------------------------------------------------------------- function getServerTimeTimer() { $.ajax({ // Controller method to call //url: 'http://localhost:8080/catalog/site/build.php', url: 'lib-get-ajax-data.php', // Parameter data to pass in data: { cmd: 'get-server-time' }, type: 'POST', cache: false, dataType : "json", // Code to run if the request succeeds; // the response is passed to the function success: function(data) { // process data //console.log('data: respStatus: [' + data.respStatus + '], error: [' + data.error + '], timestamp: [' + data.timestamp + '], output: [' + data.output + ']'); var results = ''; if (data.respStatus == "ok") { results = data.output; } else { results = '<div class="alert alert-danger" role="alert">' + 'Error: ' + data.error + '<br/>' + (data.output.length > 0 ? '<pre>' + data.output + '</pre>' : '') + '</div>'; } $('#timeclock-server-time').html(results); }, // Code to run if the request fails; // the raw request and status codes are passed to the function error: function( xhr, status, errorThrown ) { //alert('Sorry, there was a problem! Error: ' + errorThrown + 'Status: ' + status + xhr); //console.log('Error: ' + errorThrown ); //console.log('Status: ' + status ); console.dir( xhr ); }, // Code to run regardless of success or failure complete: function( xhr, status ) { //alert('The request is complete!'); } }); }
- file lib.php
<?php //------------------------------------------------------------------------------------------------- // Main routine //------------------------------------------------------------------------------------------------- if (!empty($_POST['cmd'])) { switch($_POST['cmd']) { case 'get-server-time': ajaxGetServerTime(); break; ... } } else { ajaxNoData(); } ?> <?php //------------------------------------------------------------------------------------------------- // description: Get server time. // parameters : $dataType ("html", "text", "json") // return : void //------------------------------------------------------------------------------------------------- function ajaxGetServerTime($dataType="json") { date_default_timezone_set('America/New_York'); //$curDateTime = date("h:i:s a"); // 04:32:54 pm //$curDateTime = date("M d, Y, h:i:s a"); // Jul 14, 2015, 04:32:54 pm $curDateTime = date("M d, Y, g:i:s a"); // Jul 14, 2015, 4:32:54 pm $timestamp = time(); switch($dataType) { case "json": echo '{ '. ' "respStatus": "ok", ' . ' "error": "Success", ' . ' "timestamp": "' . $timestamp . '",' . ' "output": ["' . $curDateTime . '"]' . '}' ; break; case "html": case "text": default: echo $curDateTime; break; } } //------------------------------------------------------------------------------------------------- // description: Display 'No Data' message. // parameters : void // return : void //------------------------------------------------------------------------------------------------- function ajaxNoData() { echo '<div class="alert alert-danger" role="alert">No data</div>'; } ?>
Get Input Values
Listbox (single select)
var sel = $('#catalog-lang option:selected').val();
Eg:
<label>Language</label> <select id="catalog-lang" class="form-control" multiple> <option value="en" selected>English</option> <option value="es">Spanish</option> </select>
Listbox (muti-select)
var realvalues = []; var textvalues = []; $('#catalog-products :selected').each(function(i, selected) { realvalues[i] = $(selected).val(); textvalues[i] = $(selected).text(); });
When using select-option
controls, option:selected
can be used:
$('#catalog-products option:selected').each(function(i, selected) { ... }
Eg:
<label>Products</label> <select id="catalog-products" class="form-control" multiple> <option value="green" selected>Green Car</option> <option value="red">Red Car</option> <option value="blue">Blue Car</option> </select>