Not loading iframe content from Javascript form submit

[techgump]

Hi. I'm having difficulties getting the code to update the form "target".

See for example:
http://www.signfort.com/outrigger-signs ... black.html
On this page, the "Go Compare" button triggers a highslide iframe, which is loaded via a Javascript function. I've kept the JS inline for now, so it can be found nearly above the button in the code.

What am I missing? It appears as though my other form elements are updating properly per the function's directive, but the frm.target and frm.submit don't actually appear to be processing in
onAfterExpand: function(expander) {
frm.target = expander.iframe.name;
frm.submit();
}



Here is my form:

Code: Select all

<form id="frmProductCompare" name="frmProductCompare" method="get" action="http://www.signfort.com/index2.php" onsubmit="return submitToHighslide(this)">
<input type="hidden" name="option" value="com_virtuemart">
<input type="hidden" name="category_id" value="">
<input type="hidden" name="product_id" value="">
<input type="hidden" name="func" value="">
<input type="hidden" name="page" value="shop.compare">
<input type="hidden" name="Itemid" value="13">
<button type="submit" style="margin-top:10px;" class="button ">Go Compare</button></form>

And here is my script, of which only the bottom function is relevant in the matter I believe:

Code: Select all

<script type="text/javascript">var MaxProductToCompare = 3;
				var ProductsInCart = [];
				ProductsInCart.push("1204");
				ProductsInCart.push("862");
				ProductsInCart.push("861");
				
			hs.preserveContent = false;

			function ToggleProductCompare(el) {
				var Product_ID = el.name;
				Product_ID = Product_ID.replace("compare_","");
				if (el.checked && ProductsInCart.length==MaxProductToCompare) {
					alert("Sorry, you cannot add more than " + MaxProductToCompare + " products to compare.");
					return false;
				}
				else if (el.checked) AddCompare(Product_ID);
						 else RemoveCompare(Product_ID);
				return true;
			}
			function AddCompare(product) {
				ProductsInCart.push(product);
				var frm= $("frmProductCompare");
				frm.product_id.value=product;
				frm.func.value="addCompare";
				handleUpdateCompare(frm);
			}
			function RemoveCompare(product) {
				//alert(product);
				ProductsInCart=ProductsInCart.remove(product+'');
				//alert(ProductsInCart.length);
				var frm= $("frmProductCompare");
				frm.product_id.value=product;
				frm.func.value="removeCompare";
				handleUpdateCompare(frm);
			}
			function RemoveCompareCheck(product) {
				var el= $("compare_cart_"+product);
				if (el && el.checked) el.checked=false;
				RemoveCompare(product+'');
			}
			function handleUpdateCompare( frm ) {			
				var callback = function(responseText) {
					$("Compare_Thumb_Container").innerHTML=responseText;
					ToggleCompareCheck(false);
				}
				
				var opt = {
						method: "post",
						data: frm,
						onComplete: callback,
						evalScripts: true
				}
				
				ToggleCompareCheck(true);
				new Ajax(frm.action, opt).request();
			}
			
			function ToggleCompareCheck(disabled) {
				var a = $$(".compare_checkbox");
				for (i=0; i<a.length; i++) a[i].disabled=disabled;
			}
			
			function submitToHighslide(frm) {

				frm.page.value="shop.compare";
				frm.func.value="";
   				var anchor;
   				for (var i = 0; i < frm.elements.length; i++) {
       				if (frm.elements[i].type == 'submit') {
						anchor = frm.elements[i];
						break;
					}
				}
				hs.overrides.push('onAfterExpand');
				hs.htmlExpand(anchor, {
				objectType: 'iframe',
				src: 'about:blank',
				width: 800,
				height: 600,
				objectHeight: 565,
				preserveContent: false,
				onAfterExpand: function(expander) {
					frm.target = expander.iframe.name;
					frm.submit();
      			}
				});

    				return false;
			}</script>

Any help would be very much appreciated of course. I've been scratching my head all day, without success. Thanks.

[techgump]

Got pretty far, and now it's working, but only in HTTP. With HTTPS page loaded, it fails to load the content within highslide, stating the resources are called from http. hmmm.

[MisterNeutron]

That aspect of it isn't really a Highslide JS issue. You just have to make sure that all of the URL's you're calling are coming from https. For example, hs.graphicsDir is currently pointing to http://images.signfort.com/images/highslide/. You would need to change that to https.