Hello i would like to export data from my datatable based on user filtered data here for example :
I have done export excel for all row but now i'm trying to export data based on filtered, here is my filtered function() in index.blade php:
$(".filterButton").on('click', function(){
tableMediaOrder.column(8).search($('.input-advertiser-filter').val()).draw();
tableMediaOrder.column(7).search($('.input-agency-filter').val()).draw();
tableMediaOrder.column(9).search($('.input-brand-filter').val()).draw();
});
i have tried to use formated Datatables example from Datatable example : Format Output Data, but i don't know how to put the export button and make it as a custom <a href=""> for the Excel export in image above, maybe someone can provide an example how to make it? thank you!.
EDIT :
here what is my input in index.blade.php :
<div class="col">
<button id="filterButton" class="btn btn-primary filterButton"><i class="fa fa-filter"></i> Filter</button>
<div class="dropdown d-inline">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-file-excel-o"></i> Export
</button>
<!-- dropdown-menu -->
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="export-choose">
<a class="dropdown-item export-link" id="export-filtered">Excel</a>
<a class="dropdown-item export-link" href="{{ route('media-order.export') }}" id="exportRaw">Excel Raw</a>
</div>
<!-- end dropdown-menu -->
<button class="btn btn-primary float-right" data-toggle="modal" data-target="#addMediaOrderModal" data-backdrop="static" data-keyboard="false" class="btn btn-primary">
<i class="fa fa-plus-square mr-1"></i> Add Order
</button>
</div><!-- dropdown -->
</div>
So far i've been trying to put the <a href="" id="export-filtered"> to act as an Export button, add it as an onClick="exportFiltered" function and throw it into the javascript but it doesn't work, here is my javascript :
$(".exportFiltered").on('click', function(e) {
$('.hiddenbuttons button').eq(0).click();
});
but sadly it doesn't work, and it just make the Excel export become blank
UPDATE : Data Table
here is my datatable :
'use strict';
var addMediaOrderSubmitButton = Ladda('#addMediaOrderSubmitButton');
var editMediaOrderSubmitButton = Ladda('#editMediaOrderSubmitButton');
var tableMediaOrder = dt('#dt-media-order','media_order',{
// dom: '<"hiddenbuttons"B>rtip',
processing: true,
serverside: true,
iDisplayLength: 100,
bFilter: true,
searchable: true,
exportOptions: {
rows: 'visible'
},
ajax: {
url: "{{ route('media-order.index') }}?dt=1",
data: function (d){
d.filter_order = $('#input-order-filter').val();
d.filter_agency = $('#input-agency-filter').val();
d.filter_advertiser = $('#input-advertiser-filter').val();
d.filter_brand = $('#input-brand-filter').val();
// d.filter_start = $('#input-start-date').val();
// d.filter_end = $('#input-end-date').val();
//d.filterButton = $('#filterButton').val();
},
},
columns: [
{
data: 'action',
name: 'action',
orderable: false,
sortable: false,
className: 'text-center'},
{data: 'nomor', name: 'nomor'},
{data: 'nomor_reference', name: 'nomor_reference'},
{data: 'periode_start',
name: 'periode_start',
render: function(data){
var date = new Date(data);
var month = date.getMonth() + 1;
return (month.toString().length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
}
},
{
searchable: true,
data: 'periode_end',
name: 'periode_end',
render: function(date){
var date = new Date(date);
var month = date.getMonth() + 1;
return (month.toString().length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
}
},
{
searchable: true,
data: 'category_id',
name: 'category_id',
render: function(data, type, row) {
switch (data) {
case '1':
return 'New Order';
break;
case '2':
return 'Additional Order';
break;
case '3':
return 'Cancel Order';
break;
case '4':
return 'Paid';
break;
case '5':
return 'Bonus';
break;
default:
return 'Null';
break;
}
}
},
{
searchable: true,
data: 'type_id',
name: 'type_id',
render: function(data, type, row) {
switch (data) {
case '1':
return 'Reguler';
break;
case '2':
return 'Reguler PIB';
break;
case '3':
return 'CPRP';
break;
case '4':
return 'Package';
break;
case '5':
return 'Sponsor';
break;
case '6':
return 'Blocking';
break;
default:
return 'Null';
break;
}
}
},
{
searchable: true,
data: 'agency_name',
name: 'agency_name'
},
{
searchable: true,
data: 'advertiser_name',
name: 'advertiser_name'
},
{
searchable: true,
data: 'brand_name',
name: 'brand_name'
},
{
searchable: true,
data: 'version_code',
name: 'version_code'
},
{
data: 'gross_value',
name: 'gross_value' ,
render: $.fn.dataTable.render.number( ',', '.', 2, 'Rp','' )
},
{
data: 'nett_budget',
name: 'nett_budget',
render: $.fn.dataTable.render.number( ',', '.', 2, 'Rp','' )
},
{
data: 'nett_cashback',
name: 'nett_cashback',
render: $.fn.dataTable.render.number( ',', '.', 2, 'Rp','' )
},
{
data: 'nett_bundling',
name: 'nett_bundling',
render: $.fn.dataTable.render.number( ',', '.', 2, 'Rp','' )
},
{data: 'spot', name: 'spot' },
{
searchable: true,
data: 'accountexecutive_name',
name: 'accountexecutive_name'
},
{
searchable: true,
data: 'userto_name',
name: 'userto_name'
},
{
searchable: true,
data: 'group_id',
name: 'group_id'
},
{data: 'notes', name: 'notes' },
{
searchable: true,
data: 'attachment_name',
name: 'attachment_name'
}
],
buttons: [
{ // this exports only filtered data
extend: 'excelHtml5',
exportOptions: {
modifier: { search: 'applied' }
}
},
{ // this exports all data regardless of filtering
extend: 'excelHtml5',
exportOptions: {
modifier: { search: 'none' }
}
}
],
initComplete: function(setting, json){
$('.hiddenbuttons').css('display','none');
},
rowCallback: function( row, data, index) {
if (data.isdisabled == 1){
$(row).css('background-color', 'rgba(255, 0, 0, 0.2)');
}
}
});
UPDATE 2 :
it turns out i forgot to add the :
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
And also is there a way to customize the column since the "Action" column are also being exported like this :
But sadly the custom export <a href="" id="export-filtered"> is still not working, thanks again.
UPDATE 3 :
After searching and tinkering, i've finally found my solution which is using :
var buttons = new $.fn.dataTable.Buttons(tableMediaOrder, {
buttons: [
{
extend: 'excelHtml5',
// "dom": {
// "button": {
// "tag": "button",
// "className" : "exportFiltered",
// }
// },
exportOptions: {
// rows: '"visible'
columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
modifier: { search: 'applied' }
}
}
]
}).container().appendTo($('#exportFiltered'));
And finally able to use the :
as a external link to export the excel.
You can delegate a DataTables export button to another external (non-DataTables) element.
The following example uses two different Excel Export buttons - one for a full export of all data, regardless of any filtering which has been applied, and the other to export only the filtered-in data:
buttons: [
// see https://datatables.net/reference/type/selector-modifier
{ // this exports only filtered data
extend: 'excelHtml5',
exportOptions: {
modifier: { search: 'applied' }
}
},
{ // this exports all data regardless of filtering
extend: 'excelHtml5',
exportOptions: {
modifier: { search: 'none' }
}
}
]
Then, we hide these buttons using the following:
dom: '<"hiddenbuttons"B>rtip'
and:
initComplete: function(settings, json) {
$('.hiddenbuttons').css('display', 'none');
}
These two DataTables export buttons can now be invoked from elsewhere - for example, based on the change event of a select list.
Here is the select list:
<select name="export" id="export">
<option value="noexport">-- select --</option>
<option value="filtered">Excel Filtered Data</option>
<option value="alldata">Excel All Data</option>
</select>
And here is the related event listener:
$("#export").on('change', function(e) {
var mode = $("#export :selected").val();
if (mode === 'filtered') {
$('.hiddenbuttons button').eq(0).click();
} else if (mode === 'alldata') {
$('.hiddenbuttons button').eq(1).click();
}
});
For reference, here is the full approach, as a self-contained web page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
</head>
<body>
<div style="margin: 20px;">
<input type="text" id="name" placeholder="Enter name">
<input type="text" id="office" placeholder="Enter office">
<button id="filterButton" type="button">Filter</button>
<select name="export" id="export">
<option value="noexport">-- select --</option>
<option value="filtered">Excel Filtered Data</option>
<option value="alldata">Excel All Data</option>
</select>
<table id="example" class="display dataTable cell-border" style="width:100%">
</table>
</div>
<script>
var dataSet = [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Zurich",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
},
{
"id": "3",
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12",
"office": "San Francisco",
"extn": "1562"
},
{
"id": "4",
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012/03/29",
"office": "Edinburgh",
"extn": "6224"
},
{
"id": "5",
"name": "Airi Satou",
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008/11/28",
"office": "Tokyo",
"extn": "5407"
},
{
"id": "6",
"name": "Donna Snider",
"position": "Customer Support",
"salary": "$112,000",
"start_date": "2011/01/25",
"office": "New York",
"extn": "4226"
}
];
$(document).ready(function() {
var table = $('#example').DataTable( {
dom: '<"hiddenbuttons"B>rtip',
lengthMenu: [ [5, -1], [5, "All"] ],
data: dataSet,
columns: [
{ title: "ID", data: "id" },
{ title: "Name", data: "name" },
{ title: "Office", data: "office" },
{ title: "Position", data: "position" },
{ title: "Start date", data: "start_date" },
{ title: "Extn.", data: "extn" },
{ title: "Salary", data: "salary" }
],
buttons: [
// see https://datatables.net/reference/type/selector-modifier
{ // this exports only filtered data
extend: 'excelHtml5',
exportOptions: {
modifier: { search: 'applied' }
}
},
{ // this exports all data regardless of filtering
extend: 'excelHtml5',
exportOptions: {
modifier: { search: 'none' }
}
}
],
initComplete: function(settings, json) {
$('.hiddenbuttons').css('display', 'none');
}
} );
$("#filterButton").on('click', function() {
table.column(1).search($('#name').val()).draw();
table.column(2).search($('#office').val()).draw();
});
$("#export").on('change', function(e) {
var mode = $("#export :selected").val();
if (mode === 'filtered') {
$('.hiddenbuttons button').eq(0).click();
} else if (mode === 'alldata') {
$('.hiddenbuttons button').eq(1).click();
}
});
} );
</script>
</body>
</html>
Update
If you want to use a <a> link to generate an Excel export, then maybe this will help:
Let's assume we have a link like the one from your question:
Excel
To handle a click event for this, you can use the following:
$("#export-filtered").on('click', function(e) {
e.preventDefault();
$('.hiddenbuttons button').eq(0).click();
});
Note that the link's ID is export-filtered - therefore you need to refer to that in your JavaScript, using the # symbol (which is for an ID) - and not the . symbol (which is for a class name):
$("#export-filtered")
Then you need to prevent the default click action from being applied, because you do not want the click to cause you to navigate to another page. I recommend doing this even if you have href="".
That works for me, using my DataTables code.
In your question, you do not show how you changed your DataTables code - so this may still not work for you. If that is the case, then there must be other differences (which are not shown in the question) between my example and your overall solution.
I have spent whole day trying to figure this out. I want to update course recipes from my database (MongoDB) using my REST API call (Node.js with Express) by sumbiting input fields with new values of the recipe. I tried to show previous values by using input value="", but as I learned this makes it to be static. I tried to change it into dynamic accordingly to what I found online however none of tutorials I found would show what I am looking for. As you can see in code below I am trying to PUT new data that was previously set using setState(). Sadly I do not know how can I do it like this. Could you tell me if it is even possible and if so where can I learn to do it?
Here is code from React:
import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import Alert from "../elements/Alert";
import Axios from "axios";
export default function UpdateCourse() {
const id = window.location.href.split("?")[1];
const [dishName, setdishName] = useState("");
const [category, setcategory] = useState("");
const [author, setauthor] = useState("");
const [ingredients, setingredients] = useState([]);
const [cookingTime, setcookingTime] = useState("");
const [sourceUrl, setsourceUrl] = useState("");
const [imageUrl, setimageUrl] = useState("");
const [isPublished, setisPublished] = useState("true");
const [price, setprice] = useState("");
const [tags, settags] = useState([]);
const [alert, setAlert] = useState("");
const history = useHistory();
const url = `http://localhost:1234/api/courses/find/${id}`;
const old = async () => {
const result = await Axios.get(url);
setdishName(result.data.dishName);
setcategory(result.data.category);
setauthor(result.data.author);
setingredients(result.data.ingredients);
setcookingTime(result.data.cookingTime);
setsourceUrl(result.data.sourceUrl);
setimageUrl(result.data.imageUrl);
setisPublished(result.data.isPublished);
setprice(result.data.price);
settags(result.data.tags);
};
old();
console.log(old);
async function update() {
let item = {
dishName,
category,
author,
ingredients,
cookingTime,
sourceUrl,
imageUrl,
isPublished,
price,
tags,
};
console.log(item);
console.log(JSON.stringify(item));
const result = await fetch(`http://localhost:1234/api/courses/${id}`, {
method: "PUT",
body: JSON.stringify(item),
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
console.log(result);
if (result.status !== 200) {
return setAlert(result.status + " " + result.statusText);
}
history.push("/");
window.location.reload();
}
return (
<div className="col-sm-6" style={{ textAlign: "center" }}>
<h1 className="bigBar">Update recipe</h1>
<div style={{ marginLeft: "3.5rem" }}>
{alert !== "" && <Alert alert={alert}></Alert>}
</div>
<input
autoFocus="autofocus"
required="required"
type="text"
className="form-control"
placeholder={dishName}
value={dishName}
onChange={e => setdishName(e.target.value)}
/>
<br />
<input
required="required"
type="text"
className="form-control"
placeholder={category}
value={category}
onChange={e => setcategory(e.target.value)}
/>
<br />
<input
type="text"
onChange={e => setauthor(e.target.value)}
className="form-control"
required="required"
placeholder={author}
value={author}
/>
<br />
<input
type="text"
onChange={e => setingredients(e.target.value)}
className="form-control"
required="required"
placeholder={ingredients}
value={ingredients}
/>
<br />
<input
type="text"
onChange={e => setcookingTime(e.target.value)}
className="form-control"
required="required"
placeholder={cookingTime}
value={cookingTime}
/>
<br />
<input
type="text"
onChange={e => setsourceUrl(e.target.value)}
className="form-control"
required="required"
placeholder={sourceUrl}
value={sourceUrl}
/>
<br />
<input
type="text"
onChange={e => setimageUrl(e.target.value)}
className="form-control"
required="required"
placeholder={imageUrl}
value={imageUrl}
/>
<br />
<input
type="text"
onChange={e => setisPublished(e.target.value)}
className="form-control"
required="required"
placeholder={isPublished}
value={isPublished}
/>
<br />
<input
type="text"
onChange={e => setprice(e.target.value)}
className="form-control"
required="required"
placeholder={price}
value={price}
/>
<br />
<input
type="text"
onChange={e => settags(e.target.value)}
className="form-control"
required="required"
placeholder={tags}
value={tags}
/>
<br />
<button onClick={update} className="btn btn-primary">
Submit
</button>
</div>
);
}
Here is put from REST API:
router.put("/:id", async (req, res) => {
const { error } = validateCourse(req.body);
if (error)
//400 Bad request
return res.status(400).send(error.details[0].message);
const course = await Course.findByIdAndUpdate(
req.params.id,
_.pick(req.body, [
`dishName`,
`category`,
`password`,
`ingredients`,
`cookingTime`,
`sourceUrl`,
`imageUrl`,
`isPublished`,
`price`,
`tags`,
]),
{
useFindAndModify: false,
new: true,
}
);
if (!course)
return res.status(404).send(`The course with the given ID was not found`);
res.send(course);
});
And here is sample course from MongoDB:
{
"isPublished": true,
"tags": [
"pizza"
],
"_id": "60ae108ddfb18463c046a5ba",
"dishName": "Pizza with Cauliflower Crust",
"category": "pizza",
"ingredients": [
{
"_id": "60a4cfa48c20aa5c18517606",
"quantity": 1,
"unit": "",
"description": "medium head cauliflower cut into florets"
},
{
"_id": "60a4cfa48c20aa5c18517607",
"quantity": 1,
"unit": "",
"description": "egg"
},
{
"_id": "60a4cfa48c20aa5c18517608",
"quantity": 0.5,
"unit": "cup",
"description": "mozzarella shredded"
},
{
"_id": "60a4cfa48c20aa5c18517609",
"quantity": 1,
"unit": "tsp",
"description": "oregano or italian seasoning blend"
},
{
"_id": "60a4cfa48c20aa5c1851760a",
"quantity": null,
"unit": "",
"description": "Salt and pepper to taste"
},
{
"_id": "60a4cfa48c20aa5c1851760b",
"quantity": 1,
"unit": "cup",
"description": "chicken cooked and shredded"
},
{
"_id": "60a4cfa48c20aa5c1851760c",
"quantity": 0.5,
"unit": "cup",
"description": "barbecue sauce"
},
{
"_id": "60a4cfa48c20aa5c1851760d",
"quantity": 0.75,
"unit": "cup",
"description": "mozzarella shredded"
},
{
"_id": "60a4cfa48c20aa5c1851760e",
"quantity": null,
"unit": "",
"description": "Red onion to taste thinly sliced"
},
{
"_id": "60a4cfa48c20aa5c1851760f",
"quantity": null,
"unit": "",
"description": "Fresh cilantro to taste"
}
],
"cookingTime": 60,
"sourceUrl": "https://www.closetcooking.com/cauliflower-pizza-crust-with-bbq/",
"imageUrl": "https://www.closetcooking.com/wp-content/uploads/2013/02/BBQ-Chicken-Pizza-with-Cauliflower-Crust-500-4699.jpg",
"price": 29.99,
"date": "2021-05-26T09:10:37.620Z",
"__v": 0
}
When button is clicked and the PUT request is made and the values are updated - you must also tell your component states to mirror the new changes from the backend.
Therefor you must call old() method (which handles the fetching request and set states) after your PUT request. This is makes sure that your component states is sync with the values from the database.
Here is a small modification to your update() method (I marked it with an arrow):
async function update() {
let item = {
dishName,
category,
author,
ingredients,
cookingTime,
sourceUrl,
imageUrl,
isPublished,
price,
tags,
};
console.log(item);
console.log(JSON.stringify(item));
const result = await fetch(`http://localhost:1234/api/courses/${id}`, {
method: "PUT",
body: JSON.stringify(item),
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
console.log(result);
if (result.status !== 200) {
return setAlert(result.status + " " + result.statusText);
}
history.push("/");
window.location.reload();
old() <----- THIS
}
UPDATE:
I made a small example in Codesandbox that help you display ingredients and change their values.
I havent used any UI libraries but i strongly recommend something like Material UI to implement the containers and display them in a more proper way -it is all up to you how you want to design it.
Well here is it: https://codesandbox.io/s/cocky-sammet-d8wq5?file=/src/App.js
I have been using 2checkout payment gateway. I am using the script file provided by 2checkout. First I was importing it in my index.html file by using <link></link> and it was giving me an CORBS error. So I downloaded the script and place in local file.
Now, it's working as expected. It's providing me with authorization token by 2checkout. Following is my component that I have been using to get token form server.
import React, { useEffect, useState } from 'react';
const Form = (props) => {
const [ card, setCard ] = useState({
sellerId: <my-seller-id>,
publishableKey: <my-publishable-key>,
ccNo: '',
expMonth: '',
expYear: '',
cvv: ''
});
const [ returnToken, setReturnToken ] = useState(null);
useEffect(() => {
window.TCO.loadPubKey('sandbox');
}, []);
const submitted = (e) => {
e.preventDefault();
var payWithCard = (data) => {
console.log(data.response.token.token);
};
var error = (error) => {
console.log(error);
};
try {
window.TCO.requestToken(payWithCard, error, card);
} catch (error) {
setTimeout(() => {
window.TCO.requestToken(payWithCard, error, card);
}, 3000);
}
};
const change = (e) => {
setCard({
...card,
[e.target.name]: e.target.value
});
};
return (
<form id="tcoCCForm" onSubmit={submitted}>
<input id="sellerId" type="hidden" value={card.sellerId} />
<input id="publishableKey" type="hidden" value={card.publishableKey} />
<div>
<label>
<span>Card Number</span>
<input
id="ccNo"
name="ccNo"
type="text"
value={card.ccNo}
autoComplete="off"
required
onChange={(e) => change(e)}
/>
</label>
</div>
<div>
<label>
<span>Expiration Date (MM/YYYY)</span>
<input
type="text"
size="2"
id="expMonth"
name="expMonth"
value={card.expMonth}
required
onChange={(e) => change(e)}
/>
</label>
<span> / </span>
<input
type="text"
size="4"
id="expYear"
name="expYear"
value={card.expYear}
required
onChange={(e) => change(e)}
/>
</div>
<div>
<label>
<span>CVC</span>
<input
id="cvv"
name="cvv"
type="text"
value={card.cvv}
autoComplete="off"
required
onChange={(e) => change(e)}
/>
</label>
</div>
<input type="submit" />
</form>
);
};
export default Form;
so, it's giving me the token to console that I am using in Postman for testing the 2checkout api.
https://www.2checkout.com/checkout/api/1/<seller_id>/rs/authService
I have been using following payload to send the POST request to this api.
{
"sellerId": <seller_id>,
"privateKey": <private_key>,
"merchantOrderId": "123",
"token": "N2Y5MDFmNTItYzcxMS00OGQ5LTk2MmItOGJlMjAzYWQwNDFl",
"currency": "USD",
"demo": true,
"lineItems": [
{"name": "Package A", "price": 10, "quantity": 1, "type": "product", "recurrence": "1 Month", "duration": "Forever"} ],
"billingAddr": {"name": "Wasi Ullah", "addrLine1": " village Bharaj P/O Lakhanwal", "city": "Gujrat", "state": "Pubjab", "zipCode": "50700", "country": "Pakistan", "email": "chwasiullah#gmail.com", "phoneNumber": "+923006242851"}
}
While the response I got everytime is:
{
"validationErrors": null,
"response": null,
"exception": {
"exception": false,
"httpStatus": "400",
"errorMsg": "Payment Authorization Failed: Please verify your information and try again, or try another payment method.",
"errorCode": "607"
}
}
Even I have provided with original card and all information in demo mode. But there's still the same issue.
I got the solution to this problem. I want to share it. May be it will be helpful for you.
If you are testing 2checkout don't forget to check the documentation of test orders:
https://knowledgecenter.2checkout.com/Documentation/09Test_ordering_system/01Test_payment_methods
Moreover, I wasn't adding the name according to this test order in api that's why it was saying me that Card Authorization failed.
I'm trying to make a poll vote app.
My big problem is that I can't make an array of objects and access them. I try to make a few option votes to one poll like that:
title:"question?"
option:content:"1 answer",vote:0
content:"2 answer",vote:0
content:"3 answer",vote:...
and build schema like that:
var mongoose = require("mongoose");
var pollSchema = new mongoose.Schema({
title: String,
maker :{
id:{
type: mongoose.Schema.Types.ObjectId,
ref: "User"
},
username: String
},
options:[{content: String,vote:{type:Number,default:0}}]
});
module.exports = mongoose.model("Poll",pollSchema);
and get the data from there:
<div class="form-group" id="option">
<label for="Option 1">Options</label>
<input type="text" class="form-control" name="options[content]" placeholder="Option 1">
<input type="text" class="form-control" name="options[content]" placeholder="Option 2">
</div>
and the output in mongoDB is:
{
"_id": {
"$oid": "5993030dc5fa8c1b4f7eb176"
},
"title": "Some question?",
"options": [
{
"content": "opt 1,opt 2",
"_id": {
"$oid": "5993030dc5fa8c1b4f7eb177"
},
"vote": 0
}
],
"maker": {
"username": "Naor Malca"
},
"__v": 0
}
I want each option to have separate content, id and vote.
maybe i input the data worng?or the schema is worng?
UPDATE:
This my route code:
//NEW POLL ROUTE
app.post("/",function(req, res){
var title = req.body.title;
var options = req.body.options;
var maker = req.body.maker;
var newPoll = {title:title,options:options,maker:maker};
Poll.create(newPoll,function(err,poll){
if(err){
res.send("create error");
} else{
res.redirect("/");
}
});
});
still not working this the output:(its make the text an array not a array of objects...)
{ _id: 5993fcad9a63350df274b3e5,
title: '111',
__v: 0,
options: [ { text: '222,333', _id: 5993fcad9a63350df274b3e6, vote: '0' } ],
maker: { username: 'naor' } }
When you build your form, add [number] so that each option is different.
<div class="form-group" id="option">
<label for="Option 1">Options</label>
<input type="text" class="form-control" name="options[0][content]" placeholder="Option 1" value="value1">
<input type="text" class="form-control" name="options[1][content]" placeholder="Option 2" value="value2">
</div>
That way when you submit the form, it should come back as array of objects
req.body.options = [
{ content: 'value1' },
{ content: 'value2' }
]
This is a typical approach when you build an "add" form containing grouped elements.
--
When it comes to an "edit" form such that you want to update existing options, you can pass the option's _id
Here's an example using EJS
<div class="form-group" id="option">
<label for="Option 1">Options</label>
<% poll.options.forEach(option => { %>
<input type="text" class="form-control" name="options[<%= option._id %>][content]" placeholder="Option 1" value="<%= option.content %>">
<% }) %>
</div>
Here req.body.options should be an object
req.body.options = {
'some-id': {
content: 'value1'
},
'another-id': {
content: 'value2'
}
}
When you save, you would iterate over the object with the key i.e. _id. I think you can make use of id() to find the object to set.
--
If it doesn't come back in the formats mentioned above, you most likely need to use and set the bodyParser.