Tip & Tricks

Link: 

http://jquery.malsup.com/block/#page

 $.ajax({
          type : "POST",
         /* data : $('#reg-restaurant-form').serialize(),*/        
                contentType: false,
                processData: false,
         data :new FormData($('#reg-restaurant-form')[0]),
          url  : myBaseUrl+('/UsersActions/restaurantUserAdd'),
                success : function(opt){
}
});

Ajax function

function ajaxRequest(){

$this->layout = 'ajax'; // ajax plain layout

$this->params['data']; // to get form submit values

$this->params['url'];  // to get query string

}

 $('#signup-loading').show();
     $.ajax({
       // alert('hi');
        type : "POST",
                data : $('#ajaxregisterform').serialize(),
                url  : myBaseUrl+('/users/ajaxregister'),
                //url  : "/dealzbuyp4sep15/index.php/users/ajaxlogin?un="+(($('#UserUsername').val())),
                success : function(opt){
                   $('#signup-loading').hide();
                  alert(opt);    
                    }
            });
            return false;
    }
   
   });

http://www.phpclasses.org/

http://www.9lessons.info/

Main HTML Page

<script type="text/javascript">
var infowindow = null;
var lat, lng;
var map;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
    $(document).ready(function () { initialize('1');  }); // on doc ready call initialize

    function initialize(id) {
        //alert(id);
        directionsDisplay = new google.maps.DirectionsRenderer();  // create direction render object
        <?php $city_name = Configure::read('pre_city_select'); ?>  // select city name to create canvas
        <?php //$city_name = '2/3A 2nd Floor, Medavakkam, Chennai'; ?>
     
        geocoder = new google.maps.Geocoder(); // create new geocoder object to find lat lang
     
        /* find lat and lng for city name  */
        geocoder.geocode({ 'address': '<?php echo $city_name; ?>' }, function(results, status) {
        //var myLatLng = results[0].geometry.location;
        var myLatLng = new String(results[0].geometry.location);
        var removebrace = myLatLng.replace(/\(/g,"");
        var str = removebrace.replace(/\)/g, '');
        var latlng1 = str.split(',');
        lat = parseFloat(latlng1[0]);
        lng = parseFloat(latlng1[1]);
        //alert(lat);
     
        //alert(lng);
        var centerMap = new google.maps.LatLng(lat, lng);
        /* Setting options for new map */
        var myOptions = {
            zoom: 11,
            center: centerMap,
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

       /* Drawing map in the page */
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        directionsDisplay.setMap(map);

        //setMarkers(map, sites);
        /* Create new global info window */
   infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });

        var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
     
        if(id == 'SearchMap') {
        var loc = document.getElementById('LocationmasterName').value;
        var cat = document.getElementById('SubcatName').value;
        var QueryString = loc + '&subcatname=' + cat;
        /* get input for placing markers */
        /* Note - dataType should be specified as json in ajax call, so that it can interpret */
        $.ajax({
           type : "POST",
           //data : $('#UserAjaxloginForm').serialize(),
           url  : myBaseUrl+('/deals/search_map?locationname=')+QueryString,
           dataType: 'json',
           //url  : "/dealzbuyp4sep15/index.php/users/ajaxlogin?un="+(($('#UserUsername').val())),
           success : function(opt){
                    alert(opt);
                    setMarkers(map, opt);
                }
           });          
        }
        else {
               $.ajax({
                type : "POST",
                //data : $('#UserAjaxloginForm').serialize(),
                url  : myBaseUrl+('/deals/maplatlng?id=')+id,
                dataType: 'json',
                //url  : "/dealzbuyp4sep15/index.php/users/ajaxlogin?un="+(($('#UserUsername').val())),
                success : function(opt){
                    //alert(id);
                    setMarkers(map, opt);
                }
            });
        }
     
            });
         
    }

/* Actual Input for marker should be like this */
   /* var sites = [
['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
]; */


