A couple of quick questions about jQuery (I've just started using it!).

I'm using a simple plugin to load a section of one page on my site into a predefined section of another. A basic function I think. The code I have targets all links in my #nav:

.ajaxify_links("#nav a");

I just want to know how to target multiple classes in the above line?

Also, on one of the pages I'm loading in, (www.reverbstudios.ie/web_design.php) there's a slideshow powered by jQuery Cycle and it just doesn't work when loaded in using the first script but works fine when the page is viewed standalone?

Thanks, Leon.

2 answers

Mottie 1134
0
points

I'm not sure which plugin that is, but you can easily use the built in jQuery load() function to accomplish the same thing.

$('#result').load('web_design.php #content', function() {
  $('#result #slideshow').cycle();
});

To explain the code above... it loads in the 'web_design.php' then targets the internal HTML of #content and adds it to #result on the current page. Leaving out #content will load everything the web_design.php page provides. I don't believe, but I haven't tested this, that you can load in multiple classes as you were asking, so it might be best to target something that wraps them all, then once it is added to the #result, you can remove the extraneous content using jQuery.

As for the cycle plugin, it needs to be activated on the content that was loaded. jQuery automatically disables any script loaded by ajax to prevent scripting problems. So the function you see above is a callback function which is executed after the content has been loaded and added to the #result object. This is where you can initialize the cycle plugin on the contents and get your slideshow back.

Answered about 6 years ago by Mottie
0
points

I'm afraid I don't know enough about jQuery to be able to utilize your example. Do you mean just swap my existing code for yours? Here's my code:

/* Ajax Content Loading */

var AjaxContent = function(){
    var container_div = ''; 
    var content_div = ''; 
    return {
        getContent : function(url){
            $(container_div).animate({opacity:0}, //Turn the opacity to 0
                    function(){ // the callback, loads the content with ajax
                        $(container_div).load(url+" "+content_div, //only loads the selected portion
                        function(){                        
                           $(container_div).animate({opacity:1}); //and finally bring back the opacity back to 1
                    }
                );        
            });
        },
        ajaxify_links: function(elements){
            $(elements).click(function(){
                AjaxContent.getContent(this.href);
                return false; //prevents the link from beign followed
            });
        },
        init: function(params){ //sets the initial parameters
            container_div = params.containerDiv; 
            content_div = params.contentDiv;
            return this; //returns the object in order to make it chainable
        }
    }
}()

/* Ajax Content Loading Controls */
$(function(){
        AjaxContent.init({containerDiv:".main_content",contentDiv:"#text"}).ajaxify_links("#nav a");
    });
/* End Ajax Content Loading Controls */

/* End Ajax Content Loading */
Answered about 6 years ago by Leon Quinn