display maps and images in modal problems with livewire

Programmer Programmers · 19 فبراير

مشكلة عدم فتح الmodal الخاص بعرض الصورة أو الخريطة في حالتين (بعد كل عملية إضافة أو التنقل بين الpagination).

ولايفتح ال modal إلا عند عمل تحديث للصفحة.

    public function store()
    {
        $this->dispatch('map_opend');
        $data = $this->validate();
        try {
            Tent::create($data);
            $this->successOperation($this->attribute);
        } catch (\Throwable $th) {
            session()->flash('error', 'عذرا لم تتم العملية');
        }
    }

    public function render()
    {
        return view('livewire.tent-component', [
            'tents' => Tent::paginate(5),
            'sacred_sites' => SacredSite::all(),
        ])->extends('dashboard.layouts.master');
    }

صفحة العرض

<td>
    <button type="button"  data-title="المنشأة" class="show-map-modal dropdown-item" data-latitude="{{ $tent->latitude }}"
        data-longitude="{{ $tent->longitude }}" data-location="{{ $tent->location }}">
        <i class="fa fa-image text-secondary" style="font-size: 20px"></i>
    </button>
</td>

محمد عاطف17 · 19 فبراير

بتاريخ 9 دقائق مضت قال Programmer Programmers:
في موديال الخرائط شغال زي الفل

لكن في الصور لم يفتح
<td>
    <button type="button" value="" data-title="النقل"data-image_url="{{ Storage::url($transportation_compane->contract) }}"
        class="show-image-modal dropdown-item">
        <i class="fa fa-image text-secondary" style="font-size: 20px"></i>
    </button>
</td>

هذا الكود بعد التعديل

$(document).on("click", ".show-image-modal", function(){
	if ($(this).data('type_media') === "video") {
            $("#video_src").attr("src", $(this).data('video_url'));
            $("#image_src").hide();
            $("#view_media_card_footer").show();
        } else {
            $("#view_media_card_footer").hide();
            $("#image_src").show();
            $("#image_src").attr("src", $(this).data('image_url'));
        }
        $("#image_modal").modal("show");
});

محمد عاطف17 · 19 فبراير

بتاريخ منذ ساعة مضت قال Programmer Programmers:

مشكلة عدم فتح الmodal الخاص بعرض الصورة أو الخريطة في حالتين (بعد كل عملية إضافة أو التنقل بين الpagination).

ولايفتح ال modal إلا عند عمل تحديث للصفحة.

    public function store()
    {
        $this->dispatch('map_opend');
        $data = $this->validate();
        try {
            Tent::create($data);
            $this->successOperation($this->attribute);
        } catch (\Throwable $th) {
            session()->flash('error', 'عذرا لم تتم العملية');
        }
    }

    public function render()
    {
        return view('livewire.tent-component', [
            'tents' => Tent::paginate(5),
            'sacred_sites' => SacredSite::all(),
        ])->extends('dashboard.layouts.master');
    }

صفحة العرض

<td>
    <button type="button"  data-title="المنشأة" class="show-map-modal dropdown-item" data-latitude="{{ $tent->latitude }}"
        data-longitude="{{ $tent->longitude }}" data-location="{{ $tent->location }}">
        <i class="fa fa-image text-secondary" style="font-size: 20px"></i>
    </button>
</td>

هل يمكنك ارسال الكود الخاص بفتح ال modal .

اعتقد انك تقوم باستخدام event Listener على ال class show-map-modal وعند الضغظ عليه تقوم بفتح ال modal . اذا كان هذا ما تقوم به فانك عندما تقوم باضافة بيانات جديدة او حتى التنقل بين الصفحات فان livewire يقوم بحذف جميع العناصر واعادة بنائها مرة اخرى وبذلك يتم حذف ال event Listener وهناك حلين لهذه المشكلة .

اولا الا تضع ال event Listener على العنصر ولكن على ال document وبذلك اذا حدث اى event click سوف يتم فتح ال modal اذا كان العنصر الذى تم الضغط على يحتوى class show-map-modal
```
$(document).on("click", ".show-map-modal", function(){
  // هنا نقوم بتنفيذ شيفرة فتح ال modal
});
```
والطريقة الثانية هى استخدام wire:click وتنفيذ الدالة التى تقوم بفتح ال modal

Programmer Programmers · 19 فبراير

بتاريخ 2 دقائق مضت قال محمد عاطف11:
هل يمكنك ارسال الكود الخاص بفتح ال modal .

اعتقد انك تقوم باستخدام event Listener على ال class show-map-modal وعند الضغظ عليه تقوم بفتح ال modal . اذا كان هذا ما تقوم به فانك عندما تقوم باضافة بيانات جديدة او حتى التنقل بين الصفحات فان livewire يقوم بحذف جميع العناصر واعادة بنائها مرة اخرى وبذلك يتم حذف ال event Listener وهناك حلين لهذه المشكلة .
اولا الا تضع ال event Listener على العنصر ولكن على ال document وبذلك اذا حدث اى event click سوف يتم فتح ال modal اذا كان العنصر الذى تم الضغط على يحتوى class show-map-modal
$(document).on("click", ".show-map-modal", function(){
  // هنا نقوم بتنفيذ شيفرة فتح ال modal
});
والطريقة الثانية هى استخدام wire:click وتنفيذ الدالة التى تقوم بفتح ال modal

هذا الخاص بالصورة

document.querySelectorAll(".show-image-modal").forEach((item) => {
    item.addEventListener("click", (e) => {
        if (item.dataset.type_media === "video") {
            $("#video_src").attr("src", item.dataset.video_url);
            $("#image_src").hide();
            $("#view_media_card_footer").show();
        } else {
            $("#view_media_card_footer").hide();
            $("#image_src").show();
            $("#image_src").attr("src", item.dataset.image_url);
        }
        $("#image_modal").modal("show");
    });
});

وهذا لعرض الخريطة

document.querySelectorAll(".show-map-modal").forEach((item) => {
    item.addEventListener("click", (e) => {
        var location = item.dataset.location; // الحصول على قيمة اسم الموقع
        var lat = parseFloat(item.dataset.latitude); // الحصول على قيمة خط العرض
        var long = parseFloat(item.dataset.longitude); // الحصول على قيمة خط الطول
        function showMap(lat, long){
            var coord = { lat:lat, lng:long};

            map = new google.maps.Map(document.getElementById("map"), {
                center: coord,
                zoom: 12,
                scrollwheel: true,
            });
            // Create an info window to share between markers.
            const infoWindow = new google.maps.InfoWindow();

            const marker = new google.maps.Marker({
                position: coord,
                title: location,
                map,
                optimized: false,
            });  

              marker.addListener("click", () => {
                infoWindow.setContent(marker.getTitle());
                infoWindow.open(marker.getMap(), marker);
              });
            $('#location').val(location);
        }
        showMap(lat, long);
        $("#map_modal").modal("show");
    });
});

محمد عاطف17 · 19 فبراير

بتاريخ 7 دقائق مضت قال Programmer Programmers:

هذا الخاص بالصورة

document.querySelectorAll(".show-image-modal").forEach((item) => {
    item.addEventListener("click", (e) => {
        if (item.dataset.type_media === "video") {
            $("#video_src").attr("src", item.dataset.video_url);
            $("#image_src").hide();
            $("#view_media_card_footer").show();
        } else {
            $("#view_media_card_footer").hide();
            $("#image_src").show();
            $("#image_src").attr("src", item.dataset.image_url);
        }
        $("#image_modal").modal("show");
    });
});

وهذا لعرض الخريطة

document.querySelectorAll(".show-map-modal").forEach((item) => {
    item.addEventListener("click", (e) => {
        var location = item.dataset.location; // الحصول على قيمة اسم الموقع
        var lat = parseFloat(item.dataset.latitude); // الحصول على قيمة خط العرض
        var long = parseFloat(item.dataset.longitude); // الحصول على قيمة خط الطول
        function showMap(lat, long){
            var coord = { lat:lat, lng:long};

            map = new google.maps.Map(document.getElementById("map"), {
                center: coord,
                zoom: 12,
                scrollwheel: true,
            });
            // Create an info window to share between markers.
            const infoWindow = new google.maps.InfoWindow();

            const marker = new google.maps.Marker({
                position: coord,
                title: location,
                map,
                optimized: false,
            });  

              marker.addListener("click", () => {
                infoWindow.setContent(marker.getTitle());
                infoWindow.open(marker.getMap(), marker);
              });
            $('#location').val(location);
        }
        showMap(lat, long);
        $("#map_modal").modal("show");
    });
});

