محمد رضا
2 سال پیش توسط محمد رضا مطرح شد
7 پاسخ

ارسال اطلاعات فرم بعد از دریافت تاییدیه در لایو وایر

سلام خسته نباشید
توی لایو وایر وقتی میخواییم اطلاعات یک فرم رو ارسال کنیم چطور قبلش یه پیام تایید نمایش بدیم و بعد فرم رو sumbit کنیم؟
مثلا یک مودال باز بشه بپرسه ایا از ثبت اطلاعات اطمینان داری؟

یک ایده این هست که دکمه ی submit فرم پنهان بشه و دکمه ی دیگری گذاشته بشه خارج فرم مثلا و با کلیک بر روی اون به js مودال باز بشه و پس از تایید دوباره با js فرم submit بشه

اما میخوام ببینم راه حل تمیز تری که خود لایو وایر پیشنهاد داده باشه مثلا توی button که توی مودال هست بهش بگیم فلان فرم رو sumbit کنه وجود داره یا نه

چون در انتها submit اصلی خارج از فرم هست و داخل اون مودالیه که داریم تاییدیه میگیریم از کاربر.


ثبت پرسش جدید
محمد رضا
تخصص : Full Stack Developer
@salar.mohammad2013 2 سال پیش مطرح شد
0

سلام
برای دوستانی که ممکنه این گفتگو سوال شده باشه براشون
من کلا از from استفاده نکردم و با wire:model یا wire:model.defer و تعریف پراپرتی هایی در component لایو وایر خودم مقادیر رو سمت سرور ارسال میکردم
و هر جایی که دوس داشتم بعد هر پیغامی که نیاز بود با wire:click مثلا متد save رو صدا میزدم و اونجا عمل سیو کردن و clear کردن پیج رو انجام میدادم
چون redirect نداشتم البته.
نیاز من برطرف شد حالا اگر جایی ب مشکل خوردم به دلیل استفاده نکردن از فرم و راه حلی یافتم در این رابطه که تست شد همینجا اطلاع رسانی میکنم.


مجتبی دلشاد
تخصص : توسعه دهنده بک اند
@delshad 2 سال پیش مطرح شد
0

سلام
برای اینکار میتونی از sweet alert استفاده کنی
کاری که من میکنم به این صورته
یک باتن بصورت زیر داخل صفحه قرار میدم :

    <button class="btn btn-sm btn-outline-primary request-add">افزایش سقف خرید</button>

زمانی که کاربر روی این دکمه کلیک میکنه از طریق کد زیر یک الرت نمایش داده میشه :

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            $('. request-add').on("click", function (e) {
                Swal.fire({
                    title: 'درخواست افزایش سقف خرید',
                    text: "بصورت خودکار تیکتی با موضوع فوق جهت پیگیری برای شما ایجاد خواهد شد.",
                    icon: 'info',
                    showCancelButton: true,
                    confirmButtonText: 'بله ایجاد کن',
                    cancelButtonText : 'لغو',
                    showLoaderOnConfirm: true,
                    preConfirm: (input) => {
                        return @this.call('createRequest')
                    }
                }).then(function (result) {
                    Swal.showLoading()
                });
                e.preventDefault();
            });
        });
    </script>

توی کد بالا گه توجه کنی زمانی که کاربر الرت رو confirm میکنه , از طریق کد

return @this.call('createRequest')

متد من (داخل کامپوننت لایووایر) که createRequest نام داره اجرا میشه
با تغییرات میتونی قسمت های مختلف از این کد استفاده کنی


محمد رضا
تخصص : Full Stack Developer
@salar.mohammad2013 2 سال پیش مطرح شد
0

سلام
@delshad
مرسی از پاسخت جالب بود این نوع فراخوانی
ینی نظرت اینه که فرم رو اصلا submit نکنم و ی متد رو فراخونی کنم و از قبل خب همه ی متغیر ها مثلا با wire:model مقدار دهی شده و بعد عملیات فرمم رو reset کنم داده هاش رو؟


مجتبی دلشاد
تخصص : توسعه دهنده بک اند
@delshad 2 سال پیش آپدیت شد
0

اره میتونی اینکار رو انجام بدی
البته این راه حلی هست که خودم استفاده میکنم و ممکنه راه بهتری هم وجود داشته باشه
این آموزش رو هم یه نگاهی بهش بنداز, در قالب یک فرم کاری که مدنظرت هست رو انجام داده

https://www.leonelngande.com/livewire-confirm-form-submission-before-proceeding/

محمد رضا
تخصص : Full Stack Developer
@salar.mohammad2013 2 سال پیش مطرح شد
0

@delshad
توضیحی راجب confirm('Are you sure?!') نداده که چطور قراره confirm شه


مجتبی دلشاد
تخصص : توسعه دهنده بک اند
@delshad 2 سال پیش مطرح شد
0

توی فرم های لایووایر تگ ما به اینصورته که به متد submit داخل کامپوننت ما اشاره میکنه (که میتونه هر اسم دیگه ای باشه)

    <form wire:submit.prevent="submit">

به باتنی که قرار داده شده رویداد onClick رو داده و داخلش کد confirm('Are you sure?!') قرار داره که بعد از کلیک کاربر روی دکمه یک الرت نمایش داده میشه در صورتی که کاربر تایید کنه فرم submit میشه در غیر اینصورت event.preventDefault() فراخوانی میشه که رویداد رو کنسل میکنه.
من تستش نکردم اما از نظر کد که دیدم مشکلی نداره..شما خودت تست کن از مشکل داشت بگید خودمم از کدش استفاده کنم ببینیم مشکلش از کجاست


محمد رضا
تخصص : Full Stack Developer
@salar.mohammad2013 2 سال پیش مطرح شد
0

@delshad
اخه alert مرورگر ک قابل استفاده نیست و زشته
هر alert دیگه ای استفاده بشه مقدار انتخاب شده ی اون alert کجا ثبت شه که این تشخیص بده پاسخ کاربر موافق یا مخالف بوده.
حالا باز خودمم تست میکنم ببینم چی میشه
شاید بشه برای button توی مودال یا هرچی یک target قرار داد.


محمد رضا
تخصص : Full Stack Developer
@salar.mohammad2013 2 سال پیش مطرح شد
0

سلام
برای دوستانی که ممکنه این گفتگو سوال شده باشه براشون
من کلا از from استفاده نکردم و با wire:model یا wire:model.defer و تعریف پراپرتی هایی در component لایو وایر خودم مقادیر رو سمت سرور ارسال میکردم
و هر جایی که دوس داشتم بعد هر پیغامی که نیاز بود با wire:click مثلا متد save رو صدا میزدم و اونجا عمل سیو کردن و clear کردن پیج رو انجام میدادم
چون redirect نداشتم البته.
نیاز من برطرف شد حالا اگر جایی ب مشکل خوردم به دلیل استفاده نکردن از فرم و راه حلی یافتم در این رابطه که تست شد همینجا اطلاع رسانی میکنم.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام