Stanton_Roux
asked on
Jquery Toggle problem
Hi There
I am trying to toggle a div but I am havving problems as the event is not firing
I am not sure what I am doing wrong.
Thanks stanton
I am trying to toggle a div but I am havving problems as the event is not firing
I am not sure what I am doing wrong.
Thanks stanton
asp.net code
<div class="finDetailToggleBG padding4px">
<div class="floatRight">
<a href="javascript:;" id="a1">
<img src="images/arrowToggleGrey.gif" id="tog1" /></a></div>
View Colour and Accessories Options</div>
<div class="padding4px none" id="life">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<uc1:FinanceColourSelector ID="FinanceColourSelector1" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
Jquery.js file
$("a#a1").click().toggle(function() {
$("img#tog1").attr("src", $("img#tog1").attr("src").split("Grey.").join("Red."));
$("div#life").toggle();
}, function() {
$("img#tog1").attr("src", $("img#tog1").attr("src").split("Red.").join("Grey."));
$("div#life").toggle();
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
can you attach the files here....
1st step, you can also put alerts and see if the call is going the function, onclick, if not obviously the reference to js files are not working..
1st step, you can also put alerts and see if the call is going the function, onclick, if not obviously the reference to js files are not working..
ASKER
I did put an alert but the alert was not firing.So it must be the refernce is not working what would be the cause of that?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
There are no errors on the page I am testing in IE8.
I tried clearing the cash aswell.
I tried clearing the cash aswell.
ASCX page
<%@ Control Language="C#" AutoEventWireup="true" Inherits="Controls_FinanceCalculatorModelRangeSelector"
CodeBehind="FinanceCalculatorModelRangeSelector.ascx.cs" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Src="~/Controls/FinanceColourSelector.ascx" TagName="FinanceColourSelector"
TagPrefix="uc1" %>
<%@ Register Src="FinanceSelectedVehicleAccessories.ascx" TagName="FinanceSelectedVehicleAccessories"
TagPrefix="uc2" %>
<%@ Register Src="MaintenanceAndServicingCalculators.ascx" TagName="MaintenanceAndServicingCalculators"
TagPrefix="uc3" %>
<%@ Register Src="FinanceCalculator.ascx" TagName="FinanceCalculator" TagPrefix="uc4" %>
<%@ Register Src="FinanceMaintenanceAndServicingCalculators.ascx" TagName="FinanceMaintenanceAndServicingCalculators"
TagPrefix="uc5" %>
<%@ Register Src="SelectDerivativeAndKmForServiceOrMaintenance.ascx" TagName="SelectDerivativeAndKmForServiceOrMaintenance"
TagPrefix="uc6" %>
<script type="text/javascript">
//var zxcMaxYScroll=500;
//function zxcStopScroll()
//{
// window.scroll(0,0);
//}
//var StopScrolling = "";
//if(StopScrolling = 1)
//{
// window.onscroll=zxcStopScroll
//}
<!--
/***********************************************
* IFrame SSI script II- Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids = ["Models"]
//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide = "yes"
var getFFVersion = navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight = parseFloat(getFFVersion) >= 0.1 ? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
function resizeCaller() {
var dyniframe = new Array()
for (i = 0; i < iframeids.length; i++) {
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide == "no") {
var tempobj = document.all ? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display = "block"
}
}
}
function resizeIframe(frameid) {
var currentfr = document.getElementById(frameid)
if (currentfr && !window.opera) {
currentfr.style.display = "block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent) {
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}
function readjustIframe(loadevt) {
var crossevt = (window.event) ? event : loadevt
var iframeroot = (crossevt.currentTarget) ? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}
function loadintoIframe(iframeid, url) {
if (document.getElementById)
document.getElementById(iframeid).src = url
}
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload = resizeCaller
function MM_preloadImages() { //v3.0
var d = document; if (d.images) {
if (!d.MM_p) d.MM_p = new Array();
var i, j = d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i < a.length; i++)
if (a[i].indexOf("#") != 0) { d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; }
}
}
//-->
</script>
<asp:Panel ID="pnlServiceAndMaintenance" runat="server">
<div class="contentBorBG">
<asp:Panel ID="pnlCalcHeader" runat="server" Visible="false">
<div class="serviceMainHead toyota">Monthly Instalment Calculator</div>
</asp:Panel>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="padding10px" valign="top"><h4>Select your model to calculate Toyota Instalment Finance</h4></td>
<td class="padding10px rightAlign width390">
<asp:RadioButtonList ID="rblVehicleSelector" runat="server" RepeatDirection="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="rblVehicleSelector_SelectedIndexChanged">
<%--<asp:ListItem>Passenger</asp:ListItem>
<asp:ListItem>4x4 and SUVs</asp:ListItem>
<asp:ListItem>Commercial</asp:ListItem>--%>
</asp:RadioButtonList>
<telerik:RadComboBox ID="ddnVehicleRanges" runat="server" Skin="Default" Height="140px"
Width="150px" OnClientSelectedIndexChanging="LoadRanges" EnableLoadOnDemand="true">
</telerik:RadComboBox>
<telerik:RadComboBox ID="ddnVehicleModels" runat="server" Skin="Default" Height="140px"
Width="150px" OnClientItemsRequested="ItemsLoaded" OnItemsRequested="ddnVehicleModels_ItemsRequested"
EnableLoadOnDemand="true" OnSelectedIndexChanged="ddnVehicleModels_SelectedIndexChanged"
AutoPostBack="true">
</telerik:RadComboBox>
<asp:ImageButton ID="cmdNext" ImageUrl="~/images/buttons/btnNext.png" ImageAlign="Middle"
runat="server" onclick="cmdNext_Click" />
<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup"
BackColor="White" Width="800" Height="600">
<div>
<asp:Panel ID="Panel2" runat="server">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="modelHead">
<asp:ImageButton ID="cmdCancel" Text="Cancel" runat="server" ImageUrl="~/images/buttons/btnClose.png"
align="right" ImageAlign="Right" />
<asp:Label ID="lblTitle" runat="server"></asp:Label>
</td>
</tr>
</table>
</asp:Panel>
</div>
<div>
<%= ModalURL%>
</div>
</asp:Panel>
<asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="hiddenTargetControlForModalPopup"
PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="false"
PopupDragHandleControlID="Panel1" Drag="true" CancelControlID="cmdCancel" /><br />
<asp:LinkButton ID="lblNeedHelp" runat="server" OnClick="lblNeedHelp_Click"
OnClientClick="return CheckSelectedCount(this);"><span class="toyota">Need help?</span>
Try the model chooser <asp:Image ImageUrl="~/images/arrow_on.png" runat="server" /></asp:LinkButton>
</td>
</tr>
</table>
<asp:Panel ID="pnlCalcBody" runat="server" Visible="false">
<div class="modelHeadBG">Car Name and Range</div>
<table width="100%" class="table" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<%-- <asp:HyperLink ID="HyperLink1" NavigateUrl="~/trolley.aspx" runat="server" CssClass="marginRight10px"
ImageUrl="~/images/buttons/btnBacktoTrolley.png"></asp:HyperLink><br />
--%> <br />
<div align="center" class="padding10px">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<asp:Image ID="imgModel" runat="server" Height="119" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
<br />
<%--<ul class="btmModelNav">
<li>Finance Product: </li>
<li><a href="#">Installment Finance</a></li><li><a href="#">Lease Finance</a></li></ul>
<br />--%>
<uc4:FinanceCalculator ID="FinanceCalculator1" runat="server" />
</td>
<td valign="top" style="width: 439px; background-color: #f8f8f8;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><div class="finDetailToggleBG padding4px">
<div class="floatRight">
<a href="javascript:;" id="a1">
<img src="images/arrowToggleGrey.gif" id="tog1" /></a></div>
View Colour and Accessories Options</div>
<div class="padding4px none" id="life">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<uc1:FinanceColourSelector ID="FinanceColourSelector1" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</td>
</tr>
<tr>
<td><div class="finDetailToggleBG padding4px">
<div class="floatRight">
<a href="javascript:;" id="a2">
<img src="images/arrowToggleGrey.gif" id="tog2" /></a></div>
Dealer Options/Accessories</div>
<div class="padding4px none" id="cost">
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<uc2:FinanceSelectedVehicleAccessories ID="FinanceSelectedVehicleAccessories1" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</td>
</tr>
<tr>
<td><div class="finDetailToggleBG padding4px">
<div class="floatRight">
<a href="javascript:;" id="a3">
<img src="images/arrowToggleGrey.gif" id="tog3" /></a></div>
Service and Maintenance Options</div>
<div class="padding4px none" id="body">
<%--<uc3:MaintenanceAndServicingCalculators ID="MaintenanceAndServicingCalculators1" runat="server" />--%>
<asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<%--<uc5:FinanceMaintenanceAndServicingCalculators ID="FinanceMaintenanceAndServicingCalculators1"
runat="server" />--%>
<%--<strong><h3>Service<h3/></strong><br/><br/>--%>
<uc6:SelectDerivativeAndKmForServiceOrMaintenance ID="SelectDerivativeAndKmForServiceOrMaintenance1" runat="server" />
<%--<hr />
<strong><h3>Maintenance<h3/></strong><br/><br/>--%>
<uc6:SelectDerivativeAndKmForServiceOrMaintenance ID="SelectDerivativeAndKmForServiceOrMaintenance2" runat="server"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</td>
</tr>
<tr>
<td align="right" class="padding4px">
<asp:UpdatePanel ID="upTrolleyTotalCost" runat="server" UpdateMode="Conditional"
RenderMode="Inline">
<ContentTemplate>
<div class="price">
R<asp:Label ID="lbTrolleyTotalCost" runat="server"><%=LoadTrolleyTotalCost()%></asp:Label>
<asp:HiddenField ID="hfTrolleyExtrasCost" runat="server" />
<asp:HiddenField ID="hfVehicleCost" runat="server" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="darkBG padding10px">
<div class="darkBG padding6px">
CALCULATION RESULTS</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="whiteBG padding10px table">
<tr>
<td valign="top" class="padding6px">
<table border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td align="right" class="padding6px" width="150">
ESTIMATED PURCHASE PRICE:
</td>
<td>
<div class="price2">
R<asp:Label ID="lblTotalAmount" runat="server" Text="0"></asp:Label>
<asp:HiddenField ID="hfTotalAmount" runat="server" />
</div>
</td>
<td> </td>
</tr>
<tr>
<td align="right" class="padding6px">
MONTHLY INSTALLMENT:
</td>
<td>
<div class="price2">
R<asp:Label ID="lbTotalPerMonth" runat="server" Text="0"></asp:Label>
<asp:HiddenField ID="hfTotalPerMonth" runat="server" />
</div>
</td>
<td class="toyota"> *</td>
</tr>
</table>
</td>
<td class="padding6px" width="122">
<asp:ImageButton ID="btnAdd" runat="server" ImageUrl="~/images/buttons/btnAddTrolleyFinance.jpg"
OnClick="btnAdd_Click" />
</td>
<td class="padding6px" width="122">
<asp:HyperLink ID="HyperLink10" ImageUrl="~/images/buttons/btnPrintYourCalculation.jpg"
Target="_blank" NavigateUrl="~/PrintFinanceCalculator.aspx" runat="server"></asp:HyperLink>
</td>
</tr>
</table>
<div class="toyota padding6px">
* Initiation Fee and Monthly Administration fee included.
</div>
</div>
</div>
<asp:Image ID="Image1" ImageUrl="~/images/footer_872.png" runat="server" />
<div class="alertBGFin marginTop6px">
Disclaimer<br />
All calculations made on calculators supplied on this site, together with rates quoted, are guidelines only and are subject to confirmation at the time of finalising any transactions. All information regarding the products, fees, interest and/or costs which are included in and form a fundamental basis of the calculations are subject to change at any time prior to a final pre-agreement quote being handed to the User. The User indemnifies Toyota Financial Services against any loss or liability, which the User may suffer as a result of the use of any calculator. The site and all information provided on this site and the services provided on this site, are provided "as is". The information provided on this site should not be treated as professional advice of any kind.
</div>
</asp:Panel>
</asp:Panel>
<script type="text/javascript">
function LoadRanges(combo, eventarqs) {
var areaCombo = $find("<%=ddnVehicleModels.ClientID%>");
var item = eventarqs.get_item();
areaCombo.set_text("Loading...");
if (item.get_index() > 0) {
areaCombo.requestItems(item.get_value(), false);
}
else {
areaCombo.set_text(" ");
areaCombo.clearItems();
}
}
function ItemsLoaded(combo, eventarqs) {
var areaCombo = $find("<%=ddnVehicleModels.ClientID%>");
if (combo.get_items().get_count() > 0) {
combo.set_text(combo.get_items().getItem(0).get_text());
combo.get_items().getItem(0).highlight();
}
combo.showDropDown();
}
function SetUniqueRadioButton(nameregex, current) {
re = new RegExp(nameregex);
for (i = 0; i < document.forms[0].elements.length; i++) {
elm = document.forms[0].elements[i]
if (elm.type == 'radio') {
if (re.test(elm.name)) {
elm.checked = false;
}
}
}
current.checked = true;
}
</script>
<script type="text/javascript">
function CheckSelectedCount(cmdHelpChoose) {
var objVehicleRangeControl;
objVehicleRangeControl = document.getElementById('<%=ddnVehicleRanges.ClientID%>');
// alert((objVehicleRangeControl.value).toLowerCase().replace(new RegExp(/ /g), "").replace(new RegExp(/-/g), ""))
if ((objVehicleRangeControl.value).toLowerCase().replace(new RegExp(/ /g), "").replace(new RegExp(/-/g), "") != "selectarange") {
return true;
}
else {
alert("Please select a range...");
return false;
}
}
</script>
Jscript file
/* JavaScript File */
$(document).ready(function() {
// apply to all png images
//$('img[@src$=.png]').ifixpng();
$("div.myToyotaOverlay").hide();
$("div#login").hide();
$("div#quicklinks").hide();
///$("input.rcbInput").attr("disabled", "disabled");
/* Toyota Owners Overlay */
$("img.owners").toggle(function() {
$("img.owners").attr("src", $("img.owners").attr("src").split("off.").join("on."));
$("div.myToyotaOverlay").slideDown();
}, function() {
$("img.owners").attr("src", $("img.owners").attr("src").split("on.").join("off."));
$("div.myToyotaOverlay").slideUp();
});
/* Close Button Toyota Owners Overlay */
$(".close").click(function() {
$("div.myToyotaOverlay").slideUp();
$("img.owners").attr("src", $("img.owners").attr("src").split("on.").join("off."));
});
/* Quicklinks Menu */
function showQuick() {
$("img.quick").attr("src", $("img.quick").attr("src").split("off.").join("on."));
$("div.quicklinks").slideDown();
}
function hideQuick() {
$("img.quick").attr("src", $("img.quick").attr("src").split("on.").join("off."));
$("div.quicklinks").slideUp();
}
var configQuick = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
over: showQuick, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: hideQuick // function = onMouseOut callback (REQUIRED)
};
$("div#dropQuicklinks").hoverIntent(configQuick);
/* My Toyota Menu */
function showMyToyota() {
$("img.myToyotaBtn").attr("src", $("img.myToyotaBtn").attr("src").split("off.").join("on."));
$("div.myToyota").slideDown();
}
function hideMyToyota() {
$("img.myToyotaBtn").attr("src", $("img.myToyotaBtn").attr("src").split("on.").join("off."));
$("div.myToyota").slideUp();
}
var configQuick = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
over: showMyToyota, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: hideMyToyota // function = onMouseOut callback (REQUIRED)
};
$("div#dropMyToyota").hoverIntent(configQuick);
/* Tooltip */
$("img.qtip").hover(function() {
$(this).attr("src", $(this).attr("src").split("off.").join("on."));
}, function() {
$(this).attr("src", $(this).attr("src").split("on.").join("off."));
});
/* Arrows */
$("a.arr").hover(function() {
$("img.arrC").attr("src", $("img.arrC").attr("src").split("arrowRedRight.").join("arrowGreyRight."));
}, function() {
$("img.arrC").attr("src", $("img.arrC").attr("src").split("arrowGreyRight.").join("arrowRedRight."));
});
$("a#a1").click().toggle(function() {
$("img#tog1").attr("src", $("img#tog1").attr("src").split("Grey.").join("Red."));
$("div#life").toggle();
}, function() {
$("img#tog1").attr("src", $("img#tog1").attr("src").split("Red.").join("Grey."));
$("div#life").toggle();
});
$("a#a2").click().toggle(function() {
$("img#tog2").attr("src", $("img#tog2").attr("src").split("Grey.").join("Red."));
$("div#cost").toggle();
}, function() {
$("img#tog2").attr("src", $("img#tog2").attr("src").split("Red.").join("Grey."));
$("div#cost").toggle();
});
$("a#a3").click().toggle(function() {
$("img#tog3").attr("src", $("img#tog3").attr("src").split("Grey.").join("Red."));
$("div#body").toggle();
}, function() {
$("img#tog3").attr("src", $("img#tog3").attr("src").split("Red.").join("Grey."));
$("div#body").toggle();
});
$(".segMentBG").hide();
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl01_h1").toggle(function() {
$(this).removeClass("segMentBtn");
$(this).addClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl01_pnlDescriptionWithStyling").show();
}, function() {
$(this).addClass("segMentBtn");
$(this).removeClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl01_pnlDescriptionWithStyling").hide();
});
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl02_h1").toggle(function() {
$(this).removeClass("segMentBtn");
$(this).addClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl02_pnlDescriptionWithStyling").show();
}, function() {
$(this).addClass("segMentBtn");
$(this).removeClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl02_pnlDescriptionWithStyling").hide();
});
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl03_h1").toggle(function() {
$(this).removeClass("segMentBtn");
$(this).addClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl03_pnlDescriptionWithStyling").show();
}, function() {
$(this).addClass("segMentBtn");
$(this).removeClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation_ctl03_pnlDescriptionWithStyling").hide();
});
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation2_ctl01_h1").toggle(function() {
$(this).removeClass("segMentBtn");
$(this).addClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation2_ctl01_pnlDescriptionWithStyling").show();
}, function() {
$(this).addClass("segMentBtn");
$(this).removeClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation2_ctl01_pnlDescriptionWithStyling").hide();
});
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation2_ctl02_h1").toggle(function() {
$(this).removeClass("segMentBtn");
$(this).addClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation2_ctl02_pnlDescriptionWithStyling").show();
}, function() {
$(this).addClass("segMentBtn");
$(this).removeClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation2_ctl02_pnlDescriptionWithStyling").hide();
});
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl01_h1").toggle(function() {
$(this).removeClass("segMentBtn");
$(this).addClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl01_pnlDescriptionWithStyling").show();
}, function() {
$(this).addClass("segMentBtn");
$(this).removeClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl01_pnlDescriptionWithStyling").hide();
});
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl02_h1").toggle(function() {
$(this).removeClass("segMentBtn");
$(this).addClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl02_pnlDescriptionWithStyling").show();
}, function() {
$(this).addClass("segMentBtn");
$(this).removeClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl02_pnlDescriptionWithStyling").hide();
});
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl03_h1").toggle(function() {
$(this).removeClass("segMentBtn");
$(this).addClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl03_pnlDescriptionWithStyling").show();
}, function() {
$(this).addClass("segMentBtn");
$(this).removeClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl03_pnlDescriptionWithStyling").hide();
});
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl04_h1").toggle(function() {
$(this).removeClass("segMentBtn");
$(this).addClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl04_pnlDescriptionWithStyling").show();
}, function() {
$(this).addClass("segMentBtn");
$(this).removeClass("segMentBtnOn");
$("#ctl00_ContentPlaceHolder1_ctl01_dlSubSegmentation3_ctl04_pnlDescriptionWithStyling").hide();
});
});
what about the place where you reference the js files.. have you also referenced the js file that you have created... where your code for toggle exists?
ASKER
The aspx page has a usercontrol called financedetails.acsx inside there is the user control that i am having problems with
Main aspx page
<%@ Page Title="Toyota Finance" Language="C#" MasterPageFile="~/MasterPages/NewFinancial.master" AutoEventWireup="true" Inherits="Page_FinanceDetail" Theme="ToyotaSkin" Codebehind="FinanceDetail.aspx.cs" %>
<%@ Register src="~/Controls/FinanceDetailContentMedia.ascx" tagname="FinanceDetailContentMedia" tagprefix="uc2" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<%@ Register src="~/Controls/FinanceDetail.ascx" tagname="FinanceDetail" tagprefix="uc1" %>
<%@ Register src="Controls/JourneyBar.ascx" tagname="journeyBar" tagprefix="uc6" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" src="includes/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="includes/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript" src="includes/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript" src="includes/vJustify.js"></script>
<script type="text/javascript" src="includes/jquery.url.packed.js"></script>
<script type="text/javascript" src="includes/Calculators/generic.js"></script>
<script type="text/javascript" src="includes/Calculators/vehiclerepayment.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("body").attr("id", "body_hom");
$("body").attr("class", "body_fin body_cal");
$(".qtip").qtip({
content: false,
style: {
tip: 'leftMiddle',
name: 'light',
border: {
width: 1,
color: '#bfbfbf'
},
padding: 10
},
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
}
});
});
function IESafeOffsetParent(elem)
{
try {
return elem.offsetParent;
}
catch (e) {
return document.body;
}
}
// The Offset Method
// Originally By Brandon Aaron, part of the Dimension Plugin
// http://jquery.com/plugins/project/dimensions
jQuery.fn.offset = function()
{
/// <summary>
/// Gets the current offset of the first matched element relative to the viewport.
/// </summary>
/// <returns type="Object">An object with two Integer properties, 'top' and 'left'.</returns>
var left = 0, top = 0, elem = this[0], results;
if (elem) with (jQuery.browser) {
var parent = elem.parentNode,
offsetChild = elem,
offsetParent = IESafeOffsetParent(elem),
doc = elem.ownerDocument,
safari2 = safari && parseInt(version) < 522 && !/adobeair/i.test(userAgent),
css = jQuery.curCSS,
fixed = css(elem, "position") == "fixed";
// Use getBoundingClientRect if available
if (false && elem.getBoundingClientRect) {
var box = elem.getBoundingClientRect();
// Add the document scroll offsets
add(box.left + Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),
box.top + Math.max(doc.documentElement.scrollTop, doc.body.scrollTop));
// IE adds the HTML element's border, by default it is medium which is 2px
// IE 6 and 7 quirks mode the border width is overwritable by the following css html { border: 0; }
// IE 7 standards mode, the border is always 2px
// This border/offset is typically represented by the clientLeft and clientTop properties
// However, in IE6 and 7 quirks mode the clientLeft and clientTop properties are not updated when overwriting it via CSS
// Therefore this method will be off by 2px in IE while in quirksmode
add(-doc.documentElement.clientLeft, -doc.documentElement.clientTop);
// Otherwise loop through the offsetParents and parentNodes
} else {
// Initial element offsets
add(elem.offsetLeft, elem.offsetTop);
// Get parent offsets
while (offsetParent) {
// Add offsetParent offsets
add(offsetParent.offsetLeft, offsetParent.offsetTop);
// Mozilla and Safari > 2 does not include the border on offset parents
// However Mozilla adds the border for table or table cells
if (mozilla && !/^t(able|d|h)$/i.test(offsetParent.tagName) || safari && !safari2)
border(offsetParent);
// Add the document scroll offsets if position is fixed on any offsetParent
if (!fixed && css(offsetParent, "position") == "fixed")
fixed = true;
// Set offsetChild to previous offsetParent unless it is the body element
offsetChild = /^body$/i.test(offsetParent.tagName) ? offsetChild : offsetParent;
// Get next offsetParent
offsetParent = offsetParent.offsetParent;
}
// Get parent scroll offsets
while (parent && parent.tagName && !/^body|html$/i.test(parent.tagName)) {
// Remove parent scroll UNLESS that parent is inline or a table to work around Opera inline/table scrollLeft/Top bug
if (!/^inline|table.*$/i.test(css(parent, "display")))
// Subtract parent scroll offsets
add(-parent.scrollLeft, -parent.scrollTop);
// Mozilla does not add the border for a parent that has overflow != visible
if (mozilla && css(parent, "overflow") != "visible")
border(parent);
// Get next parent
parent = parent.parentNode;
}
// Safari <= 2 doubles body offsets with a fixed position element/offsetParent or absolutely positioned offsetChild
// Mozilla doubles body offsets with a non-absolutely positioned offsetChild
if ((safari2 && (fixed || css(offsetChild, "position") == "absolute")) ||
(mozilla && css(offsetChild, "position") != "absolute"))
add(-doc.body.offsetLeft, -doc.body.offsetTop);
// Add the document scroll offsets if position is fixed
if (fixed)
add(Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),
Math.max(doc.documentElement.scrollTop, doc.body.scrollTop));
}
// Return an object with top and left properties
results = { top: top, left: left };
}
function border(elem)
{
/// <summary>
/// This method is internal.
/// </summary>
/// <private />
add(jQuery.curCSS(elem, "borderLeftWidth", true), jQuery.curCSS(elem, "borderTopWidth", true));
}
function add(l, t)
{
/// <summary>
/// This method is internal.
/// </summary>
/// <private />
left += parseInt(l, 10) || 0;
top += parseInt(t, 10) || 0;
}
return results;
};
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Image" Runat="Server">
<div class="paddingTop10px paddingBot10px trollBorTop">
<uc6:journeyBar ID="journeyBar1" runat="server" />
</div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<uc1:FinanceDetail ID="FinanceDetail1" runat="server" />
<div class="clear"></div>
<div class="clear"></div>
<div class="width870">
<uc2:FinanceDetailContentMedia ID="FinanceDetailContentMedia1" runat="server" />
</div>
<div class="width870 table shade"></div>
<script type="text/javascript">
$(window).load(function() {
$(".jqColumn").vjustify();
});
</script>
</asp:Content>
inbedded user control
<%@ Control Language="C#" AutoEventWireup="true" Inherits="Controls_FinanceDetail" CodeBehind="FinanceDetail.ascx.cs" %>
<%@ Register Src="specialOffers.ascx" TagName="specialOffers" TagPrefix="uc1" %>
<%@ Register Src="~/Controls/FinanceCalculatorModelRangeSelector.ascx" TagName="FinanceCalculatorModelRangeSelector"
TagPrefix="uc2" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<script type="text/javascript" src="includes/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".WesBank").colorbox({
width: "780px",
height: "455px",
iframe: true
});
});
</script>
<div class="width872 floatLeft marginTop10px">
<asp:Image ID="Image1" ImageUrl="~/images/botRight.png" ImageAlign="right" runat="server" />
<asp:Image ID="Image2" ImageUrl="~/images/botLeft.png" ImageAlign="left" runat="server" />
<div class="botMnuBG">
<div >
<div class="floatLeft marginTop8px">
<telerik:radcombobox id="ddnFinancingPackages2" runat="server" height="140px" width="215px"
onselectedindexchanged="ddnFinancingPackages_SelectedIndexChanged" autopostback="True">
<CollapseAnimation
Type="OutQuint"
Duration="200">
</CollapseAnimation>
</telerik:radcombobox>
</div>
<ul class="mnuRedLeft floatRight padding6px">
<li class="mnuRed_cal">
<h4>
<asp:LinkButton ID="LBCalculator" Text="Calculator" runat="server" OnClick="LBCalculator_Click"></asp:LinkButton></h4>
</li>
<li class="mnuRed_dow">
<h4>
<asp:HyperLink ID="HLApplicationDownLoad" runat="server">Application Download</asp:HyperLink></h4>
</li>
</ul>
</div>
<%-- <div class="floatLeft padding6px">
<asp:Image ID="Image3" ImageUrl="~/images/arrowRedLeft.gif" runat="server" />
<a href="financeLanding.aspx">
<h4>
Back to Financing</h4>
</a>
</div>
--%>
</div>
<asp:UpdatePanel ID="UPCalculator" runat="server">
<ContentTemplate>
<div class="">
<uc2:FinanceCalculatorModelRangeSelector ID="FinanceCalculatorModelRangeSelector"
runat="server" />
</div>
<div class="clear">
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LBCalculator" />
</Triggers>
</asp:UpdatePanel>
</div>
<div class="mainHeaderBG">
<h2>
<div class="floatRight paddingRight20px marginTop10px">
<asp:UpdatePanel ID="UPFinancePackage" runat="server" >
<ContentTemplate>
<telerik:radcombobox id="ddnFinancingPackages" runat="server" height="140px" width="215px"
onselectedindexchanged="ddnFinancingPackages_SelectedIndexChanged" autopostback="True">
<CollapseAnimation
Type="OutQuint"
Duration="200">
</CollapseAnimation>
</telerik:radcombobox></ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:Label ID="lblTitle" runat="server"></asp:Label>
</h2>
</div>
<div class="width336 floatLeft marginTop10px">
<asp:Image ImageUrl="~/images/subHRight.png" ImageAlign="right" runat="server" />
<asp:Image ImageUrl="~/images/subHLeft.png" ImageAlign="left" runat="server" />
<div class="contentHeadBG">
<h3>
<asp:Label ID="lblDescription" runat="server"></asp:Label></h3>
</div>
<div class="borderContentLeft borderContentRight jqColumn">
<div class="padding10px contentServBG">
<h4>
How does it work?</h4>
<br />
<asp:Label ID="lblContent" runat="server"></asp:Label><br />
<br />
Call Toyota Financial Services on:<br />
<asp:Image ImageUrl="~/images/icons/financeNo.gif" runat="server" />
</div>
</div>
<asp:Image ImageUrl="~/images/footer_336.png" runat="server" />
</div>
<div class="width336 floatLeft marginTop10px marginLeft10px">
<asp:Image ImageUrl="~/images/subHRight.png" ImageAlign="right" runat="server" />
<asp:Image ImageUrl="~/images/subHLeft.png" ImageAlign="left" runat="server" />
<div class="contentHeadBG">
<h3>
What you need to apply:</h3>
</div>
<div class="borderContentLeft borderContentRight jqColumn">
<div class="padding10px contentServBG">
<asp:Repeater ID="RepFinancingRequirements" runat="server">
<HeaderTemplate>
<ul class="greenBullet">
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:Label ID="lblRequirements0" Text='<%# DataBinder.Eval(Container.DataItem,"Requirements") %>'
runat="server">
</asp:Label>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
<br />
<div class="rightAlign">
<%--<asp:HyperLink NavigateUrl="https://wbo.wesbank.co.za/FinanceApps/vehicle/app/index.jspx?siteID=toyota&appType=DLR" Target="_blank" runat="server">
<asp:Image ID="ImageButton1" runat="server" ImageUrl="~/images/buttons/btnApplyNow.png" CssClass="cursor" /></asp:HyperLink>--%>
<asp:ImageButton ID="imgApplyNow" ImageUrl="~/images/buttons/btnApplyNowFin2.jpg"
CssClass="cursor" runat="server" OnClick="imgApplyNow_Click" Visible="true" />
<asp:Panel ID="ModalPanel" runat="server" Width="750px" CssClass="modalPopupOther none"
Visible="false">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td class="modelHeadOther">
<asp:ImageButton ID="OKButton" runat="server" ImageUrl="~/images/buttons/btnClose.png" />
</td>
</tr>
<tr>
<td align="center">
<iframe src='<%= ApplyNowURL %>' width="100%" height="400px" title="_finwin"></iframe>
</td>
</tr>
<tr>
<td class="modelFooterOther">
</td>
</tr>
</table>
</asp:Panel>
<%-- <asp:HyperLink ID="HL" runat="server" NavigateUrl='<%# DataBinder.Eval(Container.DataItem,"ApplyNowURL") %>'
CssClass="WesBank"></asp:HyperLink>--%>
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/buttons/btnAddTrolleyFin2.jpg"
OnClick="btnAdd_Click" />
</div>
</div>
</div>
<div class="clear">
</div>
<asp:Image ImageUrl="~/images/footer_336.png" runat="server" />
</div>
<div class="width186 floatRight marginTop10px">
<uc1:specialOffers ID="specialOffers1" runat="server" />
</div>
<div class="clear">
</div>
<asp:Image ID="Image4" ImageUrl="~/images/finNumber.jpg" runat="server" CssClass="marginTop4px" />
<div class="width870">
<div class="floatLeft padding10px">
<asp:Image ImageUrl="~/images/icons/finServices.gif" runat="server" />
</div>
<div class="floatRight padding10px rightAlign">
© Toyota Financial Services (South Africa) (PTY) Limited. Reg. No.<br />
1982/010082/07. VAT No. 4300187533. An Authorised Financial<br />
Services (FSP No. 7454) and Registered Credit Provider (NCRCP62).
</div>
</div>
final user control
<%@ Control Language="C#" AutoEventWireup="true" Inherits="Controls_FinanceCalculatorModelRangeSelector"
CodeBehind="FinanceCalculatorModelRangeSelector.ascx.cs" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Src="~/Controls/FinanceColourSelector.ascx" TagName="FinanceColourSelector"
TagPrefix="uc1" %>
<%@ Register Src="FinanceSelectedVehicleAccessories.ascx" TagName="FinanceSelectedVehicleAccessories"
TagPrefix="uc2" %>
<%@ Register Src="MaintenanceAndServicingCalculators.ascx" TagName="MaintenanceAndServicingCalculators"
TagPrefix="uc3" %>
<%@ Register Src="FinanceCalculator.ascx" TagName="FinanceCalculator" TagPrefix="uc4" %>
<%@ Register Src="FinanceMaintenanceAndServicingCalculators.ascx" TagName="FinanceMaintenanceAndServicingCalculators"
TagPrefix="uc5" %>
<%@ Register Src="SelectDerivativeAndKmForServiceOrMaintenance.ascx" TagName="SelectDerivativeAndKmForServiceOrMaintenance"
TagPrefix="uc6" %>
<script type="text/javascript">
//var zxcMaxYScroll=500;
//function zxcStopScroll()
//{
// window.scroll(0,0);
//}
//var StopScrolling = "";
//if(StopScrolling = 1)
//{
// window.onscroll=zxcStopScroll
//}
<!--
/***********************************************
* IFrame SSI script II- Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids = ["Models"]
//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide = "yes"
var getFFVersion = navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight = parseFloat(getFFVersion) >= 0.1 ? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
function resizeCaller() {
var dyniframe = new Array()
for (i = 0; i < iframeids.length; i++) {
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide == "no") {
var tempobj = document.all ? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display = "block"
}
}
}
function resizeIframe(frameid) {
var currentfr = document.getElementById(frameid)
if (currentfr && !window.opera) {
currentfr.style.display = "block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent) {
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}
function readjustIframe(loadevt) {
var crossevt = (window.event) ? event : loadevt
var iframeroot = (crossevt.currentTarget) ? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}
function loadintoIframe(iframeid, url) {
if (document.getElementById)
document.getElementById(iframeid).src = url
}
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload = resizeCaller
function MM_preloadImages() { //v3.0
var d = document; if (d.images) {
if (!d.MM_p) d.MM_p = new Array();
var i, j = d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i < a.length; i++)
if (a[i].indexOf("#") != 0) { d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; }
}
}
//-->
</script>
<asp:Panel ID="pnlServiceAndMaintenance" runat="server">
<div class="contentBorBG">
<asp:Panel ID="pnlCalcHeader" runat="server" Visible="false">
<div class="serviceMainHead toyota">Monthly Instalment Calculator</div>
</asp:Panel>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="padding10px" valign="top"><h4>Select your model to calculate Toyota Instalment Finance</h4></td>
<td class="padding10px rightAlign width390">
<asp:RadioButtonList ID="rblVehicleSelector" runat="server" RepeatDirection="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="rblVehicleSelector_SelectedIndexChanged">
<%--<asp:ListItem>Passenger</asp:ListItem>
<asp:ListItem>4x4 and SUVs</asp:ListItem>
<asp:ListItem>Commercial</asp:ListItem>--%>
</asp:RadioButtonList>
<telerik:RadComboBox ID="ddnVehicleRanges" runat="server" Skin="Default" Height="140px"
Width="150px" OnClientSelectedIndexChanging="LoadRanges" EnableLoadOnDemand="true">
</telerik:RadComboBox>
<telerik:RadComboBox ID="ddnVehicleModels" runat="server" Skin="Default" Height="140px"
Width="150px" OnClientItemsRequested="ItemsLoaded" OnItemsRequested="ddnVehicleModels_ItemsRequested"
EnableLoadOnDemand="true" OnSelectedIndexChanged="ddnVehicleModels_SelectedIndexChanged"
AutoPostBack="true">
</telerik:RadComboBox>
<asp:ImageButton ID="cmdNext" ImageUrl="~/images/buttons/btnNext.png" ImageAlign="Middle"
runat="server" onclick="cmdNext_Click" />
<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup"
BackColor="White" Width="800" Height="600">
<div>
<asp:Panel ID="Panel2" runat="server">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="modelHead">
<asp:ImageButton ID="cmdCancel" Text="Cancel" runat="server" ImageUrl="~/images/buttons/btnClose.png"
align="right" ImageAlign="Right" />
<asp:Label ID="lblTitle" runat="server"></asp:Label>
</td>
</tr>
</table>
</asp:Panel>
</div>
<div>
<%= ModalURL%>
</div>
</asp:Panel>
<asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="hiddenTargetControlForModalPopup"
PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="false"
PopupDragHandleControlID="Panel1" Drag="true" CancelControlID="cmdCancel" /><br />
<asp:LinkButton ID="lblNeedHelp" runat="server" OnClick="lblNeedHelp_Click"
OnClientClick="return CheckSelectedCount(this);"><span class="toyota">Need help?</span>
Try the model chooser <asp:Image ImageUrl="~/images/arrow_on.png" runat="server" /></asp:LinkButton>
</td>
</tr>
</table>
<asp:Panel ID="pnlCalcBody" runat="server" Visible="false">
<div class="modelHeadBG">Car Name and Range</div>
<table width="100%" class="table" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<%-- <asp:HyperLink ID="HyperLink1" NavigateUrl="~/trolley.aspx" runat="server" CssClass="marginRight10px"
ImageUrl="~/images/buttons/btnBacktoTrolley.png"></asp:HyperLink><br />
--%> <br />
<div align="center" class="padding10px">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<asp:Image ID="imgModel" runat="server" Height="119" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
<br />
<%--<ul class="btmModelNav">
<li>Finance Product: </li>
<li><a href="#">Installment Finance</a></li><li><a href="#">Lease Finance</a></li></ul>
<br />--%>
<uc4:FinanceCalculator ID="FinanceCalculator1" runat="server" />
</td>
<td valign="top" style="width: 439px; background-color: #f8f8f8;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><div class="finDetailToggleBG padding4px">
<div class="floatRight">
<a href="javascript:;" id="a1">
<img src="images/arrowToggleGrey.gif" id="tog1" /></a></div>
View Colour and Accessories Options</div>
<div class="padding4px none" id="life">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<uc1:FinanceColourSelector ID="FinanceColourSelector1" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</td>
</tr>
<tr>
<td><div class="finDetailToggleBG padding4px">
<div class="floatRight">
<a href="javascript:;" id="a2">
<img src="images/arrowToggleGrey.gif" id="tog2" /></a></div>
Dealer Options/Accessories</div>
<div class="padding4px none" id="cost">
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<uc2:FinanceSelectedVehicleAccessories ID="FinanceSelectedVehicleAccessories1" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</td>
</tr>
<tr>
<td><div class="finDetailToggleBG padding4px">
<div class="floatRight">
<a href="javascript:;" id="a3">
<img src="images/arrowToggleGrey.gif" id="tog3" /></a></div>
Service and Maintenance Options</div>
<div class="padding4px none" id="body">
<%--<uc3:MaintenanceAndServicingCalculators ID="MaintenanceAndServicingCalculators1" runat="server" />--%>
<asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<%--<uc5:FinanceMaintenanceAndServicingCalculators ID="FinanceMaintenanceAndServicingCalculators1"
runat="server" />--%>
<%--<strong><h3>Service<h3/></strong><br/><br/>--%>
<uc6:SelectDerivativeAndKmForServiceOrMaintenance ID="SelectDerivativeAndKmForServiceOrMaintenance1" runat="server" />
<%--<hr />
<strong><h3>Maintenance<h3/></strong><br/><br/>--%>
<uc6:SelectDerivativeAndKmForServiceOrMaintenance ID="SelectDerivativeAndKmForServiceOrMaintenance2" runat="server"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</td>
</tr>
<tr>
<td align="right" class="padding4px">
<asp:UpdatePanel ID="upTrolleyTotalCost" runat="server" UpdateMode="Conditional"
RenderMode="Inline">
<ContentTemplate>
<div class="price">
R<asp:Label ID="lbTrolleyTotalCost" runat="server"><%=LoadTrolleyTotalCost()%></asp:Label>
<asp:HiddenField ID="hfTrolleyExtrasCost" runat="server" />
<asp:HiddenField ID="hfVehicleCost" runat="server" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddnVehicleModels" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="darkBG padding10px">
<div class="darkBG padding6px">
CALCULATION RESULTS</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="whiteBG padding10px table">
<tr>
<td valign="top" class="padding6px">
<table border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td align="right" class="padding6px" width="150">
ESTIMATED PURCHASE PRICE:
</td>
<td>
<div class="price2">
R<asp:Label ID="lblTotalAmount" runat="server" Text="0"></asp:Label>
<asp:HiddenField ID="hfTotalAmount" runat="server" />
</div>
</td>
<td> </td>
</tr>
<tr>
<td align="right" class="padding6px">
MONTHLY INSTALLMENT:
</td>
<td>
<div class="price2">
R<asp:Label ID="lbTotalPerMonth" runat="server" Text="0"></asp:Label>
<asp:HiddenField ID="hfTotalPerMonth" runat="server" />
</div>
</td>
<td class="toyota"> *</td>
</tr>
</table>
</td>
<td class="padding6px" width="122">
<asp:ImageButton ID="btnAdd" runat="server" ImageUrl="~/images/buttons/btnAddTrolleyFinance.jpg"
OnClick="btnAdd_Click" />
</td>
<td class="padding6px" width="122">
<asp:HyperLink ID="HyperLink10" ImageUrl="~/images/buttons/btnPrintYourCalculation.jpg"
Target="_blank" NavigateUrl="~/PrintFinanceCalculator.aspx" runat="server"></asp:HyperLink>
</td>
</tr>
</table>
<div class="toyota padding6px">
* Initiation Fee and Monthly Administration fee included.
</div>
</div>
</div>
<asp:Image ID="Image1" ImageUrl="~/images/footer_872.png" runat="server" />
<div class="alertBGFin marginTop6px">
Disclaimer<br />
All calculations made on calculators supplied on this site, together with rates quoted, are guidelines only and are subject to confirmation at the time of finalising any transactions. All information regarding the products, fees, interest and/or costs which are included in and form a fundamental basis of the calculations are subject to change at any time prior to a final pre-agreement quote being handed to the User. The User indemnifies Toyota Financial Services against any loss or liability, which the User may suffer as a result of the use of any calculator. The site and all information provided on this site and the services provided on this site, are provided "as is". The information provided on this site should not be treated as professional advice of any kind.
</div>
</asp:Panel>
</asp:Panel>
<script type="text/javascript">
function LoadRanges(combo, eventarqs) {
var areaCombo = $find("<%=ddnVehicleModels.ClientID%>");
var item = eventarqs.get_item();
areaCombo.set_text("Loading...");
if (item.get_index() > 0) {
areaCombo.requestItems(item.get_value(), false);
}
else {
areaCombo.set_text(" ");
areaCombo.clearItems();
}
}
function ItemsLoaded(combo, eventarqs) {
var areaCombo = $find("<%=ddnVehicleModels.ClientID%>");
if (combo.get_items().get_count() > 0) {
combo.set_text(combo.get_items().getItem(0).get_text());
combo.get_items().getItem(0).highlight();
}
combo.showDropDown();
}
function SetUniqueRadioButton(nameregex, current) {
re = new RegExp(nameregex);
for (i = 0; i < document.forms[0].elements.length; i++) {
elm = document.forms[0].elements[i]
if (elm.type == 'radio') {
if (re.test(elm.name)) {
elm.checked = false;
}
}
}
current.checked = true;
}
</script>
<script type="text/javascript">
function CheckSelectedCount(cmdHelpChoose) {
var objVehicleRangeControl;
objVehicleRangeControl = document.getElementById('<%=ddnVehicleRanges.ClientID%>');
// alert((objVehicleRangeControl.value).toLowerCase().replace(new RegExp(/ /g), "").replace(new RegExp(/-/g), ""))
if ((objVehicleRangeControl.value).toLowerCase().replace(new RegExp(/ /g), "").replace(new RegExp(/-/g), "") != "selectarange") {
return true;
}
else {
alert("Please select a range...");
return false;
}
}
</script>
Try using ~ (tild) in the reference like below..,
<script type="text/javascript" src="includes/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="~/includes/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="~/includes/jquery.js"></script>
<script type="text/javascript" src="~/includes/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript" src="~/includes/vJustify.js"></script>
<script type="text/javascript" src="~/includes/jquery.url.packed.js"></script>
<script type="text/javascript" src="~/includes/Calculators/generic.js"></script>
<script type="text/javascript" src="~/includes/Calculators/vehiclerepayment.js"></script>
Is there any change in the folder hierarchy, when it started failing?
is "includes" folder in the root? Where is the aspx page?
is "includes" folder in the root? Where is the aspx page?
ASKER
There has been no changes in the hierachy.
The includes directory is in the root and the aspx file is in the root.
root
aspxfile
includes
js file.
You can view the live site.
go to www.toyota.co.za
click the big red I want to Apply for finance button
choose a range then choose a model
click next
you should see three options
color and accesories
Dealer Options/Accessories
Service and Maintenance Options
These options should toggle open and closed when you click on the grey arrow.
The includes directory is in the root and the aspx file is in the root.
root
aspxfile
includes
js file.
You can view the live site.
go to www.toyota.co.za
click the big red I want to Apply for finance button
choose a range then choose a model
click next
you should see three options
color and accesories
Dealer Options/Accessories
Service and Maintenance Options
These options should toggle open and closed when you click on the grey arrow.
ASKER
I have figured out now that the jscript code is working fine and all the JS files are in the correct place.
My problem is that when I do any sort of postback to the page all the javascript on the page stops working.Do any of you know why this would happen or what could cause it.
My problem is that when I do any sort of postback to the page all the javascript on the page stops working.Do any of you know why this would happen or what could cause it.
If I remember correctly with ASP.NET you can check if it is postback with something like this:
<%
if(postback)
else
%>
<script type="text/javascript" src="includes/jquery-1.3.2 .min.js">< /script>
<script type="text/javascript" src="~/includes/jquery.hov erIntent.m inified.js "></script >
<script type="text/javascript" src="~/includes/jquery.js" ></script>
<script type="text/javascript" src="~/includes/jquery.qti p-1.0.0-rc 3.min.js"> </script>
<script type="text/javascript" src="~/includes/vJustify.j s"></scrip t>
<script type="text/javascript" src="~/includes/jquery.url .packed.js "></script >
<script type="text/javascript" src="~/includes/Calculator s/generic. js"></scri pt>
<script type="text/javascript" src="~/includes/Calculator s/vehicler epayment.j s"></scrip t>
<%
end if
%>
Perhaps if you have your code NOT to reload again if there is postback, maybe the jquery isn't initiallized again.
My code might be wrong (it's been a while since I wrote ASP.NET) but you get the point
<%
if(postback)
else
%>
<script type="text/javascript" src="includes/jquery-1.3.2
<script type="text/javascript" src="~/includes/jquery.hov
<script type="text/javascript" src="~/includes/jquery.js"
<script type="text/javascript" src="~/includes/jquery.qti
<script type="text/javascript" src="~/includes/vJustify.j
<script type="text/javascript" src="~/includes/jquery.url
<script type="text/javascript" src="~/includes/Calculator
<script type="text/javascript" src="~/includes/Calculator
<%
end if
%>
Perhaps if you have your code NOT to reload again if there is postback, maybe the jquery isn't initiallized again.
My code might be wrong (it's been a while since I wrote ASP.NET) but you get the point
ASKER
This was working at one stage and suddenly stopped is there anything that would cuase this to suddenly stop working.