I'm using AJAX for load content into a div, I haven't found another way to achieve what I need. I have a playlist on top and everytime the user cliked on a new page the song started again so I had to use AJAX for load the content without reloading the page.
Then I got the first problem: the content I load works perfect if I include Jquery and the plugin needed for that content in the loaded file itself, in this case, a slider but when the content is loaded JqueryRotate stops working.
I am using JqueryRotate for the buttons that load the content, when you hover them, it rotates a circle but when you click one of those buttons, the content is loaded and the the rotation doesn't work anymore. Buttons are outside the placed content.
The client wants that rotation effect so I can't just skip that plugin (I would love to, since everything else works perfect).
I was using all the plugins togheter and they worked perfectly, then client requested me to keep the playlist playing while you navigate to the other pages, so I had to .load the content and then I got that first issue.
The code I'm using for the buttons to rotate:
$("#boton").hover(
function () {
$(".img").rotate({animateTo:180})
},
function () {
$(".img").rotate({animateTo:0})
}
);
This other for a dropdown menu:
$('#boton').click(function () {
$('#dsubmenu').toggle(),
$('.tsubmenu, .tmsubmenu').hide();});
What options do I have? Should I search for another plugin? I've been browsing and this one is the smallest and the most efficient. I don't wanna change the whole site for just a button, so CSS3 could be another option? Thanks in advance for your answer!
[EDIT Solved!!: I leave the solution here in case someone has a similar problem]
I did what Guffa said in this post (http://stackoverflow.com/questions/6186483/apply-jquery-functions-to-loaded-elements):
You can put a callback in the load call, which will be called when the new content has been added:
$("#load_cheque").load("./server/mode_paiement.php?cheque=1", function(){ // Here you can fix the loaded content });
I included all the .js of the plugins in the main xhtml with header.js, then I loaded the content via AJAX and in the callback added the function for the slider to work, same with the other pages. Thanks Guffa! You saved me!
