Develop Reference

Symfony5 Form multiple select (choices list) data auto-update with AJAX

I have a location form with three "select" (choices list) : country, area and department. These "select" have by default all the list of country, area and department. I want to let my user choose a country first or an area or a department.
What I want to do:
When an user choose a country, datas in area change depending of it. Same between area and department.
What I have:
When I choose a country first then an area, datas auto-update works between country and area but with area to department, the AJAX request is not launched.
But if I choose directly an area then the AJAX request is launched but it does not update the data in department.
However, in the form, when I comment the part concerning country and area auto-update, the AJAX request is launched and the auto-update between area and department works.
Here my form :
//src/Form/LocationType.php
class LocationType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('country', EntityType::class, [
'class' => Country::class,
])
->add('area', EntityType::class, [
'class' => Area::class,
'required' => false
])
->add('department', EntityType::class, [
'class' => Department::class,
'required' => false
]);
//The part I comment for makes the auto-update between area and department works
$formArea = function(FormInterFace $form, Country $country = null) {
if($country === null) {
$form->add('area', EntityType::class, [
'class' => Area::class,
'required' => false
]);
}
else {
$areas = $country->getAreas();
$form->add('area', EntityType::class, [
'class' => Area::class,
'choices' => $areas,
'required' => false
]);
}
};
$builder->get('country')->addEventListener(
FormEvents::POST_SUBMIT,
function (FormEvent $event) use ($formArea){
$country = $event->getForm()->getData();
$formArea($event->getForm()->getParent(), $country);
}
);
//
$formDepartment = function(FormInterFace $form, Area $area = null) {
if($area === null) {
$form->add('department', EntityType::class, [
'class' => Department::class,
'required' => false
]);
}
else {
$departments = $area->getDepartments();
$form->add('department', EntityType::class, [
'class' => Department::class,
'choices' => $departments,
'required' => false
]);
}
};
$builder->get('area')->addEventListener(
FormEvents::POST_SUBMIT,
function (FormEvent $event) use ($formDepartment){
$area = $event->getForm()->getData();
$formDepartment($event->getForm()->getParent(), $area);
}
);
}
And JS code with AJAX call:
//assets/js/selectCountryAreaDepartment.js
window.onload = () => {
let country = document.querySelector("#location_country");
country.addEventListener("change", function() {
let form = this.closest("form");
let data = this.name + "=" + this.value;
console.log(data);
fetch(form.action, {
method: form.getAttribute("method"),
body: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset:UTF-8"
}
})
.then(response => response.text())
.then(html => {
let content = document.createElement("html");
content.innerHTML = html;
let area = content.querySelector("#location_area");
document.querySelector("#location_area").replaceWith(area);
console.log(area);
})
.catch(error => {
console.log(error);
})
});
let area = document.querySelector("#location_area");
area.addEventListener("change", function() {
let formArea = this.closest("form");
let dataArea = this.name + "=" + this.value;
//console.log(formArea);
console.log(dataArea);
fetch(formArea.action, {
method: formArea.getAttribute("method"),
body: dataArea,
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset:UTF-8"
}
})
.then(response => response.text())
.then(html => {
let contentArea = document.createElement("html");
contentArea.innerHTML = html;
let department = contentArea.querySelector("#location_department");
document.querySelector("#location_department").replaceWith(department);
console.log(department);
})
.catch(error => {
console.log(error);
})
});
}
This code is based on this French tutorial : https://www.youtube.com/watch?v=f7tdb30evUk

