Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I get a
ReferenceError: ajax is not defined
error in browser console when I try to make an ajax call.
I'm pretty sure I properly loaded the jQuery library, therefore I don't understand how can the $.ajax function not be defined.
Here is the HTML (without irrelevent css and markup):
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div>
<a class="getUsersA">Get users</a>
<div id="gridD"></div>
</div>
</body>
</html>
Here is the script.js file:
$(document).ready(function() {
$(".getUsersA").click(function() {
$.ajax({
url:ajax/getUsers.php,
type:POST,
data:({
id:0
}),
success:function(results) {
$("#gridD").html(results);
}
});
});
});
Thank you for any help!
You need to wrap ajax/getUsers.php, in quotes. or else it would look for a local variable ajax rather than treating it as a string.
url: "ajax/getUsers.php",
Something like this:
$.ajax({
url: 'ajax/getUsers.php',
type: 'POST',
data:({
id: 0
}),
success:function(results) {
$("#gridD").html(results);
}
});
You have a syntax error on this line:
url:ajax/getUsers.php,
Change this to:
url:"ajax/getUsers.php",
You're supposed to be passing a string (or a variable containing a string) as the url option, but you're instead doing:
url:ajax/getUsers.php,
Change it to:
url:'ajax/getUsers.php',
What you have right now is looking for the variable ajax (which doesn't exist) then trying to divide it by the php property of the object referenced by getUsers (which also doesn't exist), and then set the result as the value for the url option.
Related
I'm just blundering into AJAX, and I swear I'll actually learn my way around it real soon now, but all I need at the moment is to get the inner browser height, so I can ask the Google Maps Engine for a map of the appropriate height. (I'm actually making that request via the Google Maps plugin under Joomla. If I could somehow make that request on the client side, then I might not really have to mess with AJAX, but this would still be a good introductory exercize for me.)
I'm trying to grasp the basic AJAX setup by putting together a working minimal document incorporating code from the first answer at how to get screen width through php?. I realize that example is asking for a different attribute than I'll be asking for, but I'm just keeping the code as close to the original as possible.
I'm not totally clear on what code goes where, but apparently it is not this, at http://allbluesdance.com/testajax.php :
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Test Ajax</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var width = $(window).width();
//This is ajax code which will send width to your php page in the screenWidth variable
$.ajax({
url: "http://allbluesdance.com/testajax.php", //this will be your php page
data : {screenwidth:width}
}).done(function() {
$(this).addClass("done");
});
</script>
(Yeah, it's running)
<!-- example.php code is here : -->
<?php
echo $width = $_REQUEST['screenwidth'];
?>
</body>
</html>
So unless I've made a dumb syntax error I could use a clue.
Thanks,
Drew
I think you need to specify how AJAX gets the data, either through GET or POST. I Have been using this snippet and it works for me.
// fire off the request
var request = $.ajax({
url: "/list/server.php",
type: "POST",
data: send_data
});
// callback handler that will be called on success
request.done(function (response){
// log a message to the console
console.log(response);
});
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I was wondering how to go about having post content hidden, and once you click the title having the content slide down via AJAX (hopefully using Wordpress built in AJAX). I was on here yesterday and this community was nice enough to help me make it work with JQuery(thanks again), but I was wondering if it would be possible to have the hidden content only load when the title is clicked, instead of having a bunch of hidden content load at once. That way everything would run much smoother.
Here is the JQuery code:
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".event-info").hide();
$(".event-title").click(function() {
var eventInfo = $(this).parent().children(".event-info");
$('.event-info').not(eventInfo).slideUp();
eventInfo.slideToggle();
});
});
</script>
Html:
<div class="event-title">Click on title here to load content</div>
<div class="event-info">content hidden/shown here</div>
Any ideas would be greatly appreciated! Thanks!
The best way is to create a function
try something like this
in your fucntions.php
function PostAjax()
{
if(have_posts()) : while(have_posts()) : the_post();
//Loop content here etc.
endwhile; endif; wp_reset_query();
}
// creating Ajax call for WordPress
add_action('wp_ajax_nopriv_PostAjax', 'PostAjax');
add_action('wp_ajax_PostAjax', 'PostAjax');
In your header or footer
jQuery(".event-title").click(function(){
jQuery.ajax({
type: 'GET',
url: '<?php echo admin_url('admin-ajax.php');?>',
data: {
action: 'PostAjax',
MyParam: 'MyParamValue'
},
success: function(textStatus){
$( '.event-info' ).html( textStatus );
},
error: function(MLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
}
});
});
});
and your HTML
<div class="event-title">Click on title here to load content</div>
<div class="event-info"></div>
I want to get last ajax call made in my code .
here is my code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script>
function getCreateAccount() {
$.ajax({
type: "GET",
url: "/Account/Register/",
contentType: "application/json; charset=utf-8",
dataType: "json"
});
console.log($.ajax.mostRecentCall.args[0]);
}
</script>
</head>
<body>
</body>
</html>
but when i see in my console it says "TypeError: $.ajax.mostRecentCall is undefined" .
Thanks,
You may register a global ajaxComplete handler that will be invoked every time an AJAX call finishes.
With this, you can emulate something like the Jasmine $.ajax.calls.mostRecentCall() property:
$(document).ajaxComplete(function(ev, jqXHR, settings) {
$.ajax.mostRecentCall = jqXHR;
});
In this case I'm saving the jqXHR object, rather than the exact set of parameters that was passed to $.ajax.
Note, of course, that this won't be populated immediately after $.ajax is called - it won't be filled until at least one call has finished.
I think mostRecentCall function is from Jasmine framework. You must include Jasmine in your code.
mostRecentCall does not exist in jquery!
there is no such this like "$.ajax.mostRecentCall" in ajax jquery.
As PSR mentioned you could try to use a flag variable
Adding an alert before logging will give enough time for the ajax call to be finished.(that should do the trick)
if you don't want any alerts then you can use sleep() method
There is nothing like
$.ajax.mostRecentCall
in Jquery. That is from Jasmine.js. Unless and until you add reference to Jasmine.js and follow the steps to spy on function, it will give you an error.
You may want to refer the documentation of Jasmin.js. Here's the link that shows how to use it.
This question already has answers here:
JavaScript in jQuery mobile not working unless I refresh
(4 answers)
Closed 9 years ago.
I'm having a jquery mobile page with JavaScript inside. the problem is the JavaScript doesn't work unless the page is refreshed. here is my code:
<script language="javascript" type="text/javascript">
var url = window.location.search.substring(1);
jQuery(function($){
$('#mydiv').load('real_news.asp?'+url);
});
</script>
Put the URL inside jQuery:
jQuery(function($){
var url = window.location.search.substring(1);
$('#mydiv').load('real_news.asp?'+url);
});
I'm trying to build an Ajax Bootstrap Popover to display a page that contains a rating star system.
The javascript here work nice the first time.
Then I have this error:
Uncaught TypeError: Object # has no method 'popover'
I'm not really good in jQuery, but I guess it seems to be due to the ajax call, but I can't find where the problem is.
$(".myRate")
.popover({
offset: 10,
trigger: 'manual',
animate: false,
html: true,
placement: 'top',
template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
});
$('.myRate').mouseenter(popoverDisplay);
popoverDisplay = function() {
var el = $(this);
var _data = el.attr('alt');
$.ajax({
type: 'GET',
url: 'notes.php',
data: _data,
cache: false,
dataType: 'html',
success: function(data) {
el.attr('data-content', data);
el.popover('show');
}
});
}
I don't get what I am doing wrong...
Any idea ?
EDIT:
After searching, it seems that, it's the loaded pages which causes this error.
Exactly this part:
It seems that loading jquery-1.7.2.js make the bug because if I remove it, the error disapear. Problem: I can't delete it because without it jRating doesn't work anymore :/
I had this problem after running the rails twitter bootstrap generator, then switching to bootstrap-sass.
It was caused by a filename collision because boostrap-sass references bootstrap.js instead of twitter/bootstrap, which clashes with the generated file.
Just rename the generated app/assets/javascripts/bootstrap.js.coffee to something else, eg app/assets/javascripts/bootstrap_and_overrides.js.coffee, and you're good to go.
I had this problem because i was trying to use the jQuery from bootstrap while also importing jQuery from googleapis
(like it says in http://railscasts.com/episodes/205-unobtrusive-javascript)
if you're using bootstrap, you'll have jquery
i had the same problem .
you might be loading jquery AFTER loading bootstrap.js . for some reason the sequence is important
</footer>
<script src="<?php echo "http://".$_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI']."assets/bootstrap/js/jquery-1.7.1.min.js" ;?>"></script>
<script src="<?php echo "http://".$_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI']."assets/bootstrap/js/bootstrap.js" ;?>"></script>
<script type="text/javascript">
$(document).ready(function(){
create_project_form=$('form#create_project_form');
$('button#create_project_button').popover({title:'New Project',content:create_project_form});
});
</script>
</body>
</html>
loading jquery before bootstrap did the job for me . hope that helps
I had the same problem. I was loading jQuery.js twice... Narf...
You can either use boostrap.js or (bootstrap-popover.js and bootstrap-tooltip.js)
But not both because if you use both. You get Uncaught TypeError: Object # has no method 'popover'
I guess you're using rails, so it might come that assets/vendor/jquery is loaded after assets/vendor/bootstrap, because the load order is alphabetical. So you might rename the bootstrap file to fit the right loading order. I experienced that problem and it did the trick