How to Take value from buttons with same class Using JQuery - javascript

I have a PHP script which Produces the n number of buttons as an output based on database records. Each value is associated with a respective button.
When I click any button, I always get the value of first button.
How can I get the value of button which is clicked only?
<button class='btn btn-danger question_delete' value=".$row['action_id']."</button>
My jQuery script:
$(document).ready(function(){
$(".question_delete").click(function(){
var action_value = $(this).val();
if(action_value){
$.ajax({
type:'POST',
url:'delete_question_group.php',
data:{delete_action:action_value},
success:function(data){
refresh_table();
refresh_paper();
}
});
}else{
// $('#select_qtype_list').html('<option value="">Select Question First</option>');
}
});
});
My PHP:
<?php
session_start();
$name =$_SESSION['name'];
$id = $_SESSION['id'];
include("database.php");
$run = mysqli_query($conn,"select * from users where id='$id' AND name='$name' ");
$user = mysqli_fetch_array($run);
$subject_id = $user['subject_id'];
$user_name = $user['name'];
$run1 = mysqli_query($conn,"select * from subject where sub_id='$subject_id'");
$subject = mysqli_fetch_array($run1);
$subject_name = $subject['sub_name'];
$query = $conn->query("select * from action where subject_id='$subject_id' AND user_id='$id'");
//Count total number of rows
$rowCounts = $query->num_rows;
//Display states list
if($rowCounts > 0){
$i=1;
while($row = $query->fetch_assoc()){
//echo '<option value="'.$row['qtype_id'].'">'.$row['qtype_name'].'</option>';
echo "<tr>";
//$q_id = $query['question_id'];
//$question_type_id = $query['question_type_id'];
echo "<td>$i</td>";
echo "<td>".$row['action_name']."</td>";
echo "
<td>
<button class='btn btn-danger question_delete' value=".$row['action_id'].">
<i class='fa fa-trash' aria-hidden='true'>
</i>
</button>
</td>
<td>
<button id='question_update' class='btn btn-primary' data-toggle='modal' data-target='#myModal_update' value=".$row['action_id'].">
<i class='fa fa-pencil' aria-hidden='true' >
</i>
</button>
</td>
</tr>
";
$i++;
}
}else{
echo '<td colspan="4" style="text-align: center; color:red;"><strong>No Questions are Selected</string></option>';
}
?>

Probably because the property action_id inside the value on each button don't change. Also you forgot to close the button tag, maybe that's why it doesn't work
<button class='btn btn-danger question_delete' value=".$row['action_id']."></button>

-This Problem is Solved and Worked Perfectly. Description of solution is as follow:
-First onclick attribute is used. and a function is created which takes the value of button each time when button will click.
Following Code is worked:
<button class='btn btn-danger' onclick='myfunction(this.value)' id='question_delete' value=".$row['action_id']."><i class='fa fa-trash' aria-hidden='true'></i></button>
JQuery Code:
$(document).ready(function(){
myfunction1 = function(e){
if(e){
$.ajax({
type:'POST',
url:'update_question_group.php',
data:{update_action:e},
success:function(html){
$('#update_action_list').html(html);
$('#update_action_list').selectpicker('refresh');
}
});
}else{
// $('#select_qtype_list').html('<option value="">Select Question First</option>');
}
}
});

Related

Fetch data from msql into selectpickers for editing