By removing add() in null case in formModifiers formArea and formDepartment it avoid to "reset" select when an other select is used :
//src/Form/LocationType.php
// …
// formModifier
$formArea = function(FormInterFace $form, LocationCountry $country = null) {
if($country != null)
{
$areas = $country->getAreas();
$form->add('area', EntityType::class, [
'class' => LocationArea::class,
'choices' => $areas,
'placeholder' => 'select now an area',
'required' => false
]);
}
};
$builder->get('country')->addEventListener(
FormEvents::POST_SUBMIT,
function (FormEvent $event) use ($formArea){
$country = $event->getForm()->getData();
$formArea($event->getForm()->getParent(), $country);
}
);
// formModifier
$formDepartment = function(FormInterFace $form, LocationArea $area = null) {
if($area != null)
{
$departments = $area->getDepartments();
$form->add('department', EntityType::class, [
'class' => LocationDepartment::class,
'choices' => $departments,
'placeholder' => 'select now a department',
'required' => false,
'choice_label' => function ($departments) {
return '['.$departments->getCode().']-'.$departments->getName();
}
]);
}
};
The area.addEventListener is removed by update area select, so it is necessary to re-activate the eventListener after update area select, so I create a function area_addEnventListener()
window.onload = () => {
let country = document.querySelector("#location_country");
country.addEventListener("change", function() {
let form = this.closest("form");
let data = this.name + "=" + this.value;
fetch(form.action, {
method: form.getAttribute("method"),
body: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset:UTF-8"
}
})
.then(response => response.text())
.then(html => {
let content = document.createElement("html");
content.innerHTML = html;
let area = content.querySelector("#location_area");
document.querySelector("#location_area").replaceWith(area);
area_addEnventListener(area);
})
.catch(error => {
console.log(error);
})
});
let area = document.querySelector("#location_area");
area_addEnventListener(area);
}
function area_addEnventListener(area_select) {
area_select.addEventListener("change", function() {
let formArea = area_select.closest("form");
let dataArea = area_select.name + "=" + area_select.value;
fetch(formArea.action, {
method: formArea.getAttribute("method"),
body: dataArea,
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset:UTF-8"
}
})
.then(response => response.text())
.then(html => {
let contentArea = document.createElement("html");
contentArea.innerHTML = html;
let department = contentArea.querySelector("#location_department");
document.querySelector("#location_department").replaceWith(department);
})
.catch(error => {
console.log(error);
})
});
}

Uncaught (in promise) IntegrationError: stripe.redirectToCheckout: You must provide one of lineItems, items, or sessionId

I think the problem is in sessionId:sesId.can't seem to get session's id, also I'm new to Stripe
here's serverfund.php
<?php
require './../vendor/autoload.php';
if($_SERVER['REQUEST_METHOD'] == 'POST'){
if(!empty($_POST['charity']) && !empty($_POST['currency']) && !empty($_POST['donation']))
{
$paymentMethodType = [
'TND' => ['card'],
'AED' > ['card'],
'eur' => ['car', 'giropay', 'ideal'],
'USD' => ['card'],
];
$post = filter_var_array($_POST, FILTER_SANITIZE_STRING);
$stripe = new \Stripe\StripeClient('pk_test_51K6iWrIHK9zkttmZWkOHEfGax38CO8hFR4qWtxiVj8nIy8xcITk3tPfLrxxl5YfD89X7eL3yl2XumzX064Ll6mis00RdLdmsIm');
$session = $stripe->checkout->sessions->create([
'success_url' => 'http://localhost:8080/frontend/fund.html?status=success',
'cancel_url' => 'http://localhost:8080/frontend/fund.html?status=failure',
'mode' => 'payment',
'submit_type' => 'donate',
'payment_method_types' => $paymentMethodType[$post['currency']],
'line_items' => [
[
'quantity' => 1,
'price_data' =>[
'currency' => $post['currency'],
'unit_amount' => $post['donation'],
'product_data' => [
'name' => $post['charity']
]
]
]
]
]);
echo $session->id;
}
}
?>
and fund.js
const donate4 = document.querySelector('#charity')
const currency = document.querySelector('#currency')
const donation = document.querySelector('#donation')
const donationbtn = document.querySelector('button')
if(donationbtn){
donationbtn.addEventListener('click', () => {
var stripe = Stripe('pk_test_51K6iWrIHK9zkttmZWkOHEfGax38CO8hFR4qWtxiVj8nIy8xcITk3tPfLrxxl5YfD89X7eL3yl2XumzX064Ll6mis00RdLdmsIm');
fetch('http://localhost:8080/backend/serverfund.php', {
method: 'POST',
body: new FormData(document.querySelector('.form-donation'))
})
.then(res => res.text())
.then(sesId => {
stripe.redirectToCheckout({sessionId:sesId})
})
})
}

Having pagination issue in Vue / Laravel

