Getting variable undefined in Jquery

Question

I have rows loaded from the database via ajax using jquery. It grabs a php page via ajax, the php page gets the results from the db then returns it back and in jquery I display the results within a div on the webpage. I then have a function that runs every 60 seconds that updates each row, however because the data is loaded via ajax it doesnt "see" the elements needed to run this code every 60 seconds. Here is the code that is giving me the undefined error:

var waitlist_info = $('.currbar').attr('title');

Could I use live with jquery for this to work? If so how would I make it work in this case? I only used live to bind to an action like click.

EDIT

Here is additional code. I added the check to see if there is at least once instance of currbar, however when the code runs the currbar check always is zero until 60 seconds later then it works.

    jQuery.noConflict();

    jQuery(function($) {

        function displayListTimes() {

            if($(".currbar:first").length > 0)
            {

                var list_info = $('.currbar').attr('title');
                var break_info = list_info.split('<>');

                $.ajax({
                    type:"GET",
                    data:'tzone=' + break_info[1],
                    url:"/ajax/time.php",
                    success: function(data) {

                        $('.progress').each(function() {
    //code runs here
                        });

                    }

                });

            }

        };

    var socket = io.connect('http://localhost:2424');

    socket.on('connect', function () {
$.get('/getlist.php', function() {});
    });

    socket.on('message', function (json) {
        var obj = $.parseJSON(json);
        $('#listqueue').html(obj.queuelist);
    });

    displayListTimes();
    setInterval(displayListTimes,60000);

});

Please show some more code so we can make sense of your question. A bit of HTML would be helpful, too. Thanks! — vzwick
– vzwick, Commented Oct 12, 2011 at 7:44
$('.currbar').attr('title'); will return the value of the first .currbar element. The DOM is searched at the time $('.currbar') is executed, so it does work with elements that have been added dynamically. — Felix Kling
– Felix Kling, Commented Oct 12, 2011 at 7:45

Senica Gonzalez · Accepted Answer · 2011-10-12 10:39:40Z

1

Without seeing the rest of the code, you are probably getting this error because the function runs before the page loads the first set of elements.

So you can check if the element exists by using

if($(".currbar:first")[0]){
  var waitlist_info = $('.currbar').attr('title');
}

This will stop you from getting undefined error.

If you are adding html to the page via ajax, you can also use:

jQuery(document).bind("DOMSubtreeModified", function(){
    var waitlist_info = $('.currbar').attr('title');
    //Then do rest of code here
});

This won't run every 60 seconds, but it will run everytime something gets added to the page.

Also, you can do

jQuery.post("ajax page", {vars:vars}, function(html){
  jQuery("#someelement").append(html);
  var waitlist_info = jQuery(".currbar").attr("title");
  //whatever code you need here
});

Again, this is not every 60 seconds.

edited Oct 12, 2011 at 10:39

answered Oct 12, 2011 at 7:59

Senica Gonzalez

8,22017 gold badges71 silver badges111 bronze badges

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

5 Comments

jfriend00 Over a year ago

Would probably be better to use $(".currbar:first").length to test if jQuery object is empty.

John Over a year ago

@Senica Gonzalez I believe that is the case, so how can I have it running after the page loads?

Johncl Over a year ago

If your auto refresh runs in the background it will sometimes run at the same time your .ajax call is fetching the data. You either need to stop the timer before the ajax call and restart it after, or you have to add a semaphore attribute in a hidden input that you can check inside the timer so that it knows when it is free to update it.

Senica Gonzalez Over a year ago

You shouldn't have a problem with that. If you are assigning it as a var, jQuery should reevaluate and grab the full set of new DOM elements.

Senica Gonzalez Over a year ago

Also, you can use the ready() function from within you ajax call to run something on the html. I posted above.

Sedat Başar · Accepted Answer · 2011-10-12 07:48:50Z

0

Firstly u can create var waitlist_info; but dont initialize it. When your function is running then initialize it in that function as waitlist_info = $('.currbar').attr('title');

answered Oct 12, 2011 at 7:48

Sedat Başar

3,8083 gold badges28 silver badges28 bronze badges

Collectives™ on Stack Overflow

Getting variable undefined in Jquery

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related