Jquery

//Form validation:
$(document).ready(function() {
	$("#mobile").on("keyup change", function(){
		var mobile = $(this).val();
		var formURL = "http://nextadmission.com/form/mobile_check";
		  $.ajax({
			url : formURL,
			type : "POST",
			data : { mobile_no : mobile},
			success : function(data){			
				if(data == 1){
					$(".chk").text("This user already Exists!!");
					$(".submit").attr('disabled','disabled');
					$(".chk").addClass("red");
				}else {
					$(".chk").text("");
					$(".chk").removeClass("red");
					$(".submit").removeAttr('disabled','disabled');
				}
			}
		 });
	});

	//alert("Hello! welcome");
});	


//01//Redirect to a link
<button class="float-left submit-button" onclick='myFun()'>Home</button>
<script>
myFun(){
$('form').attr('action','new path');
}
</script>

//02//
$('.button1').click(function() {
   window.location = "www.example.com/index.php?id=" + this.id;
});

//03//
$(window).click(function() {
//Hide the menus if visible
});

or
$(function() {
    $(document).on('click', function(e) {
        if (e.target.id === 'div1') {
            alert('Div Clicked !!');
        } else {
            $('#div1').hide();
        }

    })
});​

//03//
$('.active').removeClass('active');
$(this).addClass('active');

//04//
$("button").click(function(){
    $("p").remove(); //empty(); //detach(); //$("p").remove(".test, .demo");
});

//05//
$(window).on('resize', function() {
    $windowWidth = $(this).width();
 
    console.log($windowWidth);
});
//ie.1
var $window = $(window);
 
$(window).on('scroll', function() {
    $topOffset = $(this).scrollTop();
 
    console.log($topOffset);
 
});

//06//
$('#id').hide();
$('#id').show();
An alternate way is to use the jQuery css method:

$("#id").css("display", "none");
$("#id").css("display", "block");

//07//
If you want to check value of display then you can use css()

if($('#yourID').css('display') == 'none')
{

}
//or 
$(this).css('display') != 'none';

//08//
$('.select_continent').click(function () {
alert($(this).data('value'));
});
//or
$(document).ready(function() {
    alert($('#test').attr('id'));
}); 
//or
$(this).val()

//09// Jquery Serialize and SerializeArray
If an object/array gets passed (which .serializeArray() returns)
If a string get passed (which .serialize() returns) it doesn't do anything further.

//i.e for Serialize()
$("#form-register-makers").on('submit', function(e){
	e.preventDefault();
	$.ajax({
		url: "<?php echo base_url().'Buyer/handleInForAccount/' ?>",
		data: $("#form-register-makers").serialize(),
		type: "GET",
		success: function(result){
			if(result=="SUCCESS"){
				resetAllView();
				hideViewRegisterBuyer();
			}else{
				var jsonResult = JSON.parse(result);
				resetAllView();
				var rowCountAllData = jsonResult.length;
				var rowCountLeft = $('.table-left .tb-register-distributor tr').length;

				if(rowCountLeft>=rowCountAllData){
					var index = 0;
					$(".table-left .tb-register-distributor tr").each(function(){
						if(index < rowCountAllData){
							$(this).find(".name-register-distributor-group").val(jsonResult[index].name);
							$(this).find(".tel-register-distributor-group").val(jsonResult[index].tel);
							$(this).find(".address-register-distributor-group").val(jsonResult[index].address);
							index++;
						}else{
							return false;
						}
					});
				}else{
					var index = 0;
					$(".table-left .tb-register-distributor tr").each(function(){
						if(index < rowCountLeft){
							$(this).find(".name-register-distributor-group").val(jsonResult[index].name);
							$(this).find(".tel-register-distributor-group").val(jsonResult[index].tel);
							$(this).find(".address-register-distributor-group").val(jsonResult[index].address);
							index++;
						}else{
							return false;
						}
					});

					$(".table-right .tb-register-distributor tr").each(function(){
						if(index < rowCountAllData){
							$(this).find(".name-register-distributor-group").val(jsonResult[index].name);
							$(this).find(".tel-register-distributor-group").val(jsonResult[index].tel);
							$(this).find(".address-register-distributor-group").val(jsonResult[index].address);
							index++;
						}else{
							return false;
						}
					});
				}

				notify("ALL_ACCOUNT_TEL_EXIT");

			}
		},
		error: function(error){
			log("ERROR: form-register-makers error");
		}
	});
	return false;
});

