display maps and images in modal problems with livewire

بتاريخ 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");
});

بتاريخ منذ ساعة مضت قال 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

بتاريخ 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");
    });
});

بتاريخ 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");
});

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