I'm using OpenCart, and I have a series of AJAX calls that are hidden to the user and take a little time to load. I want to display an ajax-loader gif, but I'm a newbie and don't know how to write the code. The AJAX calls start when they click a checkout button and are taken to the checkout page. The ajax-loader.gif would be on the checkout page, and would end when the AJAX runs and the appropriate information populates a div on the page.
I really know next to nothing about AJAX. Please prompt me for more details if you need them.
My attempt at showing/hiding the div's background image:
<script language="Javascript" type="text/javascript">
$('#confirm.checkout-heading').css("background-image", "url('../image/ajax-loader.gif')");
$.ajax({
url: 'opencart/index.php?route=checkout/checkout',
success: function(data) {},
failure: function(){},
complete: function(){ $('#confirm.checkout-heading').css("background-image", "none"); }
});
</script>
CSS:
#confirm .checkout-heading {
background: #fff url('../image/ajax-loader.gif') 98% 50% no-repeat;
}
if you use jquery, then it you could end either with success, error or any case..
$('#loader').show();
$.ajax({
url: 'backend.php',
success: function(data) {},
failure: function(){},
complete: function(){ $('#loader').hide(); }
});
Related
I'm writing code to show notification by using Ajax to access database. However, when I refresh the Home page, there isn't any change to my page even after I've written 'alert' command. Please help me how to solve this kind of problem.
PS: I also have another ajax code written in my project and their working fine.
<script type="text/javascript">
$(document).ready(function(){
setInterval(function(){
$.ajax({
url: "<?php echo site_url('Jobs/jobNotification');?>",
type:"POST",
dataType:"json",
data:{},
success: function(data){
alert(data.msg);
}
});
}, 2000);
})
I use ajax reload for my table.php page. I`m using material.min.js from google material design for some features like tooltips. But after the page reload with ajax, material.min.js stop working.
My index.php include table.php, where I have:
<script>
$(document).ready(function(){
setInterval(function(){
$.ajax({
url: "table.php",
cache: false,
success: function(body){
$(".page-content").html(body);
}
});
},10000);
});
</script>
Thanks for all, I have find the answer with adding this:
componentHandler.upgradeAllRegistered();
I have a function that when i click a button I call more results from my table, Im trying to get this to work when the button is 100px top of the window, however I cant seem to get it to work...
$(function(){
$('#showMore').click(function(event) {
event.preventDefault();
var number = $(".directory").children().length;
$.ajax({
type: "POST",
url: "getentries.php",
data: "count="+number,
success: function(results){
$('.directory').append(results);
}
});
});
});
So far ive tried
$(function(){
$('#showMore').offset(function(event) {
....
The jQuery .offset() function is not for establishing an event handler. You're looking for .scroll(). In the event handler for "scroll" events, you can use .offset() to find out the current position.
I'll offer the caveat that browsers fire a lot of scroll events, so you may want to introduce a delay before doing any serious work in response to the user scrolling the window.
So, I have a div that im using the following code on, but it will flash when it reloads. I understand 1000 is ridiculous - it's simply set at that while im testing. Is there anyway to avoid the "flash" as if that div were a page reload?
Thanks, so much!!
<script type="text/javascript">
$(document).ready(function(){
$("#timelinerContainers").load("jquery_timeline.php");
var refreshId = setInterval(function() {
$("#timelinerContainers").load('jquery_timeline.php');
}, 1000);
$.ajaxSetup({ cache: false });
});
</script>
If I click ANYWHERE on the page it then will stop flashing... Rather odd.
Thanks so much for any help!!!
have you tried
$("#timelinerContainers").fadeOut().load('jquery_timeline.php').fadeIn();
or
$("#timelinerContainers").fadeOut().load('jquery_timeline.php',function(){
$(this).fadeIn()
});
Try this code:
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({ cache: false });
$.ajax({
url: "jquery_timeline.php",
success: function(data) {
$("#timelinerContainers").html(data);
}
});
});
</script>
The change is that I've used the jQuery.ajax() function for loading the contents. What I've done here is to first load the contents and then update the div, instead of clearing the contents, before making the ajax request.
UPDATE:
I need to get the jason.. The click event doesnt work why..
update:
<script>
$(document).ready(function(){
$("#RefreshButton").click(function(){
$.ajax({
url: "/test2/ajax.php",
type: "GET",
dataType: "json",
success: function(data)
{
alert("This is my data: "+data);
$(".article").remove();
$.each(data, function(key, value){
$('articleColumn').append( '<p class="article"><font size="5"><b>'+value[0]+'</b></font><br/>'
+value[1]+' Read more...</p>');
});
},
error: function( error )
{
alert(JSON.stringify(error));
}
});
});
});
</script>
The ajax call works..but not when it is in the click event handler..why?!?
I think the solution to the problem lies in the html:
<a href="" id="RefreshButton" >Refresh</a>
may be it refreshes the page and then send the response. I think it is the problem in the way the event propogates ..hmm
Generally when making an ajax call using jQuery I use the short hand version of POST and GET methods. So in your case I would do something like this
$.get("ajax.php", function(data){
alert(data); //just to make sure it works
}, "json");
Be sure to send the response back from ajax.php as json using json_encode(array("key"=>"value","key"=>"value")); ?>)
Also since ajax cannot go across domains you don't have to specify http://localhost/ajax.php, rather you can just specify it as the relative path to where you are calling the jquery function from.