CODEWITHSUNDEEP
javascriptjqueryvariables
nienn
nienn

Reputation: 2200

Accessing and modifing a variable in and out of functions

Hello i am trying to modify the variable popText but failing on the ajax function, i cant get the output on popText :(

What am i doing wrong?

function nariTooltip(){

var popTime;
var fading;
var popboxIsActive = false;
var mouseIsHoverPopbox = false;
var popText;

//Using Event Delegation to cover late AJAX inserted DOM elements
//no need to recall function after each AJAX run

//Mouseenter / Mouseout
$("body").on(
    {
        mouseenter: function(e){

                $hoverElem = $(this);

                //Define Variables
                var popDelay = 250;
                    if ($hoverElem.attr("popdelay")){
                        var popDelay = $hoverElem.attr("popdelay");
                    }

                popTime = setTimeout(function() {

                    popText = $hoverElem.attr("poptext");
                        if ($hoverElem.next().hasClass("poptext")) {
                            popText = $hoverElem.next(".poptext").html();
                        }

                    var popAjax = $hoverElem.attr("popajax");
                    if (popAjax){

                        var popAjax = popAjax.split(':');
                        popAjaxType = popAjax[0];

                        if (popAjaxType == 'general')
                            {
                            popAjaxUrl = 'tooltip_gen.php';
                            }
                        else if (popAjaxType == 'item')
                            {
                            popAjaxUrl = 'tooltip_items.php';
                            }


                        if (popAjaxUrl){
                            $.ajax({ url: 'ajax/'+popAjaxUrl,
                            data: {id: popAjax[1]},
                            type: 'get',
                            success: function(output) 
                                {
                                popText = output;
                                },
                            error:function (xhr, ajaxOptions, thrownError){
                                 popText =  html(xhr.statusText);
                                 },
                            });
                            }


                    //alert(outputs);
                    }

                    //Create Popup
                    $hoverElem.append('<div class="popbox">' + popText + '</div>');

popText always end up with the value assigned on popText = $hoverElem.next(".poptext").html();

Upvotes: 1

Views: 44

Answers (1)

Teemu Ikonen
Teemu Ikonen

Reputation: 11929

It seems that you create the div with the text before ajax has returned. Make function that sets the popText and call it when you've got it from ajax

function setPopText( elem, txt ) {
    $(elem).append('<div class="popbox">' + txt + '</div>')
}

And in your ajax

success: function ( output ) {
    setPopText( $hoverElem, output );
}

Upvotes: 1

Related Questions