Develop Reference

How to use data-attribute to pass values from database to jquery

I have an issue passing values from a database to a modal pop up using data attribute.
My problem is the data-attribute value passes only one value whereas the edit button is in a php loop and should pick the value for each row.
Below is a part of my loop code:
<td>
<p data-placement="top" data-toggle="tooltip" title="Edit">
<a href="<?php echo admin_url('admin.php?page=woocommerce_checkout&id=' . $query->id.'&status=update'); ?>"
class="btn btn-primary btn-xs updatesection"
data-title="Edit"
data-toggle="modal"
data-id="<?php echo $query->id ?>"
data-target="#editbilling"
data-name="<?php echo $query->name; ?>">Edit</a>
</p>
</td>
js
$(document).on( "click", '#editbilling', function(e) {
var data = $('.updatesection').data('name');
alert(data);
});
So I am testing the values passed through the data attribute by alerting it on javascript.
The problem is only the first id gets submitted for all the edit buttons in a loop carrying different ids instead of submitting different ids for each row in the database.
When I inspect the code on the browser I discover the data-attributes have the corresponding values from the database but they don't get submitted - only the first row gets submitted for all the edit buttons in the loop.
Can anyone find a fix to this please

I changed the id onclick to class and then used attr instead of data and it worked. Please check my solution below:
$(document).on( "click", '.updatesection', function(e) {
var data = $(this).attr('data-id');
alert(data);
});

send ID (dynamically created in php) from a href tag to ajax/jquery?

I have a question, I'm very new to jQuery and Ajax, so I hope someone can help me.
I have multiple 'edit' buttons in table ((1.st column data)for each row data -> (2.nd column action) button edit), and I've created some inline-editing function in jQuery: but when I click on edit button to show data in table and edit, they are all opening at once, I want to open only for instance first to edit.
I assigned every edit button id in element dynamically.
I'm assuming I have to send that id button to a Ajax, so it can proceed, but I don't know how and what to do? I hope someone could explain me. Thank you very much!!!
Here is my code:
php
<?php
$teams = Team::getAll();
foreach ($teams as $team) {
$tname = $team->name;
$tid = $team->team_id;
echo "<tr><td><a href='#' class='editable' style='margin-left: 2px;'>".$tname."</a><form method='POST' action=''><input type='text' class='editshow form-control col-sm-3 ' aria-label='Sizing example input' aria-describedby='inputGroup-sizing-sm' name='edit_name' value='".$tname."'><button name='btnSave' style='margin-left: 2px; margin-top:3px;' class='btn btn-success btn-sm editshow'>Save</button></form></td>";
echo "<td><a href='teams.php?edit_tid=$tid'><button class='btn btn-primary btn-sm btnEdit'".$tid."'>Edit</button></a><a href='teams.php?delete_tid=$tid'><form method='POST' action=''><button name='btnDelete' class='btn btn-danger btn-sm'>Delete</button></form></a></td></tr>";
}
?>
jQ
<script type="text/javascript">
$(".editshow").hide();
$(".btnEdit").click(function(){
$(".editshow").toggle();
$(".editable").setTimeout(2000);
});
</script>

You're very close -- basically, you want to be able to reference the specific button that was clicked, then get to its related edit fields.
<script type="text/javascript">
$(".editshow").hide();
$(".btnEdit").click(function(){
// We'll save a reference to the current button...
let clickedBtn = $(this),
containerEl = clickedBtn.closest("tr");
// now, we can work specifically within this TR el, as that is
// the container for our currently editing data.
containerEl.find(".editshow").toggle();
containerEl.find(".editable").setTimeout(2000);
});
</script>
Using jQuery's closest() gets me to the nearest <tr>, which is the container for the current table row. By limiting the selections to THAT (using containerEl.find()), I am only toggling elements related to this particular row.
I do recommend taking a look at the jQuery docs, there are some complex things happening here. First, the $(this) within the click handler refers to the clicked element. Second, you might want to look at the docs for both .closest() and .find().
Not sure what the setTimeout() is meant to be doing, but that should get you started.
Hope it helps!

how to style the result a php value that is been echo in an javascript onclick button

Good day guys, i am having an issue with this line of code, i echo a php echo value in a javascript submit function, which worked very perfect
using this button code
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="onclickbutton(<?php echo ($level->getAmount()); ?><?php echo($level->getPotentialEarning()); ?> )">
Recycle
</button>
but the only issue am having is that i want to separate each value to look like this exactly.

Session variable not work properly when redirect from one page to other with mediator page in between