//i.e.2
function completeData(){
	if(!allowClickBuyerComplete) return;
	var formData = $('#form-commodity').serialize();
	if(formData.length==0){
		return;
	}
	showLoading();
	$.ajax({
		url: baseUrl+"Home/saveDataCommodity",
		type: "POST",
		data: $('#form-commodity').serialize(),
		success: function(result){
			hideLoading();
			showActionDataComodity();
		},
		error: function(error){
			log("ERROR completeData");
		}
	});
}

//i.e for SerializeArray()


//10//Difference between prop() and attr():
->The prop() method sets or returns properties and values of the selected elements.
//i.e
->Set multiple properties and values:
$(selector).prop({property:value, property:value,...})
->Return the value of a property:
$(selector).prop(property)
->Set the property and value:
$(selector).prop(property,value)

N.B:
When this method is used to return the property value, it returns the value of the FIRST matched element.
When this method is used to set property values, it sets one or more property/value pairs for the set of matched elements.

->The attr() method sets or returns attributes and values of the selected elements.
//i.e
->Return the value of an attribute:
$(selector).attr(attribute)
->Set the attribute and value:
$(selector).attr(attribute,value)
->Set multiple attributes and values:
$(selector).attr({attribute:value, attribute:value,...})

N.B: 
When this method is used to return the attribute value, it returns the value of the FIRST matched element.
When this method is used to set attribute values, it sets one or more attribute/value pairs for the set of matched. 

//Difference:
Difference between prop() and attr()
prop() and attr() might return different values. This example shows the differences when used to return the "checked" status of a checkbox.
and prop can return true or false values
 $("#loginForm #loginBtn").prop("disabled", true);

//11// How do I disable/enable a form element?
->You can enable or disable a form element using the .prop() method:
// Disable #x
$( "#x" ).prop( "disabled", true );
// Enable #x
$( "#x" ).prop( "disabled", false );
//or .removeProp('disabled');

 // For Disable
.attr('disabled', 'disabled')
// For Enable
.removeAttr('disabled','disabled');

//11//Jquery Array
-> We can make a array using $.makeArray() function.
Example:
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
 
<script>
// Returns a NodeList
var elems = document.getElementsByTagName( "div" );
// Convert the NodeList to an Array
var arr = jQuery.makeArray( elems );
// Use an Array method on list of dom elements
arr.reverse();
$( arr ).appendTo( document.body );
</script>

//12//empty() Function:
->Remove the content of all <div> elements:
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").empty();
    });
});
</script>

Definition and Usage:
The empty() method removes all child nodes and content from the selected elements.
Note: This method does not remove the element itself, or its attributes.
Tip: To remove the elements and its data and events, use the remove() method.

//13// Trigger Method:
->jQuery provides a way to trigger the event handlers bound to an element without any user interaction via the .trigger() method.
Syntax: $('.class').trigger(event);
i.e $(selector).trigger("change");
->Trigger can be any event that javascript support.

//14// Getting HTML with content
var myvar = $("#myDiv").html();
// alert(myvar);
$("#myDiv2").append(myvar);

//15// HTML Data (data-*) Attribute 
->To get the contents of the attribute data-id (like in <a data-id="123">link</a>) you have to use

$(this).attr("data-id") // will return the string "123"
or .data() (if you use newer jQuery >= 1.4.3)
$(this).data("id") // will return the number 123

-> We can also use dataset property
DOM elements (HTMLElement objects) don't have .data() method. .data() method belongs to jQuery objects. If you are using jQuery you should wrap the element with jQuery constructor then use the .data method:

$(event.target.categ).data('id'); //event.target.categ = Selector
Another option is using .dataset property:

event.target.categ.dataset.id;
Or .getAttribute() method:

event.target.categ.getAttribute('data-id');

//16// Tareq
### Version 01:
//jQjuery Selector 
var item = $(''); //Any css selector inside code

//to know if any element is matched with the selector
item.length;

//to insert html
item.html('<input type="text"');

//to append html
item.append('<input type="text"');

//to prepend html
item.prepend('<input type="text"');

