Mettre à jour les champs dans la requête AJAX POST
J'essaie de mettre à jour dynamiquement un champ personnalisé dans une requête AJAX POST à l'aide de jQuery ou Javascript.
La requête AJAX POST appartient au plugin Amelia Calendar sur la plateforme WordPress.
Il s'agit d'une requête AJAX POST
"type": "appointment",
"appointment": {
"id": 2,
"bookings": [
{
"id": 2,
"customerId": 4,
"customer": {
"id": 4,
"firstName": "John",
"lastName": "Doe",
"birthday": null,
"email": "[email protected]",
"phone": "+447123456789",
"type": "customer",
"status": null,
"note": null,
"zoomUserId": null,
"countryPhoneIso": "gb",
"externalId": 3,
"pictureFullPath": null,
"pictureThumbPath": null,
"translations": "{\"defaultLanguage\":\"en_US\"}",
"gender": null
},
"status": "approved",
"extras": [],
"couponId": null,
"price": 100,
"coupon": null,
"customFields": "{\"1\":{\"label\":\"Test Field 1\",\"type\":\"text\",\"value\":\"Test Field 1\"},\"2\":{\"label\":\"Test Field 2\",\"type\":\"text\",\"value\":\"Test Field 2\"}}",
"info": "{\"firstName\":\"John\",\"lastName\":\"Doe\",\"phone\":\"+447123456789\",\"locale\":\"en_US\",\"timeZone\":\"Europe\/London\",\"urlParams\":null}",
"appointmentId": 2,
"persons": 1,
"token": "127ce49924",
"payments": [
{
"id": 2,
"customerBookingId": 2,
"packageCustomerId": null,
"parentId": null,
"amount": 0,
"gateway": "onSite",
"gatewayTitle": "",
"dateTime": "2023-05-08 10:00:00",
"status": "pending",
"data": "",
"entity": "appointment",
"created": null,
"actionsCompleted": null,
"wcOrderId": null,
"wcOrderUrl": null,
"wcItemCouponValue": null,
"wcItemTaxValue": null
}
],
"utcOffset": null,
"aggregatedPrice": true,
"isChangedStatus": null,
"isLastBooking": null,
"packageCustomerService": null,
"ticketsData": [],
"duration": 1800,
"created": null,
"actionsCompleted": false
}
],
"notifyParticipants": 1,
"internalNotes": null,
"status": "approved",
"serviceId": 1,
"parentId": null,
"providerId": 1,
"locationId": null,
"provider": null,
"service": null,
"location": null,
"googleCalendarEventId": null,
"googleMeetUrl": null,
"outlookCalendarEventId": null,
"zoomMeeting": null,
"lessonSpace": null,
"bookingStart": "2023-05-08 10:00:00",
"bookingEnd": "2023-05-08 10:30:00",
"type": "appointment",
"isRescheduled": null,
"resources": []
},
"booking": {
"id": 2,
"customerId": 4,
"customer": {
"id": 4,
"firstName": "John",
"lastName": "Doe",
"birthday": null,
"email": "[email protected]",
"phone": "+447123456789",
"type": "customer",
"status": null,
"note": null,
"zoomUserId": null,
"countryPhoneIso": "gb",
"externalId": 3,
"pictureFullPath": null,
"pictureThumbPath": null,
"translations": "{\"defaultLanguage\":\"en_US\"}",
"gender": null
},
"status": "approved",
"extras": [],
"couponId": null,
"price": 100,
"coupon": null,
"customFields": "{\"1\":{\"label\":\"Test Field 1\",\"type\":\"text\",\"value\":\"Test Field 1\"},\"2\":{\"label\":\"Test Field 2\",\"type\":\"text\",\"value\":\"Test Field 2\"}}",
"info": "{\"firstName\":\"John\",\"lastName\":\"Doe\",\"phone\":\"+447123456789\",\"locale\":\"en_US\",\"timeZone\":\"Europe\/London\",\"urlParams\":null}",
"appointmentId": 2,
"persons": 1,
"token": "127ce49924",
"payments": [
{
"id": 2,
"customerBookingId": 2,
"packageCustomerId": null,
"parentId": null,
"amount": 0,
"gateway": "onSite",
"gatewayTitle": "",
"dateTime": "2023-05-08 10:00:00",
"status": "pending",
"data": "",
"entity": "appointment",
"created": null,
"actionsCompleted": null,
"wcOrderId": null,
"wcOrderUrl": null,
"wcItemCouponValue": null,
"wcItemTaxValue": null
}
],
"utcOffset": null,
"aggregatedPrice": true,
"isChangedStatus": null,
"isLastBooking": null,
"packageCustomerService": null,
"ticketsData": [],
"duration": 1800,
"created": null,
"actionsCompleted": false
},
"utcTime": [
{
"start": "2023-05-08 10:00:00",
"end": "2023-05-08 10:30:00"
}
],
"appointmentStatusChanged": false,
"recurring": [],
"package": [],
"packageId": null,
"customer": {
"id": 4,
"firstName": "John",
"lastName": "Doe",
"birthday": null,
"email": "[email protected]",
"phone": "+447123456789",
"type": "customer",
"status": null,
"note": null,
"zoomUserId": null,
"countryPhoneIso": "gb",
"externalId": 3,
"pictureFullPath": null,
"pictureThumbPath": null,
"translations": "{\"defaultLanguage\":\"en_US\"}",
"gender": null,
"locale": "en_US",
"timeZone": "Europe/London"
},
"bookable": {
"id": 1,
"name": "Test Service 1",
"description": "",
"color": "#1788FB",
"price": 100,
"deposit": 0,
"depositPayment": "disabled",
"depositPerPerson": true,
"pictureFullPath": null,
"pictureThumbPath": null,
"extras": [],
"coupons": [],
"position": null,
"settings": "{\"payments\":{\"paymentLinks\":{\"enabled\":false,\"changeBookingStatus\":false,\"redirectUrl\":null},\"onSite\":true,\"payPal\":{\"enabled\":false},\"stripe\":{\"enabled\":false},\"mollie\":{\"enabled\":false},\"razorpay\":{\"enabled\":false}},\"zoom\":{\"enabled\":false},\"lessonSpace\":{\"enabled\":false}}",
"fullPayment": false,
"minCapacity": 1,
"maxCapacity": 1,
"duration": 1800,
"timeBefore": null,
"timeAfter": null,
"bringingAnyone": true,
"show": true,
"aggregatedPrice": true,
"status": "visible",
"categoryId": 1,
"category": null,
"priority": [],
"gallery": [],
"recurringCycle": null,
"recurringSub": null,
"recurringPayment": 0,
"translations": null,
"minSelectedExtras": null,
"mandatoryExtra": null,
"customPricing": "{\"enabled\":false,\"durations\":{}}",
"maxExtraPeople": null,
"limitPerCustomer": "{\"enabled\":false,\"numberOfApp\":1,\"timeFrame\":\"day\",\"period\":1,\"from\":\"bookingDate\"}"
},
"paymentId": 2,
"packageCustomerId": null,
"payment": {
"id": 2,
"customerBookingId": 2,
"packageCustomerId": null,
"parentId": null,
"amount": 0,
"gateway": "onSite",
"gatewayTitle": "",
"dateTime": "2023-05-08 10:00:00",
"status": "pending",
"data": "",
"entity": "appointment",
"created": null,
"actionsCompleted": null,
"wcOrderId": null,
"wcOrderUrl": null,
"wcItemCouponValue": null,
"wcItemTaxValue": null
},
"customerCabinetUrl": ""
}
Lorsque j'arrive sur la page avant que l'utilisateur n'appuie sur Soumettre, je souhaite mettre à jour le champ suivant à l'aide de jQuery ou Javascript qui dit Test Field 1 和 Test Field 2 :
"customFields": "{"1":{"label":"测试字段 1","type":"text","value": "测试字段 1"},"2":{"标签":"测试字段 2","类型":"文本","值":"测试字段2"}}"
L'interface utilisateur ressemble à ceci :
