page links extremely slow after initial click...using jquery

Posted on 2009-12-18
Last Modified: 2012-05-08
I used jquery when clicking any of the "top menu-map" links...I didn't want the page to refresh or change pages, therefore, everything displays in one page...The only thing, after selecting any of the links the 1st or 2nd time, it takes upto 20 seconds for correct data to display when a link is selected.  I'm attaching the necessary files..

index page:
<title>Assured Data Reliance</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!---<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/style_IE.css" rel="stylesheet" type="text/css">--->

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/loader.js"></script>
<!---<script type="text/javascript" src="js/css_browser_detect.js"></script>--->

<script language="JavaScript"><!--
browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;

if (browser_type == "Microsoft Internet Explorer" && (browser_version >= 4)) {
document.write("<link REL='stylesheet' HREF='css/style_IE.css' TYPE='text/css'>");

else {
document.write("<link REL='stylesheet' HREF='css/style.css' TYPE='text/css'>");

// --></script>


<body bgcolor="#121212" link="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF" color="white">

<table width="1000" border="0" cellspacing="0" cellpadding="0">
    <td><table width="1000" border="0" cellspacing="0" cellpadding="0">
        <td><img src="images/h_logo.jpg" width="489" height="111" alt=""></td>
        <td><img src="images/h1.jpg" width="511" height="111" alt=""></td>
        <td><img src="images/h2_logo2_png.png" width="489" height="125" alt=""></td>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <!---<td width="511" height="125" background="images/combined_m1-4.png">--->
            <td width="511" height="125" id="top-menumap">
            <cfinclude template="top_menu-map.cfm">
                  Edit change...commented out 3 tables to use one table...created grouped image, used as background in order to put                content on top
                Edited by:  Melvin Thompson, 27 November 2009...
                <td><img src="images/m2_2_png.png" alt="" width="122" height="125" border="0"></td>
                <td><img src="images/m3_2_png.png" alt="" width="126" height="125" border="0"></td>
                <td><img src="images/m4_2_png.png" alt="" width="115" height="125" border="0"></td>
        <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr bgcolor="#121212" height="279">
            <td valign="top" width="7%"></td>
            <td width="93%" valign="top">
            <div id="response"> </div>
  <td valign="top">&nbsp;</td>
    <td align="center" bgcolor="#292929" style="border-bottom:1px solid #121212;">&nbsp;<!--- grey bottom---></td>
    <td align="center" bgcolor="#121212" style="border-top:1px solid #292929;"><table width="96%" border="0" cellspacing="25" cellpadding="0">
        <td class="text-red"><!---<a href="#" class="text-red"><strong>Terms of Use</strong></a> |---> <a href="#" id="ethics_home" class="text-red"><strong>Ethics Statement</strong></a></td>
        <td align="right" class="text-white">&copy; 2009 Assured Data Reliance. All rights reserved</td>



// JavaScript Document
// load home page when the page loads

// JavaScript Document
//load about us page

// Ethics page

//load home page
// load contact us page

//load career page

//load adr services page

Any help please...
Question by:melvint91
    1 Comment
    LVL 12

    Accepted Solution

    Hi melvint91,

    The problem that you have is that the content pages that your ajax is retrieving, is including the loader.js file in the responses.  The loader.js file (either loader2.js, loader3.js etc) is AGAIN assigning onclick handlers without removing any existing.  So each time you make an ajax call, you are causing the next click event to fire once more than before.  So the more you click the longer it will take.

    I guess the fix is not to include any JS with your content pages- include it once only with your main document..

    Use firebug in firefox to debug the ajax requests and responses, and you will easily be able to see the problem.l

    Hope this helps,


    Featured Post

    Course: HTML5 Mobile App Development with PhoneGap

    PhoneGap can help you leverage your already existing HTML5, JavaScript, and CSS skills in order to create and deploy cross-platform mobile apps.This program comprehensively covers HTML5 mobile app development from top to bottom.

    Join & Write a Comment

    DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery ( 1.6 introduces .prop() ( and .removeProp() ( methods which allow modifying or removi…
    Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
    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)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

    730 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

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now