I generated a random number called listingid in function createpost and pass it as an input to function showproductmodal as shown below
function creatpost(){
var index;
splitinput.forEach((num, index) => {
var listingid = (Date.now().toString(36) + Math.random().toString(36).substr(2, 5)).toUpperCase()
console.log(index)
return CatalogueDB.ref( splitinput[index]).once('value').then(function(snapshot) {
var resultcard = `
<form id="myform${index}">
<tr class="tr-shadow">
<td>
<button type="button" class="btn btn-primary btn-md" onclick="postitem(${key},${index},${listingid});">Submit</button>
</td>
</tr>
</form>
`
container.innerHTML += resultcard;
})
.catch(function(error) {
container.innerHTML += "";
var errorcard = `
<form id="myform${index}">
<tr class="tr-shadow">
<td style="width: 90px;">
<div id="ItemID${index}">${splitinput[index]}
</div>
<div>
<br>
<button type="button" class="btn btn-secondary mb-1 btn-sm" data-toggle="modal" data-target="#productModal" onclick="showproductmodal(${splitinput[index]},${index},${listingid})">
Add Photos
</button>
</div>
</td>
<td>
<button type="button" class="btn btn-primary btn-md" onclick="postitem(${splitinput[index]},${index},${listingid})">Submit</button>
</td>
</tr>
</form>
`
container.innerHTML += errorcard;
})
});
})
function showproductmodal(id, index, listingid) {
console.log(id,index)
}
the problem now is whenever the button is clicked which triggers showproductmodal it says lisitingid is undefined
this is the console error output
index.html:1 Uncaught ReferenceError: JJLQ23008PJX0 is not defined
at HTMLButtonElement.onclick (index.html:1)
this is the sample parameters passed to the showproductmodal retrieved from the console
showproductmodal(42,0,JJLQ23008PJX0)
why is the listingid causing error even when it has been passed to the function? How do I correct this so that I can retrieve listingid in showproductmodal?
If the listingid is not a variable with the name JJLQ23008PJX0 it will throw an error.
Generally one need to make such id/value be treated as a string, and enclose it in quotes, likes this, where I added single quote's '
onclick="postitem(${splitinput[index]},${index},'${listingid}')"
Some value types works though, as numbers, the boolean keywords true/false, etc.,
You need to quote the random string:
<button type="button" class="btn btn-primary btn-md" onclick="postitem(${key},${index},'${listingid}');">Submit</button>
Related
In a datatable how to pass a data value to a function here i am using two variables (newId , orderId ) and both are showing value in console but when i pass the value to a button on click function(renderViewDetails) it is saying variable(newId or orderId) it is undefined so what should i do to pass the value to a function on button click?
{
data: null,
orderable: false,
className: 'text-center',
render: function (data, type, row, ) {
var newId = data.id;
console.log(221, newId);
let orderId = `${data.id}`;
console.log(223, orderId);
let selDropdown = `<div class= flex-button> <div>
<a href="" id="" class="" data-toggle="modal" data-target="#view-details-modal">
<button id="btnViewConcepts" class="btn-link" type=""button" onclick="renderViewDetails(orderId)">View Details</button>
</a>
</div> <div id="setOption">`
}
Although you are doing the right thing by using template literal (backtick) for your HTML string, when you pass your variable you are passing a string of the variable name instead of its value. Instead, enclose the variable with curly braces with a $ sign in front.
let selDropdown = `<div class= flex-button> <div>
<a href="" id="" class="" data-toggle="modal" data-target="#view-details-modal">
<button id="btnViewConcepts" class="btn-link" type=""button" onclick="renderViewDetails(${orderId})">View Details</button>
</a>
</div> <div id="setOption">`
let selDropdown = `<div class= flex-button> <div>
<a href="" id="" class="" data-toggle="modal" data-target="#view-details-modal">
<button id="btnViewConcepts" class="btn-link" type=""button" onclick=${renderViewDetails(orderId)}>View Details</button>
</a>
</div> <div id="setOption">`
I am currently developing an application that allows users to send emails with one click of a button, whether its a singular email to an individual or bulk too all contacts.
I am stuck on how to link AJAX to the singular send button and PHPMailer file.
This is where the button is located as 'Send Single':
<script type="text/ng-template" id="display">
<td>{{data.customer_name}}</td>
<td>{{data.customer_email}}</td>
<td>
<input type="checkbox" name="single_select" class="single_select" />
</td>
<td>
<button type="button" class="btn btn-info btn-sm email_button" ng-click="sendData(data.customer_name)">Send Single</button>
</td>
<td>
<button type="button" class="btn btn-primary btn-sm" ng-click="showEdit(data)">Edit</button>
<button type="button" class="btn btn-danger btn-sm" ng-click="deleteData(data.id)">Delete</button>
</td>
</script>
<script type="text/ng-template" id="edit">
<td><input type="text" ng-model="formData.customer_name" class="form-control" /></td>
<td><input type="text" ng-model="formData.customer_email" class="form-control" /></td>
<td></td>
<td></td>
<td>
<input type="hidden" ng-model="formData.data.id" />
<button type="button" class="btn btn-info btn-sm" ng-click="editData()">Save</button>
<button type="button" class="btn btn-default btn-sm" ng-click="reset()">Cancel</button>
</td>
</script>
I have tried editing what the delete button is doing to allow this to send, but failed.
$scope.sendData = function sendData(){
if(confirm("Are you sure you want to send?"))
{
$http({
method:"POST",
url:"send_mail.php",
}).success(function(data){
$scope.success = true;
$scope.successMessage = data.message;
$scope.fetchData();
});
}
}
This is how the application currently looks, link below:
Image of current application
EDIT
The HTML code for the email is sat in the PHPMailer file, I do not need it to be processed through a form.
ORIGINAL WORKING VERSION
PHP
<?php
$count = 0;
foreach($result as $row)
{
$count++;
echo '
<tr id="index_table">
<td>'.$row["customer_name"].'</td>
<td>'.$row["customer_email"].'</td>
<td>
<input type="checkbox" name="single_select" class="single_select" data-email="'.$row["customer_email"].'" data-name="'.$row["customer_name"].'" />
</td>
<td><button type="button" name="email_button" class="btn btn-info btn-xs email_button" id="'.$count.'" data-email="'.$row["customer_email"].'" data-name="'.$row["customer_name"].'" data-action="single">Send Single</button></td>
</td>
<td></td>
<td><button type="button" name="delete" id="delete" data-row="row"+count+"" class="btn btn-danger btn-xs delete">DELETE</button></td>
</tr>
';
}
?>
AJAX (didnt like code block)
$.ajax({
url:"send_mail.php",
method:"POST",
data:{email_data:email_data},
beforeSend:function(){
$('#'+id).html('Sending...');
$('#'+id).addClass('btn-danger');
},
success:function(data){
if(data = 'ok')
{
$('#'+id).text('Success');
$('#'+id).removeClass('btn-danger');
$('#'+id).removeClass('btn-info');
$('#'+id).addClass('btn-success');
}
else
{
$('#'+id).text(data);
}
$('#'+id).attr('disabled', false);
}
});
});
});
Thanks everyone :)
Here You Send Parameter and in function you not received
<button type="button" class="btn btn-info btn-sm email_button" ng-click="sendData(data.customer_name)">Send Single</button>
the workaround
$scope.sendData = function sendData(para){
In Angualr Js you should pass the parameter to the PHP script.
I guess you are not passing the value to PHP.
var Indata = {param:'val1',.....}
$scope.sendData = function sendData(){
if(confirm("Are you sure you want to send?"))
{
$http({
method:"POST",
url:"send_mail.php",
params: Indata
}).success(function(data){
$scope.success = true;
$scope.successMessage = data.message;
$scope.fetchData();
});
}
}
Try this method,
if you face still issue i think it's better if you share your PHP code here.....
I have table column like this which have value that comes from my reducer. the same column has increment/decrement button. so when use clicks on button I have to get value from that <td> and trigger my action. I am searching here but its for input text which have event onChange. please anyone let me know how to do this?
Here is my <td> column:
<td>
{this.props.prog}%
<button type="button" className="btn btn-danger">
<span className="glyphicon glyphicon-arrow-up" />
</button>
<button type="button" className="btn btn-danger">
<span className="glyphicon glyphicon-arrow-down" />
</button>
</td>
EDIT 1:
I have tried something basically my onClick triggered properly but I am not able to pass the value
<td>
<button type="button" className="btn btn-danger" onClick={this.props.resetGrowth}>Reset</button>
{this.props.prog}%
<button type="button" className="btn btn-danger" onClick = {(event) => this.props.updated(this.props.prog) }>
<span className="glyphicon glyphicon-arrow-up"/>
</button>
<button type="button" className="btn btn-danger">
<span className="glyphicon glyphicon-arrow-down"/>
</button>
</td>
it will pass to it this component
<Table updated={value => this.props.udated(value)}/>
this is my container it triggers value
<VolumeComponent
udated = {(value) => updated(value)}/>
const mapDispatchToProps= (dispatch) => (
bindActionCreators({updated},dispatch)
)
Since you are using a reducer I am guessing you are using redux. If {this.props.prog}is your value, you could use this in the OnClick function you pass to the increase/ decrease buttons. For example:
handleDecrease(){
const newValue = this.props.prog + 1;
this.props.updateValue(newValue)
}
handleIncrease(){
const newValue = this.props.prog - 1;
this.props.updateValue(newValue)
}
render(){
return (
...
<button onClick={this.handleIncrease}/>
);
}
I need to add rows and inputs dynamically, in addition to filling each entry in these fields, but at the moment of wanting to fill the input I get a error, with this add the rows:
$scope.detalleTransCover = {
details: []
};
$scope.addDetail = function () {
$scope.detalleTransCover.details.push('');
};
$scope.submitTransactionCobver = function () {
angular.forEach($scope.detalleTransCover, function(obj)
{
console.log(obj.cuenta);
});
};
now in the html:
<tr ng-repeat="detail in detalleTransCover.details">
<td>
<input type="text" class="form-control" ng-model="detail.cuenta">
</td>
<td>
<input type="text" class="form-control" ng-model="detail.debeDolar">
</td>
<td>
<input type="text" class="form-control" ng-model="detail.haberDolar">
</td>
</tr>
<button ng-click="addDetail()" class="btn btn-block btn-primary">
Agregar fila
</button>
<button ng-click="submitTransactionCobver()" class="btn btn-block btn-primary">
Agregar
</button>
on the html when I try to fill the input example "cuenta" haver error:
TypeError: Cannot create property 'cuenta' on string ''
When you push a new input to your array, you need to push an object not a string:
// wrong
$scope.addDetail = function () {
$scope.detalleTransCover.details.push('');
};
// right
$scope.addDetail = function () {
$scope.detalleTransCover.details.push({})
});
Strings can't have properties the same way objects can.
I'm banging my head against the wall here. I'm using ng-repeat to populate a table. Inside each row i have 2 buttons, one for updating the row content and for uploading files. The upload button opens a bootstrap modal window, where the user selects the files and clicks on submit.
The submit button uses ng-click to run a function which uses $index as parameter. But the $index value is always the same no matter which row is selected.
The thing I don't understand is that I use the exact same syntax (although outside of a modal window) on my update button, which works just fine.
HTML:
<tr ng-repeat="item in items | filter:search " ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">
<td>{{$index}}</td>
<td ng-hide="idHidden" ng-bind="item.Id"></td>
<td ng-hide="titleHidden">
<span data-ng-hide="editMode">{{item.Title}}</span>
<input type="text" data-ng-show="editMode" data-ng-model="item.Title" data-ng-required />
<td>
<button type="button" class="btn btn-primary uploadBtn" data-ng-show="editMode" data-toggle="modal" data-target="#uploadModal">Upload file <i class="fa fa-cloud-upload"></i></button>
<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="uploadModalLabel">Options</h3>
</div>
<div class="modal-body">
<h4>Upload Documents</h4>
<form>
<div class="form-group">
<select data-ng-model="type" class="form-control" id="fileTypeSelect">
<option value="Policy">Policy</option>
<option value="SOP">SOP</option>
</select>
<br>
<div class="input-group"> <span class="input-group-btn">
<input type="file" id="file">
</span>
</div>
<br>
<button type="button" class="btn btn-default" data-ng-click="uploadAttachment($index, type)">Upload</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<button type="button" data-ng-hide="editMode" data-ng-click="editMode = true;" class="btn btn-default pull-right">Edit <i class="fa fa-pencil-square-o"></i></button>
<button type="button" data-ng-show="editMode" data-ng-click="editMode = false; updateItem($index)" class="btn btn-default">Save</button>
<button type="button" data-ng-show="editMode" data-ng-click="editMode = false; cancel()" class="btn btn-default">Cancel</button>
</td>`
JS:
$scope.uploadAttachment = function executeUploadAttachment(index, type) {
var listname = "Risk Register";
var id = $scope.items[index].Id;
console.log(indexID);
readFile("uploadControlId").done(function(buffer, fileName) {
uploadAttachment(type, id, listname, fileName, buffer).done(function() {
alert("success");
}).fail(function() {
alert("error in uploading attachment");
})
}).fail(function(err) {
alert("error in reading file content");
});
}
So the function uploadAttachment($index, type) which is triggered by ng-click doesn't pass the right index number. It always passes the same, no matter what row it is clicked in.
I have omitted some of the code that is irrelevant. If needed i can provide the whole thing.
Any suggestions to what I am missing?
Edit:
I have tried to implement DonJuwe suggestions.
I have added this inside my controller:
$scope.openModal = function(index) {
var modalInstance = $modal.open({
templateUrl: 'www.test.xxx/App/uploadModal.html',
controller: 'riskListCtrl',
resolve: {
index: function() {
return index;
}
}
});
};
This is my modal template:
<div class="modal-header">
<h3 class="modal-title" id="uploadModalLabel">Options</h3>
</div>
<div class="modal-body">
<h4>Upload Documents</h4>
<form>
<div class="form-group">
<select data-ng-model="type" class="form-control" id="fileTypeSelect">
<option value="Policy">Policy</option>
<option value="SOP">SOP</option>
</select>
<br>
<div class="input-group"> <span class="input-group-btn">
<input type="file" id="file">
</span>
</div>
<br>
<button type="button" class="btn btn-default" data-ng-click="uploadAttachment($index, type)">Upload</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
And finally my function which resides inside RiskListCtrl (the only controller i use):
$scope.uploadAttachment = function executeUploadAttachment(index, type) {
var listname = "Risk Register";
var id = $scope.items[index].Id;
console.log(indexID);
readFile("uploadControlId").done(function(buffer, fileName) {
uploadAttachment(type, id, listname, fileName, buffer).done(function() {
alert("success");
}).fail(function() {
alert("error in uploading attachment");
})
}).fail(function(err) {
alert("error in reading file content");
});
}
It seems that $scope.items[index].Id is empty. Error: Cannot read property 'Id' of undefined
The modal window has its own scope. That means you need to resolve data you want to pass into the modal's scope. To do so, use resolve within the modals open(options) method.
Before I will give you an example, I want to suggest having only one modal for all your table items. This will let you keep a single template where you can easily use id (now, you create a template for each of your table items which is not valid). Just call a controller function and pass your $index:
<button type="button" class="btn btn-primary uploadBtn" data-ng-show="editMode" ng-click="openModal($index)">Upload file <i class="fa fa-cloud-upload"></i></button>
In your controller, create the modal instance and refer to the template:
$scope.openModal = function(index) {
var modalInstance = $modal.open({
templateUrl: 'myPath/myTemplate.html',
controller: 'MyModalCtrl',
resolve: {
index: function() {
return index;
}
}
});
};
Now you can access index in your MyModalCtrl's scope by injecting index:
angular.module('myModule', []).controller('MyModalCtrl', function($scope, index) {
$scope.index = index;
});
Since, you are getting the index value outside model then you can also use ng-click and then call a function in your controller and store the index value in a temporary variable and then when you are using submit button then just take make another variable and assign the value of temporary variable to your variable. for example:
<button type="button" data-ng-show="editMode" data-ng-click="editMode = false; updateItem($index)" class="btn btn-default">Save</button>
and then make a function in your controller
$scope.updateItem = functon(index)
{
$scope.tempVar = index;
}
now use the value of tempVar in you function
$scope.uploadAttachment = function executeUploadAttachment(index, type) {
var index = tempVar; //assign the value of tempvar to index
var listname = "Risk Register";
var id = $scope.items[index].Id;
console.log(indexID);
readFile("uploadControlId").done(function(buffer, fileName) {
uploadAttachment(type, id, listname, fileName, buffer).done(function() {
alert("success");
}).fail(function() {
alert("error in uploading attachment");
})
}).fail(function(err) {
alert("error in reading file content");
});
}