• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 305
  • Last Modified:

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

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..
 url:  www.globalgospelinfo.com/adr/

index page:
<html>
<head>
<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>

</head>

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

<table width="1000" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table width="1000" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <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>
      </tr>
     
      <tr>
        <td><img src="images/h2_logo2_png.png" width="489" height="125" alt=""></td>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <!---<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">
            </td>
            <!--
                  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>
           
            -->
          </tr>
        </table></td>
      </tr>
      <tr>
        <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>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
  <td valign="top">&nbsp;</td>
   
  </tr>
  <tr>
    <td align="center" bgcolor="#292929" style="border-bottom:1px solid #121212;">&nbsp;<!--- grey bottom---></td>
  </tr>
  <tr>
    <td align="center" bgcolor="#121212" style="border-top:1px solid #292929;"><table width="96%" border="0" cellspacing="25" cellpadding="0">
      <tr>
        <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>
      </tr>
    </table></td>
  </tr>
</table>

</body>
</html>

====================
loader.js

// JavaScript Document
$(document).ready(function(){
// load home page when the page loads
$("#response").load("home.cfm");
                              });
====================================
loader2.js

// JavaScript Document
$(document).ready(function(){
$("#aboutus_home").click(function(){
//load about us page
$("#response").load("about_us.cfm");
                                                  });

// Ethics page
$("#ethics_home").click(function(){
$("#response").load("ethics.cfm");
                                                });

//load home page
$("#home").click(function(){
$("#response").load("home.cfm");
                                      });
// load contact us page
$("#contact_home").click(function(){
$("#response").load("contact_us.cfm");
                                                  });

//load career page
$("#career_home").click(function(){
$("#response").load("career.cfm");
                                                 });

//load adr services page
$("#services_home").click(function(){
$("#response").load("services.cfm");
                                                   });
                                       });

Any help please...
0
melvint91
Asked:
melvint91
1 Solution
 
Barry JonesCommented:
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,

TheFoot
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now