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();
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 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>
I am trying to refresh a div with jquery load(); but the load displays the correct information but duplicates entire parts of the page that arent in the div
$.ajax({
type: 'POST',
url: $(this).attr('action'),
cache: false,
data: $("#uses_form").serializeArray(),
success: function(data)
{
$('#uses_form_div').load('#uses_form_div');
}
});
return false; });
i think you are having a misunderstanding..
if you want to load an external url into the div block
$('#uses_form_div').load("./a.file");
will do it. see the api docs.
Or if you are trying to load the ajax response of the $.ajax call into the div, it should be
$.ajax({
type: 'POST',
url: $(this).attr('action'),
cache: false,
data: $("#uses_form").serializeArray(),
success: function(data)
{
$('#uses_form_div').html(data); // see here
}
});
UPDATED according to comments below:
if the case of an included page to be refreshed. I have two ways to recommend.
make the included file as a separate url and load it initially. so instead of include you will be loading it via jquery as the page loads by a jquery load call. and when you want to refresh it you can do $('#uses_form_div').load("./a.file");
you can put it as include it self and when you need to update, make an ajx request get the data back. Here you have 2 choice. You can build the dom at server and give html as ajax response and simply $("#uses_form_div").html(data) or get the response as json
and build your dom at client side and load it via same $("#uses_form_div").html(data).
I also had the same problem but finally found the answer
<script type="text/javascript">
function recp() {
setInterval(function()
{
$("#result").load(location.href+ ' #my');
});
}
</script>
<div id="result">
<div id="my"><?php echo date('a:i:s'); ?></div>
</div>
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.