Init() functions call to loading content via ajax not working 100% of time

Question

I have a single page website that pulls in content via ajax. when the page is first loaded it runs an init() function that checks the url and decides what content to be added to the DOM based on that url with a switch statement using ajax. The problem is that mainly on my iphone does the init function not get called about 60% of the time. I am out of ideas on to what might be happening here, if someone could shine some light on the situation i would be more than thankful. The only thing i can think of is the loading order is getting intangled and so the init function calls nothing or freezes some how. The page does not freeze itself by the way just the content that is supposed to be loaded is not showing. My entire script is wrapped in an object of portfolio. i am just going to post the functions i feel might be causing the problem.if you need more of the script let me know. Here is some of my javascript:

         init: function(){
            var location = document.URL.substr(document.URL.lastIndexOf('/') + 1), //Grabs the last segement of the url and assigns it to a value
                page;

            portfolio.footer.empty();
            switch(location){
                case 'contact-page':
                    $('#main-nav ul li.contact-page').addClass('active');
                    page = 'contact';
                    break;
                case 'about-page':
                    $('#main-nav ul li.about-page').addClass('active');
                    page = 'about';
                    break;
                case 'portfolio-page':
                    $('#main-nav ul li.portfolio-page').addClass('active');
                    page = 'portfolio';
                    break;
                default:
                    $('#main-nav ul li.portfolio-page').addClass('active');
                    page = 'portfolio';
                    break;
            }
            portfolio.loadProjects(page);
            portfolio.loadFooter();
        },
        loadProjects: function(page){
            portfolio.footer.empty();
            //$('#portfolio').css('height', '100%');
            portfolio.ajaxCall('portfolio-wrapper', "partials/"+page+".html");
            if(page === 'portfolio'){
                portfolio.getProjects();
            }
            portfolio.loadFooter();
        },
         ajaxCall: function(context, page){
            var loading = function(){
                $('.'+context+'').html(
                '<div id="loader">'+
                       '<img id="loader-img" alt="" src="img/loading-dog.gif" width="100" height="100" align="center" />'+
                        '<p>Loading..</p>'+
                   '</div>'
                );
            };

            $('.'+context+'').load(page, loading(), function(result) {
                if(portfolio.w<=1000){
                    portfolio.project.fadeOut('fast').empty().append(result).stop().css({opacity: '0', display: 'block'}).animate({opacity: '1'}, 1000);
                }else{
                    portfolio.project.fadeOut('fast').empty().append(result).stop().css({marginLeft: '-1200px', opacity: '0', display: 'block'}).animate({marginLeft: '0', opacity: '1'}, 1000);
                }
            });
        },

Maybe it's just me, but one would think it would be pretty pertinent to show us where the `init` function is being called, not just the function ? — adeneo, Feb 24 '15 at 17:30
it is being called right outside of the portfolio object at the bottom. — Travis Michael Heller, Feb 24 '15 at 17:31
(function(){ "strict"; var portfolio = { }; portfolio.init(); }()); — Travis Michael Heller, Feb 24 '15 at 17:32
Would it be better if i just posted the entire script? 237 lines long — Travis Michael Heller, Feb 24 '15 at 17:34
Then `.init()` should always be called. I don't see why it shouldn't. Is there anything special about that 60%? — Halcyon, Feb 24 '15 at 17:34
Maybe the ajax call is getting hung up? this is loaded on a live site if you wanted the address — Travis Michael Heller, Feb 24 '15 at 17:36
I am going to try adding a timeout function to the call and see if that helps. If it times out i'll just call it again. — Travis Michael Heller, Feb 24 '15 at 17:37
Have you checked to confirm that the function is not being called, not that it is failing? I have encountered issues similar to this where I was attempting to access the DOM through jQuery prior to jQuery or the document being ready. To resolve that, I would wrap my call to `init` with a check to see if jQuery was defined and the document was ready. Once both of those conditions are met, then I would call `init`. — Paul Rowe, Feb 24 '15 at 17:38
is this happening when you go Back to that page on your iPhone? in that case it can be the iOS safari's caching mechanism which does not run the code again and instead shows your app in the state it was last seen. Read http://stackoverflow.com/questions/5297122/preventing-cache-on-back-button-in-safari-5 — nuway, Feb 24 '15 at 17:39
#Paul Rowe i have checked and the init function is being called all the time. It is the ajax call to load the content that is getting freezed up somehow or what #nuway said might be the problem as well/ — Travis Michael Heller, Feb 24 '15 at 17:41
just gotta put some break points in there and see what gets hit. Do you know how to connect your phone to Safari and debug? — nuway, Feb 24 '15 at 17:43
#nuway thank you, I completely forgot you could do that. It turns out that it works about 95% of the time and usually only breaks or doesn't load content when I hit the refresh button multiple times in a row. I need to practice learning on to debug with break points so this will be a good challenge. — Travis Michael Heller, Feb 24 '15 at 17:46
unable to recreate the problem with the IOS iPhone simulator. must be a native issue with iPhone that might be causing it. — Travis Michael Heller, Feb 24 '15 at 17:54

Init() functions call to loading content via ajax not working 100% of time

0 Answers0