Im having a trouble on how can I append data in select2, currently I can only manage to display the first item list of my cities based on the province selected. I've been using onchange to trigger the function. It would be great if anybody could figure out, thanks in advance!.
data(){
provinces: [],
cities: [],
brgys: []
}
mounted() {
this.ini();
},
methods:{
ini(){
$('#kt_select_province').on('change', () => {
let id = $('#kt_select_province').val();
id = id.map(i=>Number(i));
this.provinces.map(i=> {
if (id.indexOf(i.id) != -1) {
i.active="true";
} else{
i.active="false";
}
});
if(id.length != 0) {
this.getCity(id); //called city function
}
});
getCity(id) {
axios.get(BASE_URL + "/api/city/" + id).then(response => {
this.cities = response.data; // did not append here
this.cities.map(i=>i.active="false")
});
},
}
cityController.php
public function show($id)
{
return response()->json(City::whereIn('province_id', [$id])->get());
}
Related
So starting by giving a brief of the issue. I have defined a function to get data from my api and the function is:
Future<void> getProductDetailsData(params) async {
if (_isNetworkAvail) {
await apiBaseHelper
.getAPICall(getProductData, params)
.then((getdata) async => {
if (getdata.containsKey('data'))
{
productDataList = (getdata['data']['items'] as List)
.map((data) => ProductModel.fromJson(data))
.toList(),
tempProductDataList.addAll(productDataList),
}
});
} else {
setState(() {
_isNetworkAvail = false;
});
}
}
and the params I have given is Future<void> myData = getProductDetailsData({'id': widget.dealerId.toString()});
and then I have used myData in the future of the FutureBuilder.
now I have defined a MultiSelectDialogField and on its onConfirm I want to change the params so that I can get a particular data as per the given params. So for this I have done this
onConfirm: (results) {
setState(() {
myData = getProductDetailsData({
'id': widget.dealerId.toString(),
'categoryId': "23",
});
});
}
But the issue is that the FutureBuilder is not getting updated and only showing data with params as {'id': widget.dealerId.toString()}
You just need to use either await or .then to get value from future. Inside your .then you need to call setState.
Future<void> getProductDetailsData(params) async {
if (_isNetworkAvail) {
apiBaseHelper
.getAPICall(getProductData, params)
.then((getdata) async => {
if (getdata.containsKey('data'))
{
productDataList = (getdata['data']['items'] as List)
.map((data) => ProductModel.fromJson(data))
.toList(),
tempProductDataList.addAll(productDataList),
}
setState(() {}); //here
});
} else {
setState(() {
_isNetworkAvail = false;
});
}
}
better
Future<void> getProductDetailsData(params) async {
if (_isNetworkAvail) {
final getdata = await apiBaseHelper
.getAPICall(getProductData, params);
if (getdata.containsKey('data'))
{
....
}
setState(() {});
} else {
setState(() {
_isNetworkAvail = false;
});
}
also you can just use await and call setState on next line. Also you can use FutureBuilder.
I had integrated the Razorpay payment gateway in my magento site. It's working absolutely fine in web and mobile browser. But when I try to make the payment using in-app browsers (from Instagram, Facebook) I am facing the blank page issue. So I found the solution that I need to pass the callback URL along with other input parameter to payment gateway. Here I got stuck, what should be the callback URL here? Can anyone help me to resolve this!
Here is my code:
/app/code/Razorpay/Magento/view/frontend/web/js/view/payment/method-renderer/razorpay-method.js
define(
[
'Magento_Checkout/js/view/payment/default',
'Magento_Checkout/js/model/quote',
'jquery',
'ko',
'Magento_Checkout/js/model/payment/additional-validators',
'Magento_Checkout/js/action/set-payment-information',
'mage/url',
'Magento_Customer/js/model/customer',
'Magento_Checkout/js/action/place-order',
'Magento_Checkout/js/model/full-screen-loader',
'Magento_Ui/js/model/messageList'
],
function (Component, quote, $, ko, additionalValidators, setPaymentInformationAction, url, customer, placeOrderAction, fullScreenLoader, messageList) {
'use strict';
return Component.extend({
defaults: {
template: 'Razorpay_Magento/payment/razorpay-form',
razorpayDataFrameLoaded: false,
rzp_response: {}
},
getMerchantName: function() {
return window.checkoutConfig.payment.razorpay.merchant_name;
},
getKeyId: function() {
return window.checkoutConfig.payment.razorpay.key_id;
},
context: function() {
return this;
},
isShowLegend: function() {
return true;
},
getCode: function() {
return 'razorpay';
},
isActive: function() {
return true;
},
isAvailable: function() {
return this.razorpayDataFrameLoaded;
},
handleError: function (error) {
if (_.isObject(error)) {
this.messageContainer.addErrorMessage(error);
} else {
this.messageContainer.addErrorMessage({
message: error
});
}
},
initObservable: function() {
var self = this._super(); //Resolves UI Error on Checkout
if(!self.razorpayDataFrameLoaded) {
$.getScript("https://checkout.razorpay.com/v1/checkout.js", function() {
self.razorpayDataFrameLoaded = true;
});
}
return self;
},
/**
* #override
*/
/** Process Payment */
preparePayment: function (context, event) {
if(!additionalValidators.validate()) { //Resolve checkout aggreement accept error
return false;
}
var self = this,
billing_address,
rzp_order_id;
fullScreenLoader.startLoader();
this.messageContainer.clear();
this.amount = quote.totals()['base_grand_total'] * 100;
billing_address = quote.billingAddress();
this.user = {
name: billing_address.firstname + ' ' + billing_address.lastname,
contact: billing_address.telephone,
};
if (!customer.isLoggedIn()) {
this.user.email = quote.guestEmail;
}
else
{
this.user.email = customer.customerData.email;
}
this.isPaymentProcessing = $.Deferred();
$.when(this.isPaymentProcessing).done(
function () {
self.placeOrder();
}
).fail(
function (result) {
self.handleError(result);
}
);
self.getRzpOrderId();
return;
},
getRzpOrderId: function () {
var self = this;
$.ajax({
type: 'POST',
url: url.build('razorpay/payment/order'),
/**
* Success callback
* #param {Object} response
*/
success: function (response) {
fullScreenLoader.stopLoader();
if (response.success) {
self.renderIframe(response);
} else {
self.isPaymentProcessing.reject(response.message);
}
},
/**
* Error callback
* #param {*} response
*/
error: function (response) {
fullScreenLoader.stopLoader();
self.isPaymentProcessing.reject(response.message);
}
});
},
renderIframe: function(data) {
var self = this;
this.merchant_order_id = data.order_id;
var options = {
key: self.getKeyId(),
name: self.getMerchantName(),
amount: data.amount,
handler: function (data) {
self.rzp_response = data;
self.placeOrder(data);
},
order_id: data.rzp_order,
modal: {
ondismiss: function() {
self.isPaymentProcessing.reject("Payment Closed");
}
},
notes: {
merchant_order_id: '',
merchant_quote_id: data.order_id
},
prefill: {
name: this.user.name,
contact: this.user.contact,
email: this.user.email
},
callback_url: url.build('rest/default/V1/carts/mine/payment-information', {}),
_: {
integration: 'magento',
integration_version: data.module_version,
integration_parent_version: data.maze_version,
}
};
if (data.quote_currency !== 'INR')
{
options.display_currency = data.quote_currency;
options.display_amount = data.quote_amount;
}
this.rzp = new Razorpay(options);
this.rzp.open();
},
getData: function() {
return {
"method": this.item.method,
"po_number": null,
"additional_data": {
rzp_payment_id: this.rzp_response.razorpay_payment_id,
order_id: this.merchant_order_id,
rzp_signature: this.rzp_response.razorpay_signature
}
};
}
});
}
);
In the above code renderIframe function will pass the parameter to payment gateway, here I need to pass the callback URL. I tried to set it as rest/default/V1/carts/mine/payment-information but got 401 Unauthorised error. Please help me resolve this issue.
I have done the same thing with amazon payment.
As i remember you should act on this part of codes :
function () {
self.placeOrder();
}
And how i changed
function () {
$.when(self.placeOrder()).done(
function () {
///redirect;
}
}
But when i tried on the browser, i've still got some wrong cases then i decided to make a workaround by putting an event with jquery :
$( document ).ajaxStop(function() {
//redirect
});
This works right because after all ajaxs are finished we get the order is placed. That is the time to redirect.
Hope this helps.
Trying to do a simple input box. The default value should be a database value, and when user updates the value, it also updates the database. I'm using Laravel 5.5 and this is a vue component. So the initial value would be 3 from the database, but then if someone changes the value, it would also update the database. Am I on the right track with what's below, or am I way off? Currently it won't get the initial amount, and it won't update.
<template>
<div>Corn: <input v-model="corn" style="width: 50px;" /></div>
</template>
<script>
export default {
data: function() {
return {
items: 'not updated',
corn: items.cornquant
} },
watch: { // whenever amount changes, function will run
corn: function(newCorn, oldCorn) {
this.corn = '2'
this.getCorn()
} },
mounted: function() {
this.getVueItems();
},
methods: {
getVueItems: function() {
axios.get('/testing').then(response => {
this.items = response.data;
}); },
getCorn: _.debounce(
function() {
this.corn = 'Thinking...'
var vm = this
axios.put('/corn/{amount}').then(response => {
vm.corn = response.data;
}) },
// milliseconds we wait for user to stop typing.
500
) }, }
</script>
And here's the route (did a little editing, this updates now):
Route::post('/corn', function () {
$test = App\Resource::where('user_id', Auth::id())->update(['cornquant' => request('amount')]);
return $test;
});
Use an es6 arrow function in debounce to preserve this. Then remove var vm = this and assign to corn like this.corn = response.data.
And where are you initially calling getCorn?
Got everything sorted. Defining default values was the hardest part, but ended up being easy enough!
Here's the vue template file:
<template>
<div>Corn: <input v-model="corn" style="width: 50px;" /></div>
</template>
<script>
export default {
data: function() {
return {
items: 'not updated',
corn: '0'
} },
watch: { // whenever input amount changes, function will run
corn: function() {
this.getCorn()
} },
mounted: function() {
this.getVueItems(); //this will call the actual corn value to put as the default value
},
methods: {
getVueItems: function() {
axios.get('/testing').then(response => {
this.items = response.data;
this.corn = response.data.cornlq; //set initial value
}); },
getCorn: _.debounce(
function() {
var vm = this
axios.post('/corn', { //updates database
corn: this.corn,
}).then(response => {
vm.corn = response.data.cornlq; //keeps actual database value in input
}) },
2000
) }, }
</script>
And the route:
Route::post('/corn', function () {
App\Resource::where('user_id', Auth::id())->update(['cornlq' => request('corn')]); //update database with new amount
$result = App\Resource::where('user_id', Auth::id())->first(); //save all amounts to $result
return $result; //return result so I can update the vue
});
My goal to achieve is:
first to insert new database record with http post, resolve with stateProvider and grab the new id and change view and stateParams.
i have this code for my http post service
myApp.service('postService', ['$http', function($http) {
this.insertNew = function() {
$http.post('create_new.php')
.success(function(data) {
return data;
});
};
create_new.php returns the ID like this (it works, proved with console)
return json_encode($data);
and the stateProvider looks like this (section)
$stateProvider
.state('newRecord', {
resolve: {
newArtID: ['postService',
function(postService) {
return postService.insertNew();
}]
},
params: {
artID: <-- new ID from DB
},
i did tests with stateParams in serval variations (in resolve and by params). how can i bring the new ID to stateParams, so i can access from the views?
Thanks for any help!
I'm not so sure your oder of operations is correct. params is for when you already have that data. You should return the data from your resolve, then you can access it in your scope, for ex:
Service:
.service('postService', function ($http) {
this.insertNew = function () {
return $http.post('create_new.php').then(function (data) {
return data;
});
}
})
Route:
$stateProvider
.state('newRecord', {
views: {
"main": {
controller: 'SomeCtrl',
templateUrl: '...'
}
},
resolvedId: {
newArtID: function (postService) {
return postService.insertNew().then(function (response) {
return response;
});
}
}
})
Controller:
.controller('SomeCtrl', function (resolvedId) {
var newID = resolvedId.id; //depending on what is returned
});
I try to load database data in my Select2 input. (Im working on CI)
Here's my code from the controller : transforms array in echo json
class Ajax extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->model('client');
}
public function returnClientsAjax(){
echo json_encode($this->client->getClients());
}
}
Model : returning an array of results
function getClients(){
return $this->db->query("SELECT idclient AS id, CONCAT(societe,' [', nom,']') as text FROM du_client WHERE (societe != '' AND nom != '') AND evo2012 >=2 AND type_client != 'Particulier' AND statut_client = 'Demandeur' AND idclient = 6141;")->result_array();
}
My Select2 :
$("#sel_clients").select2({
placeholder: "Search for an Item",
ajax: {
dataType: "json",
url: "http://commexpert.dev.local/ajax/returnclientsajax",
results: function (data) {
return {results: data};
}
}
});
The input still empty so, don't know what to do.
Thnaks :D
I think something is missing on your data results method. Here is my code from working ajax select2 component:
results: function (data) {
var results = [];
var id1 = data.id;
var name = data.text;
$.each(data.data, function(index, item){
results.push({
id: item[id1],
text: item[name].trim()+' : '+ item[id1]
});
});
return {results: results};
}
also, I'm having somewhat diff data call also:
data: function (term) {
try {
mirko = $(this).closest('[rendered]').find( "input[fparamname$=" + $(this).attr('flookupfiltref') + "]" ).val();
if (mirko.indexOf(' : ') >=0 ) { // pocetna vrijednost
mirko = mirko.split(' : ')[1].trim();
}
} catch(e){
mirko = '';
}
return {
sp_name: $(this).attr('objectname'),
fl_name: $(this).attr('fparamname'),
node_id: $(this).attr('node_id'),
bound: mirko,
q: term,
};
},
I'm having somekind of manipulation before sending or returning q to server,, but I hope that can help you for your service :)
hth, k