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.
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);
});
HTML code :
<html>
<head>
</head>
<body>
<script type="text/javascript" src="/js/colorbook.js"></script>
<script type="text/javascript">
book.init();
</script>
</body>
</html>
JS code :
var book = (function(){
init = function(){
console.log ( "initialized")
}return init();
}());
Question : The above code works. But I am unable to understand how?. Can any of JS guys help me here or guide me how should I start debug this code to understand it.
Ok so as per your comment. The Javascript you have there is all executed sequentially as the browser reads it from the incoming data stream. That being said, All javascript contained within the first script tag will be executed. Then the second script tag will be executed in sequence as well.
So right now you can look at the book.init() as being the last provided javascript call to be executed.
I tried your JS code in jsfiddle and could not get it to work check This Fiddle to see what I mean.
What is happening in your JS code is the last () at the end of the var book declaration executes the anonymous function which will print the line to the console. However from the code you supplied the book variable never gets a book.init() method. So once that call is reached it will throw an error of undefined.
I have this ajax code:
$.ajax({
type: "POST",
url: "${createLink(controller:'MyController', action:'downloadFile') } target=\"_blank\" ",
data: {'names':JSON.stringify(names)},
dataType: 'json'
});
Which calls this controller method, which works
def downloadFile =
{
List<JSON> Mynames = JSON.parse(params.names)
Mynames.each{println "MY ID is: $it"}
[Mynames:Mynames]
}
It prints out the MY ID Is Lines, but it doesn't render the downloadFile View which is this:
<%# page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title></title>
</head>
<body>
test
</body>
</html>
However, it is not rendering it. How can I fix this? Thanks.
Please take some time to do some reading on Ajax and what it is used for and how it works. You have a fundamental misunderstanding.
$.ajax({
type: "POST",
url: "${createLink(controller:'MyController', action:'downloadFile') } target=\"_blank\" ",
data: {'names':JSON.stringify(names)},
dataType: 'json'
});
The above code submits a request to your controller. Here's the key point; it does not refresh your page or put any data on your page. It only returns data to you in JavaScript.
You're controller isn't even returning the correct response based on your $.ajax() functions dataType parameter. The dataType property tells the $.ajax() function what kind of data to expect as the response.
jQuery $.ajax() docco
If you need to render HTML as a response to your ajax request, the easiest way is to use the $.load() function.
There are a few other ways but for the sake of keeping things simple for you I won't go into them here. Seriously though, not trying to be rude, but I've read some of your other questions. You really need to get a better understanding of the tools you're using.
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
I am loading some code with the jQuery.ajax() method. In this code I want to have some jQuery-UI Widgets (sliders and calenders) but they won't appear in IE.
Here some example code where you maybe can help me to understand where I am going wrong.
The Code which will load the jQuery-UI Widgets
<script>
jQuery(document).ready(function(){
jQuery.ajax({
type:'post',
url: 'file.php',
success: function (data) {
jQuery('.somediv').empty().html(data);
}
});
});
</script>
The Code which is loaded and SHOULD initialize the jQuery-UI Widgets
<script>
jQuery(document).ready(function(){
jQuery('.datepicker-div').datepicker(someoptions);
jQuery('.slider-div').slider(someoptions);
});
</script>
<div class="datepicker-div">
<div class="slider-div">
You can see that it should be very simple. For FF it works fine but not for IE.
Maybe it has nothing to do with the document-ready statement?
Just call the initializers in the success event:
<script>
jQuery(document).ready(function(){
jQuery.ajax({
type:'post',
url: 'file.php',
success: function (data) {
jQuery('.somediv').empty().html(data);
jQuery('.datepicker-div').datepicker(someoptions);
jQuery('.slider-div').slider(someoptions);
}
});
});
</script>
Of course, you should refactor that by having a function for initializations:
function Initialize(){
jQuery('.datepicker-div').datepicker(someoptions);
jQuery('.slider-div').slider(someoptions);
}
Then have your success call it, as well as the ready() ebent:
<script>
jQuery(document).ready(function(){
jQuery.ajax({
type:'post',
url: 'file.php',
success: function (data) {
jQuery('.somediv').empty().html(data);
Initialize();
}
});
});
</script>
Update
I have read your question more carefully and now I fully understand it. Your ready() is in the loaded code. Then you should be using jQuery's load():
Script Execution
When calling .load() using a URL without a suffixed selector
expression, the content is passed to .html() prior to scripts being
removed. This executes the script blocks before they are discarded. If
.load() is called with a selector expression appended to the URL,
however, the scripts are stripped out prior to the DOM being updated,
and thus are not executed. An example of both cases can be seen below:
Here, any JavaScript loaded into #a as a part of the document will
successfully execute.
$('#a').load('article.html');
Try removing the scripts prior to appending the html, then adding them back.
var outHTML = data.replace(/<script>/ig,"<div class='script'>").replace(/<\/script>/ig,"</div>");
outHTML = $(outHTML);
var script = outHTML.find("div.script").detach();
$(".somediv").html(outHTML);
var s = document.createElement("script");
s.textContent = script.text();
document.body.appendChild(s);
Edit:
.find("div.script") may need to be changed to .filter("div.script") based on what your ajax request is returning.
Ok, I didn't found out how i can solve the Problem, but i found a work around.
The work around is very simple. Because in every browser except for the IE the loading of the script via ajax works fine, we have to identify the IE and change the behaviour to not loading the script but redirect to the site I wanted to load. I am doing this all in Joomla 2.5, so there was a bit work to do but basically it was the following code wich solved the problem.
// preparing the url
// check for ie
if (jQuery.browser.msie) {
window.location(url);
} else {
// do the ajax
}