using AJAX (jquery) shadowbox doesnt work until F5 is pressed

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

using AJAX (jquery) shadowbox doesnt work until F5 is pressed

tristian o'obrien
hi,

i have stripped down code to loop through some xml containing the various image attributes.  however, when the page loads, it takes an f5 to make shadowbox work.

i cannot fathom it out, is it a bug or is it my browser (internet explorer 6)?

here's my code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
        <title id=onetidTitle>My Lightbox</title> 
        <style> body { text-align: center; background:#d5d5d0; } #central { display:none; top:20%; background:#d5d5d0; border:1px solid #ddd; width: 700px; margin: 0 auto; } #header { display: block; height: 40px; } #ghostLayer { } img { border-top: 3px solid white; border-left: 3px solid white; border-right: 3px solid white; border-bottom: 7px solid white; margin-right: 2px; margin-bottom: 2px; } </style>               
        <link rel="stylesheet" type="text/css" href="/C19/C11/jquery%20libraries/Document Library/scripts/shadowbox-build-3.0rc1/shadowbox.css" />
        <script type="text/javascript" src="/C19/C11/jquery libraries/Document%20Library/scripts/jquery.js"></script>        <script type="text/javascript" src="/C19/C11/jquery libraries/Document%20Library/scripts/shadowbox-build-3.0rc1/shadowbox.js"></script>        <script type="text/javascript" > Shadowbox.init({players:['img', 'iframe']}); </script>
</head>
<body style="background: #d5d5d0;" marginwidth="0" marginheight="0">
<script type="text/javascript" > function querySt(qs) { searchQuerys = window.location.search.substring(1); query = searchQuerys.split("&"); for (i=0; i<query.length; i++) { ft = query[i].split("="); if (ft[0] == qs) { return ft[1]; } } } var List = querySt('List'); var View = querySt('View'); try { if (List.length = 0) throw('missing list parameter in querystring'); if (View.length = 0) throw('missing view parameter in querystring'); } catch(err) { document.writeln(err.message); } </script>                               
        <div id="header"></div>
                <div id="central">
                <div id="ghostLayer"></div>
        </div>
<script type="text/javascript" > var listUrl = '/C18/C11/Tristians%20image%20library' + '/_vti_bin/owssvr.dll?CS=109&XMLDATA=1&RowLimit=0&List={' + List + '}&View={' + View + '}'; $.ajax({ type: "GET", url: listUrl, dataType: "xml", success: function(xml) { $("z\\:row",xml).each(function(){ try { //Create an input type dynamically. var anchor = document.createElement("a"); var url = '/'+$(this).attr('ows_RequiredField'); var title = $(this).attr('ows_NameOrTitle'); anchor.setAttribute("class", "myShadowBox"); anchor.setAttribute("title", title); //anchor.setAttribute("rel", "shadowbox[myGallery]"); anchor.setAttribute("rel", "shadowbox"); anchor.setAttribute("href", url); var image = document.createElement("img"); image.setAttribute("src",url); image.setAttribute("title", title); image.setAttribute("width", "100"); image.setAttribute("height", "100"); image.setAttribute("alt", title); anchor.appendChild(image); $("#ghostLayer").append(anchor); } catch(err) { alert(err.description); } }); } }); </script>        <script type="text/javascript" > $(document).ready(function () { //Shadowbox.clearCache(); //Shadowbox.setup(); $("#central").css("display","block"); //$("#ghostLayer a.myShadowBox").Shadowbox({gallery:"myGallery"}); $("#ghostLayer a.myShadowBox").shadowbox(); }); </script></body>
</html>


any help would be greatly appreciated.

thanks
Reply | Threaded
Open this post in threaded view
|

Re: using AJAX (jquery) shadowbox doesnt work until F5 is pressed

Wizzud
The ajax call is not inside a DOM Ready function - it should be!
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: using AJAX (jquery) shadowbox doesnt work until F5 is pressed

tristian o'obrien
Wizzud,  

thanks for replying.  i tried that...  still similar fault.  takes an F5 or couple of F5's to render shadowbox.  has me truly stumped.  i cleared cache before putting a document ready callback in...

                                $(document).ready(function () {
                                        $.ajax({
                                                type: "GET",
                                                url: listUrl,
                                                dataType: "xml",
                                                success: function(xml) {
                                                        $("z\\:row",xml).each(function(){
                                                                try {
                                                                        //Create an input type dynamically.
                                                                        var anchor = document.createElement("a");
                                                                        var url = '/'+$(this).attr('ows_RequiredField');
                                                                        var title = $(this).attr('ows_NameOrTitle');
                                                                        anchor.setAttribute("class", "myShadowBox");
                                                                        anchor.setAttribute("title", title);
                                                                        //anchor.setAttribute("rel", "shadowbox[myGallery]");
                                                                        anchor.setAttribute("rel", "shadowbox");
                                                                        anchor.setAttribute("href", url);
                                                                        var image = document.createElement("img");
                                                                        image.setAttribute("src",url);
                                                                        image.setAttribute("title", title);
                                                                        image.setAttribute("width", "100");
                                                                        image.setAttribute("height", "100");
                                                                        image.setAttribute("alt", title);
                                                                       
                                                                        anchor.appendChild(image);
                                                                        $("#ghostLayer").append(anchor);
                                                                }
                                                                catch(err)
                                                                {
                                                                        alert(err.description);
                                                                }
                                                        });
                                                }
                                        });
                                });
Reply | Threaded
Open this post in threaded view
|

Re: using AJAX (jquery) shadowbox doesnt work until F5 is pressed

Wizzud
Append the $(__).shadowbox() call to the ajax success function
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: using AJAX (jquery) shadowbox doesnt work until F5 is pressed

tristian o'obrien
In reply to this post by tristian o'obrien
i have fixed this now.  it's not the fault of shadowbox, which is truly excellent.  it was my misunderstanding of how ajax and the success event works.  i have modified the code  see below.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ Page language="C#"     Inherits="Microsoft.SharePoint.Portal.WebControls.WebPartPage,Microsoft.SharePoint.Portal,Version=11.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
        <title id=onetidTitle>Lightbox</title> 
        <style> body { text-align: center; background:#d5d5d0; } #central { display:none; top:20%; background:#d5d5d0; border:1px solid #ddd; width: 700px; margin: 0 auto; } #header { display: block; height: 40px; } #ghostLayer { } img { border-top: 3px solid white; border-left: 3px solid white; border-right: 3px solid white; border-bottom: 7px solid white; margin-right: 2px; margin-bottom: 2px; } </style>               
        <link rel="stylesheet" type="text/css" href="/C19/C11/jquery%20libraries/Document Library/scripts/shadowbox-build-3.0rc1/shadowbox.css" />
        <script type="text/javascript" src="/C19/C11/jquery libraries/Document%20Library/scripts/jquery.js"></script>        <script type="text/javascript" src="/C19/C11/jquery libraries/Document%20Library/scripts/shadowbox-build-3.0rc1/shadowbox.js"></script>        <script type="text/javascript" > //Shadowbox.init(); Shadowbox.init({players:['img', 'iframe']}); </script>
</head>
<body style="background: #d5d5d0;" marginwidth="0" marginheight="0">
<script type="text/javascript" > function querySt(qs) { searchQuerys = window.location.search.substring(1); query = searchQuerys.split("&"); for (i=0; i<query.length; i++) { ft = query[i].split("="); if (ft[0] == qs) { return ft[1]; } } } var List = querySt('List'); var View = querySt('View'); try { if (List.length = 0) throw('missing list parameter in querystring'); if (View.length = 0) throw('missing view parameter in querystring'); } catch(err) { document.writeln(err.message); } </script>                               
        <div id="header"></div>
                <div id="central">
               
        </div>
<script type="text/javascript" > var listUrl = '/C18/C11/Tristians%20image%20library' + '/_vti_bin/owssvr.dll?CS=109&XMLDATA=1&RowLimit=0&List={' + List + '}&View={' + View + '}'; //alert(listUrl); $(document).ready(function () { //$(document).empty(); $.ajax({ type: "GET", url: listUrl, dataType: "xml", success: function(xml) { //alert('about to iterate through nodes'); var ghostLayer = document.createElement("div"); //alert('ghostLayer created'); $("z\\:row",xml).each(function(){ try { //Create an input type dynamically. var anchor = document.createElement("a"); var url = '/'+$(this).attr('ows_RequiredField'); var title = $(this).attr('ows_NameOrTitle'); anchor.setAttribute("class", "myShadowBox"); anchor.setAttribute("title", title); //anchor.setAttribute("rel", "shadowbox[myGallery]"); anchor.setAttribute("rel", "shadowbox"); anchor.setAttribute("href", url); var image = document.createElement("img"); image.setAttribute("src",url); image.setAttribute("title", title); image.setAttribute("width", "100"); image.setAttribute("height", "100"); image.setAttribute("alt", title); anchor.appendChild(image); //$("#ghostLayer").append(anchor); //alert('about to append anchor'); ghostLayer.appendChild(anchor); } catch(err) { alert(err.description); } }); //after loop add the entire generated nodes chunk to the central layer //$("#central").append(ghostLayer); //alert('about to reference central layer'); var centralLayer = document.getElementById('central'); //alert('about to append'); centralLayer.appendChild(ghostLayer); //alert('finished loop'); //Shadowbox.clearCache(); Shadowbox.setup(); } }); }); </script>        <script type="text/javascript" > $(document).ready(function () { //Shadowbox.clearCache(); //Shadowbox.setup(); $("#central").css("display","block"); //$("#ghostLayer a.myShadowBox").Shadowbox({gallery:"myGallery"}); //$("#ghostLayer a.myShadowBox").shadowbox(); }); </script></body>
</html>