• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 554
  • Last Modified:

jQuery callback

Hi Experts,

I've got a situation where I'm doing some jquery image loading and want to halt my function until part of the processing is done. See  // I WANT TO PAUSE HERE... mid way down the code...

Anyone know how I should do this??

var diagnosticNext = $('#diagnostic-paging-panel > ul > li.numeric-paging-next-item');
                var goForward = $(diagnosticNext).hasClass('numeric-paging-active');
                var pageForward =  $('#diagnostic-paging-panel > ul > li.numeric-paging-next-item > a').attr('href');

                var diagnosticPrevious = $('#diagnostic-paging-panel > ul > li.numeric-paging-previous-item');
                var goBackward = $(diagnosticPrevious).hasClass('numeric-paging-active');
                var pageBackward =  $('#diagnostic-paging-panel > ul > li.numeric-paging-previous-item > a').attr('href');

                if(goForward || goBackward){
                
                    if(goForward) pageLoadLink = pageForward;
                    else pageLoadLink = pageBackward;

                    updatePaging(
                        pageLoadLink,
                        type,
                        function(data) {
                            diagnosticImages = data.DiagnosticImageDetails;
                            diagnosticImagesPagingPanel = data.DiagnosticImagePagingPanel;
                        },
                        function() {
                            return diagnosticImages;
                        },
                        function() {
                            return diagnosticImagesPagingPanel;
                        }
                    );

                  // I WANT TO PAUSE HERE UNTIL updatePaging() is finished...   
                  var image = images[imageIndex];
                }

function updatePaging(uri, imageType, updateData, getImages, getImagesPagingPanel) {
        $('#' + imageType + '-images-carousel .carousel-loading').children().remove();
        $('#' + imageType + '-images-carousel .carousel-loading').prepend(getAjaxLoadingMarkup(imageType + '-carousel-loading', 'Loading Images...'));
        $('#' + imageType + '-images-carousel .carousel-loading').show();
    
        $.getJSON(uri, function(data) {
            if (isSuccess(data, false)) {
                updateData(data);
                
                $('#' + imageType + '-images-carousel .carousel-tray ul').children().remove();
                
                for (var x = 0; x < getImages().length; x++) {
                    $('#' + imageType + '-images-carousel .carousel-tray ul').append('<li><div><span>' + getImages()[x].PageObject.Title + '</span></div><a href="#' + getImages()[x].PageObject.Id + '" id="image-' + imageType + '-' + getImages()[x].PageObject.Id + '"><img src="' + getImages()[x].PageObject.SmallImageFileName + '" alt="' + getImages()[x].PageObject.Title + '" width="120" height="90" /></a></li>\r\n');
                }
                
                setPagingPanelPage(getImagesPagingPanel().PreviousPage, '#' + imageType + '-images-carousel .numeric-paging-previous-item', 'Previous');
                setPagingPanelPage(getImagesPagingPanel().NextPage, '#' + imageType + '-images-carousel .numeric-paging-next-item', 'Next');
                
                for (var x = 0; x < getImagesPagingPanel().NumberedPages.length; x++) {
                    setPagingPanelPage(getImagesPagingPanel().NumberedPages[x], '#' + imageType + '-images-carousel .numeric-paging-page-item:eq(' + x + ')', diagnosticImagesPagingPanel.NumberedPages[x].PageNumber);
                }
            } else {

            }
            $('#' + imageType + '-images-carousel .carousel-loading').hide();
        });
    }

Open in new window

0
critto
Asked:
critto
  • 3
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
why dont you move those line (29-30) after line 57, where the getJson call back is?
0
 
Gurvinder Pal SinghCommented:
or you can check if the loading image carousel (at line 57) is visible or not

so replace line 29 by
checkIfCompleted();

$('#' + imageType + '-images-carousel .carousel-loading').hide();

function checkIfCompleted()
{
   if ($('#' + imageType + '-images-carousel .carousel-loading').is(':hidden') )
   {
       setTimeout("checkIfCompleted()", 3000);
   }
}
0
 
crittoAuthor Commented:
This is a panel of images which click through.. the updatePaging method is only called when the user clicks on the last image, not for every click.
0
 
Gurvinder Pal SinghCommented:
i did not understand.
how does that <<every click>> or <<last click>> makes any difference?
After all you are making a change in the method where you would be calling updatePaging  method

0
 
crittoAuthor Commented:
Good point. Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now