Refresh div on parent page on close of Greybox

[dawg1]

Hi All!

I am using a Greybox (found at: orangoo.com/labs/GreyBox/) to display my product pages, like the quick product display on Target.com.

I have a minibasket in a div on the parent page where after a product is added to the cart the div updates and displays the cart info onhover.

 

Problem is that the only way I know of to update the parent page is modifying the gb_scripts.js with

'this.reload_on_close=true'
'window.location.reload(true);'

 

I want to avoid reloading the entire parent page so that the customer doesn't have to restart their product search - as it gets reset when the page reloads.

 

Is there a way to only refresh the minibasket div?

[JustLikeIcarus]

Sounds like what you want to do is set a callback function.  You can send a js function as once of greybox's parameters when you call it.  This should then get executed when greybox is closed.

 

GB_show(caption, url, /*optional*/ height, width, callback_fn)

[dawg1]

Thanks for responding!

I should mention that I am quite a newbie to .js

I have been searching the web for callback functions but I don't know that I am moving in the right direction.

 

Could you share some sites that could help me out?

 

I take that I need to edit the .js file and put a script in my html?

 

[JustLikeIcarus]

A call back function is just a function that you tell another function to run when it has completed.  (Man I used function a lot.)

So basically you just write a small function to do the update you want to be performed then supply the name of that as the callback function to greybox.

[dawg1]

Ok, got it to update my <div id="mini"> with

  function callback_fn () {
	var strURL="/TKMINI.html"; 
var req = getXMLHTTP(); 
 if (req) {

  req.onreadystatechange = function() {
	if (req.readyState == 4) { 
	if (req.status == 200) { 
	document.getElementById('mini').innerHTML=req.responseText;
       } 
	    }            
         }        
req.open("GET", strURL, true);
req.send(null);
       } 
}
</script>

 

Next step, hide <div  id="bookcart">

function callback_fn () {
	var strURL="/TKMINI.html"; 
var req = getXMLHTTP(); 
 if (req) {

  req.onreadystatechange = function() {
	if (req.readyState == 4) { 
	if (req.status == 200) { 
	document.getElementById('mini').innerHTML=req.responseText;
       } 
	    }            
         }        
req.open("GET", strURL, true);
req.send(null);
       }   
setTimeout( "jQuery('#bookcart').fadeOut();",1000 );
    }

 

Problem is that it hides the 'mini' div, not just bookcart, and I can't figure out why.

 

html

<div id="mini">
---CONTENT---
  <div class="hidden">
     <div id="bookcart">
        <div id="minibask">---CONTENT---</div>
             <div id="minibask_total">---MORE CONTENT---</div>
     </div>
  </div>
</div>

 

 

 

- OR -

html/Miva script (if you're familiar with Miva Merchant)

<div id="mini">
				<mvt:item name="toolkit" param="basket|itemcount" />
				<mvt:if expr="g.itemcount GT 0">
				<a href="&mvt:global:secure_sessionurl;Screen=BASK" title="checkout" border="0"><img src="graphics/00000001/images/ShoppingCart.png" class="textmiddle" alt="Shopping Cart" /></a> <h8><strong>(&mvte:toolkit:basketcount;)</h8></strong>			
				<div class="hidden"><mvt:item name="toolkit" param="render|TKMINI" /></div>
				<mvt:else>
				<a href="&mvt:global:secure_sessionurl;Screen=BASK" title="checkout" border="0"><img src="graphics/00000001/images/ShoppingCart.png" class="textmiddle" alt="Shopping Cart" /></a> (0)
				</mvt:if>
		      </div>

 

css

#mini {
padding: 2px;
width:150px;
float:right;
}

#mini .hidden {
	display:none;
}

#mini:hover .hidden {
	display:inline;
}

#minibask {
background-color: #eeeeee;
border:#cccccc 2px solid;
position:relative;
width:350px;
line-height:1.1em;
z-index:100;	
}

#minibask_total {
background-color: #cccccc;
border:#cccccc 2px solid;
width:350px;
text-align:right;
position:relative;
z-index:100;
line-height:1.1em;
}

 

 

 

Any Ideas?

 

[JustLikeIcarus]

No sure.  It should only hide  #bookcart  and its children.  I would suggest using firebug to see what elements are getting modified when it runs.

[dawg1]

This works great in firefox, but in IE the div with refresh only 1 time. Any suggestions how to fix it so that continues to refresh?

[JustLikeIcarus]

That is indeed weird.  I would suggest changing your callback function to something like alert($('#mini').html()); so you know that its being fired each time and knows who 'mini' is each time.

[dawg1]

Thanks for the advice. I put in the code and I am getting alerts, I'm not exactly sure where or what I need to fix....

 

function callback_fn () {
	var strURL="/TKMINI.html"; 
var req = getXMLHTTP();
 if (req) {

  req.onreadystatechange = function() {
	if (req.readyState == 4) { 
	if (req.status == 200) { 
	alert($('#mini').html()); 
	document.getElementById('mini').innerHTML=req.responseText;
	 } else {
  	   	alert("There was a problem while using XMLHTTP:\n" + req.statusText);
       } 
	    }            
         }        
req.open("GET", strURL, true);
req.send(null);
       }   
    }

 

I get the first alert (screenshot_1.png) after I add my first product.

I get the second alert (screenshot_2.png) thereafter (for each product I add after the first, I get this same alert).

 

So it appears that the div is not refreshing, or loading in the new products, after the first product is added.

 

I can even go to my shopping cart (a different page on the website) clear the entire cart, go back to the product page, add a new (different) product, and the minibasket loads with the information of the very first product -which is no longer even in the basket.

 

Any ideas???

 

[attachment deleted by admin]

[JustLikeIcarus]

I took a look at the site (saw the url in your screenshots) Are you using firebug to check it because I get 3 JS errors when I hit an "Add to cart" button you should start there.

[dawg1]

Ok, I believe I have resolved the JS errors.

Now in IE the only mini div that loads says the cart is empty, but, again, works great in firefox, chrome, safari.

[JustLikeIcarus]

Do you have multiple elements being created using the same id?  If your creating #mini multiple times that could be your issue.

[dawg1]

So I figured out my problem with IE. Caching. To resolve the issue I added

+ escape(new Date());

to my var strURL.

As for the minibasket replacing the parent div, it still does it. I think the issue is because the mini .hidden  div is stacked inside the mini div...

 

<div id="mini"> <div class="hidden"></div>  </div>