Ajax call, see elements visualy but Javascript doesn't see them

I would really appreciate your help, as I been looking over and over and completely lost in what could go wrong.

I have an Ajax call to web service, and from this call I am building some HTML structure. Up to this point everything is good, the data get pulled and I can visually see the structure.

However as my code continues and I try to read those elements later for some more manipulations, JavaScript doesn't see them at all, and on element counts I am getting zero.

Some relevant code from the project. This function that runs first and basically builds the needed HTML piece

                $.ajax({
                    type: "POST",
                    url: "HistoryEventsWebService.asmx/getEventsData",
                    data: event_types,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) { //on success                  
                        var results = result.d;

                        $('#insidediv_container').empty();

                        for (var i = 0; i < results.length; i++) {
                            var insidediv = '';
                            insidediv += '<div class="insidediv">';
                            insidediv += '<span class="month">' + results[i].month + '</span><span class="day">' + results[i].day + '</span><span class="year">' + results[i].year + '</span>';
                            insidediv += '<div class="header"><span>Jan 08, 2010 - event one</span> </div>';
                            insidediv += '<div class="contentdiv">' + results[i].event_desc + '</div>';
                            insidediv += '</div>';

                            $('#insidediv_container').append(insidediv);          
                        }
                    }
                });
                return false;

Right after this upper function is done, my code is continued to next function, and that's where I have my problem!

 var currentbox = 0;
            var current_box_old = 0;
            var box_size = ($('.insidediv').width() + 1).toString();
            var box_count = $('.container2 > div > div').length - 1;

            //console.log(box_count);
            var min_range = 0;

            setScale(); //making slider visual elements

            //slider code
            $("#slider").slider({
                min: min_range,
                max: b开发者_运维百科ox_count,
                value: 0,
                animate: true,
                //step: 1,
                slide: function (event, ui) {
                    current_box_old = currentbox;
                    currentbox = ui.value;
                    if (currentbox > current_box_old)
                        $('#insidediv_container').animate({ "margin-left": "-=" + box_size + "px" }, "normal");
                    else
                        $('#insidediv_container').animate({ "margin-left": "+=" + box_size + "px" }, "normal");
                }
            });

Thank you in advance.

---

The reason this isn't working is that the whole of the code you want executed must be inside the ajax success method. Because the ajax post is asynchronous, the ajax method 'returns' almost instantly and flow immediately flows to your second block of code. However, because it got there so quickly, the ajax post hasn't received it's results yet, so the success method hasn't been called yet, which in turn means that the elements you're looking for have not yet been inserted into the DOM.

If these are the rough modular steps in what your code is doing:

$.ajax (A) -> http post (B) -> success (C) -> add elements to DOM (D)
|
v
update new DOM elements (E)

Then the actual flow of code is A, B, E, C, D and not A, B, C, D, E.

Hope this helps!

---

Apparently JQuery Ajax has function complete. I ended up wrapping my second piece of code into function and making call from complete.

Thanks everyone for the help.