0
 $.ajax({
                method: 'get',
                url: '{{route('customer.social_links.index')}}',
                success: function (data) {
                    $.each(data, function (i, order) {
                        $links.append(
                            '<div class="shadow p-2 m-1 row"><div class="col-6">'
                            + '<b>' + order.account + '</b><br><span>' + order.account_name +
                            '</span>' +
                            '</div>' +
                            '<div class="col-6">' +
                            '<div class="row">' +
                            '<input type="hidden" value=' + order.id + 'id="delete-data">' +
                            '<button type="button" class="deleteSocialLink" >' +
                            ' <i class="fa fa-trash fa-4x" onclick="deleteData();"></i></button> </div>' +
                            '</div>');
                    });
                },
                error: function () {
                    alert('error occurred');
                }
            });

I've sent an ajax request to the serve the data is received perfectly. After that I'm calling the following function. but it says deleteData() is not defined.

function deleteData() {
                $.ajax({
                    method: 'post',
                    url: "{{route('customer.unlink')}}",
                    data: {
                        "_token": "{{csrf_token()}}",
                        "id": $("#delete-data").val(),
                    },
                    success: function (data) {
                        console.log(data);
                    }
                });
            }

It gives the following result but when i click on any divs only the first one is clicked. Recult shown here

Waheed Sindhani
  • 1
  • 3
  • You probably declared `function deleteData()` inside document.ready and it needs to be outside to be accessible to `onclick` scope context. Does it work if you do `window.deleteData = function deleteData() {...`? That is just a hack but will tell if it is a scope issue – charlietfl Aug 17 '20 at 05:56
  • yes it worked by the way there is still a problem. i've three divs and when i click any of them it only clicks on the first one. – Waheed Sindhani Aug 17 '20 at 06:03
  • Well for the first issue just move the function declaration outside of document.ready or use a jQuery event listener instead of `onclick`. As for the 3 divs would need to see more code for that as per [mcve] – charlietfl Aug 17 '20 at 06:06
  • Read the question for delete with Ajax https://stackoverflow.com/questions/46341260/laravel-5-5-delete-item-with-ajax-call-on-click – xNoJustice Aug 17 '20 at 06:07
  • you can see this i think help you [https://stackoverflow.com/a/63124969/9569941](https://stackoverflow.com/a/63124969/9569941) – Abdulmajeed Aug 17 '20 at 06:57

0 Answers0