I just want to share my details to another php file using POST with Ajax, in my code the post value not initiated to share,
Here is my code :
<?php
include('database_connection.php');
if(isset($_POST["action"]))
{
// some logic
// some logic
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$total_row = $statement->rowCount();
$output = '';
if($total_row > 0)
{
foreach($result as $row)
{
$output .= '
<div class="col-sm-3 col-lg-4 col-md-3">
<div style="border:1px solid #ccc; border-radius:5px; padding:10px; margin-bottom:16px; height:300px;">
<audio controls controlsList="nodownload" style="padding: 10px 10px 10px 10px;margin-left: -21px;">
<source src="audio_sample/'. $row['voice_audio_file'] .'" alt="" class="img-responsive">
</audio>
<p align="center"><strong> '. $row['voice_name'] .'</strong></p>
<p style="font-size: 12px;">
Voice Id : '. $row['voice_id'].' <br />
Voice Name : '. $row['voice_name'].' <br />
Gender : '. $row['voice_gender'].' <br />
Genres : '. $row['voice_genres'].' <br />
Voice Modulation : '. $row['voice_voice_modulation'].' <br />
Languages : '. $row['voice_languages'].' <br />
Jingle Moods : '. $row['voice_jingle_moods'].' <br />
Ivr : '. $row['voice_ivr'].' <br /> </p>
<button type="button" class="btn btn-primary" style="padding: 5px 83px 5px 83px;
"data-voice-id="'.$row["voice_id"].'
" data-voice-name="'.$row["voice_name"].'
"data-voice-id="'.$row["voice_gender"].'">Add to Playlist</button>
</div>
</div>
';
}
}
else
{
$output = '<h3>No Data Found</h3>';
}
echo $output;
}
?>
<script>
$('.btn').on('click',function() {
var voice_id = $(this).data("voice_id");
var voice_name = $(this).data("voice_name");
var voice_gender = $(this).data("voice_gender");
$.ajax({
method : "POST",
url : "manage_cart.php",
datatype : "text",
data :
{
voice_id: voice_id, voice_name: voice_name, voice_gender: voice_gender
},
success: function(data)
{
// console.log(data);
console.log('success',data);
}
});
});
</script>
I want to share voice_id, voice_name, voice_gender to manage_cart.php,
my manage_cart.php file,
<?php
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$voice_id = '';
$voice_name = '';
$voice_gender = '';
if(isset($_POST['voice_id']) && isset($_POST['voice_name']) && isset($_POST['voice_gender']) )
{
$voice_id = $_POST['voice_id'];
$voice_name = $_POST['voice_name'];
$voice_name = $_POST['voice_gender'];
}
echo $voice_id ."&". $voice_name ."&". $voice_gender;
?>
Here my post value not pass to manage_cart.php.
How can i solve the issue?
Your button attribute doesn't have data-voice-gender. There are duplicate data-voice-id, and use the same style of variable like data-voice-id but in javascript you're using $(this).data('voice_id')
Related
My intention is to display the content(which is stored in mysql) if the picture is clicked.
<?php
$query = "SELECT * FROM pet where pet_cat = 'D' ORDER BY petid ";
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_assoc($result))
{
$_SESSION['petname'] = $row['petname'];
$_SESSION['petdesc'] = $row['petdesc'];
$_SESSION['petimg'] = $row['petimg'];
echo '<li style="
padding-right: 20px;
padding-left: 20px;">';
echo '<a style= "cursor: pointer;"onclick= "document.getElementById(\'dogmod\').style.display=\'block\'">';
echo '<img src="data:image/jpeg;base64,'.base64_encode($_SESSION['petimg'] ).'" />';
echo '<h4>';
echo $_SESSION['petname'] ;
echo '</h4>';
include 'desca.php';
echo '</a>';
echo '</li>';
}
?>
The modal only display one content and that is the first content of the first picture.(sorry for bad english )
This is the code of my modal:
<div id="dogmod" class="modal">
<center>
<form class="modal-content animate" style="margin: 0; padding-left:50px; padding-right:50px; padding-bottom:50px;">
<div class="imgcontainer">
<span onclick="document.getElementById('dogmod').style.display='none'" class="close" title="Close">×</span>
<h1 align=center>Description</h1>
<?php echo '<img src="data:image/jpeg;base64,'.base64_encode($_SESSION['petimg'] ).'" style="margin-top:50px;float:left; margin-right:50px;"/>'; ?>
<h1 style="margin-top:50px;margin-bottom:50px">
<?php echo $_SESSION['petname'] ;?>
</h1>
<p style="margin-bottom:50px;">
<?php echo $_SESSION['petdesc'] ;?>
</p>
<input type="button" value="Back" onclick=location.href='doga.php' class="button_1" style=" width: auto;padding: 10px 18px; background-color: #f44336; border:0px; color:white;">
<h2> </h2>
</form>
</center>
<script>
// Get the modal
var modal = document.getElementById('dogmod');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
The problem is that you are generating many modals with the same "id".
What happens in this case is that you will be displayed only the last image in the table.
Generate your modal id dynamically.
Use php and add an affix to the id attribute of the modal and call that one in your onclick event.
Here is how you do it:
$query = "SELECT * FROM pet where pet_cat = 'D' ORDER BY petid ";
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_assoc($result))
{
$_SESSION['petname'] = $row['petname'];
$_SESSION['petdesc'] = $row['petdesc'];
$_SESSION['petimg'] = $row['petimg'];
$_SESSION['petid'] = $row['petid'];
echo '<li style="
padding-right: 20px;
padding-left: 20px;">';
echo '<a style= "cursor: pointer;"onclick= "document.getElementById(\'dogmod'.$row['petid'].'\').style.display=\'block\'">';
echo '<img src="data:image/jpeg;base64,'.base64_encode($_SESSION['petimg'] ).'" />';
echo '<h4>';
echo $_SESSION['petname'] ;
echo '</h4>';
include 'desca.php';
echo '</a>';
echo '</li>';
}
And in your modal php file, change only your first line to:
<div id="dogmod<?=$_SESSION['petid']?>" class="modal">
You should be good to go.
To make it close just fine, do the following in your modal php template find the 'close' link:
<span onclick="document.getElementById('dogmod<?= $_SESSION['petid'] ?>').style.display='none'" class="close" title="Close">×</span>
I have a webpage (php) that fetches data from mysql as in the figure
I managed to make it refresh but it reloads the whole page. But I just want it to refresh the database every second without reloading the whole page or a button. I understand that I have to use AJAX and JQuery, but I didn't understand how. Here is my php code for the two php files fetch.php and index.php.
If any body knows how that would be done I much appreciate it!
<?php
//fetch.php
$connect = mysqli_connect("localhost", "sid", "", "python");
$columns = array('timestamp', 'message', 'topic', 'start', 'End');
$query = "SELECT * FROM messages WHERE ";
if($_POST["is_date_search"] == "yes")
{
$query .= 'timestamp BETWEEN "'.$_POST["start_date"].'" AND "'.$_POST["end_date"].'" AND ';
}
if(isset($_POST["search"]["value"]))
{
$query .= '
(message LIKE "%'.$_POST["search"]["value"].'%"
OR topic LIKE "%'.$_POST["search"]["value"].'%")
';
}
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$columns[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].'
';
}
else
{
$query .= 'ORDER BY timestamp DESC ';
}
$query1 = '';
if($_POST["length"] != -1)
{
$query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$number_filter_row = mysqli_num_rows(mysqli_query($connect, $query));
$result = mysqli_query($connect, $query . $query1);
$data = array();
while($row = mysqli_fetch_array($result))
{
$sub_array = array();
$sub_array[] = $row["timestamp"];
$sub_array[] = $row["topic"];
$sub_array[] = $row["message"];
$sub_array[] = $row["start"];
$sub_array[] = $row["End"];
$data[] = $sub_array;
}
function get_all_data($connect)
{
$query = "SELECT * FROM messages";
$result = mysqli_query($connect, $query);
return mysqli_num_rows($result);
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => get_all_data($connect),
"recordsFiltered" => $number_filter_row,
"data" => $data
);
echo json_encode($output);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<!-- <meta http-equiv="refresh" content="10"> -->
<title> Automated System</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<style>
body
{
margin:0;
padding:0;
background-color:#f1f1f1;
}
.box
{
width:1270px;
padding:20px;
background-color:#fff;
border:1px solid #ccc;
border-radius:5px;
margin-top:25px;
}
</style>
</head>
<body>
<div class="container box">
<h1 align="center"> Automated System</h1>
<br />
<form method="post" action="export.php" align="center">
<input type="submit" name="export" value="CSV Export" class="btn btn-success" />
</form>
<br />
<div class="table-responsive">
<br />
<div class="row">
<div class="input-daterange">
<div class="col-md-4">
<input type="text" name="start_date" id="start_date" class="form-control" />
</div>
<div class="col-md-4">
<input type="text" name="end_date" id="end_date" class="form-control" />
</div>
</div>
<div class="col-md-4">
<input type="button" name="search" id="search" value="Search" class="btn btn-info" />
</div>
</div>
<br />
<table id="order_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>Error Reported </th>
<th>Board No.</th>
<th>Status</th>
<th>Repairing Started</th>
<th>Finished Repairing</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
$('.input-daterange').datepicker({
todayBtn:'linked',
format: "yyyy-mm-dd",
autoclose: true
});
fetch_data('no');
function fetch_data(is_date_search, start_date='', end_date='')
{
var dataTable = $('#order_data').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"fetch.php",
type:"POST",
data:{
is_date_search:is_date_search, start_date:start_date, end_date:end_date
}
}
});
}
$('#search').click(function(){
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
if(start_date != '' && end_date !='')
{
$('#order_data').DataTable().destroy();
fetch_data('yes', start_date, end_date);
}
else
{
alert("Both Date is Required");
}
});
});
</script>
I created a website selling components. Each component has 9 products. How can I add a dropdown button which can arrange the product showing by its Price or Name?
<?php
$query = "SELECT * FROM products ORDER BY id ASC";
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
?>
<div class="col-md-4">
<form method="post" action="shop.php?action=add&id=<?php echo $row["id"]; ?>">
<div style="border: 1px solid #eaeaec; margin: -1px 19px 3px -1px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding:10px;" align="center">
<h5 class="text-info"><?php echo $row["p_name"]; ?></h5>
<img src="<?php echo $row["image"]; ?>" class="img-responsive">
<h5 class="text-danger">$ <?php echo $row["price"]; ?></h5>
<div class="col-xs-8">
<input type="text" name="quantity" class="form-control" value="1">
</div>
<input type="hidden" name="hidden_name" value="<?php echo $row["p_name"]; ?>">
<input type="hidden" name="hidden_price" value="<?php echo $row["price"]; ?>">
<input type="submit" name="add" class="btn btn-primary" value="Add to Cart" align="right">
</div>
</form>
</div>
<?php
}
}
?>
<?php
}
?>
</div>
</div>
Perhaps you could use Javascript as well and add a few select boxes to give Users the chance to choose the Attribute they want to sort by and also the Direction of the Sorting as in ASC or DESC. The Code Snippet below might shed some light:
<?php
$query = "SELECT * FROM products ORDER BY id ASC";
$result = mysqli_query($connect, $query);
// CREATE VARIABLES TO HOLD THE SELECT OPTIONS VALUES FOR THE SORTING...
$sortParam1 = 'price';
$sortParam2 = 'name';
$sortDir1 = 'ASC';
$sortDir2 = 'DESC';
// START BUILDING THE OUTPUT...
$output = "<div class='col-md-12'>"; //<== WRAPPER FOR SORING & DIRECTION BOXES
$output .= "<form method='post' action='' id='sorting_form'>"; //<== FORM FOR THE SORTING: SUBMITS TO SAME SCRIPT
// SORTING
$output .= "<div class='col-md-6'>";
$output .= "<select name='sorting' id='sorting'class='form-control'>";
$output .= "<option value='id'>Sorting</option>";
$output .= "<option value='{$sortParam1}'>{$sortParam1}</option>";
$output .= "<option value='{$sortParam2}'>{$sortParam2}</option>";
$output .= "</select>";
$output .= "</div>";
// DIRECTION
$output .= "<div class='col-md-6'>";
$output .= "<select name='direction' id='direction'class='form-control'>";
$output .= "<option value='ASC'>Sort Direction</option>";
$output .= "<option value='{$sortDir1}'>{$sortDir1}</option>";
$output .= "<option value='{$sortDir2}'>{$sortDir2}</option>";
$output .= "</select>";
$output .= "</div>";
$output .= "</form>"; //<== CLOSE SORTING FORM...
$output .= "</div>"; //<== CLOSE WRAPPER...
$rowData = "";
// WE USE JQUERY BELOW TO SUBMIT THE SORTING FORM ONCE USER
// SELECTS ANY OPTION FROM.... SO WE NOW HANDLE THAT SCENARIO HERE USING PHP
if(isset($_POST['sorting']) || isset($_POST['direction']) ){
$sortDirection = isset($_POST['direction']) ? $_POST['direction'] : $sortDir1; // DEFAULTS TO ASC
$sortField = isset($_POST['sorting']) ? $_POST['sorting'] : 'id'; // DEFAULTS TO id
$query = "SELECT * FROM products ORDER BY {$sortField} {$sortDirection}";
$result = mysqli_query($connect, $query);
}
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_array($result)) {
// USE HEREDOC TO CAPTURE THE DATA WITHIN THE LOOP...
$rowData .=<<<R_DATA
<div class="col-md-4">
<form method="post" action="shop.php?action=add&id={$row["id"]}">
<div style="border: 1px solid #eaeaec; margin: -1px 19px 3px -1px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding:10px;" align="center">
<h5 class="text-info">{$row["p_name"]}</h5>
<img src="{$row["image"]}" class="img-responsive">
<h5 class="text-danger">\$ {$row["price"]}</h5>
<div class="col-xs-8">
<input type="text" name="quantity" class="form-control" value="1">
</div>
<input type="hidden" name="hidden_name" value="{$row["p_name"]}">
<input type="hidden" name="hidden_price" value={$row["price"]}">
<input type="submit" name="add" class="btn btn-primary" value="Add to Cart" align="right">
</div>
</form>
</div>
R_DATA;
} // CLOSE WHILE LOOP
} // CLOSE IF CONDITIONAL LOGIC
// ADD THE DATA GATHERED FROM WHILE LOOP ($rowData) TO THE OUTPUT: $output
$output .= $rowData;
$output .= "</div>\n</div>"; // THESE APPEAR IN YOUR CODE BUT SEEM IRRELEVANT HERE...
// DISPLAY THE OUTPUT
echo $output;
?>
<!-- ENTER JAVASCRIPT: JQUERY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(e){
var sortForm = $("#sorting_form");
var sortBox = $("#sorting");
var directionBox = $("#direction");
var bothBoxes = sortBox.add(directionBox);
// IF EITHER OF THE SORTING OR DIRECTION IS CHANGED
// JUST SUBMIT THE FORM
bothBoxes.on("change", function(evt){
sortForm.submit();
});
});
})(jQuery);
</script>
How to print data recieved from mysql using angular.js PHP.
I want to know how to connect with mysql and angular.js
I tried with node.js mongodb. but wants to know about php,mysql,angular.js
Hi Can you check following sample code
your HTMLpage :
<html ng-app>
<head>
<title>AngularJs Post Example: DevZone.co.in </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<style>
#dv1{
border:1px solid #DBDCE9; margin-left:auto;
margin-right:auto;width:220px;
border-radius:7px;padding: 25px;
}
.info{
border: 1px solid;margin: 10px 0px;
padding:10px;color: #00529B;
background-color: #BDE5F8;list-style: none;
}
.err{
border: 1px solid; margin: 10px 0px;
padding:10px; color: #D8000C;
background-color: #FFBABA; list-style: none;
}
</style>
</head>
<body>
<div id='dv1'>
<form ng-controller="FrmController">
<ul>
<li class="err" ng-repeat="error in errors"> {{ error}} </li>
</ul>
<ul>
<li class="info" ng-repeat="msg in msgs"> {{ msg}} </li>
</ul>
<h2>Sigup Form</h2>
<div>
<label>Name</label>
<input type="text" ng-model="username" placeholder="User Name" style='margin-left: 22px;'>
</div>
<div>
<label>Email</label>
<input type="text" ng-model="useremail" placeholder="Email" style='margin-left: 22px;'>
</div>
<div>
<label>Password</label>
<input type="password" ng-model="userpassword" placeholder="Password">
</div>
<button ng-click='SignUp();' style='margin-left: 63px;margin-top:10px'>SignUp</button>
</form>
</div>
<script type="text/javascript">
function FrmController($scope, $http) {
$scope.errors = [];
$scope.msgs = [];
$scope.SignUp = function() {
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
$http.post('post_es.php', {'uname': $scope.username, 'pswd': $scope.userpassword, 'email': $scope.useremail}
).success(function(data, status, headers, config) {
if (data.msg != '')
{
$scope.msgs.push(data.msg);
}
else
{
$scope.errors.push(data.error);
}
}).error(function(data, status) { // called asynchronously if an error occurs
// or server returns response with an error status.
$scope.errors.push(status);
});
}
}
</script>
<a href='http://devzone.co.in'>Devzone.co.in</a>
</body>
</html>
////////////////////////////////////////////////////////////////////////
Your php code
<?php
$data = json_decode(file_get_contents("php://input"));
$usrname = mysql_real_escape_string($data->uname);
$upswd = mysql_real_escape_string($data->pswd);
$uemail = mysql_real_escape_string($data->email);
$con = mysql_connect('localhost', 'root', '');
mysql_select_db('test', $con);
$qry_em = 'select count(*) as cnt from users where email ="' . $uemail . '"';
$qry_res = mysql_query($qry_em);
$res = mysql_fetch_assoc($qry_res);
if ($res['cnt'] == 0) {
$qry = 'INSERT INTO users (name,pass,email) values ("' . $usrname . '","' . $upswd . '","' . $uemail . '")';
$qry_res = mysql_query($qry);
if ($qry_res) {
$arr = array('msg' => "User Created Successfully!!!", 'error' => '');
$jsn = json_encode($arr);
print_r($jsn);
} else {
$arr = array('msg' => "", 'error' => 'Error In inserting record');
$jsn = json_encode($arr);
print_r($jsn);
}
} else {
$arr = array('msg' => "", 'error' => 'User Already exists with same email');
$jsn = json_encode($arr);
print_r($jsn);
}
?>
Please checkthe above code you will be understand how it will work. If any problem you are facing just tell me here in comment line
I have a problem
When added 3 posts and write a comment on the Post number 2 comment repeated.
Clarify more
when i added 3 posts
post 1 = a
post 2 = b
post 3 = c
and write a comment on post 2 this comment repeated pleas help
like this photo
this is the file
index.php
<? include("../post/includes/config.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#update_state").submit(function(){
var text = $(".text") .val();
var s = {
"text":text
}
$.ajax({
url:'action.php',
type:'POST',
data:s,
cache: false,
beforeSend: function (){
$(".loading") .show();
$(".loading") .html("loading...");
},
success:function(html){
$("#show_new_posts") .prepend(html);
$(".loading") .hide();
$(".text") .val("");
}
});
return false;
});
//add comment
$(".comment_form").submit(function(){
var id_post = $(this).attr('rel');
var text_comm = $(".commtext[rel="+id_post+"]") .val();
var s = {
"id_post":id_post,
"text_comm":text_comm
}
$.ajax({
url:'add_comment.php',
type:'post',
data:s,
beforeSend: function (){
$(".loadingcomm[rel="+id_post+"]") .show();
$(".loadingcomm[rel="+id_post+"]") .html("<img src=\"style/img/ajax/load1.gif\" alt=\"Loading ....\" />");
},
success:function(html){
$(".loadingcomm[rel="+id_post+"]").hide();
$(".commtext[rel="+id_post+"]") .val("");
$(".shownewcomm[rel="+id_post+"]").append(html);
}
});
return false;
});
});
</script>
</head>
<body>
<form id="update_state">
<textarea class="text" name="text"></textarea>
<input type="submit" value="go" />
</form>
<div class="loading"></div>
<div id="show_new_posts"></div>
<?
$select_posts = $mysqli->query("SELECT * FROM posts ORDER BY id DESC LIMIT 4 ");
$num_posts = $select_posts->num_rows;
if($num_posts){
while ($rows_posts = $select_posts->fetch_array(MYSQL_ASSOC)){
$id_posts = $rows_posts ['id'];
$post_posts = $rows_posts ['post'];
?>
<div style="padding: 5px; margin: 5px; background:#ccc; width:300px;">
<b>admin</b>
</div>
<div style="padding: 5px; margin: 5px; background:#ccc; width:300px;">
<? echo $post_posts; ?>
</div>
<div class="shownewcomm" rel="<? echo $id_posts; ?>"></div>
<form rel="<? echo $id_posts; ?>" class="comment_form">
<textarea rel="<? echo $id_posts; ?>" style="height: 20px;" placeholder="Comment.." class="commtext"></textarea>
<input type="submit" value="comment" />
</form>
<hr />
<?
}
}
?>
</body>
</html>
action.php
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".comment_form").submit(function(){
var id_post = $(this).attr('rel');
var text_comm = $(".commtext[rel="+id_post+"]") .val();
var s = {
"id_post":id_post,
"text_comm":text_comm
}
$.ajax({
url:'add_comment.php',
type:'post',
data:s,
beforeSend: function (){
$(".loadingcomm[rel="+id_post+"]") .show();
$(".loadingcomm[rel="+id_post+"]") .html("<img src=\"style/img/ajax/load1.gif\" alt=\"Loading ....\" />");
},
success:function(html){
$(".loadingcomm[rel="+id_post+"]").hide();
$(".commtext[rel="+id_post+"]") .val("");
$(".shownewcomm[rel="+id_post+"]").append(html);
}
});
return false;
});
});
</script>
<?php
include("../post/includes/config.php");
$text = $_POST['text'];
$insert = $mysqli->query("INSERT INTO posts (id, post) VALUE ('', '$text')");
$id_posts = $mysqli->insert_id;
if($insert){
?>
<div style="padding: 5px; margin: 5px; background:#ccc; width:300px;">
<b>admin</b>
</div>
<div style="padding: 5px; margin: 5px; background:#ccc; width:300px;">
<? echo $text; ?>
</div>
<div class="shownewcomm" rel="<? echo $id_posts; ?>"></div>
<form rel="<? echo $id_posts; ?>" class="comment_form">
<textarea rel="<? echo $id_posts; ?>" style="height: 20px;" placeholder="Comment.." class="commtext"></textarea>
<input type="submit" value="comment" />
</form>
<hr />
<?
}
?>
add_comment.php
<?php
$id_post = $_POST['id_post'];
$text_comm = $_POST['text_comm'];
?>
admin : <? echo $text_comm; ?>
<br />
You have $(".comment_form").submit with ajax call in index.php and action.php. And in index.php you are prepending action.php result like this
$("#show_new_posts").prepend(html);
May be because of this there will be more than one ajax call. Remove all JavaScript code from action.php and try
Update:
Changes made in action.php are as below:
Removed jquery reference from it as already there in index.php and moved other JS code at the end
Added id in form
<form rel="<?php echo $id_posts; ?>" id="comment_form_<?php echo $id_posts; ?>" class="comment_form">
Updated submit handler to use form id like this:
$("#comment_form_<?php echo $id_posts; ?>").submit(function(){
Updated action.php code is as below:
<?php
include("../post/includes/config.php");
$text = $_POST['text'];
$insert = $mysqli->query("INSERT INTO posts (id, post) VALUE ('', '$text')");
$id_posts = $mysqli->insert_id;
if ($insert) {
?>
<div style="padding: 5px; margin: 5px; background:#ccc; width:300px;">
<b>admin</b>
</div>
<div style="padding: 5px; margin: 5px; background:#ccc; width:300px;">
<?php echo $text; ?>
</div>
<div class="shownewcomm" rel="<?php echo $id_posts; ?>"></div>
<form rel="<?php echo $id_posts; ?>" id="comment_form_<?php echo $id_posts; ?>" class="comment_form">
<textarea rel="<?php echo $id_posts; ?>" style="height: 20px;" placeholder="Comment.." class="commtext"></textarea>
<input type="submit" value="comment" />
</form>
<hr />
<script type="text/javascript">
$(function() {
$("#comment_form_<?php echo $id_posts; ?>").submit(function(){
var id_post = $(this).attr('rel');
var text_comm = $(".commtext[rel=" + id_post + "]").val();
var s = {
"id_post": id_post,
"text_comm": text_comm
}
$.ajax({
url: 'add_comment.php',
type: 'post',
data: s,
beforeSend: function() {
$(".loadingcomm[rel=" + id_post + "]").show();
$(".loadingcomm[rel=" + id_post + "]").html("<img src=\"style/img/ajax/load1.gif\" alt=\"Loading ....\" />");
},
success: function(html) {
$(".loadingcomm[rel=" + id_post + "]").hide();
$(".commtext[rel=" + id_post + "]").val("");
$(".shownewcomm[rel=" + id_post + "]").append(html);
}
});
return false;
});
});
</script>
<?php
}
?>