Mohamed Ramzi2 نشر 1 يوليو أرسل تقرير مشاركة نشر 1 يوليو كيف يمكنني ارسال البيانات الى الخادم باستخدام alert؟ const onSubmit = async() => { const postData = new FormData(); postData.append("title", title); postData.append("description", description); postData.append("price", price); try{ await axios.post(CREATE_EVENT_URL,postData,{ headers: { Authorization: jwt, }, }).then((res) => { console.log(res); }) }catch(e){ console.log(e); } } console.log(jwt); const getEvent = async () => { setShowLoading(true); try { await axios .get(EVENTS_URL, { headers: { Authorization: jwt, }, }) .then((res) => { console.log(res.data.getEvent); setPosts(res.data.getEvent); console.log(res.data.getEvent[0].title); setShowLoading(false); }); } catch (e) { console.log(e.response); setShowLoading(true); } }; return ( <IonPage id="main-content"> {showLoading ? ( <IonLoading isOpen={showLoading} duration={1000} /> ) : ( post && ( <> <IonHeader> <IonToolbar color="primary"> <IonTitle>صفحة المناسبات</IonTitle> <IonButton fill="clear" slot="end" color="tertiary" routerLink="/login" > مرحبا </IonButton> <IonButtons slot="start"> <IonMenuButton></IonMenuButton> </IonButtons> </IonToolbar> </IonHeader> <IonContent> <IonGrid> <IonRow> <div className="col-center"> <IonCol sizeLg="4"> <IonCard className="edit-card"> <IonCardHeader> <IonButton id="present-alert" color="primary" > انشاء مناسبة </IonButton> <IonAlert trigger="present-alert" header="اضافة مناسبة" buttons={[ { text: "ok", handler: () => { onSubmit() }, }, ]} inputs={[ { placeholder: "العنوان", value:title }, { type: "number", placeholder: "السعر", min: 1, max: 100, value:price }, { type: "textarea", placeholder: "التفاصيل", value:description }, ]} ></IonAlert> </IonCardHeader> </IonCard> </IonCol> </div> </IonRow> </IonGrid> ) backend.zip mybooking.zip اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 1 يوليو أرسل تقرير مشاركة نشر 1 يوليو من خلال دالة onSubmit كالتالي: import { IonMenuButton, IonHeader, IonTitle, IonToolbar, IonButtons, IonGrid, IonRow, IonCol, IonCard, IonCardHeader, IonCardTitle, IonButton, IonLoading, IonContent, IonCardSubtitle, useIonAlert, IonAlert, } from "@ionic/react"; import { IonPage } from "@ionic/react"; import "../css/event.css"; import axios from "../config/axios"; //جلب المعلومات import { CREATE_EVENT_URL, EVENTS_URL } from "../config/urls"; import { useContext, useEffect, useState } from "react"; import { AuthContext } from "../context/AuthContext"; //import { Storage } from "@capacitor/storage"; //import { useHistory } from "react-router"; import React from "react"; const Events = () => { const [showLoading, setShowLoading] = useState(false); const [posts, setPosts] = useState([]); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [price, setPrice] = useState(""); const [presentAlert] = useIonAlert(); const { jwt } = useContext(AuthContext); useEffect(() => { getEvent(); }, []); const onSubmit = async () => { const postData = new FormData(); postData.append("title", title); postData.append("description", description); postData.append("price", price); try { await axios .post(CREATE_EVENT_URL, postData, { headers: { Authorization: jwt, }, }) .then((res) => { console.log("Event created successfully:", res.data); setTitle(""); setDescription(""); setPrice(""); getEvent(); }); } catch (e) { console.error("Error creating event:", e.response ? e.response.data : e); } }; const getEvent = async () => { setShowLoading(true); try { await axios .get(EVENTS_URL, { headers: { Authorization: jwt, }, }) .then((res) => { console.log("Events fetched successfully:", res.data.getEvent); setPosts(res.data.getEvent); setShowLoading(false); }); } catch (e) { console.error("Error fetching events:", e.response ? e.response.data : e); setShowLoading(false); } }; return ( <IonPage id="main-content"> {showLoading && <IonLoading isOpen={showLoading} duration={1000} />} {!showLoading && ( <> <IonHeader> <IonToolbar color="primary"> <IonTitle>صفحة المناسبات</IonTitle> <IonButton fill="clear" slot="end" color="tertiary" routerLink="/login" > مرحبا </IonButton> <IonButtons slot="start"> <IonMenuButton></IonMenuButton> </IonButtons> </IonToolbar> </IonHeader> <IonContent> <IonGrid> <IonRow> <div className="col-center"> <IonCol sizeLg="4"> <IonCard className="edit-card"> <IonCardHeader> <IonCardTitle color="primary"> شارك مناسبتك الخاصة! </IonCardTitle> <IonButton id="present-alert" color="primary"> انشاء مناسبة </IonButton> <IonAlert trigger="present-alert" header="اضافة مناسبة" buttons={[ { text: "إلغاء", role: "cancel", cssClass: "secondary", }, { text: "موافق", handler: () => { onSubmit(); }, }, ]} inputs={[ { name: "title", placeholder: "العنوان", value: title, onIonChange: (e) => setTitle(e.target.value), }, { name: "price", type: "number", placeholder: "السعر", min: 1, max: 100, value: price, onIonChange: (e) => setPrice(e.target.value), }, { name: "description", type: "textarea", placeholder: "التفاصيل", value: description, onIonChange: (e) => setDescription(e.target.value), }, ]} ></IonAlert> </IonCardHeader> </IonCard> </IonCol> </div> </IonRow> </IonGrid> <IonGrid> <IonRow className="col-edit"> <IonCol> {posts.length > 0 ? ( posts.map((post) => ( <IonCard key={post.id}> <IonCardHeader> <IonCardTitle color="secondary"> {post.title} </IonCardTitle> <IonCardSubtitle>{post.price}$</IonCardSubtitle> </IonCardHeader> <IonButton color="primary" onClick={() => presentAlert({ header: "تفاصيل المناسبة", subHeader: "قم بتسجيل الدخول وسارع بالحجز", message: `${post.description}`, buttons: ["اغلاق"], }) } className="btn-edit" id="present-alert" > احجز الان </IonButton> </IonCard> )) ) : ( <IonCard> <IonCardHeader> <IonCardTitle color="secondary"> لا توجد مناسبات </IonCardTitle> </IonCardHeader> </IonCard> )} </IonCol> </IonRow> </IonGrid> </IonContent> </> )} </IonPage> ); }; export default Events; قمت بتغيير const [post, setPosts] = useState("") إلى const [posts, setPosts] = useState([]) أ] وضع مصفوفة كقيمة إفتراضية. لأن ذلك يسمح بتخزين مجموعة من الأحداث التي تم جلبها من API في متغير posts، بدلاً من تخزين حدث واحد فقط، واستخدام المصفوفة posts ضروري لعرض قائمة من الأحداث بشكل صحيح. ثم استخدمت الدالة posts.map للتكرار على عناصر المصفوفة posts وعرض IonCard لكل حدث على حدة لضمان عرض جميع الأحداث التي تم جلبها من API. بعد ذلك ضبط معالجات الأحداث onIonChange لحقول النموذج (title و price و description) بشكل صحيح، لتحديث قيم تلك الحقول في حالة تغييرها من قبل المستخدم. وبعد إنشاء حدث جديد، يتم استدعاء الدالة getEvent() مرة أخرى من أجل تحديث قائمة الأحداث المعروضة وإظهار الحدث الجديد الذي تم إنشاؤه. مع إضافة معالجة أساسية للأخطاء في الدالتين onSubmit و getEvent لعرض رسائل خطأ واضحة للمستخدم في حالة حدوث أي مشكلة. واستخدام العرض الشرطي لعرض قائمة الأحداث (posts.length > 0) أو رسالة "لا توجد مناسبات" إن لم تكن هناك أحداث. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mohamed Ramzi2 نشر 2 يوليو الكاتب أرسل تقرير مشاركة نشر 2 يوليو بتاريخ 20 ساعة قال Mustafa Suleiman: من خلال دالة onSubmit كالتالي: import { IonMenuButton, IonHeader, IonTitle, IonToolbar, IonButtons, IonGrid, IonRow, IonCol, IonCard, IonCardHeader, IonCardTitle, IonButton, IonLoading, IonContent, IonCardSubtitle, useIonAlert, IonAlert, } from "@ionic/react"; import { IonPage } from "@ionic/react"; import "../css/event.css"; import axios from "../config/axios"; //جلب المعلومات import { CREATE_EVENT_URL, EVENTS_URL } from "../config/urls"; import { useContext, useEffect, useState } from "react"; import { AuthContext } from "../context/AuthContext"; //import { Storage } from "@capacitor/storage"; //import { useHistory } from "react-router"; import React from "react"; const Events = () => { const [showLoading, setShowLoading] = useState(false); const [posts, setPosts] = useState([]); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [price, setPrice] = useState(""); const [presentAlert] = useIonAlert(); const { jwt } = useContext(AuthContext); useEffect(() => { getEvent(); }, []); const onSubmit = async () => { const postData = new FormData(); postData.append("title", title); postData.append("description", description); postData.append("price", price); try { await axios .post(CREATE_EVENT_URL, postData, { headers: { Authorization: jwt, }, }) .then((res) => { console.log("Event created successfully:", res.data); setTitle(""); setDescription(""); setPrice(""); getEvent(); }); } catch (e) { console.error("Error creating event:", e.response ? e.response.data : e); } }; const getEvent = async () => { setShowLoading(true); try { await axios .get(EVENTS_URL, { headers: { Authorization: jwt, }, }) .then((res) => { console.log("Events fetched successfully:", res.data.getEvent); setPosts(res.data.getEvent); setShowLoading(false); }); } catch (e) { console.error("Error fetching events:", e.response ? e.response.data : e); setShowLoading(false); } }; return ( <IonPage id="main-content"> {showLoading && <IonLoading isOpen={showLoading} duration={1000} />} {!showLoading && ( <> <IonHeader> <IonToolbar color="primary"> <IonTitle>صفحة المناسبات</IonTitle> <IonButton fill="clear" slot="end" color="tertiary" routerLink="/login" > مرحبا </IonButton> <IonButtons slot="start"> <IonMenuButton></IonMenuButton> </IonButtons> </IonToolbar> </IonHeader> <IonContent> <IonGrid> <IonRow> <div className="col-center"> <IonCol sizeLg="4"> <IonCard className="edit-card"> <IonCardHeader> <IonCardTitle color="primary"> شارك مناسبتك الخاصة! </IonCardTitle> <IonButton id="present-alert" color="primary"> انشاء مناسبة </IonButton> <IonAlert trigger="present-alert" header="اضافة مناسبة" buttons={[ { text: "إلغاء", role: "cancel", cssClass: "secondary", }, { text: "موافق", handler: () => { onSubmit(); }, }, ]} inputs={[ { name: "title", placeholder: "العنوان", value: title, onIonChange: (e) => setTitle(e.target.value), }, { name: "price", type: "number", placeholder: "السعر", min: 1, max: 100, value: price, onIonChange: (e) => setPrice(e.target.value), }, { name: "description", type: "textarea", placeholder: "التفاصيل", value: description, onIonChange: (e) => setDescription(e.target.value), }, ]} ></IonAlert> </IonCardHeader> </IonCard> </IonCol> </div> </IonRow> </IonGrid> <IonGrid> <IonRow className="col-edit"> <IonCol> {posts.length > 0 ? ( posts.map((post) => ( <IonCard key={post.id}> <IonCardHeader> <IonCardTitle color="secondary"> {post.title} </IonCardTitle> <IonCardSubtitle>{post.price}$</IonCardSubtitle> </IonCardHeader> <IonButton color="primary" onClick={() => presentAlert({ header: "تفاصيل المناسبة", subHeader: "قم بتسجيل الدخول وسارع بالحجز", message: `${post.description}`, buttons: ["اغلاق"], }) } className="btn-edit" id="present-alert" > احجز الان </IonButton> </IonCard> )) ) : ( <IonCard> <IonCardHeader> <IonCardTitle color="secondary"> لا توجد مناسبات </IonCardTitle> </IonCardHeader> </IonCard> )} </IonCol> </IonRow> </IonGrid> </IonContent> </> )} </IonPage> ); }; export default Events; قمت بتغيير const [post, setPosts] = useState("") إلى const [posts, setPosts] = useState([]) أ] وضع مصفوفة كقيمة إفتراضية. لأن ذلك يسمح بتخزين مجموعة من الأحداث التي تم جلبها من API في متغير posts، بدلاً من تخزين حدث واحد فقط، واستخدام المصفوفة posts ضروري لعرض قائمة من الأحداث بشكل صحيح. ثم استخدمت الدالة posts.map للتكرار على عناصر المصفوفة posts وعرض IonCard لكل حدث على حدة لضمان عرض جميع الأحداث التي تم جلبها من API. بعد ذلك ضبط معالجات الأحداث onIonChange لحقول النموذج (title و price و description) بشكل صحيح، لتحديث قيم تلك الحقول في حالة تغييرها من قبل المستخدم. وبعد إنشاء حدث جديد، يتم استدعاء الدالة getEvent() مرة أخرى من أجل تحديث قائمة الأحداث المعروضة وإظهار الحدث الجديد الذي تم إنشاؤه. مع إضافة معالجة أساسية للأخطاء في الدالتين onSubmit و getEvent لعرض رسائل خطأ واضحة للمستخدم في حالة حدوث أي مشكلة. واستخدام العرض الشرطي لعرض قائمة الأحداث (posts.length > 0) أو رسالة "لا توجد مناسبات" إن لم تكن هناك أحداث. import { IonMenuButton, IonHeader, IonTitle, IonToolbar, IonButtons, IonGrid, IonRow, IonCol, IonCard, IonCardHeader, IonCardTitle, IonButton, IonLoading, IonContent, IonCardSubtitle, useIonAlert, IonAlert, } from "@ionic/react"; import { IonPage } from "@ionic/react"; import "../css/event.css"; import axios from "../config/axios"; import { CREATE_EVENT_URL, EVENTS_URL } from "../config/urls"; import { useContext, useEffect, useState } from "react"; import { AuthContext } from "../context/AuthContext"; import React from "react"; const Events = () => { const [showLoading, setShowLoading] = useState(false); const [post, setPosts] = useState([]); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [price, setPrice] = useState(""); const [presentAlert] = useIonAlert(); const { jwt } = useContext(AuthContext); useEffect(() => { getEvent(); }, []); const onSubmit = async() => { const postData = new FormData(); postData.append("title", title); postData.append("description", description); postData.append("price", price); try{ await axios.post(CREATE_EVENT_URL,postData,{ headers: { Authorization: jwt, }, }).then((res) => { console.log("Event created successfully:", res.data); setTitle("") setDescription("") setPrice("") getEvent() }) }catch(e){ console.error("Error creating event:", e.response ? e.response.data : e); } } const getEvent = async () => { setShowLoading(true); try { await axios .get(EVENTS_URL, { headers: { Authorization: jwt, }, }) .then((res) => { console.log("Events fetched successfully:", res.data.getEvent); setPosts(res.data.getEvent); setShowLoading(false); }); } catch (e) { console.error("Error fetching events:", e.response ? e.response.data : e); setShowLoading(true); } }; return ( <IonPage id="main-content"> {showLoading ? ( <IonLoading isOpen={showLoading} duration={1000} /> ) : ( post && ( <> <IonHeader> <IonToolbar color="primary"> <IonTitle>صفحة المناسبات</IonTitle> <IonButton fill="clear" slot="end" color="tertiary" routerLink="/login" > مرحبا </IonButton> <IonButtons slot="start"> <IonMenuButton></IonMenuButton> </IonButtons> </IonToolbar> </IonHeader> <IonContent> <IonGrid> <IonRow> <div className="col-center"> <IonCol sizeLg="4"> <IonCard className="edit-card"> <IonCardHeader> <IonCardTitle color="primary"> شارك مناسبتك الخاصة! </IonCardTitle> <IonButton id="present-alert" color="primary" > انشاء مناسبة </IonButton> <IonAlert trigger="present-alert" header="اضافة مناسبة" buttons={[ { text: "إلغاء", role: "cancel", cssClass: "secondary", }, { text: "ok", handler: () => { onSubmit() }, }, ]} inputs={[ { name:"title", value:title, placeholder: "العنوان", onIonChange:(e) => setTitle(e.target.value) }, { name:"price", type: "number", placeholder: "السعر", min: 1, max: 100, value:price, onIonChange:(e) => setPrice(e.target.value) }, { name:"description", type: "textarea", placeholder: "التفاصيل", value:description, onIonChange:(e) => setDescription(e.target.value) }, ]} ></IonAlert> </IonCardHeader> </IonCard> </IonCol> </div> </IonRow> </IonGrid> <IonGrid> <IonRow className="col-edit"> <IonCol> {post.length > 0 ? ( post.map((post) => { return ( <IonCard key={post.id}> <IonCardHeader src={post}> <IonCardTitle color="secondary"> {post.title} </IonCardTitle> <IonCardSubtitle>{post.price}$</IonCardSubtitle> </IonCardHeader> <IonButton color="primary" onClick={() => presentAlert({ header: "تفاصيل المناسبة", subHeader: "قم بتسجيل الدخول وسارع بالحجز", message: `${post.description}`, buttons: ["اغلاق"], }) } className="btn-edit" id="present-alert" > احجز الان </IonButton> </IonCard> ); }) ) : ( <IonCard> <IonCardHeader> <IonCardTitle color="secondary">no</IonCardTitle> </IonCardHeader> </IonCard> )} </IonCol> </IonRow> </IonGrid> </IonContent> </> ) )} </IonPage> ); }; export default Events; قمت باضافة ion change ولم ترسل البيانات عن طريق alert اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Mohamed Ramzi2
كيف يمكنني ارسال البيانات الى الخادم باستخدام alert؟
backend.zip mybooking.zip
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.