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();
Related
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.
I am trying to run a PHP script as soon as Submit button is clicked. I wanted to do an AJAX call as i dint want to refresh the page after the button is clicked. But the below code is not responding upon click.
I have saved the login.php in the same location as my project. Any help or input is appreciated!
<input type="button" class="button" value="submit" />
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$.ajax({
type: "GET",
url: "C:\wamp\www\ElitePass\login.php"
})
alert("done successully")
});
});
</script>
The issue is that you are not targeting your button correctly.
$("button") this selector is looking for an element of type "button". Naturally there is none. To target elements by their class names, append dot to selector:
$(".button").click(....)
Having said that, your code will still not work as you expect it to. Browser security restrictions will prevent loading of files directly from your file system. You need to load stuff via web server. Especially PHP files.
You can call success like :
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$.ajax({
type: "GET",
url: "C:\wamp\www\ElitePass\login.php",
success: function() {
alert("done successully");
}
})
});
});
</script>
Hello mates just stuck with a problem.
i am using click() and load() function to get my content in a css class
$("#feed").click(function(){
$(".homefeed").load("feedcontainer.php");
$("#elementcontainer").show();
});
$("#news").click(function(){
$(".homefeed").load("n.php");
$("#elementcontainer").show();
});
$("#info").click(function(){
$(".homefeed").load("newinfo.php");
$("#elementcontainer").hide();
});
As you can see when i click a div then i am able to load a php file content in a .homefeed class container and it is working perfectly
all i want to show a loading image..like loading....loading..... before the content loads..
because when i click one of those div then it is loaded into homefeed container perfectly but it is taking some time so i just want to show user some loading image to keep them engaged
any guess how to achieve it now?
thank you.
Try this: $(".homefeed").prepend(response); change to $(".homefeed").html(response)
$("#info").click(function (e) {
$("#loadimg").show();
jQuery.ajax({
type: "POST",
url: "newinfo.php",
dataType:"text",
cache: true,
success:function(response){
$(".homefeed").html(response);
$("#loadimg").hide();
},
});
});
You can use jquery blockUI plugin. jquery blockUI
Use the .beforeSend option in the jQuery AJAX call. Note, that this only works if your AJAX call is asynchronous. If you call it using synchronous, it won't do any animations/queries/callbacks (as jQ is busy blocking everything until your call comes back).
$.ajax({
url: "http://myurl.dot.com.jpeg.image.file.chmtl.php.asp.cfm",
async:false,
cache: false,
beforeSend: function( xhr ) {
// do stuff here to do the 'loading' animation
// (show a dialog, reveal a spinner, etc)
},
done: function(data){
//process response here
}
})
http://api.jquery.com/jquery.ajax/
I'm using pjax to load content and while the content is loading, I show a spinner:
$('a[data-pjax]').pjax().live ("click", function () {
$("#loader").show();
});
This works fine, however, after the content loads the loader still stays there.
Where should I call $(#loader).hide() to hide the loader after the content has loaded?
According to the doc https://github.com/defunkt/jquery-pjax
$(document).on('pjax:complete', function() {
$("#loader").hide()
})
I think you can also use pjax:end event.
of course after the content loads, after your ajax call within the success function.
$.ajax({
url: "test.html",
data: {parameter:parameter},
}).done(function() {
//on return, add here
$("#loader").hide()
});
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.