Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: jquery

Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: jquery
Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

PHP Live Edit Table Example

PHP Live Edit Table Example

Today We See How To Make Live Editable Using PHP+JS+Mysql+Ajax

Let's Start.

For Updating Data Live in Our Database.

1. Let's First Going TO Start My Server.

2.Opening PHPMyadmin and Creating a Database Named "live"

and also a table name "live_data".


live.php (code )  //Our View Page
 
<?php
include 'connect.php';
//==========Checked Connection Establish or Not.==============
if(!$con1){

	echo "Failed TO Establish Database Connection";
	die();
	//===========Stop Execution if connection failed============

}
else{
	//===========Fetching Result from table live_data==================
	$qr=mysql_query("select * from live_data");

	//=========adding border so it look good===============
	echo "<table style='border-collapse:collapse;' border='1'>";

	//============adding heading for each column=========================
	echo "<tr><th>ID</th><th>NAME</th><th>DOB</th><th>Qualification</th></tr>";
	while ($row=mysql_fetch_assoc($qr)) {

		//============Printing All Data in Table Row========

		//============data is html5 attribute for adding exta information on html page===
		echo "<tr>";
		echo "<td class='id' data-id='".$row['id']."' >".$row['id']."</td>";
		echo "<td class='item' data-name='name'>".$row['name']."</td>";
		echo "<td class='item' data-name='dob'>".$row['dob']."</td>";
		echo "<td class='item' data-name='qualification'>".$row['qualification']."</td>";
		echo "</tr>";
	}
	echo "</tr>";
}
?>
<script  src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	//===========Events Call When Our Page is Ready======
	$(document).ready(function() {
		

		//=============adding double click event on each table cell==========
		$(document).on("dblclick",".item",function(){

			//=======get The Value Of Current Selected TD using this keyword======
			var values=$(this).text();
			$(this).html("<input value='"+values+"' class='input'>");

		});

		$(document).on("blur",".input",function(){

			var vales=$(this).val();

sendToServer($(this).val(),$(this).parent("td").parent("tr").children(".id").data("id"),$(this).parent("td").data("name"));
									$(this).parent("td").text(vales);
			                      $(this).remove();
		})




function sendToServer(value,id,key){



			$.ajax({
				url: 'api.php',
				type: 'POST',
				data: {key:key,id:id,value:value},
			})
			.done(function(data) {
				alert(data);
			})
			.fail(function() {
				alert("Network error");
			});

			}

	})
</script> 

connect.php (Database Connection file)
 
<?php
//================+Connecting Database================
$con=mysql_connect("localhost","root","");

//=============Selecting Database======================
$con1=mysql_select_db("live",$con);

api.php (Our Api Which Update Our Date When We Post Through Ajax)
 
<?php
include 'connect.php';
if($_REQUEST['key']=="name"){
$qr=mysql_query("UPDATE live_data set name='".$_REQUEST['value']."' where id='".$_REQUEST['id']."'");
echo "Updated";
}
else if($_REQUEST['key']=="dob"){
$qr=mysql_query("UPDATE live_data set dob='".$_REQUEST['value']."' where id='".$_REQUEST['id']."'");
echo "Updated";	
}
else if($_REQUEST['key']=="qualification"){
	$qr=mysql_query("UPDATE live_data set qualification='".$_REQUEST['value']."' where id='".$_REQUEST['id']."'");
echo "Updated";
}
else{
	echo "Key Not Found";
}

Video Tutorial
0

Jquery (js) validation For 10 Digit Mobile Numbers

Jquery (js) validation For 10 Digit Mobile Numbers




After Testing All Answer not getting success . Some times input take alpha character also.
Here is the last full working code With Only number input also keeping in mind backspace button key event for user if something number is incorrect.

html : 

<input name="phone" id="phone" placeholder="Mobile Number" class="form-control" type="number" required>

Js :

<script>
$("#phone").keydown(function(event) {
k=event.which;
if((k>=96 && k<=105) || k==8)
{
     if($(this).val().length==10)
     {
         if(k==8)
         {
             return true;
         }
         else
        {
             event.preventDefault();
             return false;

         }
    }
}
else
{
     event.preventDefault();
     return false;
}

});
</script>
7

Jquery selectors and basic part 1





Jquery selectors and basics part 1




In this tutorial i will show you how to use jquery selector to select element in DOM (Document Object Model which is our Html Document) and get the value of element ,text of element ,add new value or text or html element to Dom elements.

Let's Get Started.

Example 1 :  id selector
id selector is unique it select only one element in DOM . if we created multiple id element with same name then it will select only select first id element in DOM.

<html>
<head>
<script src=”js/jquery.min.js”></script>

<!--calling local jquery script →

</head>
<body>
<p>Hello</p>
<p id=”demo1”>Jquery</p>
<p id=”demo”>Here this text we will be change by using jquery selector and functions.</p>
<script>
$(document).ready(function(){


$(“#demo”).text(“This is new text “);

//Here # Represent the id and .text() method is used to set text in demo.

$(“#demo1”).html(“<span>World</span>”);

//since .text method only change text if we want to.add html elements inside selected elements then we will use .html() method.

});

//Every jquery function we will not call until our DOM is not ready (document).ready is a function we call our all function inside this .this function defines that our dom is ready now we are ready to call function inside (document).ready.

</script>
</body>
</html>


Example 2 : Class selector
Class is not unique so we can select all element having same class and change text or what we want.


<html>
<head>
<script src=”js/jquery.min.js”></script>

<!--calling local jquery script →

</head>
<body>
<p class=”mdemo”>Hello</p>
<p class=”demo”>Jquery</p>
<p class=”demo”>Here this text we will be change by using jquery selector and functions.</p>
<p class=”mdemo1”>Jquery Class also supports multiple class selector we can select multiple class in a single selector.</p>
<script>
$(document).ready(function(){


$(“.demo”).text(“This is new text “);

//Here (.) Represent the class and .text() method is used to set text in demo.

$(“.mdemo1,.mdemo”).text(“This text change by multiple class selector”);

//multiple class selector can be use by class names separated by comma (,)

});


</script>
</body>
</html>

Example 3 : Element Selector

Element selector selects all element in DOM .

<html>
<head>
<script src=”js/jquery.min.js”></script>

<!--calling local jquery script →

</head>
<body>
<p>Hello</p>
<p id=”demo1”>Jquery</p>
<p id=”demo”>Here this text we will be change by using jquery selector and functions.</p>
<h2>Jquery Multiple element selector </h2>
<span>This text all change using multiple selector</span>
<script>
$(document).ready(function(){


$(“p”).text(“This is new text added in all p tag elements “);

//Here p Represent the tag name  and .text() method is used to set text in demo.

$(“h2,span”).text(“This is multiple text selector “);

//This is multiple jquery selector where elements are separated by comma (,).

});

</script>
</body>
</html>


Example 4 : first last first-child selector

:first - select only first element in dom
:last - select only last element in dom
:first-child - select all elements of first child elements

<script src="js/jquery.min.js"></script>

<!--calling local jquery script -->
</head>

<body>

<br />


<div id="demo1">
Jquery</div>
<div id="demo">
Here this text we will be change by using jquery selector and functions.</div>
<div>

Hello i am first-child selector element

This text not change<br />


</div>
<div>

Hello i am first-child selector element again<br />


This text not change<br />


</div>
<script>

$(document).ready(function(){

$("p:first").text("This is new text added in first p tag element ");

$("p:last").text("this is text added in last p elements");

$("div:first-child").text("This is first child selector first child in div element");
//Here p Represent the tag name  and .text() method is used to set text in demo.


});

</script>
4