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.
Related
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)
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
<?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.
I have a php page, a html button on it and there I should call a JS function with a php variable. And I get the error
the variable is not defined
Here is the code:
<body>
<form class="form">
<?php
if(file_exists('megjelenitendo.txt')){
$mappak=array();
$mappakdb=0;
$megjelenitendo = fopen("megjelenitendo.txt", "r") or die("Unable to open file!");
while(!feof($megjelenitendo)) {
$mappak[$mappakdb]=fgets($megjelenitendo) ;
$mappakdb++;
}
fclose($megjelenitendo);
$j=0;
foreach(glob('*') as $filename){
for($i=0; $i<$mappakdb;++$i){
//echo $filename."==".$mappak[$i];echo "<br>";
if(strtoupper($filename)==strtoupper(trim($mappak[$i]))){
//echo '<button type="submit" id='.$i.' class="button" formaction='.$filename.' />'.$filename;//substr($filename, 3,strlen($filename));
echo '<button type="button" id='.$i.' class="button" OnClick=mappanyitas('.trim($mappak[$i]).')>'.trim($filename).'</button>';
echo '<br>';
}
else{}
}
}}
else{
echo "A mappa elemei:<br>";
}
?>
</form>
<script type="text/javascript">
function mappanyitas(filename){
alert(filename);
}
</script>
</body>
You can call javascript function like this :
<?php
echo "<script>functionName();</script>";
?>
But function should be defined already.
The way to get PHP variables to javascript that I tend to use is just set the variable :)
<script type="text/javascript">
var fromPHP = '<?= $phpVariable; ?>';
</script>
Ti's as simple as that.
echo '<button type="button" id='.$i.' class="button" OnClick=mappanyitas("'.trim($mappak[$i]).'")>'.trim($filename).'</button>';
try this line
echo '<button type="button" id='.$i.' class="button" onclick="mappanyitas('.trim($mappak[$i]).')">'.trim($filename).'</button>'
Let me know if this solved your problem!
P.S.
Check the rendered page's HTML and check the button's code, to check if the variable's value was successfully injected into the code
These buttons are echo out from the database,
When the user clicks onto the button, the user will get to see a pop out before submitting it.
This is my code,
$con = getDbConnect();
$day = date("l");
if (mysqli_connect_errno($con)) {
"Failed to connect to MySQL: " . mysqli_connect_error();
} else {
$result = mysqli_query($con, "SELECT * FROM timetableschedule WHERE day='" . $day . "'");
while ($schedule = mysqli_fetch_array($result)) {
?>
<div class="col-md-3">
<button class="btn btn-warning" data-toggle="modal" data-target="#myModal" schedule="
<?php
echo "<br/>";
echo $schedule['academicInstitution'] . "<br />";
echo $schedule['startTime'] . "-" . $schedule['endTime'] . "hrs<br />";
echo "<br/>";
?>">
<?php
echo "<br/>";
echo $schedule['academicInstitution'] . "<br />";
echo $schedule['startTime'] . "-" . $schedule['endTime'] . "hrs<br />";
echo "<br/>";
?>
</button>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Insert Today's Activity</h4>
</div>
<div class="modal-body">
<p class="activity"></p>
<p>Click on the submit button if the above infomation is correct.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary btn-ok">Submit</a>
</div>
</div>
</div>
</div>
<script>
$('#myModal').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('schedule', $(e.relatedTarget).attr('schedule'));
$('.activity').html('You have selected: <strong>' + $(this).find('.btn-ok').attr('schedule') + '</strong>');
});
</script>
<?php
}
mysqli_close($con);
}
?>
</div>
Once the user click onto the submit button, the "academicInstitution" and "duration" will be entered into a database called, "myRecord".But I do not know how to connect the submit button to the database.
If you need to stay on the same page, make an ajax post call to a server side php script: http://api.jquery.com/jquery.post/
This way you will be able to execute the query you want on the server
If you can accept to reload the page, you may simply use an html form
This question may be useful for you: jQuery Ajax POST example with PHP
Note that you don't necessarily need the form element if you choose the ajax post approach