ارسال البيانات من الواجهة الامامية في ionic

Mohamed Ramzi2 · 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

Mustafa Suleiman · 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) أو رسالة "لا توجد مناسبات" إن لم تكن هناك أحداث.

Mohamed Ramzi2 · 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

ارسال البيانات من الواجهة الامامية في ionic

السؤال

Mohamed Ramzi2

2 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

Mohamed Ramzi2

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية