Javascript basics

JQuery - check a radio button
$("#diversion_n").prop("checked", true);

Assign PHP value to javascript variable
var no_of_vehicles=<?php echo $no_of_vehicles;?>;

loop through auto generated fields and call ajax function

viaString="";
for (via_counter = 0; via_counter < no_of_via_points; via_counter++) {
viaid=$("#via_point_id_"+via_counter).val();
viatable=$("#via_point_table_"+via_counter).val();
viatype=$("#via_point_type_"+via_counter).val();
viapoint=$("#via_point_"+via_counter).val();
if (viaid === undefined) {
no_of_via_points =0;
//$('#no_of_via_points').val();
} else {
constidstring = "&via_point_id_"+via_counter+"=";
consttablestring = "&via_point_table_"+via_counter+"=";
consttypestring = "&via_point_type_"+via_counter+"=";
conststring = "&via_point_"+via_counter+"=";
if(viaString==""){
viaString = constidstring+ viaid+consttablestring+viatable+consttypestring+viatype+conststring+viapoint;
}else{
viaString = viaString+constidstring+viaid+consttablestring+viatable+consttypestring+viatype+conststring+viapoint;
}
}


}

var dataString = 'from_point='+ from_point + '&from_point_id=' + from_point_id + '&to_point=' + to_point+ '&to_point_id=' + to_point_id
 + '&from_point_table=' + from_point_table + '&to_point_table=' + to_point_table
 + '&from_point_type=' + from_point_type + '&to_point_type=' + to_point_type+ '&site_id=' + site_id+ '&member_id=' + member_id+ '&is_student=' + is_student
 +'&no_of_via_points='+no_of_via_points+viaString+'&optpeople='+optpeople
;
$.ajax({
 type: "POST",
 url: "vehicle_quotes.php",
 data: dataString,
 beforeSend: function(){
for(vehicle_count=1;vehicle_count<=no_of_vehicles;vehicle_count++){
jQuery("#ajax_loader_quote_"+vehicle_count).show();
jQuery("#quote_price_"+vehicle_count).hide();
jQuery("#ajax_loader_quote_member_"+vehicle_count).show();
jQuery("#quote_price_member_"+vehicle_count).hide();
}
},
 complete: function(){
for(vehicle_count=1;vehicle_count<=no_of_vehicles;vehicle_count++){
jQuery("#ajax_loader_quote_"+vehicle_count).hide();
jQuery("#quote_price_"+vehicle_count).show();
jQuery("#ajax_loader_quote_member_"+vehicle_count).hide();
jQuery("#quote_price_member_"+vehicle_count).show();
}
},
 success: function(response)
 {
var priceObject = JSON.parse(response);
length=priceObject.price.length;
for(vehicle_count=0;vehicle_count<length;vehicle_count++){
vehicle_id = priceObject.price[vehicle_count].vehicle_id;
$('#price_'+vehicle_id).html("\u00A3"+priceObject.price[vehicle_count].journey_price_one_way);
$('#price_member_'+vehicle_id).html("Member Price: \u00A3"+priceObject.price[vehicle_count].journey_price_one_way_member);
}
 }
});

Via Points