/* Function to place markers in the map drawn */
    function setMarkers(map, markers) {
       /* Setting up image for marker. If not set, default from google will be used. */
        markerimage = myBaseUrl+'/theme/dealzbuy/img/z1.png'
        for (var i = 0; i < markers.length; i++) {
            var siteLatLng = new google.maps.LatLng(markers[i][1], markers[i][2]);
            var title = markers[i][0];
            //var zIndex = markers[i][2];
            var html = markers[i][3];
            var marker = new google.maps.Marker({
                position: siteLatLng,
                animation: google.maps.Animation.DROP,
                icon: markerimage,
                map: map,
                title: title,
                //zIndex: zIndex,
                html: html
            });

            var contentString = "Some content";
            /* On click of marker open info window */
            google.maps.event.addListener(marker, "click", function () {
                //alert(this.html);
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
            $('#container').slideUp(2000);
           // $('#container2').show();
        }
    }
 
  /* Function to find direction from start to destination */
      function calcRoute(a,b) {
        //var stlat = google.loader.ClientLocation.latitude;
        //var stlng = google.loader.ClientLocation.langitude;
        //var start = new google.maps.LatLng(stlat, stlng);
       /* Get start place from user */
        var startplace = prompt("Please type your origin point");
        var start = startplace;
        var end = new google.maps.LatLng(a, b);
        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
      }  
 
</script>

Finding Lat Lng for place in a php page
/* Set up an google URL to get details */
/* Note - 
        Address should be specified in the same format as shown below. There should not be any spaces or new line characters. Better is to replace them with a plus symbol.
       Sensor=false is mandatory. 
*/
$url = 'http://maps.googleapis.com/maps/api/geocode/json?address=123,+100feet+road,+Velachery,+Chennai+600042&sensor=false';

$google_response = json_decode(file_get_contents($url));
$lat = $google_response->results[0]->geometry->location->lat;
$lng = $google_response->results[0]->geometry->location->lng;



PHP Page to provide dynamic input on ajax call


<?php

$input = array(
array("Bondi Beach", "-33.890542", "151.274856", "4", "This is Bondi Beach."),
array("Coogee Beach", "-34.028249", "151.157507", "3", "This is Coogee Beach.")
);

echo json_encode($input);
?>

JQuery website for ajax content, pagination, email check, and more....

JQuery Auto complete plugin

Html form

Note: Ignore all comments

SCRIPT

<script type="text/javascript">var myBaseUrl = '<?php echo $this->base; ?>';</script> // finds the base URL
<script type="text/javascript">
$(document).ready(function(){
   
    $('#DealTypemasterId').change(function(){ // when dropdown value gets changed function executes
    $.ajax({
        type : "POST",
                url  : myBaseUrl + ('/deals/populateSubcat') + '?q=' + $("#DealTypemasterId option:selected").val(), //pass query string to server
                success : function(opt){
                        document.getElementById('DealSubcatId').innerHTML = opt;   // assign the output to another dropdown
                    }
            })
            });
            });
       
</script>


HTML


<?php echo $this->Form->create('Deal');?>
<?php echo $this->Form->input('typemaster_id', $typemasters);?>
<?php echo $this->Form->input('subcat_id', $subcats);?>
<?php echo $this->Form->input('merchantmaster_id', $merchantmasters);?><br />
<?php echo $this->Form->end(__('Submit', true));?>


PHP

Controller:
//fetch all data from database

    function populateSubcat()
    {
       
    $location = $this->Subcat->find('list', array('fields' => array('name')));
$this->set('locations', $location);
$this->layout = 'ajax';

    }  

http://www.javascriptkit.com/
 http://ntt.cc/2008/05/10/over-10-useful-javascript-regular-expression-functions-to-improve-your-web-applications-efficiency.html
http://htmldog.com - html
http://freeajaxscripts.net - ajax

Javascript
Coundown timer
http://keith-wood.name/countdown.html

Jquery code
http://jsfiddle.net/tqyj4/4/