I'm having an issue in the success callback of my ajax function. On success of the ajax function I want to call a javascript function that is defined in an external file that is included in the header. However the javascript function never gets called. Is there something I am doing wrong here?
My JQuery looks like this:
$(document).ready(function() {
$.ajax({
type: 'get',
url: 'lib/ajaxDB.php',
data: 'ajax=1&action=locations&uid=<?php echo $uid; ?>&token=<?php echo $admin->getToken(); ?>',
success: function(data) {
addUserLocations(data); // call function in gmaps.js
}
});
...
...
Just make sure that your external file is loaded first.
Related
I have a index.php with a javascript function Loaddata()
function loaddata(){
<?php
$data = //connects to database and gives new data
?>
var data = <?php echo json_encode($data); ?>;
}
setInterval(loaddata,3000);
I understand the fact that php scripts can only be run once when the page is loaded and it cannot be run again using set interval method. Can someone please guide me how to run the php script at regular intervals inside my index.php using ajax or some other method. My javascript variable "data" depends upon the php script to gets its value. Thanks a lot
Generally, using ajax to get data from a PHP page on the front page is a good way. The way you write this code is fine, too. I suggest writing like this,
var data = <?php echo json_encode($data);?>;
function loaddata(){
// use data
}
setInterval(loaddata,3000);
I think it is more clear
You could use an ajax call to retrive data from php and call that function in setInterval function something like this.
function demofunc()
{
$.ajax({
url: '<?php echo base_url();?>',
type: 'POST',
data: formdata,
dataType: 'json',
success: function(data) {
// do your thing
}
});
}
setInterval(demofunc,3000);
If anyone wondering how to do it.
Echo the PHP value that you want ajax to get for you.
Do an ajax request to the php page to get the data.
$.ajax({
method: 'get',
url: 'time.php',
data: {
'ajax': true
},
success: function(data) {
console.log(data)
}
});
// Second Method
$.get('time.php',function(data){
console.log(data);
});
PHP file
if ($_GET['ajax']) {
echo "HELOOO";
}
//if using the 2nd method just echo
echo "hi second method";
I have the following JQuery Ajax method:
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData,
dataType: 'json',
success: function() {
$('#test').html("testing123");
},
});
As it is written, the success function does not fire.
However, if I predefine the function somewhere else and then call it like this:
success: testFunction()
OR
success: $('#test').html("testing123")
then it works.
What am I missing?
The solutions that you think you have working are actually only illusions of so. They are actually not being called on success, but right when you declare it. This leads me to think that your ajax call is not returning success.
The right way to predefine a function and pass it would be
success: testFunction
If you do success: testFunction(), you are running that function right away when parsing the code and not when the callback from your ajax fires. This is the same case with
success: $('#test').html("testing123")
and is actually equivalent if you called testFunction() right after your ajax call.
I am using codeigniter 3 and I am having a strange issue using ajax. I'm trying to call two ajax simultaneously and I thought I have problem with my ajax code and I asked this question here and nothing worked with me.
I kept making the code more simple and narrow it down until I discover that the problem seems to be with the codeigniter
Here is my js code:
do_download();
get_operation_status();
function get_operation_status() {
//var url_process_info = "http://www.example.com/public/sleep_status.php";// this url works as expected
var url_process_info = "<?php echo site_url(); ?>download/sleep_status";
$.ajax({
url: url_process_info,
dataType: 'json',
async: true,
method: "GET",
success: function (data) {
},
complete: function (){
get_operation_status();
}
});
}
function do_download(){
//var download_url = "http://www.example.com/public/sleep_download.php"; // this url works as expected
var download_url = "<?php echo site_url(); ?>download/sleep_download";
$.ajax({
url: download_url,
method: "POST",
async: true
});
}
My php code, inside the Download controller, I have these two functions just for testing :
public function sleep_status () {
sleep(1);
}
public function sleep_download(){
sleep (7);
}
Calling the ajax to the controller download, it showing the issue which keeps the second call pending until the first one is executed.
I created two php files and put them in /public/sleep_download.php and /public/sleep_status.php
and within the two files just the sleep line of code, and it works as I want, while the first call is running, the second ajax call has been excuted several times .
Edited: I could make it work by making the class not extending from CI_Controller, I created a new class named Action and I commented this part:
class Action /*extends CI_Controller*/ {
Although I could make it work, I still wonder why was it happening ? and is there a better solution ?
We need to load a given function on page load. Then, we should repeat that function execution, each time a given button is clicked. How can we do that?
Here's the code:
$(function showMember() {
$.ajax({ //Perform an asynchronous HTTP (Ajax) request.
success: function(html){
$('#members').append(html);
},
type: 'get',
url: '<?php echo $this->createUrl('member'); ?>', //A string containing the URL to which the request is sent.
data: {index:$('#members div>h3').size()},
cache: false, //if false, it will force requested pages not to be cached by the browser.
dataType: 'html' //The type of data that you're expecting back from the server.
});
});
$('.addMember').click(showMember);
showMember doesn't trigger uppon click.
Can anyone please explain with detail, why is that ?
that is because your created function is in limited scope $(function ..)....
you can simply do
$(function(){ //document.ready function
showMember(); //call showmember when document is ready
$('.addMember').click(showMember); //call same function when clicked
});
function showMember() {
$.ajax({ //Perform an asynchronous HTTP (Ajax) request.
success: function(html){
$('#members').append(html);
},
type: 'get',
url: '<?php echo $this->createUrl('member'); ?>', //A string containing the URL to which the request is sent.
data: {index:$('#members div>h3').size()},
cache: false, //if false, it will force requested pages not to be cached by the browser.
dataType: 'html' //The type of data that you're expecting back from the server.
});
}
As an addendum to bipen's answer: the reason your code does not work is because you don't seem to get what $ is.
Since you have tagged your question with jQuery, I assume that you are using it. When you include the jQuery library in your code it gives you a function called jQuery. This function is aliased as $. That is, $ is the same as jQuery.
When you call a function in javascript you can pass in arguments:
parseInt('1234');
At the top of your code you are calling $, and passing a function definition as an argument. So
$(function showMember()...
is the same as
jQuery(function showMember()...
That is syntactically correct, but limits the scope of the function to the list of arguments you have passed to the $ function. Once that call is complete the function showMember will no longer exist.
This is why you code does not work.
Here are few points:-
You don't need to call $(function showMember() like this.
You need to call it like function showMember() simply.
Also, you need to call the click function inside the DOM ready method.
Just to make sure that your click event is fired when the DOM is fully loaded, as follows:
$(document).ready(function () {
$('.addMember').click(showMember);
});
OR
$(function () {
$('.addMember').click(showMember);
});
When you pass custom function inside event handler (i.e click, change etc ) then you need to create function as normal, You do not need wrap function within $();
And also do not forget to wrap code inside $(document).ready();
function showMember()
{
$.ajax(
{
success: function(html)
{
$('#members').append(html);
},
type: 'get',
url: '<?php echo $this->createUrl('member'); ?>',
data: {index:$('#members div>h3').size()},
cache: false,
dataType: 'html'
});
}
$(document).ready(function(){
$('.addMember').click(showMember);
});
You need to use ready function when using jQuery
$(document).ready(function(){
$('.addMember').click({});
});
Try this:
$('.addMember').click(function(){
showMember();
});
function showMember(){
$.ajax({ //Perform an asynchronous HTTP (Ajax) request.
success: function(html){
$('#members').append(html);
},
type: 'get',
url: '<?php echo $this->createUrl('member'); ?>', //A string containing the URL to which the request is sent.
data: {index:$('#members div>h3').size()},
cache: false, //if false, it will force requested pages not to be cached by the browser.
dataType: 'html' //The type of data that you're expecting back from the server.
});
}
you may have this lement bind dynamically,
so I think you need to bind it after all binding is complete :
$('.addMember').live('click', function(){
showMember(); return false;
});
I know questions about loading XML into a JS variable have been posted here many times, but I didn't find a solution that would work. In my script I declare a variable before an ajax request, and then add the result to the variable. This works only if I add alert to the script:
var myDB;
$.ajax({
type: 'GET',
url: 'db.xml',
dataType: 'xml',
success: function (xml){
myDB = xml;
}
});
alert(myDB); //returns: undefined
$(myDB).find('item').each(function (){
var question = $(this).find('question').text();
alert(question);
});
The above code works only with the alert. When I delete the alert, the code doesn't work. How can I make this work without the alert?
You need to add your code to success handler for doing that:
var myDB;
$.ajax({
type: 'GET',
url: 'db.xml',
dataType: 'xml',
success: function (xml){
$(myDB).find('item').each(function (){
var question = $(this).find('question').text();
});
}
});
An ajax request is asynchronous. That means, the function you gave in the success option is excuted somwhen later.
After you've started the request, you're variable is still empty. Only if you wait long enough to confirm the blocking alert, the variable will have been loaded.
You will need to add the iteration to the success function, where the xml data is certainly available.