Question

The Website

The developing build can viewed at randomactsofviolet.com

Included libraries :

• vaccordian
• mousewheel
• jquerytools
• easing

vaccordian embeds a ‘scrollable’ element (JQuery tools) to shift up & down various pages of content

Aim

I’m trying to load dynamic content using JQuery’s/Ajax .load() method and passing it a URL that I’m retrieving using JQuery’s .data() method. It might be noting that im also testing whether or not the content has already been loaded using a data attribute ‘state’ and only calling the load() function if state is undefined.
I was under the impression that both my syntax and use of data-attributes was correct as I had managed to get full functionality within firefox and dreamweaver’s preview window but it soon become evident that my method didnt work in chrome or IE9.

As far as my research suggests both the .data() method and were both supported across browsers since .data() is included in jquery 1.4+.

Could the problem lie within my syntax?
If there is an alternative method then Id appreciate suggestions.

Steven Dons make a good argument why I shouldnt be using attr(). :

Could, but should not, especially when manipulating the data rather than reading them. >With attr(), the data goes back into the DOM. With data(), it is kept separately. If you >change a value with attr(), then read it with data() you will get different values. Also >attr() deals with strings only, data() will convert to native types, like integers. >Whatever you do, don’t mix use of attr() and data() unless you really know what you’re >doing. My rule of thumb is to use attr() for reading original DOM metadata or changing DOM >properties and using data() for application state. – Steven Don Mar 17 at 10:44

The current syntax

$('.va-slice').bind("expand", function(evt) {
                // bind an 'expand' event and test for defined state of slice
                if (typeof $(evt.target).data('state') === 'undefined') {
                    //if undefined, find the content div within the target and store its url attribute
                    var url = $(evt.target).find('.va-content').data("url");
                    //then load the url into the div using ajax
                    $(evt.target).find('.va-content').load(url);
                    //Set state attribute as expanded
                    $(evt.target).data('state', 'expanded');
                } else {
                    //Just set the state to expanded & allow the accordian script to open the panel
                    $(evt.target).data('state', 'expanded');
                }
            }).bind("collapse", function(evt) {//collapse function
                $(evt.target).data('state', 'collapsed');                   
            }).toggle(function() { // toggle between functions
                $(this).trigger("expand");
            }, function() {
                $(this).trigger("collapse");
            });


//note the line $(evt.target).data('state', 'expanded'); in else definition is not present on the live site,but is in my local version and doesnt affect the issue in question.

The HTML in use

<div class="va-slice about">
            <h3 class="va-title">About</h3>
            <div class="va-content" data-url="about.html">
            <div class="loadspace"></div>
            </div>
        </div>

My investigation

Either the URL is not being retreived from the div elements or the there is something incorrect with my ajax use?
Javascript is enabled.
I have done a fair bit of reading on stack and have comes across some other useful problems around this topic and learnt a few usefuls considerations but non are able to clarify the problem in this scenario.
Potentially I can see this being something annoyly simple that ill hopefully never forget like having to tell the browser at the top of your html to enable something or allow certain syntax
I think perhaps if it is a problem with jquery syntax then this could be clear from within firefox’s inspector. Can anyone also explain how to use it to view live messages/errors , or methods of diagnosing problems using the inspector ?

Answer 1

Code looks ok, but if you will take a look at network tab of Developer Toolbar/firebug/inspector (F12 in all browsers), you will see that all items in “Portfolio” section request return 404 (File not found). In FF’s firebug there is also such tab, but you may need to enable it and open Firebug before you click on a div. Possibly – your urls are incorrect. Or you have no files on server. About firebug – frankly speaking have no idea what to tell about it. In case of errors there will appear a message somewhere in its window. Hard to miss it. Click on it will open console. Click on some message will show you a line in JS code where error happened. In scripts tab you can set breakpoints, view variables state etc. Basically just like in any IDE with debugger. Just google about firebug and its features.