how to pass php variable to jquery tooltip using Ajax?

Question

I have event_id php variable in current page. and I want to display it in jquery tooltip using ajax(must). But there's error that event_id isn't defined

jquery file which has tooltip function:

function tooltip(self){
    $(document).ready(function(){
        $("tr").tooltip({
            track: true,
            content: function(){
                $.ajax({
                    url: window.location.pathname,//current url
                    type: 'post',
                    data: {event_id}, //undefined
                    success: function(data){
                        $('#tooltip_td').attr('title', data); 
                    }
                });
            }
        });

        $("tr").mouseout(function(){
            $(this).attr('title','Please wait...');
            $(this).tooltip();
            $('.ui-tooltip').hide();
        });
    });
}

index.blade.php: // I call tooltip function in this html file. // $participant has event_id

            <tr>
                <td class="can_filter">{{ $participant['id'] }}</td>
                 <td class="can_filter" id="tooltip_td" data-js="{{ $participant['event_id'] }}" title="Any default tooltip title" onclick="
                    tooltip(this);
                ">{{ $participant['name'] }}</td>

what should I have to do? Thank in advance!

That's because you've not defined event_id anywhere in your JS, or given it a value...? — Rory McCrossan
– Rory McCrossan, Commented Oct 8, 2019 at 8:18
Yes so what I want to do is to pass event_id in index.blade.php to jquery file : ) and display it in tooltip — Juno J
– Juno J, Commented Oct 8, 2019 at 8:23
you have used data-js .. i think you might wanna change {event_id} to something $(this).data('js') — Demonyowh
– Demonyowh, Commented Oct 8, 2019 at 8:23
oh I've never seen that before. You mean like this? content: function(){ $event_id = $('#tooltip_td').attr('data-js'); $.ajax({ url: window.location.pathname, type: 'post', data: {event_id}, ...? — Juno J
– Juno J, Commented Oct 8, 2019 at 8:26

Ali Alizadeh · Accepted Answer · 2019-10-08 08:31:00Z

1

you can init "event_id" in jquery like this:

var eventID = $(this).data('js');

and then use eventID in data object. like this:

$.ajax({
         url: window.location.pathname,//current url
         type: 'post',
         data: {'event_id':eventID},
         success: function(data){
            $('#tooltip_td').attr('title', data); 
         }
});

good luck [ ai ]

answered Oct 8, 2019 at 8:31

Ali Alizadeh

3612 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to pass php variable to jquery tooltip using Ajax?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related