We Keep Coding

Page loading is gradually getting slower using jQuery script

I'm using this jQuery script to show search results. Everything works fine, but when search results have more than one page and I'm browsing pages via paging then every page loading is gradually getting slower. Usually first cca 10 pages loads I get quickly, but next are getting avoiding loading delay. Whole website get frozen for a little while (also loader image), but browser is not yet. What should be the problem?
function editResults(def) {
$('.searchResults').html('<p class=\'loader\'><img src=\'images/loader.gif\' /></p>');
var url = def;
var url = url + "&categories=";
// Parse Categories
$('input[name=chCat[]]').each(function() {
if (this.checked == true) {
url = url + this.value + ",";
}
});
url = url + "&sizes=";
// Parse Sizes
$('input[name=chSize[]]').each(function() {
if (this.checked == true) {
url = url + this.value + ",";
}
});
url = url + "&prices=";
// Parse Prices
$('input[name=chPrice[]]').each(function() {
if (this.checked == true) {
url = url + this.value + ",";
}
});
$('.searchResults').load('results.php'+url);
$('.pageLinks').live("click", function() {
var page = this.title;
editResults("?page="+page);
});
}
$(document).ready(function(){
editResults("?page=1");
// Check All Categories
$('input[name=chCat[0]]').click(function() {
check_status = $('input[name=chCat[0]]').attr("checked");
$('input[name=chCat[]]').each(function() {
this.checked = check_status;
});
});
// Check All Sizes
$('input[name=chSize[0]]').click(function() {
check_status = $('input[name=chSize[0]]').attr("checked");
$('input[name=chSize[]]').each(function() {
this.checked = check_status;
});
});
// Edit Results
$('.checkbox').change(function() {
editResults("?page=1");
});
// Change Type
$(".sort").change(function() {
editResults("?page=1&sort="+$(this).val());
});
});

$('.pageLinks').live("click", function() {
var page = this.title;
editResults("?page="+page);
});
just a wild guess but... wouldn't this piece of code add a new event handler to the click event instead reaplacing the old one with a new one? causing the click to call all the once registered handlers.
you should make the event binding just once
var global_var = '1';
function editResults(def) {
// all your code
global_var = 2; // what ever page goes next
};
$(document).ready(function() {
// all your code ...
$('.pageLinks').live("click", function() {
var page = global_var;
editResults("?page="+page);
});
});

Change div content and hash url

I made a fully functional Ajax Content Replacement script. The problem is that it adds forwards like /#about or /#work or /#contact to the adress but when I reload the site, the main page will be show. Why? How is it possible that when i type in the adress the right subpage will be show?
Someone told me that the problem is that I added the file manually when I use popstate. So I want a solution without popstate. I am not a Javascript expert but I would like to learn it. Because popstate but this is very circuitous.
window.location.hash = $(this).attr('href');
My .html files are in stored in /data/. The strange thing is that it finds the file but when I try to find it manually,the page show the main page or when I refresh the site with F5 the main page will be show,too.
Can you help me and show me how it works. We can use my code to find the error. Thanks a lot.
Here is the Websitelink : Demo Link
function refreshContent() {
var targetPage = 'home';
var hashMatch = /^#(.+)/.exec(location.hash);
// if a target page is provided in the location hash
if (hashMatch) {
targetPage = hashMatch[1];
}
$('#allcontent').load('data/' + targetPage + '.html');
}
$(document).ready(function(){
refreshContent();
window.addEventListener('hashchange', refreshContent, false);
$('.hovers').click(function() {
var page = $(this).attr('href');
$('#allcontent').fadeOut('slow', function() {
$(this).animate({ scrollTop: 0 }, 0);
$(this).hide().load('data/' + page +'.html').fadeIn('normal');
});
});
});
$('.hovers').click(function() {
window.location.hash = $(this).attr('href');
$.get('data/'+this.href, function(data) {
$('#allcontent').slideTo(data)
})
return false
})

You should load the initial page based on location.hash (if provided) on page load:
function refreshContent() {
var targetPage = 'home';
var hashMatch = /^#!\/(.+)/.exec(location.hash);
// if a target page is provided in the location hash
if (hashMatch) {
targetPage = hashMatch[1];
}
$('#allcontent').load('data/' + targetPage + '.html');
}
$(document).ready(function(){
refreshContent();
...
You can make back and forward work by listening to the Window.onhashchange event:
window.addEventListener('hashchange', refreshContent, false);
Do note that this doesn't work in Internet Explore 7 or lower.
Edit:
Okay, try this:
var $contentLinks = null;
var contentLoaded = false;
function refreshContent() {
var targetPage = 'home';
var hashMatch = /^#(.+)/.exec(location.hash);
var $content = $('#allcontent');
// if a target page is provided in the location hash
if (hashMatch) {
targetPage = hashMatch[1];
}
// remove currently active links
$contentLinks.find('.active').removeClass('active');
// find new active link
var $activeLink = $contentLinks.siblings('[href="' + targetPage + '"]').find('.navpoint');
// add active class to active link
$activeLink.addClass('active');
// update document title based on the text of the new active link
window.document.title = $activeLink.length ? $activeLink.text() + ' | Celebrate You' : 'Celebrate You';
// only perform animations are the content has loaded
if (contentLoaded) {
$content
.fadeOut('slow')
.animate({ scrollTop: 0 }, 0)
;
}
// after the content animations are done, load the content
$content.queue(function() {
$content.load('data/' + targetPage + '.html', function() {
$content.dequeue();
});
});
if (contentLoaded) {
$content.fadeIn();
}
contentLoaded = true;
}
$(document).ready(function() {
$contentLinks = $('.hovers');
refreshContent();
window.addEventListener('hashchange', refreshContent, false);
$contentLinks.click(function(e) {
e.preventDefault();
window.location.hash = '!/' + $(this).attr('href');
});
});

jQuery slideToggle & cookie

I have a page which is dynamically generated and uses slideToggle to open and close the hierarchical divs etc no problem. The only problem is, everytime I postback I have to generate the divs again and they lose their opened/closed state. They are always generated with the same unique ids.
I would like to use the cookie plugin to remember the states when I call my sltoggle function and then when the page reloads expand all the same divs. Heres what i've got so far...
$(document).ready(function ()
{
$(".toggle-hide").hide();
//something in here about opening the divs in the cookie
});
function sltoggle(eID)
{
$("div[id$='" + eID + "']").slideToggle(600);
//I think the below code is okay - I copied it from a working example ^^
var divState = ($("div[id$='" + eID + "']").css('display') == 'block') ? 1 : 0;
$.cookie("divState", state)
}

Comment explanations inline.
function slToggle(eID) {
var $div = $("div[id$='" + eDI + "']");
//Get value of cookie or empty string
//Cookie is list of eIDs that should be visible
var cooks = $.cookie("divState") || '';
//Determine whether eID is already in the cookie
var isin = $.inArray(eID, cooks.split(','));
//TODO verify that .is("visible") check works during
//toggle animation. Otherwise, this code goes in the
//toggle animation callback function
if ($div.slideToggle(600).is(":visible")) {
//Div is visible, but not in cookie
if (!isin) {
$.cookie("divState", cooks + (cooks ? ',' : '') + eID);
}
}
else if (isin) {
//Div not visible, but in cookie
$.cookie("divState", cooks.replace(/(^|,)eID(,|$)/, ''));
}
}

How to suppress JavaScript function with eg. hasClass?

I'm building on a WordPress theme and wants to load posts and pages with AJAX. I got that sorted out through the snippet below, but now I just need to suppress the function when clicking on the logo, obviously linking to the home url. So when clicking on the logo it should force a normal reload, instead of using the function.
I figure it would have something to do with "if hasClass(logo) then use default"... Yeah, I'm fairly new to JavaScript, but I have been searching a lot, so any help in the right direction will be much appreciated. Thanks!
The snippet:
$(".home li.home").removeClass("home").addClass("current_page_item");
var $wrapperAjax = $("#wrapper-ajax"),
URL = '',
siteURL = "http://" + top.location.host.toString(),
$internalLinks = $("a[href^='"+siteURL+"']"),
hash = window.location.hash,
$ajaxSpinner = $("#ajax-loader"),
$el, $allLinks = $("a");
function hashizeLinks() {
$("a[href^='"+siteURL+"']").each(function() {
$el = $(this);
if ($.browser.msie) {
$el.attr("href", "#/" + this.pathname)
.attr("rel", "internal");
} else {
$el.attr("href", "#" + this.pathname)
.attr("rel", "internal");
}
});
};
hashizeLinks();
$("a[rel='internal']").live("click", function() {
$ajaxSpinner.fadeIn();
$wrapperAjax.animate({ opacity: "0.1" });
$el = $(this);
$(".current_page_item").removeClass("current_page_item");
$allLinks.removeClass("current_link");
URL = $el.attr("href").substring(1);
URL = URL + " .entry";
$wrapperAjax.load(URL, function() {
$el.addClass("current_link").parent().addClass("current_page_item");
$ajaxSpinner.fadeOut();
$wrapperAjax.animate({ opacity: "1" });
hashizeLinks();
});
});
$("#searchform").submit(function(e) {
$ajaxSpinner.fadeIn();
$wrapperAjax.animate({ opacity: "0.1" });
$el = $(this);
$(".current_page_item").removeClass("current_page_item");
$allLinks.removeClass("current_link");
URL = "/?s=" + $("#s").val() + " .entry";
$wrapperAjax.load(URL, function() {
$ajaxSpinner.fadeOut();
$wrapperAjax.animate({ opacity: "1" });
hashizeLinks();
});
e.preventDefault();
});
if ((hash) && (hash != "#/")) {
$("a[href*='"+hash+"']").trigger("click");
}

I'm guessing you mean the script from this line: $("a[rel='internal']")
In that case, $("a[rel='internal']").not('.logo') should do the trick.
I should've read the entire code. Replace $("a[href^='"+siteURL+"']") with $("a[href^='"+siteURL+"']").not('.logo') as well.

If it has the class .logo you could add this at the top of the function:
if ($(this).hasClass('logo')) return true;
See the simple example.

Shadowbox isn't opening consistently in IE and FF

I'm generating a list of links in Javascript that should open in a shadowbox. Initially, on any given page load (Ctrl-F5 for example) the link opens in the window rather than in the shadowbox. If I can some how get it to open in the shadowbox, through luck or random happenstance, it will work until the page is reloaded again.
Here's the markup in the page:
<div id="portAgreementList">
<ul id="blAgreements"></ul>
</div>
Here's the javascript that makes the links in blAgreements:
function (data, status)
{
if (status == 'success')
{
if (data == '')
{
alert('URL returned no data.\r\n' +
'URL: ' + url);
return;
}
var jsonObj = StringToJSON(data); // StringToJSON function defined in /js/utilities.js
if (!jsonObj) { return; }
var items = '';
if ( jsonObj.items.length > 0 ) {
for (var xx = 0; xx < jsonObj.items.length; xx++) {
items += '<li><a rel="shadowbox;width=750;height=450;" href="' + jsonObj.items[xx].Url +'">' +
jsonObj.items[xx].Text +'</a></li>';
}
}
else {
items = '<li>You have no port agreements on file for this company.</li>';
}
$('#blAgreements').html(items);
Shadowbox.init();
}
}
I'm calling to Shadowbox.init(); after I've added creating the list items and it works sometimes. What I'd like to understand is why is it inconsistent and how do I make it more reliable.
Update #1: This looks like it might be a race condition. If I load the page, in IE at least, and wait before clicking it will eventually work. With IE8 I have to wait about 3 seconds. FF doesn't seem to follow that behavior.
Update #2: With FF, if I click on the link after page load, it opens the URL like any other web page. Hit the back button and click the link again and the URL opens in the shadowbox.

More digging around and I found a solution, though I'd still like to know why the above had the issues it did.
function (data, status)
{
if (status == 'success')
{
if (data == '')
{
alert('URL returned no data.\r\n' +
'URL: ' + url);
return;
}
var jsonObj = StringToJSON(data); // StringToJSON function defined in /js/utilities.js
if (!jsonObj) { return; }
var items = '';
if ( jsonObj.items.length > 0 ) {
for (var xx = 0; xx < jsonObj.items.length; xx++) {
var li = $('<li></li>').appendTo('#blAgreements');
var anchor = $('<a rel="shadowbox;width=750;height=450;" href="' + jsonObj.items[xx].Url +'">' +
jsonObj.items[xx].Text +'</a>').appendTo(li);
Shadowbox.setup($(anchor), null);
}
}
else {
items = '<li>You have no port agreements on file for this company.</li>';
}
}
}
The key difference is that I am building out the DOM as elements
var li = $('<li></li>').appendTo('#blAgreements');
var anchor = $('<a rel="shadowbox;width=750;height=450;" href="' + jsonObj.items[xx].Url +'">' + jsonObj.items[xx].Text +'</a>').appendTo(li);
And then calling:
Shadowbox.setup($(anchor), null);
On the anchor.