Please help! jQuery code ignored problem [JS, javascript]

Aug 13, 2009 at 9:56 AM

Hi guys,

I am using blogEngine.net 1.5 and am having some crazy problem with jQuery that I just cannot figure out.
I've tried all of the tips I could find on the net - $j = jQuery.noConflict();, etc, but no luck, it's stressing me out now because I am in a timebox with a project. Any help would be most appreciated.

Problem:

jQuery code called on specific pages (default.aspx, post.aspx, and other static pages) does not execute - even with $j. This is the kind of snippet used on post.aspx, and some of our statics - we fire off a function in our common.js file that does operations relevant to that page.

 

<asp:Content ID="PageJS1" ContentPlaceHolderID="PageJS" Runat="Server">
<script type="text/javascript">
/*<![CDATA[*/
Namespace.Common.setCurrentPage("articles"); //fires, runs JS, but not jQuery code
alert("a javascript alert"); //JS code works
$j("body").addClass("test-default"); //jQuery does not work
/*]]>*/
</script> </asp:Content>

 

The main JS file, is as follows. I've changed the namespace name to 'Namespace' for this example.

 

/*
* Javascript for Namespace.website.com
*
*
* Date: 05-07-2009
* Author: Phil Ricketts

*/
var $j = jQuery.noConflict(); //It was worth a shot

var Namespace= window.Namespace|| {};

// Common functions.
Namespace.Common = function() {
    return {
        handleError: function(msg) {
            alert(msg);
        },
        hideFocus: function() {
            $j("a").click(function(e) {
                this.blur();
            });
        },
        currentPage: function() {
            var url = document.URL;
            var docExt = url.substring(url.length, url.lastIndexOf('/') + 1);
            var doc = docExt.substring(0, docExt.lastIndexOf('\.'));
            var docPure = doc.replace(/-/g, "").toLowerCase();
            //alert("url: " + url + "\r\ndocExt: " + docExt + "\r\ndoc: " + doc + "\r\ndocPure: " + docPure);
            $j("ul.niche li." + docExt).addClass("current");         //niche
            $j("#nav-top li." + doc.toLowerCase()).addClass("current");      //main navigation highlights
            $j("#nestedcategorylist li." + docPure).addClass("current");     //makes main and sub cats current, if current page
            $j("#nestedcategorylist li." + docPure + " ul.sub").removeClass("hide"); //shows sub cats
            $j("#nestedcategorylist li." + docPure).addClass("current");         //shows sub cats
            $j("#nestedcategorylist li ul.sub li." + docPure).parent("ul").removeClass("hide").parent().addClass("current"); //makes sub cat parent current
            if ($j.exists("#nestedcategorylist li." + docPure)) { $j("#nav-top li.articles").addClass("current"); }
        },
        setCurrentPage: function(page) {
            page = "#nav-top ." + page;
            $j(page).addClass("current"); //why does this not work
        },
        init: function() {
            Namespace.Common.hideFocus();
            Namespace.Common.currentPage();
        }
    }
} ();

// FAQ page functions.
Namespace.Faqs = function() {
    return {
        setupFaqs: function() {
            /*
            $j("#page.faqs div.faqitem p").hide();
            $j("#page.faqs div.faqitem").each(function(index) {
            this.addClass("test" + index);
            });
            */
        },
        init: function() {
            Namespace.Faqs.setupFaqs();
        },
        test: function() {
            alert("test is working");
            $j("body").addClass("test-using-j"); //no work - why?
            $("body").addClass("test-using-dollar"); //no work
            jQuery("body").addClass("test-using-jquery"); //no work  
        }
    }
} ();


// DOM ready $j(function() { Namespace.Common.init(); }); // Extend jq fn $j.exists = function(selector) { return ($(selector).length > 0); }

 

So, on JS load, everything fired on Namespace.Common.init(); works fine as expected. When I try to call a function like setCurrentPage(); from a static page, it executes the function, but doesn't execute any jQuery code.

Please offer any advice, it's really stumped me - I'm not a JS expert.

 

Thanks,

Phil

 

Aug 13, 2009 at 12:28 PM

So are you getting an error, or is it just not doing anything? At run time, what is the value of $j, has it correctly idetified the jQuery alias.

Are you using Firefox with Firebug?

Aug 13, 2009 at 12:52 PM
Edited Aug 13, 2009 at 1:02 PM
morley wrote:

So are you getting an error, or is it just not doing anything? At run time, what is the value of $j, has it correctly idetified the jQuery alias.

The jQuery code does nothing, 'natural' javascript works fine. Everything in currentPage(); works using $j - and $j's functions shows up correctly under DOM in Firebug.

Are you using Firefox with Firebug?
I swear by it.

 

Aug 13, 2009 at 1:27 PM

OK cool, so from the code you've posted you're trying to find an element like

#nav-top .articles

Put a breakpoint in the setCurrentPage function on line $j(page).addClass("current"). Refresh your page so code execution runs, you should hit the breakpoint. Leave code execution there and switch to the console tab

Run a few commands in the console tab, lets see if jQuery if functioning OK and can find your element. First, lets find the body - next to >>> command prompt, run

jQuery['body'], it should evaluate and return the [body] response. Can you confirm you are finding that OK? At the very least, it should return empty square brackets which indicate jQuery didn't find anything

If that was OK, try looking for a specific named element, e.g run $j('#nav-top .articles').html() or whatever, for an element in your DOM you definitely know exists.

Does console window find your element OK?

Just trying to narrow down where it's failing. Once you've finished in console window, press F8 to complete code execution

Aug 13, 2009 at 7:12 PM

@morley, thanks so much for your advice - I'll get to this asap.

In the meantime, I've got this error (in IE8) which still leaves me clueless. I tried getting a new copy of jQuery, but the same thing happens:

 

Aug 13, 2009 at 7:32 PM

That's just saying jQuery is throwing an exception, probably because you've given it an element that's invalid for the operation. jQuery will throw an exception if say you pass it null and it's expecting an object to iterate over.

Put a try->catch around the offending code to see what the exception is, e.g


try {
    // Your code that is failing
}
catch (e) {
    alert(e.message);
}

This might give you a more descriptive error message so you can see what's going wrong. My problems with jQuery are always self inflicted, usually things like not finding the elements I'm expecting on the page.

I find the debugging technique I described in the previous post quite useful, it lets you evaluate jQuery statements and analyse your DOM. The try catch can be helpful, but a few breakpoints in the right locations will always be more useful :)

 

Aug 14, 2009 at 1:32 PM

this might seam dumb, but is your code beeing run once the DOM is ready ? $('document').ready( function () { ... });

hope it helps ...