اذهب إلى المحتوى
  • 0

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

Mohamed Ramzi2

السؤال

كيف يمكنني ارسال البيانات الى الخادم باستخدام 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>
              )

 

one.png

Screenshot 2024-06-27 003523.png

Screenshot 2024-06-27 003602.png

backend.zip mybooking.zip

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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 

Screenshot.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...