I have a code which inserts data from a modal form into two related tables, namely inventory_order table and inventory_order_product table. That code is working fine but my problem comes when I want to fetch the same data back into the modal form for editing. The code for fetch single is only retrieving data for the first line in the selectpicker while the remaining are not retrieved. Please if my question is not clear refer to the image below and please bear with me I'm a novice in php, ajax and mysql.
$(document).on('click', '.update', function(){
var inventory_order_id = $(this).attr("id");
var btn_action = 'fetch_single';
$.ajax({
url:"order_action.php",
method:"POST",
data:{inventory_order_id:inventory_order_id, btn_action:btn_action},
dataType:"json",
success:function(data)
{
$('#orderModal').modal('show');
$('#inventory_order_name').val(data.inventory_order_name);
$('#inventory_order_date').val(data.inventory_order_date);
$('#inventory_order_address').val(data.inventory_order_address);
$('#span_product_details').html(data.product_details);
$('#payment_status').val(data.payment_status);
$('.modal-title').html("<i class='fa fa-pencil-square-o'></i> Edit Order");
$('#inventory_order_id').val(inventory_order_id);
$('#action').val('Edit');
$('#btn_action').val('Edit');
}
})
});
if($_POST['btn_action'] == 'fetch_single')
{
$query = "
SELECT * FROM inventory_order WHERE inventory_order_id = :inventory_order_id
";
$statement = $connect->prepare($query);
$statement->execute(
array(
':inventory_order_id' => $_POST["inventory_order_id"]
)
);
$result = $statement->fetchAll();
$output = array();
foreach($result as $row)
{
$output['inventory_order_name'] = $row['inventory_order_name'];
$output['inventory_order_date'] = $row['inventory_order_date'];
$output['inventory_order_address'] = $row['inventory_order_address'];
$output['payment_status'] = $row['payment_status'];
}
$sub_query = "
SELECT * FROM inventory_order_product
WHERE inventory_order_id = '".$_POST["inventory_order_id"]."'
";
$statement = $connect->prepare($sub_query);
$statement->execute();
$sub_result = $statement->fetchAll();
$product_details = '';
$count = '';
$count = $count++;
foreach($sub_result as $sub_row)
{
$product_details .= '
<script>
$(document).ready(function(){
$("#product_id'.$count.'").selectpicker("val", '.$sub_row["product_id"].');
$(".selectpicker").selectpicker();
});
</script>
<span id="row'.$count.'">
<div class="row">
<div class="col-md-8">
<select name="product_id[]" id="product_id'.$count.'" class="form-control selectpicker" data-live-search="true" required>
'.fill_product_list($connect).'
</select>
<input type="hidden" name="hidden_product_id[]" value="'.$sub_row["product_id"].'" />
</div>
<div class="col-md-3">
<input type="text" name="quantity[]" class="form-control" value="'.$sub_row["quantity"].'" required />
</div>
<div class="col-md-1">
';
if($count == '')
{
$product_details .= '<button type="button" name="add_more" id="add_more" class="btn btn-success btn-xs">+</button>';
}
else
{
$product_details .= '<button type="button" name="remove" id="'.$count.'" class="btn btn-danger btn-xs remove">-</button>';
}
$product_details .= '
</div>
</div>
</div><br />
</span>
';
}
$output['product_details'] = $product_details;
echo json_encode($output);
}
Problem in your code is with variable $count.As in your backend code this is declare outside your foreach.. loop so when first time your loop will run it will have correct value i.e : 0 but you never increment it that's why it is only giving correct value for first selectpicker. Instead you need to increment its value to set value for second value ,third and so on. i.e :
foreach($sub_result as $sub_row)
{
//you code html and jquery
$count = $count++;//add this inside for loop
}
Also, i don't why you have given $count = ''; . Instead , it should be $count = 0;

How to uniquely set id's to buttons generated dynamically in php that are accessible in javascript code

Okay so I'm having a small problem. So I have an inventory system connected to a database and for each item in the database a button is generated on screen and I'm trying to give each button a unique Id in php that I can access through javascript. the code for generating the buttons looks like this
<table class = "table">
<thead>
<tr>
<td><center><strong>Item Id</strong></center> </td>
<td><center><strong>Item Description</strong></center> </td>
<td><center><strong>Item Type</strong> </center></td>
<td><center><strong>Availability</strong></center></td>
<td><center><strong>Name</strong></center></td>
<td><center><strong>Check in/out button</strong></center></td>
</tr>
</thead>
<tbody>
<?php
mysql_select_db('inventory management system');
$query="SELECT * FROM inventory";
$results = mysql_query($query);
$a = 0;
while($row = mysql_fetch_array($results)) {
$a++;
echo '<script type = "text/javascript">c++;</script>'
?>
<tr>
<td><center><?php echo $row['item_id']?></center></td>
<td><center><?php echo $row['item_desc']?></center></td>
<td><center><?php echo $row['item_type']?></center></td>
<td><center><?php echo $row['availability_status']?></center></td>
<td><center><?php echo $row['name']?></center></td>
<td><center><?php
if(is_null($row['name'])){//generates the buttons whether or not an item is signed in or out
echo "<input class='btn btn-default' type='submit' value='Check Out' id ='$a' onclick='updateinventory()'>";//how can I get a unique id here ?
}else if(!is_null($row['name'])){
$lol = "<?php <script type = 'text/javascript'> x++; </script> ?>";
echo "<input class='btn btn-default' type='submit' value='Check In' id ='$a' onclick='checkingitemin()'>";
}
?></center></td>
</tr>
<?php
}
?>
</tbody>
</table
>
i need to be able to access each specific unique button to be able to change the text on each button as well as execute some ajax to change some stuff in the database.
Replace your conditions with this :
if(is_null($row['name'])) {//generates the buttons whether or not an item is signed in or out
echo "<input class='btn btn-default' type='submit' value='Check Out' id='".$row['item_id']."' onclick='updateinventory()'>";
} else { // You don't need another `if` statement here
// I don't think the next instruction is usefull :)
// $lol = "<?php <script type = 'text/javascript'> x++; </script>";
echo "<input class='btn btn-default' type='submit' value='Check In' id='".$row['item_id']."' onclick='checkingitemin()'>";
}

Replacing Class of <a> </a> Base On Status

