Load javascripts inside jQuery Ajax - javascript

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.

Related

Multiple execute js script

I have a problem with js script.
I load subpage by ajax and append code to div.
$.ajax ({
type: "POST",
url: "load/page/",
dataType: "json",
success : function(data) {
$('.content').empty();
$('.content').append(data);
},
error : function(e) {
console.log(e);
}
});
Subpage contains appeal to js script:
<script src="//<?php echo $_SERVER['SERVER_NAME'].'/'.BASE_DIR; ?>/scripts/settings.js"></script>
Why when i execute ajax multiple times settings.js events are executing multiple too? I want to could execute ajax code multiple times but js scripts are executing only once.
I replaced $(document) to $('.content') and add line $('.content').off(), now code is working great.

How to call function after ajax content fully loaded like $(window).load() or window.onload?

I'm using ajax but is there any option to call function after ajax content fully loaded like $(window).load() or window.onload? When i'm in fresh page everything working fine with $(window).load() or window.onload function because some scripts work after window complete load. But the problem is in ajax and when i click on a link and page is dynamically load contents from another page so we don't need $(window).load() or window.onload function but because some script only work when window loaded or content fully loaded so how to call function after ajax content fully loaded like $(window).load() or window.onload ?
function windowload() {
//Some functions works only after window load
};
$(function() {
$(window).on('load', windowload);
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
var $this = this.href;
$.ajax({
url: '' + $this + '',
dataType: 'html',
success: function(html) {
var div = $('#style', $(html));
$('#style').html(div);
//call windowload but not working
windowload();
//Also tried this but not working
$('#style').on('load', function(){
windowload();
//Some functions work only after ajax content fully loaded
});
});
});
Edit :
I need a function after ajax content fully loaded not after ajax request complete.
I have been trying to find the solution to this exact same problem for hours. What worked for me was
$(document).ajaxComplete()
I put my code in there and when Ajax was complete and the content of the div fully reloaded, I added the style I wanted to add. Hope this helps someone. Calling the method from ajax success won't work.
If you need to call a single function at multiple points in the pages lifecycle (as you describe above, where the logic is needed on both page load and also when an AJAX request completes), then you can extract the required logic to its own function to be called as needed. Try this:
function htmlLoaded() {
// Some functions work only after window load
}
$(window).load(htmlLoaded); // called on page load
$(function() {
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
$.ajax({
url: this.href,
dataType: 'html',
success: function(html) {
var styleHtml = $(html).find('#style');
$('#style').html(styleHtml);
htmlLoaded(); // called after the AJAX request completes successfully
});
});
});
});
Also note that I made a couple of amendments to improve the logic in your JS code.
Try this:
$("#Style").ready(function(){
console.log('Style is fully loaded.');
windowload();
});
Hope this will help.
When you call a function you must use the () symbol like windowload().
Here is the fixed, well-indented code : (I removed the empty quotes, useless here)
function windowload() {
//Some functions works only after window load
};
$(function() {
$(window).on('load', windowload);
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
var $this = this.href;
$.ajax({
url: $this, // Removed the empty quotes which are useless here
dataType: 'html',
success: function(html) {
var div = $('#style', $(html));
$('#style').html(div.html());
$('#style').ready(windowload);
}
});
});
});
By adding a new script tag which will run the windowload() function, we solve the problem. Because when this script is runned all HTML content placed before this tag has been loaded.

Ajax Not Loading PHP

I'm trying to load a PHP file into another PHP file on a click event through Ajax. I'm trying to do this to eliminate loading several modals I have on the page. It seems the PHP file is loading (in the console), but nothing is showing up.
Here's my javascript:
$("a#lightbox-open").click(function(e){
e.preventDefault();
$("body").addClass("noscroll");
$('section#lightbox').addClass("open");
$.ajax({
context: '#lightbox-holder',
url: '/template/lightbox.inc.php',
type: 'POST',
dataType: "json",
success: function(html){
alert("works");
}
});
});
In my main PHP file, I have a div #lightbox-holder that lightbox.inc.php is supposed to load into it.
context expects a (Plain)Object (as you can read in the api doc). Replacing '#lightbox-holder' by $('#lightbox-holder') will do the trick.
Working fiddle with the $() added versus non working fiddle representing your current code.

