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)
Related
I am using JsTree to create a tree structure to display folder hierarchical order.
What I want to do is, when the user selects a node and move button is clicked, a form will be submitted.
<?php
echo $this->Form->create("MediaDirectory", ['type' => 'post', 'class' => 'form-horizontal','autocomplete' => "off",'novalidate' => "novalidate"]);
?>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-4 col-form-label">Testing</label>
<div class="col-8">
<?php
$folderData = $hah;
$folders_arr = array();
foreach($folderData as $row)
{
$parentid = $row['MediaDirectory']['parent_id'];
if($parentid == null) $parentid = "#";
$folders_arr[] = array(
"id" => $row['MediaDirectory']['id'],
"parent" => $parentid,
"text" => $row['MediaDirectory']['name'],
);
}
?>
<div id="folder_jstree"></div>
<textarea id='txt_folderjsondata' hidden><?= json_encode($folders_arr) ?></textarea>
</div>
</div>
</div>
</div>
<button type="button" name="cancel" class="btn btn-secondary btn-rounded btn-bordered waves-effect" onclick="window.history.back();">Cancel</button>
<button type="submit" name="submit" class="btn btn-primary btn-rounded waves-effect waves-light">Move</button>
<?php echo $this->Form->end(); ?>
Script
<script type="text/javascript">
$(document).ready(function(){
var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());
$('#folder_jstree').jstree({ 'core' : {
'data' : folder_jsondata,
'multiple': false
} });
});
</script>
I don't have any experience expereience with Javascript and JsTree. Can someone help me.
I am getting "Uncaught ReferenceError is not defined" error when I am going to call the updateinventory() function from the appended update button. I don't know what is the problem.
<script type="text/javascript">
$("i").click(function() {
var id = this.id;
var product_code = $('#pr_code'+id).val();
var user_id = $('#user_id'+id).val();
var qty = $('#qtyspan_'+id).text();
$('#qtyspan_'+id).css('display', 'none');
$('#'+id).css('display', 'none');
$('#simplyupdate'+id).append('<div id="updateinventorydiv'+id+'" class="input-group" style="width: 227px;"><div class="form-group"><input type="hidden" id="pr_coding" value="'+id+'"/><input value="'+qty+'" type="text" class="form-control input-sm"></div><span class="input-group-btn"><button onclick="updateinventory('+product_code+','+user_id+','+id+')" class="btn btn-success btn-sm" type="button">Update</button><button id="canceldiv_'+id+'" class="btn btn-danger btn-sm" type="button">cancel</button></span></div>');
});
function updateinventory(product_code,user_id,outlet_id) {
alert(product_code);
}
</script>
PHP file: This is the PHP code where I have created 3 hidden inputs to get the ids in JavaScript.
for ($t = 0; $t < count($outletData); ++$t) {
$outlet_id = $outletData[$t]->id;
$outlet_name = $outletData[$t]->name;
?>
<div class="row" style="padding-top: 5px; padding-bottom: 5px;">
<div class="col-md-3">
<?php echo $outlet_name; ?>
</div>
<div class="col-md-9" id="simplyupdate<?php echo $t; ?>">
<?php
$invQty = 0;
$invQtyData = $this->Constant_model->getDataTwoColumn('inventory', 'product_code', $code, 'outlet_id', $outlet_id);
if (count($invQtyData) > 0) {
$invQty = $invQtyData[0]->qty;
}
?>
<span id="qtyspan_<?php echo $t; ?>"><?php echo $invQty; ?></span>
<input type="hidden" id="pr_code<?php echo $t; ?>" value="<?php echo $code; ?>" />
<input type="hidden" id="user_id<?php echo $t; ?>" value="<?php echo $user_role; ?>" />
<input type="hidden" id="outlet_id<?php echo $t; ?>" value="<?php echo $outlet_id; ?>" />
<i class="fa fa-pencil" id="<?php echo $t; ?>"></i>
</div>
</div>
<?php
}
?>
The issue is the updateinventory arguments not beeing quoted.
It should be:
<button onclick="updateinventory(\''+product_code+'\',\''+user_id+'\',\''+id+'\')" class="btn btn-success btn-sm" type="button">Update</button>
Notice the backslashes \ to escape them... Pretty complicated. So beyond that, here is a better way to achieve the same. You use jQuery... So do not use the inline onclick=....
Give your button a class... Say update. Then use delegation on it, since it is appended (dynamically created).
About the product_code, user_id and id, first store it in some data attributes and on button click, retreive the values using .data().
I made the changes below... Untested ;) Try it.
$("i").click(function() {
var id = this.id;
var product_code = $('#pr_code'+id).val();
var user_id = $('#user_id'+id).val();
var qty = $('#qtyspan_'+id).text();
$('#qtyspan_'+id).css('display', 'none');
$('#'+id).css('display', 'none');
$('#simplyupdate'+id).append('<div id="updateinventorydiv'+id+'" class="input-group" style="width: 227px;"><div class="form-group"><input type="hidden" id="pr_coding" value="'+id+'"/><input value="'+qty+'" type="text" class="form-control input-sm"></div><span class="input-group-btn"><button data-productcode="'+product_code+'" data-userid="'+user_id+'" data-id="'+id+'" class="btn btn-success btn-sm update" type="button">Update</button><button id="canceldiv_'+id+'" class="btn btn-danger btn-sm" type="button">cancel</button></span></div>');
});
$(document).on("click",".update",function(){
var product_code = $(this).data("productcode");
console.log(product_code);
});
This is my code inside a form, displaying the period and year to be selected.
As you can see I have a button there at the button (not a submit button) calling a modal. So what i need its to pass the value of period and year inputted in the modal. I have not wrote down the entire code inside the form just the important scripts needed to emphasize my question.
<form name="myform" id="myform" action="index.php" method="post">
<input></input> //input of period
<input></input> //input of year
<button type="button" class="btn btn-info btn-large" data-toggle="modal" data-target="#myModal" id="range">Assign Payout Schedule</button>
</form>
Here is my Modal. So in here, I have a code that sets the period and year that was passed from the inputted value from the form above, but it doesn't get the value having the post method,I really have a doubt on this because I didn't use submit button and the reason I didn't use the ajax method is because inside the modal I cannot get the value from the database to be displayed in the modal, that was the first problem arise that's why I change my code into this, Now using the function getPeriod i can get the values using document.getElementByid but how can I pass those variables in a php variable so i can set those variable in my setters? I've been stuck on this so it is really a big help if anyone can find a solution on this case. Or if there's another way to do it just tell me.
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<script type="text/javascript">
//getPeriod();
function getPeriod(){
var period = document.getElementById("quarter").value;
var year = document.getElementById("year").value;
}
<?php
$Payroll_Summary = new Payroll_Summary();
$Payroll_Summary->setPeriodCovered(period]);
$Payroll_Summary->setYear(year);
$data = $Payroll_Summary->getStartEndDateRange();
foreach($data as $dataList){
$var1 = $dataList['start_date_range'];
$var2 = $dataList['end_date_range'];
$sdr = date('Y/m/d', strtotime($var1));
$edr = date('Y/m/d', strtotime($var2));} ?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title">Edit Payroll Summary</h4>
</div>
<div class="modal-body">
<p> Start Date - End Date (Range):<?php echo $sdr.'-'.$edr; ?> </p>
Start Date <input class="input-large" type="date" name="start_date" id="start_date" value="<?php echo $_POST['start_date']; ?>" onchange="checkStartDate('<?php echo $var1;?>','<?php echo $var2;?>');"><br />
End Date <input class="input-large" type="date" name="end_date" id="end_date" value="<?php echo $_POST['end_date']; ?>" onchange="ajaxTxnList();"><br />
FO Remarks <input class="input-large" type="text" name="fo_remarks" id="fo_remarks" value="<?php echo $_POST['fo_remarks'];?>" onchange="ajaxTxnList();" ><br />
</div>
<div class="modal-footer">
<?php if($_SESSION[ewSessionUserLevel] == "5" || $_SESSION[ewSessionUserLevel] == "-1"){ ?>
<button type="button" class="btn btn-default" onclick="generatePayrollSummary('2','1','1','1')" data-dismiss="modal">Update</button>
<?php }else{?>
<button type="button" class="btn btn-default" onclick="generatePayrollSummary('2','1','1','2')" data-dismiss="modal">Update</button>
<?php }?>
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
</div>
<script type="text/javascript">
function checkStartDate(sdr,edr){
var start_date = document.getElementById("start_date").value;
var start_date_range = sdr;
var end_date_range = edr;
if(start_date < start_date_range || start_date > end_date_range){
//document.getElementById('warning1').innerHTML = "Invalid Start Date! Should be between Start-End Date Range.";
alert("Invalid Start Date! Must be between start-end date range.");
}
}
</script>
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.
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