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)

How to get particular Id by using getElementById

This is my code
<?php
if(isset($_POST['taskBtnn'])){
$responseCode =200;
if($responseCode == 200){?>
<script>
function uniqueId(id){
var e = document.getElementById(id);
e.innerHTML="approved";
}
</script>
<?php }?>
This is my button
<button type="submit" name="taskBtnn" id="<?php echo $btn1; ?>" value="<?php echo $catData['id'];?>" class="btn btn-info btn-sm togglebtn" onclick="uniqueId(<?php echo $btn1; ?>)">Active</button>
First, I applied that if a button is click then it shows loading time after that its innerHTML change to approved.
Here is my code for loading time
<script>
$(document).ready(function(){
$(document).on("click", ".btn", function(){
$(this).html("<i class='fa fa-spinner fa-spin'></i> <i class='fa fa-spinner fa-spin'></i><i class='fa fa-spinner fa-spin'></i>");
});
});
</script>
Now, I am trying to change the button innerHTML when it gets responseCode 200, but my code is not working..
Any help will be highly appreciated.

Pass an object from php to javascript

I have a little problem, I need to give an object at JS when clicked on a button, but I don't know how to do it.
Here is my code php
echo '<script>';
echo 'var monObjet = "'.json_encode($product).'";';
echo '<script>';
<button type="button" onclick="ShowModal(monObjet)" class="btn btn-info btn-lg" data-toggle="modal" >Open Modal</button>';
and this is my code JS
function ShowModal(monObjet){
var monObjet = monObjet;
alert(monObjet);
$('#myModal').appendTo("body").modal("show");
// $('#NomProduit').text(monObjet);
};
</script>
Thanks in advance.

Try this:
echo '<script>';
echo 'var monObjet = '.json_encode($product).';';
echo '</script>';
<button type="button" onclick="ShowModal(monObjet)" class="btn btn-info btn-lg" data-toggle="modal" >Open Modal</button>';
Edit:
You had quotes around the json_encode() part, so JS thought it was a string, not an object.

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)!