Using .load from jQuery - slow JS

JavaScript
1

Hi,

I’m using jQuery to dynamically load a portion of a page with the use of load function.

When I use this method though, anything that is javascript has a delay of 5 - 10 seconds. I’m trying to get rid of that delay.


$('#Nav a').click(function () {
    $('#Nav a').each(function () {
      $(this).removeClass('contentNavActiveLink');
    });
    $(this).addClass('contentNavActiveLink');
    window.location.hash = $(this).attr('href');
    $('#content).load($(this).attr('href') + ' #content');
    return false;
  });

As you can see all I’m doing is assigning the href as the hash and loading the content within the id “content” into the current “content” id.

When the content is loaded the following is extremely slow:


<input type="text" class="InputSearch" id="SearchName" value="Name" onclick="$('#SearchName').input();" />

I’ve tried different methods such as .live and it is still slow.

I’m wondering if anyone knows how to fix this?

Thank you

2

It’s probably not javascript related. Request the url in your browser to test the speed.

3

It’s running on local host.

4

Is that supposed to mean that you tested the url, and it’s fast? Or, maybe I interpreted wrong, and the loading is not the problem, just the response time after a click event? What about a simple alert(“hi”)?

5

Yep, even a simple alert has a delay. When I bind a click event to an input i have to click it multiple times for it to show the alert.

6

I think were about at the point where we need to see an example page that demonstrates the issue. Do you have any other event handlers on the same page?

7

Here we go:

1.htm


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>Untitled 1</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $.fn.input = function () {
    return this.focus(function () {
      if (this.value == this.defaultValue)
        this.value = '';
    }).blur(function () {
      if (!this.value.length)
        this.value = this.defaultValue;
    });
  };
  
    $('#nav a').click(function () {
      $('#nav a').each(function () {
        $(this).removeClass('active');
      });
      $(this).addClass('active');
      window.location.hash = $(this).attr('href');
      $('#control').load($(this).attr('href') + ' #content');
      return false;
    });
  });
</script>
</head>

<body>

<ul id="nav">
  <li><a href="2.htm">Home</a></li>
  <li><a href="2.htm">New</a></li>
  <li><a href="2.htm">Old</a></li>
</ul>

<div id="control">1st page</div>
</body>
</html>

2.htm


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>Untitled 1</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  
</script>
</head>

<body>

<span id="content">
<input type="text" id="searchName" value="Name" onclick="$('#searchName').input();" />
</span>

</body>
</html>

When you run that you will see the delay. If you access the 2.htm it runs perfectly smooth.

8

It’s lightning fast for me(locally)
I’m using 1.3.2 http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

Try it on a different server.

I even tried with a cache buster url, eg
$(this).attr(‘href’) + “?” + (new Date).getTime()

9

What’s on a delay is not the load part.

It’s the onclick event on the input. When You click on the input its suppose to clear the default value and on blur, if empty, show the default value again.

In order for this to work, I have to focus the input, then blur, and focus once again. Only then will it work correctly.

10

Ok, now I understand what you’re on about. So, there was never really a 5-10 second delay…It was that the first click didn’t work.

Personally, I would rip out the inline onclick code, and just assign the event handlers right after the element becomes available in the document. You could also use live() for stuff like this.


$('#control').load($(this).attr('href') + ' #content', {}, function(){
    $('#searchName').input();
});

The reason you were having that problem is because the first click event happened before there were the focus and blur event handlers attached to the element.

11

Yea I tried the live method as well.


$('#searchName').live('click', function () {
      $(this).input();
    });

But the code you provided works extremely fast. thank you!

Another question though.

I have a php loop going on for another page I have. It’s an inline function because the parameters will always be unique. I’m having the same issue with the load as well.


$content = '';
while ($row = mysql_fetch_array($query)) {
  $content .= '<a href="#" onclick="readMsg($row['id']); return false;" id="readMsg-'.$row['id'].'">Read</a>';
}
echo $content;

So as you see the id will change based on the current row. I can’t do something like this:


$('#readMsg-').click(function () {
  //Etc..
});

…because the id always changes. Is there anything I could do?

12

Using live() on the click event gets you back to square one, with the same exact problem we just solved. You don’t care about click. You care about focus and blur.
Edit - but live() doesn’t support focus/blur, so nevermind.

For your other problem, just use a different selector. You can access elements in other ways besides using an id. For example, the tagname, or a classname, or any other css selector.

13

The reason why I like the ID is because it’s the fastest. It only gets matched once oppose to a class which can have multiple location within the DOM.

14

Hey crmalibu I was wondering if this issue is comin from the way jquery was built?

I’m wondering if this inconvinience would be fixed if I used Ajax without a framework to retrieve the data?

If u don’t know, thanks anyway.

15

This issue is due to your code/design/decisions. The logic is at fault, not the library. The library just enables less code to be used to express the same logic.

16

What would u recommend ? I have 3 sections I would like to apply this functionality but it would be a pain in the butt to have to call all my js functions to have them work correctly.

It becomes an even bigger hassle if I have 3+ sections with this type of hashing.

I’m open to suggestions, thanks.