I created a modal form to update the record with storage field that has an option and have to be taken from another table but if storage data already exist in the database then show existing data.
I did this code but it cannot show existing data.
If I change the code for "storage" to : ABC then it can show existing data in database.
<?php
// to connect database
include '../connection/connect.php';
$query_storage = mysqli_query ($connect, "SELECT * from storage ORDER BY
storages ASC");
?>
//code for modal bootstrap
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Reagent Detail Information</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<label>Storage</label>
<select class="form-control" name = "storage" id="storage" required >
<?php while($row = mysqli_fetch_assoc($query_storage)){?>
<option value="<?php echo $row['id_storage']; ?>">
<?php echo $row['storages']; ?></option>";
<?php }
?>
</select>
<br />
<label>Min Stock</label>
<input type="text" name="min_stock" id="min_stock" class="form-control" />
<br />
<input type="hidden" name="reagent_id" id="reagent_id" />
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#add').click(function(){
$('#insert').val("Insert");
$('#insert_form')[0].reset();
});
$(document).on('click', '.edit_data', function(){
var reagent_id = $(this).attr("id");
$.ajax({
url:"php/reagent_master/fetch.php",
method:"POST",
data:{reagent_id:reagent_id},
dataType:"json",
success:function(data){
$('#storage').val(data.storages);
$('#min_stock').val(data.min_stock);
$('#max_stock').val(data.max_stock);
$('#reagent_id').val(data.id_reagent_master);
$('#insert').val("Update");
$('#add_data_Modal').modal('show');
}
});
});
get data from database by stroge and then if record found with this storage show your error message. Storage already exists
Related
I have the issue when clicking on the register button ,
is not getting the value,
I have made to many researchs i but cant find the answer,
Also i have all the libraries on the menu and
footer pages ,including jquery.
PHP CODE:
<?php
include 'Auth.php';
include 'partials/menu.php';
$usersObj = new Auth();
?>
<h2 class="mt-5 text-center mb-5">View Records
<button data-target="#Registration" data-toggle="modal" class="btn btn-primary" style="float:right;">Add New User</button>
</h2>
<!--Registration Modal-->
<div class="modal" id="Registration">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="text-dark">Add User Form</h3>
</div>
<div class="modal-body">
<p id="message" class="text-dark"></p>
<form>
<input type="text" class="user form-control my-2" placeholder="User Name" id="us">
<input type="text" class="form-control my-2" placeholder="User Email" id="fn">
<input type="password" class="form-control my-2" placeholder="User Password" id="pw">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="btn_register">Register Now</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" id="btn_close">Close</button>
</div>
</div>
</div>
</div>
AJAX CODE:
<?php include 'partials/footer.php'; ?>
<script>
var username = $('#us').val();
var full_name = $('#fn').val();
var password =$('#pw').val();
$(document).on('click','#btn_register',function() {
console.log(username + full_name + password);
})
</script>
You are getting the values before the user enters them, you have to get them when the button is clicked, put your logic in the event handler.
<script>
$(document).on('click','#btn_register',function() {
var username = $('#us').val();
var full_name = $('#fn').val();
var password = $('#pw').val();
console.log(username + full_name + password);
})
</script>
I know there are lots of similar posts but nothing really helps me. I'm trying to run a PHP function in Bootstrap Modal with two parameters, one of the parameter is a row ID that needs to go from jQuery.
I can send it and display it in a div id but how can I convert this parameter for a PHP function?
jQuery
$(document).ready(function() {
$("a").click(function(){
var hrefs = $(this).attr("href");
$("#modal_form").attr('action',hrefs);
var ids = hrefs.split("=").pop();
$("#sid").html(ids);
});
});
Bootstrap Modal
<!-- Update Record Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateModalLabel">Update Translation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="translation.php" id="modal_form" method="post">
<div class="modal-body">
<div id="sid"></div> /* I'm getting the right ID here*/
<?php selectedTranslation($dbh, $ids); ?> /*I need to run this function*/
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" name="update" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
php function
function getAllTranslationById($dbh, $id){
...
<?php
$sqlSelect = "SELECT * FROM xxxx";
$result = mysqli_query($dbh, $sqlSelect);
while ($row = mysqli_fetch_array($result)) {
?>
<tr>
<td><input type="text" class="form-control" value="<?php echo $row['swrd_text'] ?>" readonly="readonly"></td>
<td><input type="text" class="form-control" value="<?php echo $row['swrd_context'] ?>" ></td>
<td><img alt="Link" src="images/edit.png" title="Update this row"></td>
</tr>
<?php }?>
</table>
<?php }
php function
function selectedTranslation($dbh, $sid){
....
<?php
$sqlSelect = "SELECT * FROM xxxx ";
$result = mysqli_query($dbh, $sqlSelect);
while ($row = mysqli_fetch_array($result)) {
?>
<tr>
<td><input type="text" class="form-control" value="<?php echo $row['swrd_text'] ?>" readonly="readonly"></td>
<td><input type="text" class="form-control" value="<?php echo $row['swrd_context'] ?>" ></td>
</tr>
<?php }?>
</table>
<?php }?>
Its just impossible like the way you want
So what you can do instead?
Use Ajax.
<div class="modal-body">
<div id="sid"></div> /* I'm getting the right ID here*/
<div id="ajaxResult"></div>
</div>
// JS Codes
$(document).ready(function() {
$("a").click(function(){
var sid = ""; // set your `sid` here
$.ajax({
url: "/url_here", //url to your PHP page
type: "post",
data: {id: sid},
success: function(data) {
$("#ajaxResult").html(data); //result html
}
});
});
});
I'm having an issue passing input and textarea values from a form in modal to AJAX so I can pass them to php.
The input field and textarea values are coming up blank when I submit the form in modal and jquery is not displaying any errors. It simply POST an empty (blank) string for each element.
for example, it shows something like this.
subject=&content=
in the dialog box, I load a name and an ID and both POST successfully but the input values which are not loaded with the form, are not being sent. I understand that the name and ID do POST because they are loaded on DOM along with the form but I do not know how to pass values that are not loaded along with the form in modal.
This is a sample of the form.
<?php while($row = mysqli_fetch_array($res)){
//row data for each post
$r_id = $row['r_id'];
$name = $row['name'];
?>
<div id="m_f_box" class="modal fade msg-box-custom" tabindex="-1" data-width="400">
<div class="modal-header-custom">
<h5 class="modal-title">Send to <span><?php echo $name ?></span></h5>
</div>
<form id="user_m_form" name="user_m_form" action="#" method="POST">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div id="s_row" class="col_full">
<h5>Asunto</h5>
<input id="m_subject" name="m_subject" class="required sm-form-control" type="text" maxlength="40"></input>
</div>
<div id="m_row" class="col_full">
<h5>Mensaje</h5>
<textarea id="m_content" name="m_content" class="required sm-form-control" type="text"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="send_m" name="user_m_form" class="button button-mini button-blue" value="<?php echo $r_id ?>">Send</button>
<button type="button" id="can_m" name="can_m" data-dismiss="modal" class="button button-mini button-blue">Cancel</button>
</div>
</form>
</div>
<?php } ?>
This is a sample of the jquery/ajax call.
<script type="text/javascript">
$(document).on('click', '#send_m', function(e){
e.preventDefault();
var r_id = $('#send_m').val();
var subject = $('#m_subject').val();
var content = $('#m_content').val();
//var form_data = $('#user_m_form').serialize(); test with serialized form data.
//alert(subject); test what is being sent as an alert
//console.log(subject); test what is being sent to view in console
$.ajax({
type:'POST',
url:'test_file.php',
data: { r_id : recipient_id,
subject : subject,
content : content,
},
cache: false,
success:function(res){
//do some stuff
}
});
return false;
});
</script>
Any ideas on why and/or how to POST these values?
Thanks in advance,
Note: Excuse the formatting for the HTML portion. It's hard to properly format everything using a phone.
Note: If you are trying to define multiple modal using while loop,
Your HTML
<div id="m_f_box" class="modal fade msg-box-custom" tabindex="-1" data-width="400">
<div class="modal-header-custom">
<h5 class="modal-title">Send to <span><?php echo $name ?></span></h5>
</div>
<form id="user_m_form" name="user_m_form" action="#" method="POST">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div id="s_row" class="col_full">
<h5>Asunto</h5>
<input id="m_subject_<?php echo $row['r_id']; ?>" name="m_subject" class="required sm-form-control" type="text" maxlength="40"></input>
</div>
<div id="m_row" class="col_full">
<h5>Mensaje</h5>
<textarea id="m_content_<?php echo $row['r_id']; ?>" name="m_content" class="required sm-form-control" type="text"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="<?php echo $row['r_id']; ?>" name="user_m_form" class="button button-mini button-blue send" value="<?php echo $r_id ?>">Send</button>
<button type="button" id="can_m" name="can_m" data-dismiss="modal" class="button button-mini button-blue">Cancel</button>
</div>
</form>
</div>
<?php } ?>
Your Script
<script type="text/javascript">
$(document).on('click', '.send', function(e){
var r_id = (this).attr('id');
var subject = $('#m_subject'+id).val();
var content = $('#m_content'+id).val();
//......
//.......
});
</script>
Note: You just need to understand the JQuery selector (ID and Class). See the difference between #ID and .Class selectors in Jquery.
You are generating multiple Modal with same ID and try to get those field values using IDs (selector). But the IDs for each modal input fields must be unique to get the value. and for on click operation the button must have unique ID or you just need to define class as above code has.
See how I have defined class for click button and getting ID for each modal. Modal must be unique in the sense of their field.
Example done POST request with Ajax call on ModalBox
My View page code:
<div class="panel panel-default">
<div class="panel-body">
<p class="text-danger">There are total <span class="text-bold">{{ sizeof($data) }}</span> Departments.</p>
<table class="table" id="department-data">
<tr>
<th>#</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
<th>Manage</th>
</tr>
<?php $order = 0; ?>
#foreach($data as $key)
<tr>
<td>{{ ++$order }}</td>
<td id="department_name">{{ $key->title }}</td>
<td>
<a href="#">
<button class="btn btn-default edit-department" data-toggle="modal" data-target="#updateDepartmentModel" id="{{ $key->id }}"><i class="fa fa-pencil"></i></button>
</a>
</td>
<td>
<button id="{{ $key->id }}" class="btn btn-danger delete-btn" data-toggle="modal" data-target="#delete-department"><i class="fa fa-trash"></i></button>
</td>
<td>
<a href='program/{{ $key->id }}' id="delete-id">
<button class="btn btn-primary"><i class="fa fa-cog"></i></button>
</a>
</td>
</tr>
#endforeach
</table>
</div>
</div>
Modals on the same page:
<!-- Add New Department Modal -->
<div class="modal fade" id="newDepartmentModel" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Department</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ url('department/create') }}" method="POST">
{{ csrf_field() }}
<div class="modal-body">
<div class="form-group">
<label for="title">Department Name:</label>
<input type="text" class="form-control" id="title" name="title">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
<!-- ./Model -->
<!-- Update Department Modal -->
<div class="modal fade" id="updateDepartmentModel" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update a Department</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form>
<div class="modal-body">
<div class="form-group">
<label for="old-title">Department Name:</label>
<input type="text" class="form-control" id="old-title" name="title">
</div>
</div>
<div class="modal-footer">
<button type="submit" id="edit-dept" class="btn btn-primary edit-dept">Edit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
<!-- ./Model -->
Here is Script:
<script type="text/javascript">
var token = '{{ Session::token() }}';
var url = '{{ route('department/edit') }}';
var dept_id = '';
// Setup Ajax
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// Update the department
$(document).on('click', '.edit-department', function () {
var department_id = $(this).attr('id');
console.log(department_id);
dept_id = department_id;
$.get('department/'+department_id, function (data) {
$('#old-title').val(data.title);
console.log(data);
});
});
// Handle Post Request (Edit Department)
$(document).ready(function () {
$('#edit-dept').click(function () {
$.ajax({
method: 'POST',
url: url,
data: { id: dept_id, title: $('#old-title').val(), _token: token},
dataType: 'JSON'
}).done(function (data) {
//console.log(data);
});
});
});
</script>
Routes is:
Route::post('department/edit', function (\Illuminate\Http\Request $request){
$id = $request->input('id');
$title = $request->input('title');
DB::table('departments')->where('id', $id)->update(array('title' => $title));
return redirect('department')->with('alert_info', 'Department was successful Update!');})->name('department/edit');
Put this line on page Head:
<!-- csrf for meta -->
<meta name="csrf-token" content="{{ csrf_token() }}" />
And in Controller Create and Get routes:
Route::post('department/create', 'DepartmentController#store');
Route::get('department/{id}', 'DepartmentController#showById');
And these definitions:
public function store(StoreDepartmentPostRequest $request)
{
$department = new Department;
$department->title = $request->input('title');
$department->timestamps = time();
$department->save();
return redirect('department')->with('alert_success', 'Department was successful added!');
}
public function showById($id){
$data = Department::findOrFail($id);
return response()->json($data);
}
I have a table that shows film reviews stored in a mysql database. Each of these reviews can be edited with a form that resides within a bootstrap modal. The problem I have is I can't understand how to give each form within the modal a unique ID. At the moment the modal only ever echoes varibales from the first row of reviews in the database. Many thanks.
The Jquery
<script type="text/javascript">
//Edit Review
$(document).ready(function(){
$(".editReview").click(function (e) {
$('#myModal').modal({
e.preventDefault();
var username = $(this).data("username");
var film_id = $(this).data('filmid');
var id = $(this).data('id');
var review = $(this).data('review');
$.post('ajax_editReview.php', {username: username, film_id: film_id, id: id, review: review},
function(data){
$('#myModal').modal('hide');
$("#message").html(data);
$("#review").val('');
$("#message").fadeIn(500);
$("#message").fadeOut(2500);
});
return false;
});
});
</script>
The Form
<div class="container">
<?php
$sql = "SELECT * FROM user_reviews WHERE username='$username' ORDER BY DATE desc";
$result = $db_conx->query($sql);
while($row = $result->fetch_assoc()) {
$id = $row['id'];
$film_id = $row['film_id'];
$review = $row['review'];
$movie = $tmdb->getMovie ($film_id);
echo '
<div class="row">
<div class="col-md-1">
<img id="image1" src="'. $tmdb->getImageURL('w150') . $movie->getPoster() .'" width="80" />
</div>
<div class="col-md-4">
<h3>
' . $movie->getTitle() .'
</h3>';
<p>
'.$review. '
</p>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-success btn-xs pull-right" data-toggle="modal" data-id="'.$id.'" data-username="'. $username.'" data-filmid="'.$film_id .'" data-target="#myModal">edit review</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><h3> Edit your review for '. $movie->getTitle().'</h3></h4>
</div>
<div class="modal-body">
<form>
<div class="editReview">
<div class="form-group">
<label for="review">Review:</label>
<textarea class="form-control" rows="5" id="review" placeholder="'. $review.'" name="review"></textarea>
<input type="hidden" id="username" name="username" value="'.$username.'">
<input type="hidden" id="film_id" name="film_id" value="'. $film_id.'">
<input type="hidden" id="film_title" name="film_title" value="'.$movie->getTitle.'">
<input type="hidden" id="id" name="id" value="'.$id.'">
</div>
<button type="submit" id="FormSubmitReview" data-dismiss="modal" class="btn btn-danger btn-sm pull-right">Save Review</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
</div>
</div>';
}
?>
You need to have the modal only once on your page and it seems like you a creating a new one for every review, you don't need to do that, just output it once.
You then need to use the event show.bs.modal like so.
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var username = button.data("username");
var film_id = button.data('filmid');
var id = button.data('id');
var review = button.data('review');
....
});
I have a commenting system that sits within a Bootstrap Modal, all works fine in terms of pulling data from the database, and the ability to enter data. the problem is on Submit.
This below is my code for the submit.
$(document).ready(function(){
var form = $('form');
var submit = $('#submit');
form.on('submit', function(e) {
e.preventDefault();
$.ajax({
url: 'projectnoteuploads.php',
type: 'POST',
cache: false,
data: form.serialize(),
success: function(data){
console.log(data);
var item = $(data).hide().fadeIn(800);
$('.comment-block').append(item);
},
error: function(e){
alert(e);
}
});
});
});
myjobspage.php - this is the start of my modal on my main page, it's called from the Notes button
<div id="projnotes" class="modal fade modal-scroll" tabindex="-1" data-width="960">
</div>
I originally had the rest of the modal within the div above, but as I was having this issue of it closing the form and refreshing the page, I decided to move the modal onto another page, and have it called when the button is clicked, but still having the same issue
This is the modal code
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Project Notes</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<!-- Table shown here (no need to show as not involved) -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<!--comment form -->
<form class="notesform" id="notesform" name="notesform" method="post">
<!-- need to supply post id with hidden fild -->
<input type="hidden" name="postid" value="<?php echo $propid; ?>">
<input type="hidden" name="projno" value="<?php echo $projectno; ?>">
<input type="hidden" name="name" value="<?php echo $inputby; ?>">
<div class="col-md-12 ">
<div class="form-group">
<label for="inputEmail12" class="col-md-2 control-label">Project Notes *</label>
<div class="col-md-8">
<textarea class="form-control col-md-8" rows="3" name="comment" id="comment"placeholder="Type your comment here...." required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<br>
<input type="submit" class="btn green" id="savenotes" name="submit" value="Submit Comment" />
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
One question on this though is that to call the jquery/Ajax code is done through my main page, is this right or should it be done through the page that the Model body is on?
When the Submit button id="savenotes" is clicked, the modal closes and refreshes the page losing all data within the main page.
How can I submit data to the database without the Modal closing?
I don't know if you've found an answer to this but at least for others who might need solutions just like I once did.
This is the modal page named modal.php:
<div id="projnotes" class="modal fade modal-scroll" tabindex="-1"
data-
width="960">
<!-- div wrapper for modal dialog -->
<div class="modal-dialog">
<!-- div wrapper for modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true"></button>
<h4 class="modal-title">Project Notes</h4>
</div>
<!-- I guess you wanted your body centered .justify-content-center
should fix that -->
<div class="modal-body justify-content-center">
<div class="row">
<div class="col-md-12">
<!-- Table shown here (no need to show as not involved) -->
</div>
</div>
<!-- I guess you wanted your form centered .justify-content-center
would fix that -->
<div class="row justify-content-center">
<!--comment form -->
<form class="notesform form-block" id="notesform" name="notesform"
method="post" action="projectnoteuploads.php">
<!-- need to supply post id with hidden fild -->
<input type="hidden" name="postid" value="<?php echo $propid =
'propid'; //replace variable $propid ?>">
<input type="hidden" name="projno" value="<?php echo $projectno =
'projectno'; //replace variable $projectno ?>">
<input type="hidden" name="name" value="<?php echo $inputby =
'inputby'; //replace variable $inputby ?>">
<div class="form-group">
<label for="comment" class="control-label">Project Notes *</label>
<textarea class="form-control form-control-md" rows="3" cols="25"
name="comment" style="resize: none;" id="comment" placeholder="Type
your comment here...." required></textarea>
</div>
<input type="submit" class="btn btn-success" id="savenotes"
name="submit" value="Submit Comment" />
</form>
</div>
<!-- I can't find where your Comments are appended
to, so I placed them here using the
class name 'comment-block' as you used in your script -->
<div class="row justify-content-center">
<div class="comment-block"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-
default">Close</button>
</div>
</div>
</div>
</div>
Then this is your myjobspage.php where you will include the modal.php
<?php
include 'modal.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Myjobspage</title>
<link rel="stylesheet"
href="path/to/bootstrap4.0.0/dist/css/bootstrap.min.css">
<script src="path/to/Jquery_3.2.1/jquery-3.2.1.js"></script>
<script src="path/to/bootstrap-
4.0.0/assets/js/vendor/popper.min.js">
</script>
<script src="path/to/bootstrap-4.0.0/dist/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Some Code Here-->
<!-- Button to Launch Modal. Replace appropriately-->
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#projnotes">
Launch Comments Modal
</button>
<!-- some other code -->
<!-- script to trigger your modal.php -->
<script src="modalScript.js"></script>
<script src="path/to/bootstrap-4.0.0/js/dist/util.js"></script>
<script src="path/to/bootstrap-4.0.0/js/dist/modal.js"></script>
</body>
</html>
This is the script modalScript.js that will make the request to projectnoteuploads.php via the ajax method.
$(document).ready(function(){
$('form').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: 'projectnoteuploads.php',
type: 'POST',
cache: false,
data: $('form').serialize(),
success: function(data){
console.log(data);
//This I guess was where the error was in the previous code.
$('.comment-block').append(data).hide().fadeIn(800);
$('textarea').val(''); //This will wipe out the textarea after
//comment input
},
error: function(e){
alert(e);
}
});
});
});
Please take note, the codes have all being modified from the question, I tried it and it works.