I am trying to change the class of anchor tag of my html and php code.
This is the screenshot:
And below is php code for that screenshot
Here is my PHP code:
<?php echo "<td>{$id}</td>" ?>
<?php echo "<td>{$ontrack_websiteName}</td>" ?>
<?php echo "<td>{$ontrack_url}</td>" ?>
<?php echo "<td>{$ontrack_geography}</td>" ?>
<?php echo "<td>{$ontrack_Comment}</td>" ?>
<?php echo "<td><a class='btn btn-success' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span></a>
</td>" ?>
<?php echo "<td width='100px'><a class='btn btn-warning btn-sm' href='archiveProcess.php?id={$id}' role='button'><span class='glyphicon glyphicon-save-file' aria-hidden='true'></span></a>
<a class='btn btn-danger btn-sm' href='delete_websiteOntrack.php?id={$id}' role='button'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></a></td>" ?>
There is two values coming from "Status" column. One is "Enable" and another is "Disable". When user click "Enable" green link. It will change the value in DB as "Disable" and show "Disable". When it show "Disable", i would like to change the background as "btn btn-danger" class so that the background will become red.
But currently. It only show as green background as show below:
Pleae kindly help me. I trying to do different way but always failed :(
You can Do something like below
on success and When it show "Disable" :
$( "#btn-change" ).removeClass( "btn-success" );
$( "#btn-change" ).addClass( "btn-danger" )
Let btn-change is an id of that button.
Okay, so first of all you should not use so many <?php ?> tags.
What you are actually looking for is a simple if-statement:
<?php
//if status is enable, set button class to success
if($ontrack_status == "Enable"){
$btn_class = "success";
}else{
$btn_class = "danger"; //else set it to danger
}
//put btn class into the string:
echo "<td>{$id}</td>
<td>{$ontrack_websiteName}</td>
<td>{$ontrack_url}</td>
<td>{$ontrack_geography}</td>
<td>{$ontrack_Comment}</td>
<td> <!-- set button class here-->
<a class='btn btn-{$btn_class}' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span>
</a>
</td>
<td width='100px'>
<a class='btn btn-warning btn-sm' href='archiveProcess.php?id={$id}' role='button'>
<span class='glyphicon glyphicon-save-file' aria-hidden='true'></span>
</a>
<a class='btn btn-danger btn-sm' href='delete_websiteOntrack.php?id={$id}' role='button'>
<span class='glyphicon glyphicon-trash' aria-hidden='true'></span>
</a>
</td>";
?>
I don't exactly get why you're using a new echo and opening and closing PHP on each line. You could just do
<?php
echo "<td>{$id}</td>
<td>{$ontrack_websiteName}</td>
<td>{$ontrack_url}</td>...
Apart from that, to answer your question, you'll need to use an if-statement. So for example:
if($ontrack_status == 'Disable') {
echo "<td><a class='btn btn-success' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span></a>
</td>"
}else{
echo "<td><a class='btn btn-danger' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span></a>
</td>"
}
A nicer solution would be to use shorthands
echo "<td><a class='btn btn-".($ontrack_status == 'Disabled' ? 'success' : 'danger')."' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span></a>
</td>"
<script type="text/javascript">
var status = <?= $ontrack_status ?>;
$(document).ready(function() {
if(status == "Enable"){
$("a").addClass("btn-success");
$("a").removeClass("btn-danger");
} else {
$("a.status").addClass("btn-danger");
$("a.status").removeClass("btn-success");
});
<a class="status " href=""></a>

php like and dislike not working on every post

I have a like and dislike system in a page, like and dislike works only on the first page but not on others post. Here is what I have tried
This is how I fetch information
Here is the php part
Like.php
if(isset($_POST['id'])){
$send = mysqli_query($connecDB, "UPDATE portfolio SET `like`='$view' WHERE `id`='$id'"); }
Javascript part
<script type="text/javascript">
$(".btn-success").click(function() {
var id = $('#id').val();
$.ajax({
type : "POST",
url : "ajax/like.php",
data: "id=" + id,
success: function(data) {
$('#result').html(data);
}
});
});
</script>
Here is the HTML part
$sql = "SELECT * FROM post ORDER BY id DESC LIMIT 10";
$result = mysqli_query($connecDB, $sql);
while($rowsmall = mysqli_fetch_array($result)){
<button class="btn btn-success btn-stroke" id="result"><?php echo $rowsmall['like']; ?> <i class="fa fa-thumbs-o-up fa-lg"></i> </button>
<input type="hidden" name="id" id="id" value="<?php echo $rowsmall['id']; ?>"> <?php } ?>
The problem I'm facing is that the javascript is again and again sending same hidden id.
In HTML id attribute must has an unique value in whole page and this line (var id = $('#id').val();) always return id of first post, use dataattributes to simply access post id, just like this
PHP
<?php $sql = "SELECT * FROM post ORDER BY id DESC LIMIT 10";
$result = mysqli_query($connecDB, $sql);
while($rowsmall = mysqli_fetch_array($result)){
<button class="btn btn-success btn-stroke" data-id="<?php echo $rowsmall['id']; ?>" >
<?php echo $rowsmall['like']; ?> <i class="fa fa-thumbs-o-up fa-lg"></i>
</button>
<input type="hidden" name="id" value="<?php echo $rowsmall['id']; ?>">
<?php } ?>
JavaScript
<script type="text/javascript">
$(".btn-success").click(function() {
var id = $(this).data('id'); // get data-id atrribute
var element = this;
$.ajax({
type : "POST",
url : "ajax/like.php",
data: "id=" + id,
success: function(data) {
$(element).html(data);
}
});
});
</script>

replace onclick action to display inline output

i want to change the behavior of the button in this function
$STRING .= ''.$CORE->_e(array('auction','41')).'';
to when clicked to display the output of this function
$data = get_user_meta( $authorID, 'cellno', true);
if(strlen($data) > 0){
echo "<span><i class='fa fa-phone'></i> <a href='phone:".$data."' rel='nofollow' target='_blank'</a> </span>";
so that when " class="btn btn-info btn-lg" is clicked it will display the phone number inside it, for now it shows contact author, and opens a new page to the author page.
thanks everybody
Try this,
<?php
$STRING .= ''.$CORE->_e(array('auction','41')).'';
$data = get_user_meta( $authorID, 'cellno', true);
if(strlen($data) > 0){
echo "<span id='phoneNumber'><i class='fa fa-phone'></i> <a href='phone:".$data."' rel='nofollow' target='_blank'</a> </span>";
}
?>
<script>
$(document).ready(function(){
$('#phoneNumber').hide();
});
function showPhoneNumber(){
$('#phoneNumber').show();
}
</script>
Also, try learning onclick events.

Categories

Resources