I've attempted to use the LiveQuery plugin (see code below) so that
elements that don't exist yet (that are getting retrieved via $.get)
get bound to the 'click' event, but that didn't change anything.
HTML pre-load page: test.html
Content page loaded via $.get: test.php
The JavaScript code I'm trying to get to work enables the "color theme
switcher" link on the top-right portion of the page. The code is:
jQuery('#switcher_wrapper > div').livequery('click', function() {
jQuery(this).siblings().removeClass();
jQuery(this).addClass('clr_picked');
if(this.id == 'org_blk') {
jQuery('#left').removeClass().addClass('org_blk');
jQuery('#right').removeClass().addClass('org_blk');
jQuery('#content').removeClass().addClass('content_org');
jQuery('body').removeClass();
jQuery('#subtitle').removeClass();
jQuery('#about').removeClass();
jQuery('#comments').removeClass();
jQuery('#blog').attr("src","feed.html");
}
if(this.id == 'org_solid') {
jQuery('#left').removeClass().addClass('org_solid');
jQuery('#right').removeClass().addClass('org_solid');
jQuery('#content').removeClass().addClass('content_org');
jQuery('body').removeClass();
jQuery('#subtitle').removeClass();
jQuery('#about').removeClass();
jQuery('#comments').removeClass();
jQuery('#blog').attr("src","feed.html");
}
if(this.id == 'org_grad') {
jQuery('#left').removeClass().addClass('org_grad');
jQuery('#right').removeClass().addClass('org_grad');
jQuery('#content').removeClass().addClass('content_org');
jQuery('body').removeClass();
jQuery('#subtitle').removeClass();
jQuery('#about').removeClass();
jQuery('#comments').removeClass();
jQuery('#blog').attr("src","feed.html");
}
if(this.id == 'blk_blk') {
jQuery('#left').removeClass().addClass('blk_blk');
jQuery('#right').removeClass().addClass('blk_blk');
jQuery('#content').removeClass().addClass('content_blk');
jQuery('body').removeClass().addClass('blk_bg_solid');
jQuery('#subtitle').removeClass().addClass('blk_bg_solid');
jQuery('#about').removeClass().addClass('blk_bg_solid');
jQuery('#comments').removeClass().addClass('blk_bg_solid');
jQuery('#blog').attr("src","feed_blk.html");
}
});
There are a couple of other jQuery and even Prototype events that
aren't working on the page, but hopefully I can figure those out on my
own after I get one working.
Thanks in advance for your help.
On Mar 28, 1:08 pm, pthesis <arya.pran...@gmail.com> wrote:
> Hi guys,
>
> I want to display a simple "Loading..." image while my page loads.
> I've got it halfway working athttp://pranshuarya.com/test.html. The
> problem is that once the page gets loaded, the JavaScript
> functionality in it doesn't work (even though the files are getting
> loaded). You'll know what I mean if you compare what gets loaded to
> the main page (http://pranshuarya.com).
>
> The approach I'm taking is to call the following function via <body
> onload"loadSite()">
>
> function loadSite(){
> jQuery.get("test.php", function(data) {
> jQuery(document).ready(function() {
> jQuery('#loader').hide();
> jQuery('body').prepend(data);
> });
> });
>
> }
>
> So test.html loads up, displays the preloader image, fetches test.php
> via $.get, and once the DOM is ready, hides the preloader and prepends
> the contents of test.php to <body> of test.html. All the JavaScript
> functions are in test.html, not test.php. Test.php contains only PHP
> and HTML code.
>
> I'm not even sure if this is the right approach to do what I want.
> I'm just experimenting since I haven't been able to find any solid
> documentation on it. Is $.get the right function or should I use
> something else?
>
> Any help would be greatly appreciated.
>
> Thanks,
> pthesis.
No comments:
Post a Comment