Is it possible to update jquery tab set

I have a jquery tab set:
<div id="tabs">
<ul>
<li>Mileage Log</li>
<li>Trips</li>
</ul>
<div id="tabs-1">something</div>
<div-id="tabs-2">something</div>
</div>
My content on my tabs fires some javascript code that posts form data (I included that code). The problem is that I would like the tab element to refresh so any new content can be shown. Is there a built-in way to refresh the tabs using the "success:" option. I am currently using "location.reload();" but it just refreshes the whole page. Not ideal.
Thanks.
My Javascript
<script>
$(document).ready(function () {
//Submit form to add record.
$('#addmileage').submit(function (e)
{
e.preventDefault();
$.ajax({
data: $('#addmileage').serialize(),
type:'POST',
url:'actionpages/add_trip.cfm?ticketid=<cfoutput>#url.ticketid#</cfoutput>',
success: function(){
$('.success').fadeIn(200).show();
location.reload();
$('.error').fadeOut(200).hide();
}
});
});
$('.deleteMileageForm').submit(function (e)
{
e.preventDefault();
$.ajax({
data: $(this).serialize(), // **** modified this line ****
type:'POST',
url:'actionpages/delete_trip.cfm',
success: function () {
$('.successTab2').fadeIn(200).show();
location.reload();
$('.errorTab2', $row).fadeOut(200).hide();
}
});
});
});
</script>
The only way I think you could achieve this, is to have the server-side functions you're calling in AJAX, return a block of HTML which you could inject into the of the tab you want to reload. And if you're going to do that, you'll need to put the functions in a CFC instead of the CFM page you're calling now.
So, you would generate the way you're doing now to build the initial page, but save the generated HTML as a string and then return it to the jQuery AJAX call.
As just a really bare-bones example:
$('.deleteMileageForm').submit(function (e)
{
e.preventDefault();
$.ajax({
data: $(this).serialize(), // **** modified this line ****
type:'post',
dataType: 'json',
url:'actionpages/actions.cfc?method=deleteTrip&returnformat=json',
success: function (result) {
$('.successTab2').fadeIn(200).show();
$('.errorTab2', $row).fadeOut(200).hide();
$('#tab2').html(result);
}
});
Then on the server you'll need an actions.cfc with remotely accessible functions:
<component>
<cffunction name="deleteTrip" access="remote">
<cfset newHTML = "<h1>This is new HTML!</h1>">
<cfreturn newHTML>
</cffunction>
</component>
I've put everything into JSON format, just because I always use JSON. :)
Not sure how familiar you are with CFCs, returnformats, etc. But hopefully this is a push in the right direction.
You need to refresh the tabs in the success function using DOM Manipulation. It may be the case, that your scripts like actionpages/delete_trip.cfm have to return new information which you need to refresh the tabs (for example in the JSON format).
Some notes:
The function location.reload(); may reload the page from the browser cache. Use location.reload(true); if you do not want this behavior.
$('.successTab2').fadeIn(200) should be enough (.show() is not needed). You also do not need the .hide() function.

Display image while running POST

I have this code that I use to POST without reloading the page, but I wonder how I can add that in the script being executed display an image. example loader.gif
Thanks for your help.
<script language="javascript" src="jquery-1.6.4.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('#form, #fat, #form').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})
Not sure if I understand, but it seems you're quite near to it
// #loading could be an img tag pointing to loader.gif or a div containing the img
$('#loading').ajaxStart(function() {
$(this).show();
$('#result').hide();
}).ajaxStop(function() {
$(this).hide();
$('#result').fadeIn('slow');
});
Use JQuery to add the image to the page. Generally this is added close by the button the user clicks to start the AJAX request. This allows the user to see that something is happening in the background while your scripts run.
Alternatively, since your script is being run on document.ready, you could have the image from the get-go and then remove it once the ajax call completes.
put the loader in a hidden div (display:none) you can then use
$('#div').show();
before the ajax request and then hide it again in the success callback:
$('#div').hide();
at the first line of submit function:
$('#loadingImg').show();
and at the first line of callback success function:
$('#loadingImg').hide();

Categories

Resources