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 ?
.datafunction in jquery.