Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Jquery Toggle problem

Posted on 2010-01-07
13
Medium Priority
?
2,001 Views
Last Modified: 2012-05-08
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
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();
    });

Open in new window

0
Comment
Question by:Stanton_Roux
  • 6
  • 4
  • 2
  • +1
13 Comments
 
LVL 7

Accepted Solution

by:
waltersnowslinarnold earned 1000 total points
ID: 26200542
Did you include all the required .js files in your application..??
0
 

Author Comment

by:Stanton_Roux
ID: 26200564
Yes I have it in the master page and I tried putting it in the usercontrol itself.
This was working at one stage and suddenly stopped is there anything that would cuase this to suddenly stop working.
0
 
LVL 14

Expert Comment

by:ajitha75
ID: 26200668
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..
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:Stanton_Roux
ID: 26200722
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?
0
 
LVL 14

Assisted Solution

by:ajitha75
ajitha75 earned 1000 total points
ID: 26200816
1. Can you check if you are getting any other JS errors on load of the page. Are you testing on IE?

2. Clear your browser cache...

Also, can you post your whole code here?
0
 

Author Comment

by:Stanton_Roux
ID: 26201044
There are no errors on the page I am testing in IE8.
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>&nbsp;</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">&nbsp;*</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();
    });
});

Open in new window

0
 
LVL 14

Expert Comment

by:ajitha75
ID: 26201110
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?
0
 

Author Comment

by:Stanton_Roux
ID: 26201260
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">
                                &nbsp;
                            </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">
        &copy; 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>&nbsp;</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">&nbsp;*</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>

Open in new window

0
 
LVL 7

Expert Comment

by:waltersnowslinarnold
ID: 26201499
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>

Open in new window

0
 
LVL 14

Expert Comment

by:ajitha75
ID: 26201520
Is there any change in the folder hierarchy, when it started failing?

is "includes" folder in the root? Where is the aspx page?
0
 

Author Comment

by:Stanton_Roux
ID: 26202874
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.

   
0
 

Author Comment

by:Stanton_Roux
ID: 26208119
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.
0
 
LVL 4

Expert Comment

by:72lions
ID: 26208198
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.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>
<%
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
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month21 days, 1 hour left to enroll

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question