Callback jquery PrettyPhoto

swaggerking
swaggerking used Ask the Experts™
on
I'm trying to do a callback using PrettyPhoto. I'm calling prettyphoto to display an update form from inside one my jquery ui tab (#tab-2). When the user closes the prettyphoto window I want the page to reload and return to #tab-2.

This works (sorta) but I want to return to #tab-2 when I close PP instead of default #tab-1.

<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("a[rel^='prettyPhoto']").prettyPhoto({ 
            callback: function() {window.location.reload(true);} 
        }); 
    }); 
	</script>



I've tried this but no good:
<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("a[rel^='prettyPhoto']").prettyPhoto({ 
            callback: function() {top.document.getElementById("tabs-2").contentWindow.location.reload();} 
			
        }); 
    }); 
	</script>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
if your tab script is URL supportive then you can do something like

callback: function() {location.href = location.href + '#tab-2';}

otherwise you have to use cookie or url or some other way to find your first tab after reload.
Instead of re-loading the page, try re-loading just the tab, e.g.:
<script type="text/javascript" charset="utf-8">
		
$(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({ 
        callback: function() 
        {
            // You might have to replace "ul.ui-tabs-nav" with #IDOfTabsComponent
            $('ul.ui-tabs-nav').tabs('load', 1); // Reload the 2nd tab (starts at 0)
        } 
    }); 
});
 
</script>

Open in new window

Author

Commented:
shahzadfatehali:

It is url supported. But the page is not refreshing to show the updates made.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
If you are using ui-tabs thn you can use its cookie option. See in the options list
http://jqueryui.com/demos/tabs/#manipulation

Author

Commented:
I'm pretty much a novice at this and am trying to piece it together. You're suggesting using a cookie to remember the tab position when the page is refreshed.
I tried the following without success. There is definitely something that is not clicking in brain.
<script type="text/javascript">
                  $(function(){

                        // Tabs
                        $('#mytabs').tabs();
                        //getter
                        $('#mytabs').tabs({ cookie: { expires: 1 }})                  
                        
                  });
            </script>

Author

Commented:
I got it to work using the following.
<script>
$(document).ready(function() {
      $("#mytabs").tabs();                                 

      $("#mytabs").bind('tabsselect', function(event, ui) {
            document.location='#'+(ui.index+1);
      });

      if(document.location.hash!='') {
      //get the index
      indexToLoad = document.location.hash.substr(1,document.location.hash.length);
        $("#mytabs").tabs('select',indexToLoad-1);
   }
});
</script>

Author

Commented:
Thanks for pointing in the right direction. I had to do a bit of research and a lot of trial/error but was finally able to get it to work based upon your suggestion.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial