For this occasion I want to try to share about making a comment using jQuery and Ajax. To use this jQuery plugin you should at least understand a little about javascript so that the application runs smoothly on your website.
Well first make his first style that seems a little bit nice but for this example I created a simple, if you want a nice view of the brain-tweaking own please css.
File used to create a form using jQuery and Ajax comments need 3 files namely:
style.css
komentar.php
komentarajak.php
style.css
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
# Header {
height: 90px;
padding: 30px 0px;
background: url (http://www.deadbyarticle.com/asset/_img/header1.png) repeat-x;
min-width: 900px;
}
. Comment_box {
background-color: # D3E7F5; border-bottom: 1px solid # ffffff; padding-top: 3px
}
a {
text-decoration: none;
color: # d02b55;
}
a: hover {
text-decoration: underline;
color: # d02b55;
}
* {
margin: 0; padding: 0;
}
ol.timeline {
list-style: none;
font-size: 1.2em;
}
ol.timeline li {
display: none;
position: relative;
padding: 0 .7 em .6 em 0;
}
ol.timeline li: first-child {}
# Main {
margin-top: 20px; margin-left: 100px;
font-family: "Trebuchet MS";
}
# Flash {
margin-left: 100px;
}
. Box {
height: 85px;
border-bottom: 1px dashed # dedede;
margin-bottom: 20px;
}
input [type = 'text'] {
color: # 000000;
font-size: 14px;
border: 1px solid # CCC;
height: 24px;
margin-bottom: 10px;
width: 200px;
}
# Buttonkomen {
font-family: Lucida Sans Unicode;
background-color: # 60205A;
background-image:-moz-linear-gradient (# 954A8F, # 60205A);
border-color: # 4C1548;
padding-bottom: 1px;
padding-top: 2px;
margin-top:-3px;
border-radius: 4px 4px 4px 4px;
font-weight: bold;
color: # FFFFFF;
}
textarea {
color: # 000000;
font-size: 14px;
border: 1px solid # CCC;
height: 124px;
margin-bottom: 10px;
width: 200px;
}
After that we started to apply has JavaScript is used to send data ($ _POST) and then taken back to the data to be displayed directly penngriminan way through the invite.
$. Ajax ({
type: "POST",
url: "komentarajax.php",
data: dataString,
cache: false,
success: function (html).
type: "POST" is a form of delivery of data to be displayed, url: "komentarajax.php" where the data is sent or posted data: dataString or sent earlier and if successful will be displayed again transmitted data.
Direct any comments on the form.
komentar.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Comments using jQuery and Ajax </ title>
<link rel="stylesheet" type="text/css" /> href="style.css"
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ (". Kirimkeun"). Click (function () {
ngaran var = $ ("# ngaran"). val ();
var email = $ ("# email"). val ();
var comment = $ ("# comment"). val ();
dataString var = 'ngaran =' + ngaran + '& email =' + email + '& comment =' + comment;
if (ngaran ==''| | email ==''| | comment =='')
{
alert ('Not Allowed There are empty');
}
else
{
$ ('# Flash'). Show ();
$ ('# Flash'). FadeIn (400). Html ('<img src="loading.gif" align="absmiddle"> <span class="loading"> Please wait ...</ div>') ;
$. Ajax ({
type: "POST",
url: "komentarajax.php",
data: dataString,
cache: false,
success: function (html) {
$ ('Ol # update "). Append (html);
$ ("# Update ol li: last"). FadeIn ("slow");
document.getElementById ('email'). value ='';
document.getElementById ('ngaran'). value ='';
document.getElementById ('comment'). value ='';
$ ("# Name"). Focus ();
$ ('# Flash'). Hide ();
}
});
}
return false;
});
});
</ Script>
</ Head>
<body>
<div id="header">
<div style="height:90px; border-bottom:#dedede Dashed padding-left:10px; 2px; ">
<a href="http://www.deadbyarticle.com" style="color:#0099CC">
<img src="http://www.deadbyarticle.com/asset/_img/logo.png">
</ A>
</ Div>
</ Div>
<div id="main">
<ol id="update" class="timeline">
</ Ol>
id="flash" <div align="left"> </ div>
<center>
<form method="POST" action="#" id="formurang">
<Input type = "text" name = "ngaran" id = "ngaran" placeholder = "Your name ..." style = "padding-left: 8px" />
<Input type = "text" name = "email" id = "email" placeholder = "Your Email ..." style = "padding-left: 8px" />
<textarea name="comment" id="comment" style="width:420px" placeholder="Komentar Anda...">
<div style="margin-left:360px">
<button class="kirimkeun" id="buttonkomen" type="submit" onclick="$.('#formurang').submit();"> Submit </ button>
</ Div>
</ Form>
</ Center>
</ Div>
</ Body>
</ Html>
After making the comment form you just make a file to send data from the comment form is komentarajax.php and the same as ordinary data sent using ($ _POST). Immediately, the script for komentarajax.php.
komentarajax.php
<? Php
if ($ _POST)
{
$ Ngaran = $ _POST ['ngaran'];
$ Email = $ _POST ['email'];
$ Comment = $ _POST ['comment'];
Else {}
$ Lowercase = strtolower ($ email);
$ Image = md5 ($ lowercase);
}
?>
<li class="box">
<img src="http://www.deadbyarticle.com/image/no-avatar.png" style="float:left; width:80px; height:80px; margin-right:20px"/> <span style = "font-size: 16px; color: # 663399; font-weight: bold"> <? php echo $ ngaran ;?></ span> /> <br />
<? Php echo $ comment;?>
</ Li>
Once everything is done live you apply on your website but to implement it you need to know a little about javascript so you do not get into trouble when applying
Demo Download