HTML
include_once $_SERVER['DOCUMENT_ROOT'].COMMON.'/js/js_homewaypoint.php';
<input type="button" value="Add Waypoint" id="addwaypoint"/>
<div id="via-container"></div>
<input type="hidden" id="no_of_via_points" name="no_of_via_points" value=""/>
js_homewaypoint.php
<link rel="stylesheet" href="scripts/jquery/themes/redmond/jquery.autocomplete.css">
<script src="scripts/jquery/autocompleteused/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery/autocompleteused/jquery-ui.min.js"></script>
<script>
$(document).ready(function()
{

var via_counter = 0;

$('#addwaypoint').click(function () {
                var str = '';
str += '<div id="via_container_' + via_counter + '"><label>Via Point No: ' + (via_counter+1) + ' <a href="javascript:void(0);" class="remove"><img src="styles/images/cross.png"></a></label>';
str += '<input type="text" id="via_point_' + via_counter + '"  class="area-point-text-input" />';
str += '<input type="hidden" id="via_point_id_' + via_counter + '"  class="via_point_id" />';
str += '<input type="hidden" id="via_point_table_' + via_counter + '"  class="area-point-text-input" />';
str += '<input type="hidden" id="via_point_type_' + via_counter + '"  class="area-point-text-input" />';
str += '<input type="hidden" id="via_point_postcode_' + via_counter + '"  class="area-point-text-input" />';
str += '<div id="via_point_error_' + via_counter + '" class="error_bg" style="display: none;">Please Enter Valid Drop Off Point</div>';
str += '</div></div>';
$("#via-container").append(str);
$(function() {
$("#via_point_" + via_counter).autocomplete({
source: "get_search_values.php",
minLength: 1,
select: function( event, ui ) {
$("#via_point_id_"+(via_counter-1)).val(ui.item.id);
$("#via_point_table_" + (via_counter-1)).val(ui.item.table);
$("#via_point_type_" + (via_counter-1)).val(ui.item.area_type);
   $("#no_of_via_points").val(via_counter);
$('#via_point_postcode_'+(via_counter-1)).val(ui.item.postcode);
if(ui.item.id != ''){
$("#via_point_" + (via_counter-1)).css("background"," url('styles/images/tick.png') right center no-repeat #ffffff");
$("#via_point_error_" + (via_counter-1)).hide();
//$("#from-point-container").hide();
//$("#from-point-container-display").show();
}
  return ui.item.label;
 },
});

});
                via_counter++;
        });

$("body").on('click', ".remove", function () {
via_counter--;
$('#via_container_' + via_counter + '').remove();
$("#no_of_via_points").val(via_counter);

});

});
</script>

when click on button we can call to php file to get something done

var no_of_via_points = $("#no_of_via_points").val();
viaString="";
for (via_counter = 0; via_counter < no_of_via_points; via_counter++) {
viaid=$("#via_point_id_"+via_counter).val();
viatable=$("#via_point_table_"+via_counter).val();
constidstring = "&via_point_id_"+via_counter+"=";
consttablestring = "&via_point_table_"+via_counter+"=";
if(viaString==""){
viaString = constidstring+ viaid+consttablestring+viatable;
}else{
viaString = viaString+constidstring+viaid+consttablestring+viatable;
}
}
var dataString = 'no_of_via_points='+no_of_via_points+viaString;
;
$.ajax({
 type: "POST",
 url: "ajax_quote.php",
 data: dataString,
 beforeSend: function(){ jQuery("#ajax_loader_quote").show(); jQuery("#quote-price-container").show(); jQuery("#reserve-button").show(); $('#load_price_ajax').hide(); },
 complete: function(){ jQuery("#ajax_loader_quote").hide(); $('#load_price_ajax').show();},
 success: function(response)
 {
$('#load_price_ajax').html(unescape(response));
 }
});

ajax_quote.php
for($via_counter=0;$via_counter<=$no_of_via_points;$via_counter++){
unset($_SESSION["via_point_id_".$via_counter]);
unset($_SESSION["via_point_table_".$via_counter]);
$_SESSION["via_point_id_".$via_counter] = (int)mysql_real_escape_string($_POST['via_point_id_'.$via_counter]);
$_SESSION["via_point_table_".$via_counter] = mysql_real_escape_string($_POST['via_point_table_'.$via_counter]);

}

Vehicle Dropdown with images

html file
include_once $_SERVER['DOCUMENT_ROOT'].COMMON.'/js/js_homewaypoint.php';
<div id="vehicle"></div>

js_homewaypoint.php
<script src="scripts/jquery/autocompleteused/jquery-ui.min.js"></script>

<script src="scripts/ddslickvehicles/jquery.ddslick.js"></script>
<?php
$vehicleArray = $objaVehiclesTbl->getVehiclesAll();
while($vehicleRow = mysql_fetch_array($vehicleArray)):
    $imageName = $vehicleRow['image'];
    $imageSrc = "images/$imageName";
    $vehicleData[] = array(
'text' => ucwords(strtolower($vehicleRow['name'])),
'value' => (int)$vehicleRow['id'],
                        'description' => $vehicleRow['desc'],
                        'imageSrc' => $imageSrc
);
endwhile;


$vehicleDataJason = json_encode($vehicleData);

?>

<script language="javascript">
   
$(document).ready(function()
{
$('#vehicle').ddslick({
data: <?php echo $vehicleDataJason; ?>,
width: 289,
imagePosition: "left",
selectText: "Select Vehicle",
onSelected: function (data) {
  console.log(data);
$("#vehicle_way_one_index").val(data.selectedIndex);
$("#vehicle_way_one").val(data.selectedData.value);
$('#vehicle-return').ddslick('select', {index: data.selectedIndex });
if(data.selectedData.value != ''){
$('#vehicle_error').hide();
}
}
});
});
</script>

