Question

Hello fellow stackoverflow-ers,
I built an ajax image gallery and used asual’ jquery address for the deep linking.
The error happens, right after loading the gallery, on the first onclick when clicking on the image or on all the clicks of the thumbnails.

Basically, my code on the image is:

<li id="thumbnail_<?php echo $row->position;?>"><a href="javascript:;" onclick="javascript:setAddress('<?php echo $row->url;?>');"><img src="<?php echo $row->filePath;?>" /></a></li>

my code on the thumbnails is:

<li id="thumbnail_<?php echo $row->position;?>"><a href="javascript:;" onclick="javascript:setAddress('<?php echo $row->url;?>');"><img src="<?php echo $row->filePath;?>" /></a></li>

so that when I click, I change the address in the address bar using setAddress:

<script type="text/javascript">
    function setAddress(address){ 
        $.address.value(address.replace(/^#/, ''));
    }
</script>

and then I detect the change in the address and reload the image (and thumbnails accordingly) in ajax.

<script type="text/javascript">
    $.address.change(function(event) { 
        checkAnchor();
    }); 

    function checkAnchor(){
        var albumId = <?php echo $albumId;?>;
        if($.address.value() != '' && $.address.value() != '/'){
            //get the id of the image
            var arData = $.address.value().split("-");
            var arIdExt = arData[1].split(".");
            var id = arIdExt[0];
            reloadImage(albumId,id,'0','curr');
        }else{
            reloadImage(albumId,id,'1','curr');
        }
    }

    function reloadImage(albumId, photoId, position, action){
    $("#imgLoading").show();
    var visibleThumbnails = <?php echo $visibleThumbnails;?>;
    var albumName = $("#albumName").val();
    $.post('/montreal/inc/ajax/changeImage.php',{albumId:albumId, photoId:photoId, position:position, action:action}, function(data){
        //data + photoposition=[url]
        var arData = data.split("photoposition=");
        if(position == 0){
            position = jQuery.trim(arData[1]);
        }

        $("#photo-details").html(arData[0]);
        $.address.title(albumName+" - Photo #"+position);
        $("#imgLoading").hide();

        //reload the thumbnails
        if(action == 'next'){               
            var maxThumbnails = <?php echo count($album->arPhotos['photos']);?>;
            var nextPosition = position+1;
            var currentRow = Math.ceil(position/visibleThumbnails);
            if(nextPosition > maxThumbnails){ nextPosition = 1;}                            
            if(position%visibleThumbnails == 0 || position == maxThumbnails){
                reloadThumbnails(currentRow,visibleThumbnails,albumId,nextPosition,'next');
            }else{//fix the activeposition of the reloadThumbnails
                reloadThumbnails(currentRow,visibleThumbnails,albumId,nextPosition,'curr');
            }               
        }else if(action == 'curr'){
            var maxThumbnails = <?php echo count($album->arPhotos['photos']);?>;
            var currentRow = Math.ceil(position/visibleThumbnails);
            reloadThumbnails(currentRow,visibleThumbnails,albumId,position,'curr');
        }
    },"html"  
);

}

The “stack overflow at line 0” appears right after the click and before the setaddress, so that I am pretty confused as to where it could come from. After clicking on the error message, nothing happens, and after clicking on the image again, the gallery actually works. But if I click on the thumbnails, the error appears, but if I click on the thumbnails again, the error still appears.

As far as I’ve read, this error is way generic and is usually caused by a loop or a recursion. But I cannot see one, especially when I can see it happen only on the first click in the gallery.

Anyone has a hint as to where I should search?

Example of the error:
http://www.ckoi.com/montreal/photos/gala-des-gemeaux-tapis-rouge-194/

EDIT:
After some tests, I realized that the error actually happens right after I loaded my page. Anywhere I click, I get a stack overflow. So that I am even more confused… But maybe it’s because I load the gallery a first time in ajax? I’ll investigate

Answer 1

From the original poster:

Ok, I found it. I’m really not sure why this was causing such trouble for IE, but here it was:

In order to keep track of the album title and not to have to get it in every one of my ajax calls, I kept it in an invisible text input :

<input id="albumName" type="text" style="display:none;" value="<?php echo $album->name;?>"/>

If the title had double spaces in that hidden input, IE was complaining… To me, this makes no sense, but now it works…

Thanks guys for your insights! Hopes this helps someone else to debug IE….