Trying to paginate fetched data in Vue. But having a problem:
Question Updated
Error in render: "TypeError: this.estates.filter is not a function"
Do I missing something?
Pagination.vue
Data(){
return {
meta_data: {
last_page: null,
current_page: 1,
prev_page_url: null
}
}
},
mounted() {
this.fetchEstates();
},
methods: {
fetchEstates(page = 1) {
axios.get('/ajax', {
params: {
page
}}).then((response) => {
this.estates = response.data;
this.meta_data.last_page = response.data.last_page;
this.meta_data.current_page = response.data.current_page;
this.meta_data.prev_page_url = response.data.prev_page_url;
});
}
},
computed: {
one: function () {
let filteredStates = this.estates.filter((estate) => {
return (this.keyword.length === 0 || estate.includes(this.keyword)) &&
(this.rooms.length === 0 || this.rooms.includes(estate.rooms)) &&
(this.regions.length === 0 || this.regions.includes(estate.region))});
/// rest of the code....
if you need more information please tell me.

You should change the line
this.estates = response.data;
to
this.estates = response.data.data;

$data = \DB::table('allestates')->paginate(5);
$response = [
'pagination' => [
'total' => $data->total(),
'per_page' => $data->perPage(),
'current_page' => $data->currentPage(),
'last_page' => $data->lastPage(),
'from' => $data->firstItem(),
'to' => $data->lastItem()
],
'data' => $data
];
return response()->json($response);

How do I send value of a text box as a web push notification?

Presently I am able to send "hello" as notification. Now I want to send value of a text box as notification.below is the code I am using. What changes I need to do?
Here is my index.html:
<html>
<body>
<h1>Web Push Notification</h1>
<button id="push-subscription-button">Push notifications !
</button><br><br>
<input name="message" id="message" value=""
placeholder="Message"/><br><br>
<button id="send-Push-Button">Send Push notifications</button>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Here is send_push_notification.php:
<?php
require __DIR__ . '/../vendor/autoload.php';
use Minishlink\WebPush\WebPush;
$subscription = json_decode(file_get_contents('php://input'),
true);
$auth = array(
'VAPID' => array(
'subject' => '',
'publicKey' => '',
'privateKey' => ' '
),
);
$webPush = new WebPush($auth);
$res = $webPush->sendNotification(
$subscription['endpoint'],
"Hello",
$subscription['key'],
$subscription['token'],
true
);
app.js:
document.addEventListener("DOMContentLoaded", () => {
const applicationServerKey = "`enter code here`";
let isPushEnabled = false;
const pushButton = document.querySelector('#push-subscription-
button');
if (!pushButton) {
return;
}
pushButton.addEventListener('click', function() {
if (isPushEnabled) {
push_unsubscribe();
} else {
push_subscribe();
}
});
if (!('serviceWorker' in navigator)) {
console.warn("Service workers are not supported by this browser");
changePushButtonState('incompatible');
return;
}
if (!('PushManager' in window)) {
console.warn('Push notifications are not supported by this
browser');
changePushButtonState('incompatible');
return;
}
if (!('showNotification' in ServiceWorkerRegistration.prototype))
{
console.warn('Notifications are not supported by this browser');
changePushButtonState('incompatible');
return;
}
if (Notification.permission === 'denied') {
console.warn('Notifications are denied by the user');
changePushButtonState('incompatible');
return;
}
navigator.serviceWorker.register("serviceWorker.js")
.then(() => {
console.log('[SW] Service worker has been registered');
push_updateSubscription();
}, e => {
console.error('[SW] Service worker registration failed', e);
changePushButtonState('incompatible');
});
function changePushButtonState (state) {
switch (state) {
case 'enabled':
pushButton.disabled = false;
pushButton.textContent = "Disable Push notifications";
isPushEnabled = true;
break;
case 'disabled':
pushButton.disabled = false;
pushButton.textContent = "Enable Push notifications";
isPushEnabled = false;
break;
case 'computing':
pushButton.disabled = true;
pushButton.textContent = "Loading...";
break;
case 'incompatible':
pushButton.disabled = true;
pushButton.textContent = "Push notifications are not
compatible with this browser";
break;
default:
console.error('Unhandled push button state', state);
break;
}
}
function urlBase64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
function push_subscribe() {
changePushButtonState('computing');
navigator.serviceWorker.ready
.then(serviceWorkerRegistration =>
serviceWorkerRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey:
urlBase64ToUint8Array(applicationServerKey),
}))
.then(subscription => {
// Subscription was successful
// create subscription on your server
return push_sendSubscriptionToServer(subscription, 'POST');
})
.then(subscription => subscription &&
changePushButtonState('enabled')) // update your UI
.catch(e => {
if (Notification.permission === 'denied') {
// The user denied the notification permission which
// means we failed to subscribe and the user will need
// to manually change the notification permission to
// subscribe to push messages
console.warn('Notifications are denied by the user.');
changePushButtonState('incompatible');
} else {
console.error('Impossible to subscribe to push
notifications', e);
changePushButtonState('disabled');
}
});
}
function push_updateSubscription() {
navigator.serviceWorker.ready.then(serviceWorkerRegistration
=> serviceWorkerRegistration.pushManager.getSubscription())
.then(subscription => {
changePushButtonState('disabled');
if (!subscription) {
return;
}
return push_sendSubscriptionToServer(subscription, 'PUT');
})
.then(subscription => subscription &&
changePushButtonState('enabled'))
.catch(e => {
console.error('Error when updating the subscription', e);
});
}
function push_unsubscribe() {
changePushButtonState('computing');
navigator.serviceWorker.ready
.then(serviceWorkerRegistration =>
serviceWorkerRegistration.pushManager.getSubscription())
.then(subscription => {
if (!subscription) {
// No subscription object, so set the state
// to allow the user to subscribe to push
changePushButtonState('disabled');
return;
}
// We have a subscription, unsubscribe
// Remove push subscription from server
return push_sendSubscriptionToServer(subscription, 'DELETE');
})
.then(subscription => subscription.unsubscribe())
.then(() => changePushButtonState('disabled'))
.catch(e => {
console.error('Error when unsubscribing the user', e);
changePushButtonState('disabled');
});
}
function push_sendSubscriptionToServer(subscription, method) {
const key = subscription.getKey('p256dh');
const token = subscription.getKey('auth');
return fetch('push_subscription.php', {
method,
body: JSON.stringify({
endpoint: subscription.endpoint,
key: key ? btoa(String.fromCharCode.apply(null, new
Uint8Array(key))) : null,
token: token ? btoa(String.fromCharCode.apply(null, new
Uint8Array(token))) : null
}),
}).then(() => subscription);
}
const sendPushButton = document.querySelector('#send-push-
button');
if (!sendPushButton) {
return;
}
sendPushButton.addEventListener('click', () =>
navigator.serviceWorker.ready
.then(serviceWorkerRegistration =>
serviceWorkerRegistration.pushManager.getSubscription())
.then(subscription => {
if (!subscription) {
alert('Please enable push notifications');
return;
}
var msg= document.getElementById("message").value;
// alert(msg);
const key = subscription.getKey('p256dh');
const token = subscription.getKey('auth');
fetch('send_push_notification.php', {
method: 'POST',
body: JSON.stringify({
endpoint:subscription.endpoint,
key: key ? btoa(String.fromCharCode.apply(null, new
Uint8Array(subscription.getKey('p256dh')))) : null,
token: token ? btoa(String.fromCharCode.apply(null,
new Uint8Array(subscription.getKey('auth')))) : null,
})
})
})
);
});
Where should I get textbox value and replace it with "hello" in send-push-notification.php?

I am getting this json error and ajax submit form is not getting closed

this is the json error i am getting
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
if (e.which == 9) {
here is my controller method
// To add fabric and colour data in order entry form of 'Combos' product type..
function add_ajax_combos($newFabricName = '', $fabricSavedCallback = '', $product_type_id = '', $field = '') {
if (!empty($this->data)) {
$this->autoRender = false;
$this->layout = 'ajax';
$name = $this->data['FabricRange']['name'];
$product_id = $this->data['FabricRange']['product_id'];
$chk_range_exists = $this->FabricRange->find('count', array('conditions' => array('FabricRange.name' => $name, 'FabricRange.product_id' => $product_id)));
if ($chk_range_exists == 0) {
$chk_same_name_already_exist = $this->FabricRange->find('first', array('conditions' => array('FabricRange.name' => $name), 'fields' => array('range_id')));
$update_flag = false;
if ($chk_same_name_already_exist) {
$this->data['FabricRange']['range_id'] = $chk_same_name_already_exist['FabricRange']['range_id'];
} else {
$update_flag = true;
}
$name = $this->data['FabricRange']['colour'];
$usable_width = $this->data['FabricRange']['usable_width'];
$range_id= $this->data['FabricRange']['range_id'];
$chk_range_color_exists = $this->FabricRangeColour->find('count', array('conditions' => array('FabricRangeColour.name' => $name, 'FabricRangeColour.usable_width' => $usable_width)));
}
if ($chk_range_color_exists == 0) {
$usable_width = $this->data['FabricRange']['usable_width'];
$purchase_wizard_code = $this->data['FabricRange']['purchase_wizard_code'];
$can_turn = $this->data['FabricRange']['can_turn'];
$pattern_repeat = $this->data['FabricRange']['pattern_repeat'];
$deleted = $this->data['FabricRange']['deleted'];
$discontinued = $this->data['FabricRange']['discontinued'];
$ds = $this->FabricRange->getDataSource();
$ds->begin($this->FabricRange);
$this->FabricRange->create();
if ($this->FabricRange->save($this->data)) {
if ($update_flag) {
$id = $this->FabricRange->id;
$this->FabricRange->saveField('range_id', $id);
$fabric_ranges_id = $id;
} else {
$fabric_ranges_id = $this->data['FabricRange']['range_id'];
}
$fabricColourId = 0;
if (isset($this->data['FabricRange']['colour_id']) == false || strlen(trim($this->data['FabricRange']['colour_id'])) == 0) {
// new colour
$this->FabricRangeColour->create();
if ($this->FabricRangeColour->save(array('FabricRangeColour' => array('name' => $name, 'fabric_ranges_id' => $fabric_ranges_id, 'usable_width' => $usable_width, 'purchase_wizard_code' => $purchase_wizard_code
, 'can_turn' => $can_turn, 'pattern_repeat' => $pattern_repeat, 'deleted' => $deleted, 'discontinued' => $discontinued))) == false) {
$ds->rollback($this->FabricRange);
return json_encode(array("status" => "FAILURE"));
}
$fabricColourId = $this->FabricRangeColour->id;
} else {
$fabricColourId = $this->data['FabricRange']['colour_id'];
}
$ds->commit($this->FabricRange);
return json_encode(array("status" => "SUCCESS", 'fabric' => $this->data['FabricRange']['name'], 'id' => $this->FabricRange->id, 'colour_id' => $fabricColourId, 'colourname' => $this->data['FabricRange']['colour'], 'fabric_category_id' => $this->data['FabricRange']['fabric_categories_id']));
} else {
$ds->rollback($this->FabricRange);
return json_encode(array("status" => "FAILURE"));
}
} else {
return json_encode(array("status" => "FAILURE"));
}
}
$this->layout = 'ajax';
$fabricCategories = $this->FabricCategory->getFabricCategoryList('list');
$fabricColours = $this->FabricRangeColour->getAllAsList();
$this->set('fabric_name', $newFabricName);
$result_pr = $this->ProductType->find('first', array(
'fields' => array('product_id'), 'conditions' => array('id' => $product_type_id)
));
$product_id_title = $result_pr['ProductType']['product_id'];
$this->set('product_id', $product_id_title);
$this->set('field', $field);
$this->set(compact('fabricCategories', 'fabricColours', 'fabricSavedCallback'));
}
here is my ctp
function ajaxSubmit(field) {
var requestUrl = '<?php echo $this->Html->url(array('controller'=>'fabric_ranges','action'=>'add_ajax_combos'),true);?>';
if (validateForm()) {
$.post(requestUrl, $('#FabricRangeAddAjaxCombosForm').serialize(),
function(data) {
data = JSON.parse(data);
console.log(data);
if (data.status == 'SUCCESS') {
if (typeof <?php echo $fabricSavedCallback;?> != 'undefined') {
<?php echo $fabricSavedCallback;?>(data.id, data.fabric, data.colour_id, data.colourname, data.fabric_category_id);
if (field == 1) {
$("#fabricsAutoComplete").val(data.fabric);
$("#OrderEntryItemRollerBlindComboFabricFrontBlind").val(data.id);
$("#OrderEntryItemRollerBlindComboColours").val(data.colourname);
$("#OrderEntryItemRollerBlindComboFabricColourFrontBlind").val(data.colour_id);
$("#OrderEntryItemRollerBlindComboFabricCategoriesId").val(data.fabric_category_id);
}
else {
$("#fabricsAutoCompleteBack").val(data.fabric);
$("#OrderEntryItemRollerBlindComboFabricBackBlind").val(data.id);
$("#OrderEntryItemRollerBlindComboColoursBack").val(data.colourname);
$("#OrderEntryItemRollerBlindComboFabricColourBackBlind").val(data.colour_id);
$("#OrderEntryItemRollerBlindComboFabricCategoriesId2").val(data.fabric_category_id);
}
}
} else {
alert('An error occured while adding the fabric. The new fabric wasn\'t saved.');
}
}
);
}
}
here is the method that calls for closeandupdatefabrics
function closeAndUpdateFabrics(fabricId, fabric,color, colourId) {
$('#addFabricDialog').dialog('close');
$("#fabricsAutoComplete").val(fabric);
$("#OrderEntryItemRollerBlindComboFabricFrontBlind").val(fabricId);
$("#OrderEntryItemRollerBlindComboColours").val(color);
var fabricsIdBox = document.getElementById('OrderEntryItemRollerBlindComboFabricFrontBlind');
setFabriCategory(fabricsIdBox);
loadFabricColours(fabricsIdBox, 'OrderEntryItemRollerBlindComboFabricColourFrontBlind', function() {
$("#OrderEntryItemRollerBlindComboFabricColourFrontBlind").val(colourId);
});
}
My problem is the ajax box is not getting closed and give me a json error in console.