In below code,when i redirect from one page to redirection.php page with session variable it works well.
I implement this scenario with one button,But i have two button with below condition like when the user is already log-in then it will redirect to redirection.php page with link appended which is already stored in session variable because it will use elsewhere.Up to this there is no issue.
But when the user is not log-in and when i click on button it gives popup division for login(loginpopup.php page already included that's why will shows popup on click) and when the user is login with username/password then and then only it will redirect to the redirection.php page with stored product link which is in session variable.
And MY query is when i used that session variable in loginpopup.php page it doesn't get that particular product link which i should appended to redirect to redirection.php page.means the stored data in session variable not get proper link.
In short when i redirect from one page to other with mediator page in between(without page refresh) how can i use session variable.
<?php include("loginpopup.php"); $i = 0; //init number for ++
$a=array(
array("Htc 526 black","htc.jpg",23000,"http://www.flipkart.com"),
array("Iphone 6s","apple.jpg",43000,"http://www.amazon.com"),
array("Sony xperia c3 dual","sony.jpg",19000,"http://www.snapdeal.com")
); foreach($a as $value){
//session_start();
$_SESSION['link'][$i]=$value[3];
echo $_SESSION['link'][$i];
if (isset($_SESSION['uname']) && $_SESSION['uname'] == true)
{?>
<script>
function Redirect1(i)
{
window.location="redirection.php?d="+i;
}
</script>
<button type="button" class="btn btn-info btn-md" href = "javascript:void(0)" onclick = "Redirect1(<?= $i ?>);" style="background-color:#ff8c21;">Buy Now</button>
<?php
}
else
{?>
<button type="button" id="aaa" class="btn btn-info btn-md" href = "javascript:void(0)" style="background-color:#ff8c21;"onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';" >Buy Now</button>
<?php
}$i++;}?>
Then in redirection.php
<?php
if(session_id()=="")
{
session_start();
}
$i = $_GET['d'];
$deep_link=$_SESSION['link'][$i];
echo $deep_link;
?>
I hope you understand my issue,please suggest the proper way.

How to add a delete button in custom table in yii

I have a form where I use ajaxSubmitButton to add product items in a HTML table. ajaxSubmitButton helps to use ajax to add item, ajax url take the values and update the table's body <tr>, <td>. In table, I want to keep a delete button in last column in every rows. When I click the delete button, a row should be deleted. But here delete button does not work. I have checked the hardcoded HTML table and jquery in views that works.
In this circumstance, how could I solve this issue. Please help me. I have given below the form and controller's code:
Form:
Yii::app()->clientScript->registerScript('removecartitem', "
$('#remove').click(function(){
$('#cartDetails tr:first').remove();
})
");
?>
<div class="form-group">
<div class="col-lg-2">
<?php
// this is the ajax submit button
echo CHtml::ajaxSubmitButton('Add Item',Yii::app()->createUrl('admin/order/cart'),
array(
'type'=>'POST',
'update'=>'#cartTable',
),
array('class'=>'btn btn-primary btn-sm',));
?>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<table id="cartDetails" class="table table-bordered sortableTable responsive-table">
<tbody id="cartTable"> // ajax updates this id
</tbody>
</table>
</div>
</div>
In controller:
public function actionCart()
{
if(isset($_POST["Order"])){
.....
.....
$cartDetails = Yii::app()->session['cart'];
if(!empty($cartDetails)){
foreach($cartDetails as $cart){
echo '<tr>';
echo '<td>'.$cart["product_id"].'</td>';
echo '<td>'.$cart["product_name"].'</td>';
echo '<td>'.$cart["product_code"].'</td>';
echo '<td>'.$cart["quantity"].'</td>';
echo '<td>'.$cart["price"].'</td>';
echo '<td>'.$cart["totalPrice"].'</td>';
echo '<td><input type="button" name="add" id="remove" value="Remove" class="btn btn-danger btn-xs"/></td>';
echo '</tr>';
}
}
}
At this stage, none of jquery works. Please help how to enable jquery then how to activated the delete button. Please let me know if my explanation is not clear. I have added an images to explain more clear.

alter so you have a class for removal, for example
public function actionCart()
{
if(isset($_POST["Order"])){
.....
.....
$cartDetails = Yii::app()->session['cart'];
if(!empty($cartDetails)){
foreach($cartDetails as $cart){
.
.
.
echo '<td>'.$cart["totalPrice"].'</td>'; // see below line , class : REMOVETHIS
echo '<td><input type="button" name="doesntMatter" class="REMOVETHIS btn btn-danger btn-xs"/></td>';
.
}
}
}
then on page ready, remove it on click
$(document).ready(function(){
$('.REMOVETHIS').click(function(){
$(this).parent().parent().remove();
});
});
UPDATE:
the code below will only remove first row of table,
$('#cartDetails tr:first').remove();
and I'm guessing even this wont work, because jquery needs to be used after document ready. like :
$(document).raady(function(){
//put jquery related code in here
});
and like our friend said, you can NOT assign multiple elements with the same id, for that you better use classes,
and in this case because the row inserted to table is fresh, you need to state again
$('.REMOVETHIS').click(function(){
$(this).parent().parent().remove();
});
after you have inserted the row, or you can do this:
echo '<td><input type="button" name="doesntMatter" class="btn btn-danger btn-xs" onclick="removeRow(this)"/></td>';
and when that element is clicked, removeRow function will be called
function removeRow(element)
{
$(element).parent().parent().remove();
}

As how I solve my problem:
I have an order from where I place order for registrants. In the order form, there are 3 fields i select registration, select product, then quantity. There is a ajaxSubmitButton what sends this value to the controller (actionCart). Controller saves the value i.e. product id, name, price, quantity, total price in session and update the ajax request in tabular format to the order form. During echoing <tr>, <td> I added a button to delete item from session. So, I want to delete value of session as well as the row of table once click button. But button did not work because jquery did not work although I saw that jquery was loaded.
I found that ajax updated HTML did not work with earlier loaded jquery. So I changed the strategy that separated Updated HTML table (what I echoed in controller) in another view file and used renderPartial into the controller. I injected my required Jquery snippets into the view file. Then I found that jquery is responding with ajax requested HTML tags.
Now I am working forward to unset the session array and row of table using jquery and ajax.