Auto complete Text Field jquery-1.9.1.min.js

html file
<?php
include_once $_SERVER['DOCUMENT_ROOT'].COMMON.'/js/js_homewaypoint.php';

?>
<input type="text" name="from_point" id="from_point" class="area-point-text-input"/>
<input type="hidden" id="from_point_id" name="from_point_id"/>
<input type="hidden" id="from_point_table" name="from_point_table"/>
<input type="hidden" id="from_point_type" name="from_point_type"/>
<div id="from_point_error" class="error_bg" style="display: none;">Please Enter Valid Pickup Point</div>

js_homewaypoint.php file
<link rel="stylesheet" href="scripts/jquery/themes/redmond/jquery.autocomplete.css">
<script src="scripts/jquery/autocompleteused/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery/autocompleteused/jquery-ui.min.js"></script>

<script language="javascript">
 $(document).ready(function()
{
$(function() {

$("#from_point").autocomplete({
source: "get_search_values.php",
minLength: 1,
select: function( event, ui ) {
  $('#from_point_id').val(ui.item.id);
  $('#from_point_table').val(ui.item.table);
  $('#from_point_type').val(ui.item.area_type);
  $('#from_point_postcode').val(ui.item.postcode);
if(ui.item.id != ''){
$('#from_point').css("background"," url('styles/images/tick.png') right center no-repeat #ffffff");
$('#from_point_error').hide();
//$("#from-point-container").hide();
//$("#from-point-container-display").show();
}
  return ui.item.label;
 },
});

});
});
</script>

get_search_values.php

$qstring = "SELECT inner_postcode, outer_postcode_suffix, outer_postcode,name,id, area_type, full_postcode,is_address FROM a_area_points WHERE is_display = '1' AND (name LIKE '".$term."%') LIMIT 300";
     $result = mysql_query($qstring);


      while ($row = mysql_fetch_array($result,MYSQL_ASSOC))
      {
                $name = ucwords(strtolower($row['name']));
                $outer_postcode = $row['outer_postcode'];
                $area_type = $row['area_type'];
                if($area_type == 'AIRPORT'):
                    $outer_postcode = "";
                     $label = "$name";
                else:
                     $label = "$name, $outer_postcode";
                endif;
                $outerSuffix = $row['outer_postcode_suffix'];
$inner = $row['inner_postcode'];
$full_postcode="$outer_postcode$outerSuffix $inner";
             
                $id_array[] = $id = (int)$row['id'];
$data[] = array(
'label' => $label ,
'id' => (int)$row['id'],
                        'table' => "a_area_points",
                        'postcode' => $full_postcode,
                        'outer_postcode' => $row['outer_postcode'],
                        'area_type' => $area_type,
                        'is_address' => $row['is_address']
);
               
             
      }
 echo json_encode($data); 

JQuery/AJAX/PHP Mysql Autocomplete

<link rel="stylesheet" href="scripts/jquery/themes/redmond/jquery.autocomplete.css">
<script src="scripts/jquery/ui/jquery.autocomplete.js"></script>
<script>
$(document).ready(function()
{
 $("#txtfrom").autocomplete("get_search_values.php?",
{
selectFirst: true
});
});
</script>
<input type="text" name="txtfrom" id="txtfrom" class="area-point-text-input"/>
inc_get_search_values.php code

$term=$_GET['q'];
$term=trim(strip_tags(mysql_real_escape_string($term)));

$searchByNameStr = "SELECT name, outer_postcode, id, area_type, full_postcode, outer_postcode, is_address FROM a_area_points WHERE is_display = '1' AND (name LIKE '".$term."%') LIMIT 300";
$searchByNameResult = mysql_query($searchByNameStr);
$searchByNameResultCount = mysql_num_rows($searchByNameResult);
if($searchByNameResultCount>0){

while ($row = mysql_fetch_array($searchByNameResult,MYSQL_ASSOC))
{
$name = ucwords(strtolower($row['name']));
$outer_postcode = $row['outer_postcode'];
$area_type = $row['area_type'];
if($area_type == 'AIRPORT'){
$outer_postcode = "";
$label = "$name";
}else{
$label = "$name, $outer_postcode";
}
echo $label."\n";
}
}

Draggable Droppable in yii

 <style>
 #droppable {
    width: 64em;
    height: 49em;
    padding: 0.5em;
    border: 3px solid #f90;
    border-radius: 1em;
    margin: 0 auto;
}</style>

  <?php
$baseUrl = Yii::app()->baseUrl;
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl.'/css/jquery-ui.js');
?>
 
  <?php
  Yii::app()->clientScript->registerCoreScript('jquery');
$Tables = Table::model()->findAll('is_active = 1');
foreach($Tables as $Table){
?>

  <script>
  $(function() {
left=0;
top=0;
    $("#<?php echo $Table->id?>").draggable();
$( "#droppable" ).droppable({


      drop: function( event, ui ) {
       //alert(ui.draggable.prop('id'));
  event.stopPropagation();
var left = ui.position.left;
var dropPositionY = event.pageY - $(this).offset().top;
var dragItemOffsetY = event.offsetY;
var top =ui.position.top;
//var top = event.offsetY;//
           $.ajax({
   
 url: "<?php echo Yii::app()->createAbsoluteUrl('Table/UpdatePosition');?>",
 type:"POST",
 data: "id="+ui.draggable.prop('id')+"&left=" + left+"&top=" + top,
 //dataType:"json",
 success: function(responce)

 {
 //alert(responce);

 }

});
           
      }
    });

  });
 
  </script>
  <?php
  }
  ?>
<div class="span12">

<div class='fulid-row'>

<?php
$a_id = Yii::app() -> controller -> action -> id;
$c_id = Yii::app() -> controller -> id;
?>
<div id="content-box">
<div id="element-box">
<div id="system-message-container"></div>
<div class="">
<div class="adminform">

<?php $this->renderPartial('_left_menu'); ?>
<div class="span10">
<div class="headerContent">
<h3 style="padding: 5px;">Manage Tables</h3>
<!-- <h1 style="font-style: italic; margin: 25px 0px 0px -408px;">Manage Menu Items</h1> -->

</div>
<div class="space"></div>

</div>

<div class="span10" style="">
<div class="cpanel-right right-side">
<div style="margin-left: 20px;float: left;">
<?php
$Tables = Table::model()->findAll('is_active = 1');


foreach($Tables as $Table){
if($Table->position==""|| $Table->position==Null){
$style="width:110px;margin-left: 20px;";
echo '<div id='.$Table->id.' style='.$style.'>';
}
elseif($Table->position!=""|| $Table->position!=Null){
$position=$Table->position;
$position=explode(",",$position);
$left=$position[0].'px';
$top=$position[1].'px';
$style="width:110px;left:$left;top:$top;";
echo '<div id='.$Table->id.' style='.$style.'>';
}
echo CHtml::image(Yii::app()->getBaseUrl().'/images/tables/'.$Table->image, 'Tables[]');
echo '</div>';


}

?>
</div>
<div style="margin-left: 200px;">

<div id="droppable"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Controller
public function actionUpdatePosition(){
$left= $_POST['left'];
$top = $_POST['top'];
$id = $_POST['id'];
$Table = new Table;
$Table->updatePosition($left,$top,$id);
//echo $top.",".$left;
}
Model
public function updatePosition($left=null,$top=null,$id=null)
{

$position =$left.",".$top;

$sql = "UPDATE `table` SET `position`='$position' WHERE id=:id";

$parameters = array(":id"=>$id);

Yii::app()->db->createCommand($sql)->execute($parameters);
}

Call AJAX function when checkbox change

echo CHtml::checkbox("actions[]",true, array("value"=>"$keydes-$Authitem"));


<?php
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerScript('updateAction', '
$(":checkbox").change(function()
{
var value =$(this).val();

var check = $(this).attr("checked");


$.ajax({

 url: "' . Yii::app()->createAbsoluteUrl('rights/Authitemchild/Update').'",
 type:"POST",
 data: "value="+value+"&check=" + check,
 //dataType:"json",
 success: function(responce)

 {
alert(responce);

 }

});

});

',CClientScript::POS_READY);
?>

Check box change event in JQuery

<script>

$(document).ready(function () {
$(":checkbox").change(function()
{
var value =$(this).val();
var check = $(this).attr('checked');
console.log("Change: " + name + " to " + check);
});
});
</script>