Hide Row from table when delete Query success with Ajax - javascript

I am trying to hide row from while loop. I want to hide full row when delete query success. Delete query is working fine need help to hide row. Thanks in advance.
While loop Code :
While Loop is working fine. Should i add any class to row for deleting. $chcrsid is unique.
while ($rowslctd=mysql_fetch_array($resultslctd))
{
$chcrs=$rowslctd['chcrs'];
$chcrsid=$rowslctd['chcrsid'];
echo"<tbody><tr>
<td>$chcrs</td>
<td>$chcrsid</td>
<td><form name='cancel_selection' class='cancel_selection' action=''>
<input type='hidden' name='crs' class='user_id' value='$chcrs'>
<input type='hidden' name='crsid' class='crsid' value='$chcrsid'>
<input type='hidden' name='insertid' class='insertid' value='$insertid'>
<button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button>
</form></td>
</tr><tbody>
Delete Function Code:
Function is running fine but it do not hide row which is deleted from database.
<script>
$(function(){
$('.btn.btn-cancel').click(function(e) {
e.preventDefault();
var $form = $(this).closest(".cancel_selection");
var formData = $form.serializeArray();
var userId = $form.find(".user_id").val();
var URL = "cancelselection.php";
$.post(URL, formData).done(function(data) {
});
fail(function(jqXHR, textStatus, errorThrown) {
});
});
});
</script>

Give unique id to row that you want to delete or hide. And using jQuery you can achieve that with that unique id.
Something like below:
HTML code
<table id="listData">
<tbody>
<?php while ($rowslctd=mysql_fetch_array($resultslctd)) {
$chcrs=$rowslctd['chcrs'];
$chcrsid=$rowslctd['chcrsid'];
echo"<tr id='row_selection_" .$chcrs. "'>
<td>". $chcrs ."</td>
<td>". $chcrsid ."</td>
<td><form name='cancel_selection_" .$chcrs. "'
id = 'cancel_selection_" .$chcrs. "'
class='cancel_selection' action=''>
<input type='hidden' name='crs' class='user_id' value='$chcrs'>
<input type='hidden' name='crsid' class='crsid' value='$chcrsid'>
<input type='hidden' name='insertid' class='insertid' value='$insertid'>
<button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button>
</form></td>
</tr>";
<?php } ?>
<tbody>
</table>
On AJAX success
$(function(){
$('.btn.btn-cancel').click(function(e) {
e.preventDefault();
var $form = $(this).closest(".cancel_selection");
var formData = $form.serializeArray();
var userId = $form.find(".user_id").val();
var URL = "cancelselection.php";
$.post(URL, formData).done(function(data) {
var hideId = 'table#listData tr#row_selection_' + userId;
$(hideId).remove(); // delete
$(hideId).hide(); // hide
});
fail(function(jqXHR, textStatus, errorThrown) {
});
});
});

TRY THIS
<tbody>
<?php while ($rowslctd=mysql_fetch_array($resultslctd)):?>
<tr id="row_to_hide">
<td><?php echo $rowslctd['chcrs'];?></td>
<td><?php echo $rowslctd['chcrsid'];?></td>
<td>
<form>
<input name="id" type="hidden" value="<?php echo $rowslctd['chcrsid'];?>">
<button onclick="process_form($(this).closest('form'))">Cancel</button>
</form>
</td>
</tr>
<?php endwhile;?>
</tbody>
<script>
function process_form(form) {
form.on('submit', function(e) {
e.preventDefault();
$.ajax('cancelselection.php',{
data: $(form).serialize(),
type: 'POST',
success: function (data) {
$(form).closest('#row_to_hide').remove();
}
});
});
}
</script>

Related

How to create repeatable fields in wordpress in my plugin setting page

This is my HTML code where I'm creating a simple HTML form in my plugin settings page:
<?php
/**
* Adds a submenu page under a custom post type parent.
*/
function books_register_ref_page()
{
add_submenu_page('edit.php?post_type=fscf_contact', __('Setting', 'fscf') , __('Settings', 'fscf') , 'manage_options', 'setting-fscf-contacts', 'fscf_contact_page_callback');
// call register settings function
add_action('admin_init', 'register_my_fscf_contact_settings');
}
function register_my_fscf_contact_settings()
{
// register our settings
register_setting('fscf-plugin-settings-group', 'fscf_field_1');
}
/**
* Display callback for the submenu page.
*/
function fscf_contact_page_callback()
{
?>
<div class="wrap">
<h1><?php
_e('Contact Form Setting', 'textdomain'); ?></h1> <hr>
<div class="wrap">
<form method="post" action="" id="myform">
<?php
settings_fields('fscf-plugin-settings-group'); ?>
<?php
do_settings_sections('fscf-plugin-settings-group'); ?>
<table class="form-table" id="p_scents">
<tr valign="top">
<th scope="row">New Option Name</th>
<td> <p>
<label for="p_scnts">
<input type="text" name="fscf_field_1" id="fscf_field_1" value="<?php
echo esc_attr(get_option('fscf_field_1')); ?>" /> <input type="button" id="addScnt" name="" value="+">
</label>
</p> </td>
</tr>
</table>
<?php
$other_attributes = array(
'id' => 'submit_repeatable_fields'
);
submit_button("Submit", "submit", "submit", false, $other_attributes); ?>
<span id="fscf_error"></span>
</form>
</div>
</div>
<?php
}
add_action('init', 'books_register_ref_page');
This is my .js code where I'm repeating <tr> in HTML form:
jQuery(document).ready(function() {
var scntDiv = jQuery('#p_scents');
var i = jQuery('#p_scents p').size() + 1;
jQuery('#addScnt').live('click', function() {
jQuery('<tr valign="top"><th scope="row">New Option Name</th><td> <p><label for="p_scnts"><input type="text" name="fscf_field_' + i +'" id="fscf_field_' + i +'" value="" /> Remove</p> </td></tr>').appendTo(scntDiv);
i++;
return false;
});
jQuery('#remScnt').live('click', function() {
if( i > 2 ) {
jQuery(this).parents('#p_scents tr').remove();
i--;
}
return false;
});
// Making Ajax Request for settings
jQuery("#myform").submit(function(e) {
e.preventDefault();
var formdata = jQuery("#myform input[type='text']").serializeArray();
var numberflds = jQuery("#myform input[type='text']").size();
var data = {
'action' : 'fscf_create_repeatable_fields',
'fullform':jQuery("#myform input[type='text']").serializeArray(),
'fields': numberflds,
//nonce : security
};
// We can also pass the url value separately from ajaxurl for front end AJAX implementations
jQuery.post(ajax_obj.ajax_url, data, function(response) {
console.log(response);
jQuery("#fscf_error").html(response);
});
});
});
Here is my php code where I want to save fields which I had repeated in .js file but I'm unable to save data:
function fscf_create_repeatable_fields(){
$mydata = $_POST['fullform'];
$fields = $_POST['fields'];
//$i=0;
foreach ($_POST['fullform'] as $form) {
register_setting( 'fscf-plugin-settings-group', $form['name']);
//$i++;
}
echo "Field Created.";
wp_die();
}
add_action( 'wp_ajax_nopriv_fscf_create_repeatable_fields', 'fscf_create_repeatable_fields' );
add_action( 'wp_ajax_fscf_create_repeatable_fields', 'fscf_create_repeatable_fields' );
So, the problem is I can't save repeatable fields in my plugin page. What mistake I'm doing?

Submit dynamic form asynchronously

I want to be able to dynamically add text fields whenever the button
is clicked
I want to be able to get the data from the text fields and insert it
into the database.
As of now everything else works and I just need this, maybe I can
also add a remove button to remove the last text field dynamically
also
the reason why I need this to be dynamic is because I don't want to
refresh the page cause all the data will be lost
I have found a code that would help me dynamically add text fields
but I don't know how to make it so that I would need to go to another
page just to access data
<html>
<form action="checklist3.php" method="post">
<button type='submit' name='submit' id='buttonParent'>Submit</button>
<button type="submit" name="back">Back</button>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<?php
session_start();
require_once('../mysql_connect.php');
$rowarray = $_SESSION['rowarray'];
$dishname = $_SESSION['dishname'];
echo '<br>';
echo "Add Procedures";
echo ' <form name="addproc" id="addproc">
<table class="proctable" id="proctable">
<tr>
<td><input type="text" name="procedure[]" placeholder="Enter your Name" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
</form>';
echo "<input type='button' value='Remove Button' id='removeButton'>";
echo "<body>";
echo "</body>";
if (isset($_POST['home'])) {
header("Location: http://" . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/chefmenu.php");
}
if (isset($_POST['back'])) {
header("Location: http://" . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/checklist2.php");
}
?>
</form>
<script>
$(document).ready(function () {
var i = 1;
$('#add').click(function () {
i++;
$('#proctable').append('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Enter Procedure" class="form-control name_list" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function () {
var button_id = $(this).attr('id');
$('#row' + button_id + '').remove();
});
$('#submit').click(function () {
$.ajax({
url: 'name.php',
method: 'POST',
data: $('#addproc').serialize(),
success: function (data) {
alert(data);
$('#addproc')[0].reset();
}
});
});
});
</script>
</html>
It's easy to do with a little of jquery and AJAX :
Create and append a field to your form using jquery, something like
Capture your form sumission with jquery event listeners : $("form").live("submit", function (e){e.preventDefault()...}
Serialize all your form (with the newly added fields) and send them via AJAX
An example of code :
$("form").live("submit", function (event) {
event.preventDefault();
var form = $(this);
$.ajax({
url: form.attr('action'), // Get the action URL to send AJAX to
type: "POST",
data: form.serialize(), // get all form variables
success: function(result){
// ... do your AJAX post result
}
});
});

Problen with my ajax code to display comment

The code below is a attempt to create a comment system using ajax and php here php part works well comment is inserted into table but seems I didn't get my hands on ajax yet. Ajax does not work comment is not shown unless I reload page. On reloading page comment appears perfectly where it should be so help me on fixing my ajax code.
<?php
if(isset($_POST['content'])) {
$comment=strip_tags($_POST['content']);
$com = $db->prepare("INSERT INTO comments (comment,userto, userfrom, blog) VALUES (:comment, :userto, :userfrom, :blog)");
$com->execute(array(':comment'=>$comment,':userto'=>$userid,':userfrom'=>$uid,':blog'=>$blogId));
}
?>
<div class='db'>
<table>
<tr>
<td>
<img src='<?php echo $tar['profile_pic']; ?>' style='width:40px;height:40px;'/>
</td>
<td>
<a href='<?php echo $tar['username']; ?>'><?php echo $tar['first_name'].' '.$tar['last_name']; ?></a>
<p><?php echo $tar['comment']; ?></p>
</td>
<td>
<a href='#' id='<?php echo $tar['id']; ?>' class='delcomment' style='color:#555555;text-decoration:none;' title='Delete'>X</a>
</td>
</tr>
</table>
</div>
<script type="text/javascript" >
$(function() {
$(".comment_button").click(function() {
var test = $("#content").val();
var dataString = 'content=' + test;
if (test == '') {
alert("Please Enter Some Text");
} else {
$.ajax({
type: "POST",
url: "",
data: dataString,
cache: false,
success: function(html) {
$(".db").show(html);
}
});
}
return false;
});
});
</script>
<form method='post' name='form' action='' class='commentbox'>
<textarea cols='30' rows='2' name='content' id='content'></textarea><br />
<input type='submit' value='Comment' name='submit'class='comment_button'/>
</form>
You dont need to use the variable dataString and you need to change the $.ajax() function for this:
var test = $("#content").val();
$.ajax({
type: "POST",
url: "",
data: {
content: test;
},
success: function(response) {
$(".db").append(response);
}
});
change the following line to avoid page refreshes:
$(".comment_button").click(function(event) {
event.preventDefault();
or change the attrubute type="submit" of your button for type="button", like this:
<button type='button' name='submit' class='comment_button'>Comment</button>
I hope it helps you...
Try this.
And make sure jQuery library is also included in your page.
HTML PAGE
<script type="text/javascript" >
$(function() {
$(".comment_button").click(function() {
var test = $("#content").val();
var comment = test;
if (test == '') {
alert("Please Enter Some Text");
} else {
$.ajax({
type: "POST",
url: "process.php",
data: {content : comment},
cache: false,
success: function(html) {
$("#db").append(html);
}
});
}
return false;
});
});
</script>
<div id="db">
<!--Returned comment will appear here -->
</div>
<form method='post' name='form' action='process.php' class='commentbox'>
<textarea cols='30' rows='2' name='content' id='content'></textarea><br />
<input type='submit' value='Comment' name='submit'class='comment_button'/>
</form>
PHP PAGE
process.php
<?php
if(isset($_POST['content'])) {
$comment=strip_tags($_POST['content']);
$com = $db->prepare("INSERT INTO comments (comment,userto, userfrom, blog) VALUES (:comment, :userto, :userfrom, :blog)");
$com->execute(array(':comment'=>$comment,':userto'=>$userid,':userfrom'=>$uid,':blog'=>$blogId));
}
?>
<table>
<tr>
<td>
<img src='<?php echo $tar['profile_pic']; ?>' style='width:40px;height:40px;'/>
</td>
<td>
<a href='<?php echo $tar['username']; ?>'><?php echo $tar['first_name'].' '.$tar['last_name']; ?></a>
<p><?php echo $tar['comment']; ?></p>
</td>
<td>
<a href='#' id='<?php echo $tar['id']; ?>' class='delcomment' style='color:#555555;text-decoration:none;' title='Delete'>X</a>
</td>
</tr>
</table>
Use
$(".db").append(html);
if you already have existing comments like:
<div class = "db">
Comment 1
Comment 2
...
</div>
.append will add more HTML to existing tag.

while loop set only first value in input field in php

I want to add users present in a given table. I am iterating whole table and sending each value to javascript file.
<?php
$sql = "select * from user where user_id not in (select second_user_id from friends where first_user_id = '$user_id'\n"
. " union\n"
. " select first_user_id from friends where second_user_id = '$user_id') limit 20";
$result_not_friends=mysqli_query($dbc,$sql)
or die("error in fetching");
// print_r($row_not_friends);
?>
<table class="table table-hover table-bordered">
<h1>Users</h1>
<tbody>
<?php
while ( $row_not_friends = mysqli_fetch_array($result_not_friends))
{
if ( $row_not_friends['user_id'] != $user_id )
{
?>
<tr>
<td>
<?php echo $row_not_friends['user_name']; ?>
</td>
<!-- here I am sending request and processing it via ajax -->
<td><i class="fa fa-user-plus send_request"></i></td>
<input type="hidden" class="send_second" value="<?php echo $row_not_friends['user_id']; ?>">
<input type="hidden" class="send_first" value="<?php echo $user_id; ?>">
</tr>
<?php
}
}
?>
</tbody>
</table>
Now I am accessing each value in a javascript file as follow:
// Here a request is send
$('.send_request').on('click',
function (e) {
e.preventDefault();
var first = $('.send_first').val();
var second = $('.send_second').val();
alert('firt id is ' + first);
alert('second id is ' + second);
$.ajax(
{
url:'send_process.php',
type:'POST',
dataType:"json",
data: { first: first, second: second },
success:function(data)
{
if(data.send_success)
{
window.location.href = "friend.php";
}
else
{
alert("something went wrong");
window.location.href = "friend.php";
}
},
error : function() { console.log(arguments); }
}
);
});
But here var second = $('.send_second').val(); gives only top-most element value of $row_not_friends['user_id'] . When I am echoing the value, it gives correct result.
Please help me.
Because you are selecting ALL the elements in the page and the default behavior of val() is it returns the first item. It has no clue you want the nth item.
First thing is you need to fix your HTML it is invalid. You can not have an input as a sibling of a tr element. You need to move it inside of a TD.
<!-- here I am sending request and processing it via ajax -->
<td><i class="fa fa-user-plus send_request"></i> <!-- removed the closing td from here -->
<input type="hidden" class="send_second" value="<?php echo $row_not_friends['user_id']; ?>">
<input type="hidden" class="send_first" value="<?php echo $user_id; ?>"></td> <!-- moved the closing td to here -->
</tr>
You need to find the elements in the same row as the button you clicked. Since the hidden inputs are npw siblings of the button you can use the siblings() method.
var btn = $(this);
var first = btn.siblings('.send_first').val();
var second = btn.siblings('.send_second').val();

Jquery click no triggering

I am using a while loop to create a table and I am trying to pass a unique value stored in a php variable called $i to a jquery ajax call but all I get returned it 'undefined'.
The portion of the html table (whole table is wrapped in a div called audit_content which is not part of the while loop)
<tr>
<td colspan="3">
<input type="button" class="delete_submit delete_from_audit" name="image_delete" value=""
onClick="delete_image('<? echo $image_id; ?>','<? echo $audit_id; ?>')" />
<input type="button" class="reset_grade control_submit ie7_reset"
onclick="reset_image('<? echo $image_id; ?>','<? echo $audit_id; ?>')" value="" >
<input type="hidden" class="form_id" value="<? echo $i; ?>" >
<input type="button" name="audit_submit"
class="audit_submit audit_submit_btn ie7_submit" value=""; />
</td>
</tr>
the Jquery
<script>
$(document).ready(function(){
$('#audit_content').on("click", ".audit_submit", function(){
var form_id = $(this).next('.form_id').val();
alert(form_id);
//$.ajax({
//type: "POST",
//url: "ajax/image_audit.php",
//data: $('#audit_form').serialize()
//});
});
});
</script>
The .form_id element is before the .audit_submit button... Try prev() instead of next():
var form_id = $(this).prev('.form_id').val();
You could also use siblings():
var form_id = $(this).siblings('.form_id').val();
<script>
$(document).ready(function(){
$(document).on("click", ".audit_submit", function(){
var form_id = $(this).next('.form_id').val();
alert(form_id);
//$.ajax({
//type: "POST",
//url: "ajax/image_audit.php",
//data: $('#audit_form').serialize()
//});
});
});
</script>
<input type="button" name="audit_submit"
class="audit_submit audit_submit_btn ie7_submit" value=""**---> ; <----** />
Why is there a semi colon ??
Php will consider it as the end of the statement.

Categories