Develop Reference

How to I use get document.getElementById for changing button div

My code is
<div class="flex-shrink-1 " id="request_btn<?= $contact['id'] ?>">
<button data-request-to="<?= $contact['id'] ?>" data-request-from="<?= $_SESSION['id'] ?>" class="btn btn-sm btn-primary send_request" >Send Request
</button>
</div>
<div class="flex-shrink-1 " id="del_request<?= $contact['id'] ?>">
<button data-request-to="<?= $contact['id'] ?>" data-request-from="<?= $_SESSION['id'] ?>" class="btn btn-sm btn-danger del_request" style="display:none;">Reject Request
</button>
</div>
I want to use in JavaScript
document.getElementById("del_request[int_values]").setAttribute('style','display:none');
document.getElementById("del_request[int_values]").removeAttribute('style');
and
document.getElementById("send_request[int_values]").setAttribute('style','display:none');
document.getElementById("send_request[int_values]").removeAttribute('style');
I hope you will understand, How can I add send_request[int_values] in javascript

you can do something like
var a = [int_values] // for multiple values, can be taken as input of a function
var elementId = "send_request" + a ;
document.getElementById(elementId)

Open the form based on the value acquired from database

I have a form dashboard.php which displays different records (sampleid, type, user). There are two more forms named aba.php and babab.php. There is a button named Update in dashboard.php in front of each record.
When I click on that button it should open the perticular form based on the value of type. I tried the following code but this always open babab.php form.
What is wrong with my code?
<?php
$type=$_GET['type'];
if ($type =="WOOD") {
$formid='aba-edit.php';}
elseif ($type=="BONE" OR 'CARBONATE' OR 'CELLULOSE'OR 'CHARCOL' OR 'CORAL'){
$formid='babab-edit.php';}
else {
echo "Under Construction";}
?>
<a onclick="window.open('aba-view.php?sampleid=<?php echo htmlentities($result->sampleid);?>','_blank','height=700,width=1200 top=200 left=350,location=no,toolbar=no,resizable=0, scrollbars=no')">
<button class="btn btn-primary"><i class="fa fa-edit "></i> VIEW</button>
<a onclick="window.open('<?php echo $formid ?> ?sampleid=<?php echo htmlentities($result->sampleid);?>','_blank','height=700,width=1200 top=200 left=350,location=no,toolbar=no,resizable=no, scrollbars=no')">
<button class="btn btn-primary"><i class="fa fa-edit "></i> UPDATE</button>