//append to any existing element
$('<input type="text"').appendTo(item);

//Create table dynamically
var table = $('<table id="myTable"');
var tr = $('<tr>').appendTo(table);
var td = $('<td>').appendTo(tr);

//Or create everything at once
var table = $('<table><tr><td></td></tr></table>');

//Click event
var item = $('.item);
item.click(function() {
   var element = $(this);
   //get html of the clicked element
   var html = elemenet.html();
});
//Other way of click event
$(document).on('click','.item',function() {
	//Same as above
});


### Version 02:
var table = $('.table');
undefined
table.length;
2
table = table.last();
[table.table]
table.length;
1
table.append('<tr><td colspan="6">Hello world</td></tr>');
[table.table]
$('<tr><td colspan="6">Hello world</td></tr>').appendTo(table);
[tr]
table.find('td');
[td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td]0: td1: td2: td3: td4: td5: td6: td7: td8: td9: td10: td11: td12: td13: td14: td15: td16: td17: td18: td19: tdlength: 20prevObject: r.fn.init[1]__proto__: Object[0]
table.find('td').click(function() {
	td = $(this);
});
[td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td]
table.find('td').click(function() {
	td = $(this);
	tdValue = td.val();
});
r.fn.init[20]0: td1: td2: td3: td4: td5: td6: td7: td8: td9: td10: td11: td12: td13: td14: td15: td16: td17: td18: td19: tdlength: 20prevObject: r.fn.init[1]__proto__: Object[0]
table.find('td').click(function() {
	td = $(this);
	tdValue = td.val();
	td.html('<input value="'+tdValue+'" />');
});
[td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td]
table.find('td').click(function() {
	td = $(this);
	tdValue = td.html();
	td.html('<input value="'+tdValue+'" />');
});
[td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td]
62:1 GET http://192.168.0.108/proless/home/add_income_expense/62 net::ERR_ADDRESS_UNREACHABLE
2Navigated to data:text/html,chromewebdata
http://192.168.0.108/proless/home/add_income_expense/62:1 GET http://192.168.0.108/proless/home/add_income_expense/62 net::ERR_ADDRESS_UNREACHABLE
http://192.168.0.108/proless/home/add_income_expense/62:1 GET http://192.168.0.108/proless/home/add_income_expense/62 net::ERR_ADDRESS_UNREACHABLE
Navigated to http://192.168.0.108/proless/home/add_income_expense/62
table;
function table(data, [columns]) { [Command Line API] }
var table = $('.table').last();
undefined
table.length;
1
table.find('td').click(function() {
	td = $(this);
	tdValue = td.html();
	td.html('<input value="'+tdValue+'" />');
});
[td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td]
table.find('td').click(function() {
	td = $(this);
	tdValue = td.text();
	td.html('<input value="'+tdValue+'" />');
});
r.fn.init[18]0: td1: td2: td3: td4: td5: td6: td7: td8: td9: td10: td11: td12: td13: td14: td15: td16: td17: tdlength: 18prevObject: r.fn.init[1]__proto__: Object[0]
table.find('td').click(function() {
	td = $(this);
	tdValue = td.text();
	td.html('<input value="'+tdValue+'">');
});
[td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td]
2Navigated to http://192.168.0.108/proless/home/add_income_expense/62
table.find('td').click(function() {
	td = $(this);
	tdValue = td.text();
	td.html('<input value="'+tdValue+'">');
});
VM1501:1 Uncaught TypeError: table.find is not a function
    at <anonymous>:1:7
(anonymous) @ VM1501:1
table = $('.table').last();
[table.table]
table.find('td').click(function() {
	td = $(this);
	tdValue = td.text();
	td.html('<input value="'+tdValue+'">');
});
[td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td]
table.find('td').click(function() {
	td = $(this);
	tdValue = td.attr('data-value');
	console.log(tdValue);
	td.html('<input value="'+tdValue+'">');
});
[td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td, td]
8VM1815:4 Untitled Group
var table = $('<table>');
undefined
var tr = $('<tr>').appendTo(table);
undefined
var td = $('<td>').appendTo(tr);
undefined

var td = $('<td>').appendTo(tr);
undefined

var td = $('<td>').appendTo(tr);
undefined

var td = $('<td>').appendTo(tr);
undefined
VM1815:4 undefined
var existing = $('.table').last();
undefined
table.insertAfter(existing);
[table]
table.addClass('table');
[table.table]
td.html('Hello');
[td]
2VM1815:4 undefined
table.find('td');
[td, td, td, td]
tds = table.find('td');
[td, td, td, td]
tds.html('Hello world");
VM2436:1 Uncaught SyntaxError: Invalid or unexpected token
tds.html("hello world");
[td, td, td, td]


### Version 03:
var table = $('<table>');
undefined
var tr = $('<tr>').appendTo(table);
undefined
var td = $('<td>').appendTo(tr);


### Version 04: Array and Object
var arr = [];
undefined
var object = {};
undefined
arr.push(10);
1
arr
[10]
arr.push(15);
2
arr
[10, 15]
arr[0]
10
arr[1]
15
object["hello"] = "hello";
"hello"
object["hi"] = "Welcome"
"Welcome"
object
Object {hello: "hello", hi: "Welcome"}
object["hi"]
"Welcome"


#### Version 05: Edit table cell data 
->Normal:
script type="text/javascript">
		var table = $("table");
		table.find("td").click(function(){
			var td = $(this);
			
			if($(this).find("input").val()){
				//tdValue = $("td input").val();
			}else{
				tdValue = td.attr("data-value");
				td.html('<input class="test" type="text" value="'+tdValue+'"/>');
				$(this).find("input").focus();
			}
		});
		
		table.find("td").focusout(function(){
			var td = $(this);
			
			if($(this).find("input").val()){
				tdValue = $(this).find("input").val();
				td.attr("data-value", tdValue);
				td.html(tdValue);
			}
		});
	  
	</script>
	
	
->Advance:
<script type="text/javascript">
        /*
        var replaceWith = $('<input name="temp" type="text" />'),
            connectWith = $('input[name="hiddenField"]');

        $('td').inlineEdit(replaceWith, connectWith);
        */
        
         var table = $("table");
        
        function clickEvent(){
           var td = $(this);
           
           if($(this).find("input").val()){
               //tdValue = $("td input").val();
           }else{
               //tdValue = td.attr("data-value");
               tdValue = td.text();
               td.html('<input class="test" type="text" value="'+tdValue+'"/>');
               $(this).find("input").focus();
                
                table.find("td").off('click', clickEvent);
           }
       }
       table.find("td").on('click', clickEvent);

        
       table.find("td").focusout(function(){
           var td = $(this);
           
           if($(this).find("input").val()){
               tdValue = $(this).find("input").val();
               //td.attr("data-value", tdValue);
               td.html(tdValue);
                setTimeout(function() {
                    table.find("td").on('click', clickEvent);
                }, 1000);
           }
       });
      
 
### Version 06:
 
<html>

	<head>
	
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="edit_records.js"></script>
	
	</head>

</html>

	<body>


		<center><h2>Company Information<h2></center>	<br>	
		
			<?php
			$host="localhost";
			$username="root";
			$password="";
			$databasename="demo";
			$connect=mysql_connect($host,$username,$password);
			$db=mysql_select_db($databasename);

			$select =mysql_query("SELECT * FROM com_info");
			?>		
		
		
			<table >
			
			  <tr>
				<th>Company</th>
				<th>Contact</th>
				<th>Country</th>
			  </tr>
			  
				<?php
				while ($row=mysql_fetch_array($select)) 
				{
				 ?>			  
							  
				  <tr data-id="<?php echo $row['id_com'];?>">
					<td data-field-name="com_name" data-value="<?php echo $row['com_name'];?>"><?php echo $row['com_name'];?></td>
					<td data-field-name="contact" data-value="<?php echo $row['contact'];?>" ><?php echo $row['contact'];?></td>
					<td data-field-name="country" data-value="<?php echo $row['country'];?>" ><?php echo $row['country'];?></td>
				  </tr>
						
				 <?php
				}
				?>			
			
			</table>
		

		<script type="text/javascript">
		/*
		var replaceWith = $('<input name="temp" type="text" />'),
			connectWith = $('input[name="hiddenField"]');

		$('td').inlineEdit(replaceWith, connectWith);
		*/
		
		 var table = $("table");
		
		function clickEvent(){
            var td = $(this);
            
            if($(this).find("input").val()){
                //tdValue = $("td input").val();
            }else{
                //tdValue = td.attr("data-value");
                tdValue = td.text();
                td.html('<input class="" type="text" value="'+tdValue+'"/>');
                $(this).find("input").focus();
				
				table.find("td").off('click', clickEvent);
            }
        }
        table.find("td").on('click', clickEvent);

		
        table.find("td").focusout(function(){
            var td = $(this);
            
            if($(this).find("input").val()){
                tdValue = $(this).find("input").val();
                //td.attr("data-value", tdValue);
                td.html(tdValue);
				
				var postData = {
					"id_com": td.closest('tr').attr('data-id'),
					"field_name": td.attr('data-field-name'),
					"value": tdValue
				};
				
				
				
				$.ajax({
				  type: "POST",
				  url: "update_com.php",
				  data: postData
				});
				
				
				
				setTimeout(function() {
					table.find("td").on('click', clickEvent);
				}, 1000);
				
				
				
            }
        });
      
		</script>

	</body>


</html>


### Version 07:

-> It works in Future 
$(document).on("click", ".item_manufacturer", function(){
    $("#select_manufacturer_dialog").css({"display":"block"});
});

-> It works on Existing 
$(".item_manufacturer").on("click", function(){
    $("#select_manufacturer_dialog").css({"display":"block"});
});

////Difference between parent(), parents() and closest()
Try parent() for the immediate parent element.

$(".click-me").click(function() {
  var ancestor = $(this).parent();
  alert(ancestor)
});
Or parents() for all matching ancestor elements.

$(".click-me").click(function() {
  var ancestors = $(this).parents(".some-ancestor");
  alert(ancestors)
});
Or closest() for the first closest matching element (either an ancestor or self).

$(".click-me").click(function() {
  var ancestor = $(this).closest(".some-ancestor");
  alert(ancestor)
});

//jQuery trigger() Method:

<form id='excels-seller' enctype="multipart/form-data" onsubmit="return false">
  <div id="excel-list">
    <?php
      $data['excels'] = $excels;
      $this->load->view('inc/seller_excel_list', $data);
    ?>
  </div>

  <div class="choice-excel-file-action" style='position: absolute; left: 70px; bottom: 31px; width: 190px; height: 34px;'>
    <button style='background: white; border: 1px solid #292828; font-size: 20px; padding: 2px 15px; border-radius: 5px; color: #292828; position: absolute; text-align: center' onClick="$('#input-choice-excel-seller-files').click()">ファイルを<br>選択</button>

    <input style='position: absolute; height: 100%; width: 100%; opacity: 0;' id='input-choice-excel-seller-files' onChange="readFiles(this)" type="file" multiple>
  </div>

  <button style='background: white; border: 1px solid #292828; font-size: 20px; padding: 2px 15px; border-radius: 5px; color: #292828; position: absolute; text-align: center; height: 62px; bottom: 3px; width: 125px; right: 75px;}' onClick="mappingData()">リンク</button>

</form>
  
$("#excels-seller").trigger('reset');

i.e 04:
<a href="javascript:startMatching()" class="btn btn-primary">開始</a>
<a href="javascript:browserClientFile()" title="browse client file" class="btn btn-primary">販売先</a>
<a href="javascript:browserServerFile()" title="Browser server file" class="btn btn-primary">機能</a>
<form id="header-form" method="post" enctype="multipart/form-data" action="">
    <input type="file" name="client-data"/>
    <input type="file" name="server-data"/>
</form>
/**
 * Browser client file
 */
function browserClientFile() {
    $("input[name=client-data]").trigger('click');
}

/**
 * Browser server file
 */
function browserServerFile() {
    $("input[name=server-data]").trigger('click');
}

/**
 * Start matching: submit header form
 */
function startMatching() {
    $("#header-form").submit();
}

//How do I get the text value of a selected option?
Select elements typically have two values that you want to access. First there's the value to be sent to the server, which is easy:

$( "#myselect" ).val();
// => 1
The second is the text value of the select. For example, using the following select box:
<select id="myselect">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>
If you wanted to get the string "Mr" if the first option was selected (instead of just "1") you would do that in the following way:
$( "#myselect option:selected" ).text();

//