CODEWITHSUNDEEP
jqueryonclickloadnivo-slider
Tasos
Tasos

Reputation: 1642

Using jquery to load nivo slider on click inside Div?

I am trying to load nivo slider inside a div using jQuery:

<a onclick='$("#content").load("slider/slider.html");'>Slider</a>

But that doesn't work, if I use this script though, it works fine:

<script>
$(document).ready( function() {
$("#content").load("slider/slider.html");
});
</script>

Any idea why it doesn't load when applied on onclick?

EDIT: Here's the jsfiddle but there the onclick doesn't work at all for me: jsfiddle.net/ZNUY6

Upvotes: 1

Views: 911

Answers (3)

Tasos
Tasos

Reputation: 1642

I used a different slider and now it works so I suppose there is some compatibility issue or code matter that doesn't let nivo slider re-load when using this method.

Upvotes: 0

leftclickben
leftclickben

Reputation: 4614

A "more jQuery" way is to give your a element a class and target the slider URL:

<a class="ajax" href="slider/slider.html">Slider</a>

Then in your document.ready you set up the event handler, which loads the content:

$(document).ready(function() {
    $('.ajax').click(function() {
        $('#content').load($(this).attr('href'));
        return false;
    });
});

The return false stops the link from executing its default behaviour (i.e. following the link).

This same class could be applied to many links, and with the code above, they would each load their content (per their href attribute) into the #content element when clicked.

An advantage of this is that you are giving your link a proper URL href, which will still work in some way even without javascript, which might be important if the content needs to be indexed by search engines, etc.

Upvotes: 2

Malik Junaid Arshad Khokhar
Malik Junaid Arshad Khokhar

Reputation: 65

You need to load data like this :

<a onclick='javascript:$("#content").load("slider/slider.html");'>Slider</a>

Thanks hope this will help you.

Upvotes: 2

Related Questions