Yоu have error in the check syntax:
elseif($type=="BONE" OR 'CARBONATE' OR 'CELLULOSE'OR 'CHARCOL' OR 'CORAL'){
should be:
elseif($type=="BONE" OR $type=='CARBONATE' OR $type=='CELLULOSE'OR $type=='CHARCOL' OR $type=='CORAL'){

<?php
$type =$result->type;
if ($type ==WOOD or $type ==CELLULOSE ){
$formid='babab-edit.php';
} elseif($type==BONE){
$formid='bone.php';
}elseif($type==SEDIMENT OR $type==CHARCOL OR $type==PEAT){
$formid='aba-edit.php';
}else{
$formid=nothing.php;
}
?>
<a onclick="window.open('aba-view.php?sampleid=<?php echo htmlentities($result->sampleid);?>','_blank','height=700,width=1200 top=200 left=350,location=no,toolbar=no,resizable=0, scrollbars=no')"><button class="btn btn-primary"><i class="fa fa-edit "></i> VIEW</button></a>
<a onclick="window.open('<?php echo $formid?> ?sampleid=<?php echo htmlentities($result->sampleid);?>','_blank','height=700,width=1200 top=200 left=350,location=no,toolbar=no,resizable=no, scrollbars=no')"><button class="btn btn-primary"><i class="fa fa-edit "></i> UPDATE</button></a>

show dynamic buttons using jquery

i have this code in index.php:
<tbody>
<?php foreach($data as $fetch): ?>
<tr>
<input type="hidden" name="user_id" value="<?php echo $_SESSION['user_id']?>">
<td class="segment" contenteditable="true"><?= $fetch['segment'] ?></td>
<td class="text-center">
<button class = "btn btn-default action-btn" data-id="<?= $fetch['id'] ?>" data-action="update">
<span class = "glyphicon glyphicon-edit"></span> Update
</button>
|
<button class = "btn btn-success activate-btn action-btn" data-id="<?= $fetch['id'] ?>" id="<?= $fetch['id'] ?>" type="submit" data-action="activate">
<span class = "glyphicon glyphicon-check"></span> Activate
</button>
<button style="display:none" class = "btn btn-danger deactivate-btn action-btn " data-id="<?= $fetch['id'] ?>" id="<?= $fetch['id'] ?>" data-action="deactivate">
<span class = "glyphicon glyphicon-folder-close"></span> deactivate
</button>
<button style="display:none" class = "btn btn-danger deactivate-btn action-btn " data-id="<?= $fetch['id'] ?>" data-action="deactivate">
<span class = "glyphicon glyphicon-folder-close"></span> deactivate
</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<form action="create.php" method="post" class="form-inline">
<div class = "form-group">
<label>Segment:</label>
<input type = "text" name = "segment" class = "form-control" required = "required"/>
</div>
<div class = "form-group">
<button type="submit" name = "save" class = "btn btn-primary"><span class = "glyphicon glyphicon-plus"></span> Add</button>
</div>
</form>
<script type="text/javascript">
$(".action-btn").on("click", function(e) {
var id = $(this).attr("data-id");
var segment = $(this).parents("tr").find("td.segment").html();
var action = $(this).attr("data-action");
$.ajax({
"url": "action.php",
"method": "post",
"data": {
"id": id,
"segment": segment,
"action": action
},
success: function(data) {
alert(data);
}
});
}); </script>
$(".action-btn").click(function(){
$(this).hide();
$("#"+id).show();
});$(".deactivate-btn").click(function(){
$(this).show();
$("#"+id).show();});</script> </body></html>
and in action .php i have this code
<?php require_once 'class.php';require './session.php';if (!isset($_POST['action'])) { exit;}$action = $_POST['action'];$segment =$_POST['segment'];$id = $_POST['id'];$change='update';switch($action) {
case "update":
$conn = new db_class();
$conn->update($segment, $id,$change);
exit;
case "activate":
$activation = '1';
$conn = new db_class();
$conn->activate($activation, $id);
exit;
case "deactivate":
$activation = '0';
$userID= $_SESSION['user_id'];
$conn = new db_class();
$conn->activate($activation, $id);
exit;}?>
the problem is when i click on any activate button all deactivate button doesnt show and when i refresh the page the activate button show up like i didnt do anything please help me

Please change
from:
$(".action-btn").on("click", function(e) {
To:
$(document).on("click",".action-btn", function(e) {
because the html is dynamic created over the document.
Thanks

First check this script function working or not by console...Always try to use $(document).ready(function(){ // Do your work }); when you are in DOM

$(".action-btn").on("click", function(e) {
var id = $(this).attr("data-id");
var segment = $(this).parents("tr").find("td.segment").html();
var action = $(this).attr("data-action");
$.ajax({
"url": "action.php",
"method": "post",
"data": {
"id": id,
"segment": segment,
"action": action
},
success: function(data) {
alert(data);
$(".action-btn").hide(); //this will hide your submit button
}
})
});
//to deaactivate button
$(".deactivate-btn").on("click", function(e) {
$(".action-btn").show();
$(".deactivate-btn").hide();
});
problem in your code is
after ajax call jquery does not work with
$(".deactivate-btn").click(function(){
$(this).show();
$("#"+id).show();
});
direct click
Hope you will find answer

Opencart - Instant update quantity in cart

For standard opencart behavior, after adding the product in cart, user needs to click to update button manually for quantity update. For sample, please refer to http://demo.opencart.com/. However, I would like to change to when I change the quantity, the cart info can be refreshed immediately. I've tried following code but it doesn't work:
For catalog/view/theme/default/template/checkout/cart.tpl, I updated:
button type="submit" data-toggle="tooltip" title="" class="btn btn-primary">
i class="fa fa-refresh">/button>
(don't know why I cannot paste the code properly on the above line. I've removed some < to make it show)
to
<button type="button" data-toggle="tooltip" title="<?php echo $button_update; ?>" class="btn btn-primary" onchange="cart.update('<?php echo $product['key']; ?>', '<?php echo $product['quantity']; ?>');"><i class="fa fa-refresh"></i></button>
In catalog/view/javascript/common.js
There is a function
var cart = {
//skip some lines for other function
'update': function(key, quantity) {
$.ajax({
url: 'index.php?route=checkout/cart/edit',
type: 'post',
data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
dataType: 'json',
beforeSend: function() {
$('#cart > button').button('loading');
},
complete: function() {
$('#cart > button').button('reset');
},
success: function(json) {
// Need to set timeout otherwise it wont update the total
setTimeout(function () {
$('#cart > button').html('<img src="image/catalog/content/cart/quote-icon.png" alt="quote"><span class="badge badge-giftu rounded-x">' + json['totallines'] + '</span>');
}, 100);
if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
$('#cart > ul').load('index.php?route=common/cart/info ul li');
} else {
$('#cart > ul').load('index.php?route=common/cart/info ul li');
}
}
});
},
}
I tried if I change to cart.remove under the on.change function, it works. However, it doesn't work for cart.udpate. Is there anyone know what is the issue of triggering the ajax update issue?

I myself had such a problem solved it like this
Old code (i have custom them):
<input type="text" name="quantity[<?php echo $product['key']; ?>]" value="<?php echo $product['quantity']; ?>" size="1" class="form-control"/>
<span class="input-group-btn">
<button type="submit" data-toggle="tooltip" title="<?php echo $button_update; ?>" class="btn btn-primary"><i class="fa fa-refresh"></i></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"
onclick="cart.remove('<?php echo $product['key']; ?>');"><i class="fa fa-times-circle"></i></button>
New Code (fixed) look on input and Remove(button type="button" If he also does not work)
<input type="text" name="quantity[<?php echo $product['cart_id']; ?>]" value="<?php echo $product['quantity']; ?>"
size="1" class="form-control"/>
<span class="input-group-btn">
<button type="submit" data-toggle="tooltip" title="<?php echo $button_update; ?>"
class="btn btn-primary"><i class="fa fa-refresh"></i></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"
onclick="cart.remove('<?php echo $product['cart_id']; ?>');"><i class="fa fa-times-circle"></i></button>
There was a problem that incorrectly gave the notation for the fields it was necessary to put the key in the cart_id

Open Cart version 2, Quantity filed on Category View

I am working with Opencart 2.0 and I am trying to get the quantity field to work from the category page as well as the product pages. I managed to do this fine previously with version 1.5 but the code has changed a lot since.
With Opencart V 1.5 I used the solution provided by Siven Sadiyan (http://siven76.com/2013/04/29/opencart-add-a-quantity-box-on-product-list-pages/) who's solution worked beautifully, and just required a tweak to common.js and category.tpl and I was able to apply this to various other pages too such as search results and modules.
I have been unable so far to modify this to suit Opencart version 2.0+ as the code and terms have changed. I have tried several extensions but there seems to be little working solutions at the moment except for hard coding it and manually, and so far it is not going well for me! All I am looking for is functionality and I am not worried about the layout.
The common.js file has changed since the solution to the previous version of Opencart and I know it involves the following code (ps, scroll to top is removed from the below code but only one line has changed from the original):
// Cart add remove functions
var cart = {
'add': function(product_id, quantity) {
jQuery.ajax({
url: 'index.php?option=com_mijoshop&route=checkout/cart/add&format=raw&tmpl=component',
type: 'post',
data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
dataType: 'json',
beforeSend: function() {
jQuery('#cart > button').button('loading');
},
success: function(json) {
jQuery('.alert, .text-danger').remove();
jQuery('#cart > button').button('reset');
if (json['redirect']) {
location = json['redirect'];
}
if (json['success']) {
jQuery('#content_oc').parent().before('<div class="shopnotification"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');
jQuery('#cart-total,#cart > a > span').html(json['total']);
jQuery('.shopnotification').fadeIn(1000).delay(3000).fadeOut(1500);
jQuery('#cart > ul,#module_cart > ul').load('index.php?option=com_mijoshop&route=common/cart/info&format=raw&tmpl=component ul li');
}
}
});
},
The second file is category.tpl code (which I presume when successfully changed can be altered in other areas):
<div class="button-group">
<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
</div>
Anyone with a solution for this it would be appreciated! I will post back if I get any luck myself but I'm low on coffee after a long head scratch!

Thank you Xyph3r on Opencart forums, your old post re version 1.5 gave me clues to an alternative that works great for Opencart version 2! Link to my clues: http://forum.opencart.com/viewtopic.php?f=20&t=99990
For others, this is what I did, and it can be adapted into a vqmod or ocmod so updates don't overwrite this but here are the basics:
Category.tpl:
Find the line:
<div class="button-group">
<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
Change this to:
<input type="text" value="1" size="2" class="item-<?php echo $product['product_id']; ?>" />
<div class="button-group">
<button type="button" value="<?php echo $button_cart; ?>" onclick="addQtyToCart('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
At the bottom of the file, add the following lines before the echo footer so the end of the file looks like this:
<script type="text/javascript"><!--
function addQtyToCart(product_id) {
var qty = $('.item-' + product_id).val();
if ((parseFloat(qty) != parseInt(qty)) || isNaN(qty)) {
qty = 1;
}
cart.add(product_id, qty);
}
//--></script>
<?php echo $footer; ?>
Hope this helps others. Note this only puts the quantity field above the existing buttons add to cart, wish list and compare, it won't look pretty so that's all down to you and your style (theme)!