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.
Related
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 want to insert logout time stamp when user does not manually logout from application i.e., if user closes browser without logging out from the system, the system should log out on browser close event or any other solution to do the same using jquery, ajax, and php is welcomed. I tried following code:
<script type="text/javascript">
window.onbeforeunload = function() {
$.ajax
({
url: 'logout.php',
data: "",
type: 'post',
success: function()
{
.....
}
});
}
</script>
But window.onbeforeunload function() is logging me out everytime the url changes in webkit browsers like chrome, as it's characteristics. I need some cross browser solution. I saw various que-ans on stackoverflow itself regarding this issue but i couldn't find any solution which helped me in my case.
And i also need to mention that in logout.php i use the code for session termination and insert query in database as well for logged-out timestamp.
I would like to suggest following code for ajax call on browser close.
<script type="text/javascript">
window.onbeforeunload = function() {
var ticketId = $('#ticketId').val();
$.ajax({
url: '/ticket-window-close/'+ticketId,
type: 'GET',
async: false,
timeout: 10000
});
};
</script>
For some reason my submit event is not working, however, if i change it to click on the form, it works, this is my code:
JQUERY:
<script>
(function(){
$('form').on('click',function(){
$.post("../includes/register.php", $('form').serialize(),
function(data){
$('body').append(data);
});
});
})();
</script>
REGISTER.PHP:
<?php
if(isset($_POST['username'])){
echo $_POST['username'];
}
?>
This works perfectly fine, it appends the username whenever I click on a form text input, however, when I try to use the submit method, it doesnt output anything:
<script>
(function(){
$('form').submit(function(){
$.post("../includes/register.php", $('form').serialize(),
function(data){
$('body').append(data);
});
});
})();
</script>
As a matter of fact, it doesn't even work when I use button.on('click')
You are using an immediately invoked function instead of document ready handler, also you should prevent the default action of the event, try the following:
$(function(){
$('form').on('submit',function(event){
event.preventDefault();
$.post("../includes/register.php", $(this).serialize(),
function(data){
$('body').append(data);
});
});
});
The form will submit to the form's action by default. You need to prevent this from happening. You are waiting for a server response via ajax, so it is most likely you will never witness your callback executing before the default action occurs.
$('form').submit(function(e){
e.preventDefault(); // put this first
$.post("../includes/register.php", $('form').serialize(),
function(data){
$('body').append(data);
});
});
This is speculation right now since I do not know what your HTML code looks like.
But on submit the form will be submitted, and any active ajax requests will be cancelled.
Try something like
<script>
(function(){
$('form').submit(function(){
$.post("../includes/register.php", $('form').serialize(),
function(data){
$('body').append(data);
});
return false;
});
})();
</script>
That will stop the submit event and you should get the post event to occur. Though it will NOT actually submit the form. So you'll have to do that manually.
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(); }
});
$(function(){
$('p.load_it a').click(function(){
$('#demo_content').load('http://d.com/myphp.php? nice=1149632');
return false;
});
});
Click me to load some HTML with AJAX.
<div id='demo_content'>
</div>
I wanted to know if anyone can give me advice as to how I can load this kind of Effect not by a click, but by an animated "loading" effect.
Let me know if anyone has any suggestions.
This will execute your load() call when the DOM on the page is ready.
$(document).ready(function() {
$('#demo_content').load('http://example.com/myphp.php? nice=1149632');
return false;
});
As for your 'loading' request, I suggest you take a look at this StackOverflow question. Nevermind, I just saw you already had something in mind.
$(document).ready(function() {
$.ajax({
url: 'http://example.com/myphp.php?nice=1149632',
success: function(data) {
$('#demo_content').html(data);
}
beforeSend: function(){
//show loading here
$('#demo_content').html("Loading...");
}
});
});
If you want the javascript code to be executed when the page has been loaded, you can also add the script at the bottom of the page, like this:
<script>
$('#demo_content').load('http://example.com/myphp.php? nice=1149632');
</script>