Solved

jQuery callback

Posted on 2011-02-24
5
547 Views
Last Modified: 2012-05-11
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
Comment
Question by:critto
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34977032
why dont you move those line (29-30) after line 57, where the getJson call back is?
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 34977054
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
 

Author Comment

by:critto
ID: 34977332
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34977441
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
 

Author Comment

by:critto
ID: 34977574
Good point. Thanks.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question