اذا الكود الخاص بالصورة يصبح كالتالى

$(document).on("click", ".show-image-modal", function(){
	if (item.dataset.type_media === "video") {
            $("#video_src").attr("src", item.dataset.video_url);
            $("#image_src").hide();
            $("#view_media_card_footer").show();
        } else {
            $("#view_media_card_footer").hide();
            $("#image_src").show();
            $("#image_src").attr("src", item.dataset.image_url);
        }
        $("#image_modal").modal("show");
});

والكود الخاص بالخريطة يصبح كالتالى

$(document).on("click", ".show-map-modal", function(){
		var location = $(this).data('location'); // الحصول على قيمة اسم الموقع
        var lat = parseFloat($(this).data('latitude')); // الحصول على قيمة خط العرض
        var long = parseFloat($(this).data('longitude')); // الحصول على قيمة خط الطول
        function showMap(lat, long){
            var coord = { lat:lat, lng:long};

            map = new google.maps.Map(document.getElementById("map"), {
                center: coord,
                zoom: 12,
                scrollwheel: true,
            });
            // Create an info window to share between markers.
            const infoWindow = new google.maps.InfoWindow();

            const marker = new google.maps.Marker({
                position: coord,
                title: location,
                map,
                optimized: false,
            });  

              marker.addListener("click", () => {
                infoWindow.setContent(marker.getTitle());
                infoWindow.open(marker.getMap(), marker);
              });
            $('#location').val(location);
        }
        showMap(lat, long);
        $("#map_modal").modal("show");
});

Programmer Programmers · 19 فبراير

بتاريخ 16 دقائق مضت قال محمد عاطف11:

اذا الكود الخاص بالصورة يصبح كالتالى

$(document).on("click", ".show-image-modal", function(){
	if (item.dataset.type_media === "video") {
            $("#video_src").attr("src", item.dataset.video_url);
            $("#image_src").hide();
            $("#view_media_card_footer").show();
        } else {
            $("#view_media_card_footer").hide();
            $("#image_src").show();
            $("#image_src").attr("src", item.dataset.image_url);
        }
        $("#image_modal").modal("show");
});

والكود الخاص بالخريطة يصبح كالتالى

$(document).on("click", ".show-map-modal", function(){
		var location = $(this).data('location'); // الحصول على قيمة اسم الموقع
        var lat = parseFloat($(this).data('latitude')); // الحصول على قيمة خط العرض
        var long = parseFloat($(this).data('longitude')); // الحصول على قيمة خط الطول
        function showMap(lat, long){
            var coord = { lat:lat, lng:long};

            map = new google.maps.Map(document.getElementById("map"), {
                center: coord,
                zoom: 12,
                scrollwheel: true,
            });
            // Create an info window to share between markers.
            const infoWindow = new google.maps.InfoWindow();

            const marker = new google.maps.Marker({
                position: coord,
                title: location,
                map,
                optimized: false,
            });  

              marker.addListener("click", () => {
                infoWindow.setContent(marker.getTitle());
                infoWindow.open(marker.getMap(), marker);
              });
            $('#location').val(location);
        }
        showMap(lat, long);
        $("#map_modal").modal("show");
});

في موديال الخرائط شغال زي الفل

لكن في الصور لم يفتح

<td>
    <button type="button" value="" data-title="النقل"data-image_url="{{ Storage::url($transportation_compane->contract) }}"
        class="show-image-modal dropdown-item">
        <i class="fa fa-image text-secondary" style="font-size: 20px"></i>
    </button>
</td>

display maps and images in modal problems with livewire

السؤال

Programmer Programmers

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

Recommended Posts

محمد عاطف17

محمد عاطف17

Programmer Programmers

محمد عاطف17

Programmer Programmers

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية