I have the following file named navbar.php. and I wanted it to be refreshed with a time delay so I used the js function bellow and it works fine. problem is when page refreshed it doesnt go to the actual path, instead it adds the name of the controller and function to the source path and return 404 , help pls.
<div class="group" id="mydiv">
<!--some content -->
</div>
<script type="text/javascript">
$(document).ready(function () {
setInterval(function() {
$.get("application/views/templates/navbar.php", function (result) {
$('#mydiv').html(result);
});
}, 15000);
});
Chrome console log says : GET http://localhost/HDMSV2/dashbord/Dashbord_Controller/application/views/templetes/navbar.php 404 (Not Found)
Try domain relative path to php file
$(document).ready(function () {
setInterval(function() {
$.get("/application/views/templates/navbar.php", function (result) {
$('#mydiv').html(result);
});
}, 15000);
});
But I think you need to go to some controller and create function there that will return you proper values, because it won't make too much sense accessing view file if it isn't populated with data from controller as that is how MVC pattern should work
So in your controller RefreshController create function refresh_navbar()
public function refreshNavbar() {
$this->load->view('navbar');
}
And then your script would go something like this
$(document).ready(function () {
setInterval(function() {
$.get("/refresh/refresh-navbar", function (result) {
$('#mydiv').html(result);
});
}, 15000);
Related
The following function is inside a page (mainpage.php) which I load dynamically into a tab (tabcontent.php) .
$('.editlink').on('click', function() {
var id = $(this).attr('data-ds');
$.ajax({
url: 'noticejob.php?step=get&ds='+id,
method: 'GET'
}).success(function(response,status) {
...
});
});
I call this function by this link, which is inside the tabcontent.php
<i class="fa fa-pencil"></i>
All works fine.
Now I want to start this function over a url call for adding links into other pages to open the mainpage.php and start with this function (should open a modal).
For Example: mainpage.php?start=edit&ds=123
Is it possible and in which way?
You can just print the JS you need to execute in the PHP page.
...
?>
<script>
$(function() {
foo();
});
</script>
<?php
...
To open the modal automatically, either create a JS function that opens the modal and call it (with the previous method), or do
<script>
$(function() { $('.editlink').click(); });
</script>
Ok, now it works,
i've put a new (named "edit_function") js function into the mainpage.php with the "old" code of the "$('.editlink').on('click', function() {..."
after that i call this function from the mainpage if there is a url parameter. I do it into the php file and create a dynamicaly js code
if($_GET['job']=='new')
{
$p['JS']='edit_function("'.$_GET['detail'].'");';
}
at the other hand i call the function for the tabcontent.php page in this way
$('.editlink').on('click', function() {
var id = $(this).attr('data-ds');
edit_function(id);
});
for me it works
I'm trying to run a function that executes a spinner while a PHP script is loading and also refreshes a PHP file that counts the number of rows inserted to show the script's progress.
This is what I have so far:
<script type="text/javascript" language="javascript">
// start spinner on button click
$(document).ajaxSend(function(spinner) {
$("#spinner").show();
});
// refresh progress script and output to #content div
function updateProgress(){
$('#content').load('progress.php');
}
myTimer = setInterval( "updateProgress()", 2000 );
// Execute the primary function
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('execute.php');
});
});
// hide spinner and content div when finished
$(document).ajaxStop(function(spinner) {
clearInterval(myTimer);
$("#spinner").fadeOut("fast");
$("#content").fadeOut("fast");
});
</script>
Right now the updateProgress() function starts after the first interval is over even if the button hasn't been pushed, so I'm assuming I have to tie it in with the spinner function but I'm just not entirely sure how to make that work.
EDIT: Here's the HTML that displays the button and the div's:
<div id="stage">
Click to Import New Data into AssetData Table
<p>
<div id="spinner"><img src="/images/spinner.gif" alt="Loading..."></div>
<div id="content"></div>
<p>
<input type="button" id="driver" value="Load Data" onClick="this.disabled=true;"></div>
You need:
Load page with button. When you push button file execute.php should upload.
After user push button, spinner appearing and browser starts make ajax request to progress.php.
When execute.php uploaded, spinner disappears, progress results disappears.
jQuery code below doing this:
var myTimer;
$(document).ready(function () {
// Execute the primary function
$("#driver").click(function (event) {
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139',
success: function (data) {
//$("#someField").html(data); // you put result of executting `execute.php` into #someField field by uncommenting this string
$("#spinner").toggle();
$("#content").fadeOut("fast");
clearInterval(myTimer);
},
error: function (bob) {
// show error
console.log('get error');
clearInterval(myTimer);
},
beforeSend: function () {
myTimer = setInterval(function () {
/* // uncomment this when you will use it with real files and server
$.ajax({
url: 'progress.php',
success: function (data) {
$("#content").html(data);
}
});
*/
$("#content").append("progress data<br>");
console.log('progress executed');
}, 1); // change delay, when you work with real files and server
$("#spinner").toggle();
console.log('ajaxSend handler executed');
}
});
console.log('main function executed');
});
});
Look this example (this example for code above), please.
Now, this code do all what you need. Right?
Don't forget to uncomment some lines (ajax requests), change intervals, remove debug outputs (line 29, for example) etc.
Notice (and change it, when you will use my code) url field of execute.php ajax-requst. I had used weather api (just for example, you musth change it to progress.php because download this data takes some time, so you can see results. Remove weather url and put url to progress.php.
Also, you can check this example. Code is tided up and this version allows to load file and after that load another. And after that load another. + now myTimer+setInterval+function progress synergizes better, I suppose.
Hope, this will help you.
I'm getting a product's name & its description from an external PHP file using the jQuery "load" function. Further, I want this text to be displayed on the page using the fadeIn() function. How can I do that in my jQuery code?
$('document').ready(function() {
refreshEPosts();
function refreshEPosts(){
$('#crPanel').load('getNewPosts.php', function(){
setTimeout(refreshEPosts, 1500);
});
}
});
UPDATE
$('document').ready(function() {
refreshEPosts();
function refreshEPosts(){
$('#crPanel').load('getNewPosts.php', function(data) {
//For now, lets just log the data
console.log(data); //should be your echo'd php stuff
setTimeout(refreshEPosts, 1500);
$('#crPanel').fadeIn(data);
});
}
});
You have to actually do something with the return data. Add a parameter to your load callback, and use it:
$('#crPanel').load('getNewPosts.php', function(data) {
//For now, lets just log the data
console.log(data); //should be your echo'd php stuff
setTimeout(refreshEPosts, 1500);
});
Try this:
HTML:
<div id="myDiv"></div>
JS:
$('#crPanel').load('getNewPosts.php', function(data) {
$("#myDiv").fadeIn(data);
setTimeout(refreshEPosts, 1500);
});
Maybe something like this would work:
$('document').ready(function() {
refreshEPosts();
function refreshEPosts(){
$('#crPanel')
.hide()
.load('getNewPosts.php', function() {
$('#crPanel').fadeIn();
setTimeout(refreshEPosts, 1500);
});
}
});
You can see it working in principle in this jsFiddle: http://jsfiddle.net/M93Cn/
The $('#crPanel').load() just place the returned HTML into the #crPanel when succeed so there is no need to deal with the returned data in the success function.
As fadeIn() does not have a parameter that accept the data you want to display, calling $('#crPanel').fadeIn(data); will not work in this case, just use $('#crPanel').fadeIn(); and I believe it will work pretty well.
Hi and thanks for taking some time to look at my question. I have a part of the page where content is dynamicly loaded into from another file. Reason for this is it needs to be live updated. Now I want to be able to apply jquery effects that are usually used for show/hiding content (slide, fade etc) to animate the difference between the current data and the new data. This is the code used to get the content and load it into the div:
function k() {
$.post("../includes/ajaxAgenda.php", {
limit : value
}, function(data) {
$('#tab-agenda').html(data);
});
};
$(document).ready(function() {
k();
$('#tab-agenda').scroll(function() {
loadMore();
});
});
var refreshId = setInterval(function() {
k();
}, 1000);
So I guess my question is how do I animate what gets loaded in so it doesn't just "pop" from one content to another?
edit: I tried using the .live instead of .scroll but it doesn't seem to work:
$(document).ready(function() {
$('#tab-agenda').live("scroll",function() {
alert("hi");
loadMore();
});
});
You need to use live function of jquery to bind the dynamically added elements.
Ref: http://api.jquery.com/live/
Try this :
$('#tab-agenda').live("scroll",function() {
loadMore();
});
I suggest you to add the ajax loader image with proper css over the content/ div as like below.
function loadmore(){
$("#loader").css('display','block');
//your
//code
//here
$("#loader").css('display','none');
}
html
<img id="loader" src="ajax-loader.gif" style="display:none" />
<div id="content">
your cont to display
</div>
I am experiencing the strangest behaviour on our website, and it is making things incredibly slow.
My team and I have a website running entirely on AJAX. So for the login, I have some js ajax that loads the login box into our index page. The html containing the login box has a script link in the head. This script listens for the login form submission, and sends the form data to the server for authentication through ajax.
The html that contains the login box only gets loaded once, but the js file that it links to gets loaded multiple times. The amount of times change. From 5 times to 15 times and I cannot see a pattern or anything. This happens everywhere on our site, not just at login time.
This issue really has me stumped and I'm totally stuck. Is it because I have ajax in a js file that is loaded in initially with ajax?
I would really appreciate your insight and help!
EDIT:
As requested, some code:
This is a stripped down version of loadContent() in the Interface.js file. This specific function loads all site content into the content area on index.php. When the page is refreshed, the first thing sent to the function is the location of the login.php file, containing the login box:
loadContent: function(page) {
var self = this;
//just some animations to make things look good
$(self.error).fadeOut(150, function() {
$(self.content).fadeOut(150, function() {
$(self.loading).fadeIn(150, function() {
$.ajax({
url: page,
success: function(data) {
//response data
var $response = $(data);
$(self.content_1).html($response);
//definitions for contentbox-2
self.contentHeading_2.html("Replies:");
self.content_2.html(postReplies);
//redisplay the content after it has loaded in.
$(self.loading).fadeOut(150, function() {
$(self.content).fadeIn(150, function() {
// Content faded in
});
});
},
error: function() {
$(self.loading).fadeOut(150, function() {
$(self.error).fadeIn(150, function() {
// Error faded in
});
});
}
});
});
});
});
this.page = page;
}
And then the login.php file:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<div class="padded loginphp">
<div id="loginbox">
<!-- the login box comes here
</div> <!-- #loginbox -->
</div>
</body>
</html>
And the login.js file:
$(document).ready(function() {
$('#honeyloginform').submit(function(event) {
//event.preventDefault();
login();
return false;
});
});
function login() {
$('.errorinputfields').removeClass('errorinputfields');
if (isEmpty($('#username'))) {
$('#username').addClass('errorinputfields');
$('#username').focus();
return;
}
if (isEmpty($('#password'))) {
$('#password').addClass('errorinputfields');
$('#password').focus();
return;
}
$('#honeyloginform').fadeOut(100, function(){
$('#loginbox .loading').fadeIn(300, function(){
var pword = $('#password').val();
var remember = "no";
if ($('#remember').is(':checked')) {
remember = "yes";
}
var JSONobj = {
username: $('#username').val(),
password: pword,
rem: remember
};
$.ajax({
url: 'ajax/login.php',
data: JSONobj,
success: function(data) {
//alert(data);
var JSONobj = JSON.parse(data);
if (JSONobj.Success) {
Interface.login(); //just loads the landing page after login
//window.setTimeout('location.reload()', 300);
} else {
$('#loginbox .loading').fadeOut(300,function(){
$('#honeyloginform').fadeIn(300);
});
$('#username').focus();
$('#loading-message').text(JSONobj.Message).show();
}
}
});
});
});
}
I've managed to find the problem, and fix it!
I've made a change to my interface layout, and as a result, the three selectors, $(self.error), $(self.content) and $(self.loading) each contain more than one element, where it always only contained one each.
This seems to cause the callback functions to be compounded or something, as everything inside the final callback in loadContent() was called 9 times.
So it was a simple case of redefining the selectors, so that they refer to one element each.