I have several javascripts at the head of my document, as well as at the bottom, near the body closing tag. I use jQuery to call an ajax element into place and the elements that are called, require these javascripts to function. How can I include these javascripts to work with the ajax call?
Example:
jQuery(document).ready(function(){
jQuery("a[rel=VideoPreview1]").click(function(){
jQuery("a[rel=VideoPreview1]").hide();
jQuery("a[rel=HideVideoPreview1]").show();
jQuery.ajax({
type: "POST",
url: "/Classes/Video.php",
data: "action=getYoutubeVideos&artist=B.o.B&track=Nothin On You",
success: function(data){
jQuery("#VideoPreview1").html(data);
}
});
jQuery("#VideoPreview1").show();
preventDefault();
});
jQuery("a[rel=HideVideoPreview1]").click(function(){
jQuery("a[rel=VideoPreview1]").show();
jQuery("a[rel=HideVideoPreview1]").hide();
jQuery("#VideoPreview1").hide();
preventDefault();
});
});
So that ajax function loads the content inside of the proper DIV element. The head contains the core files (i.e. jquery, tooltip, lightbox) and near the bottom of the code, the javascripts are referenced (i.e. load.tooltip(VideoPreview1))
Hope this is enough information now
Ok here is what I ended up doing:
<script> function BottomVideoPlayer(){ // MY JAVASCRIPT HERE } jQuery(document).ready(function(){ init: BottomVideoPlayer(); }); </script>And then when I want to call it into Ajax:
<script> jQuery.ajax({ type: "POST", url: "/Classes/Video.php", data: "action=getYoutubeVideos&artist='.$Artist.'&track='.$Track.'", success: function(data){ jQuery("#VideoPreview'.$SongID.'").html(data); init: BottomVideoPlayer(); } }); </script>Just wrapped my script around a function and initiate the function whenever I need it.