I am rendering some stats on my page, as this takes a bit of time I made this request an ajax call after the page loads
<script type ="text/javascript">
$(document).ready(function () {
$.ajax({
url: '#Url.RouteUrl(Routes.MyAds.AjxCallFoAbc, new {advertId = Model.CreateAdvertHeader.SelectedAdvert.Id})',
type: 'GET',
cache: false,
success: function(response) {
$('.advert-performance').replaceWith(response);
}
});
});
</script>
This works perfectly for me, its causing grief when the user installs a ad-blocker, this content is being blocked, I have debugged the code-base and found the ajax call route is never being hit when the ad-blocker is enabled on the browser
What is the work-around for this, I need show the stats even if the ad-blocker is installed
Resolved it
The reason being, my route which the ajax was pointed to had a advert-stats as part of the url, which caused the blocker to block it,
simply changing the route has fixed it
Related
Using dustjs for templating engine within Expressjs 4. Want to render the template client-side when user fills out a form and clicks a search button using xhr. Everything seems to go fine so far as getting the json from xhr call but dust.render does not render the result.
Here is the dust template on the page:
<script id="result-template">
// extra table tags removed for brevity
{#search_results}
{fname}
{lname}
{accountId}
{email}
{status}
{/search_results}
</script>
<div id="output">
Below is the js/jquery in an external js file making the xhr call to server-side. Inside the success callback is where I'm trying to render the result from the call, basically user fills-in a search form and clicks submit:
$(document).ready(function () {
$('#main').on('click', '#search-btn', function (e) {
e.preventDefault();
$.ajax({
url: '/support/search/ah',
type: "post",
headers: {token: sessionStorage.getItem('somekey')},
data: {'phone': $('#mobile').val(),
'email': $('#email').val(),
'fname': $('#fname').val(),
'lname': $('#lname').val()
},
success: function (data, textStatus, request) {
var source = $("#result-template").html();
var compiled = dust.compile(source, "intro");
dust.loadSource(compiled);
dust.render("intro", data, function(err, out) {
$("#output").html(out);
$('#search-result').dataTable();
});
},
error: function (data, textStatus, request) {
// handle error
})
})
xhr call is successful, and I can see that 'data' variable contains the json with values, however, I'm not able to render them using dust.render and there are no js errors being observed when the page loads or when the results come back.
Here is the json result from xhr call:
{"search_results":[{"fname":"Duke", "lname":"Wellington","accountId":"007","email":"duke_wellington","status":"Breathing"}]};
I tried the same template with same json results at atakdubya.github.io replacing its array example and it works fine.
If anyone can point out what I'm doing wrong it would be immensely appreciated.
Depending on your browser, you can't have a script tag with no type or it will be interpreted as Javascript, and Dust isn't valid Javascript.
Try adding type="text/dust" to your script tag. This JSFiddle works for me.
http://jsfiddle.net/Lutr4h2e/1/
This is a question about best practices for making the JavaScript call that generates the standard "Connect to QuickBooks" button (for establishing a connection to QuickBooks Harmony via Intuit's v3 REST API).
If I follow Intuit's example, I would:
Reference https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere.js in a script tag.
Place the <ipp:connectToIntuit></ipp:connectToIntuit> tagset where I want the "Connect to QuickBooks" button to display
Cross my fingers and hope that intuit.ipp.anywhere.js isn't redirecting to a downtime message, again still exists
Make my call to intuit.ipp.anywhere.setup()
See the "Connect to QuickBooks" button
... which works (for many values of "works"), but feels pretty fragile:
If intuit.ipp.anywhere.js is redirecting to a downtime message (read: not JavaScript) or is otherwise unavailable, I'll get a script error.
If I get a script error (or something else goes wrong with Intuit's copy of the script), there isn't any feedback to the user, just a blank space where the "Connect to QuickBooks" button should be.
To make this all a little more resilient, I'm combining the reference to intuit.ipp.anywhere.js and the call to intuit.ipp.anywhere.setup() into a JQuery .ajax() call:
$.ajax({
url: 'https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere.js',
type: 'GET',
dataType: 'script',
timeout: 4000,
success: function(response) {
if (typeof intuit !== 'undefined') {
intuit.ipp.anywhere.setup({
menuProxy: 'MYMENUPROXYURL.aspx',
grantUrl: 'MYGRANTURL.aspx'
});
}
},
error: function(x, t, m) {
// show some friendly error message about Intuit downtime
}
});
... which also works (for a few more values of "works"):
My call to setup() is wrapped inside the success handler (and an additional check on the existence of the intuit Object), so I shouldn't get a script error if things go wrong.
If the GET of Intuit's script times out (after 4000ms) or returns something that isn't script, I'll show a friendly error message to the user.
Has anyone else taken a different approach?
And is Intuit back online?
That's similar to how we've handled it. We had wrapped it in jQuery.getScript call, but apparently the .fail handler doesn't work with cross domain script tags. Our solution is as follows:
<script type="text/javascript>
var timeoutID;
timeoutID = window.setTimeout(function () {
$("#ippConnectToIntuit").replaceWith('<p class="error-message">There was a problem communicating with QuickBooks. The service may be down or in heavy use. Try again later.</p>');
}, 5000);
$.getScript("https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere.js")
.done(function () {
window.clearTimeout(timeoutID);
intuit.ipp.anywhere.setup({
menuProxy: '/path/to/our/menu/proxy',
grantUrl: '/path/to/our/grant/url'
});
});
</script>
<div id="ippConnectToIntuit"><ipp:connecttointuit></ipp:connecttointuit></div>
I've used sortable/portlet jquery ui plugin on my website. I load some boxes after the page is loaded via ajax. but they don't look like the boxes appears at the page load time. I know the problem loading via ajax and bind issue. But how can I solve it?
You're ajax call has a success method which you can use to bind to elements that have been dynamically added.
For example you could do
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
$(".column").sortable({ connectWith: ".column", cursor: 'crosshair' });
}
});
Using the latest version of jQuery 1.6 on iOS 5 safari from an iPad, I'm noticing that all my ajax calls are failing. These same ajax calls work as expected on all other browsers I've tried, and I'm pretty sure they were also working on iOS 4's version of Safari (although I could be wrong). Has anyone else experienced this behavior as well? If so, is there a fix or workaround? Below is a quick example of a simple jQuery AJAX call that is returning an error in iOS 5's Safari. Thanks in advance for any insight!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
</head>
<body>
<a id="my-link" href="javascript:;">Click Me!</a>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#my-link").bind("click", function() {
jQuery.get("test.php", function(data) {
alert(data);
});
});
});
</script>
</body>
</html>
I had a similar issue just now. I had
$.ajax({
type: 'post',
url: 'http://IP../ws',
data: {1:1},
dataType: 'json',
success: function(response) {
if (lng.Core.toType(callback) === 'function') {
// setTimeout(callback, 100, response);
callback(response);
}
},
error: function(xhr, type) {
console.log('error')
if (error) {
setTimeout(error, 100, result);
}
}
});
changed url: 'http://IP../ws', to url: 'ws',
I'm not a jQuery user at all but have to use it for a project so not sure if this is help to you or not but worked for me.
Restart Safari - leave it and kill it from the running tasks.
From other things I have read it is related to security contexts and prevention of cross site scripting attacks, and Safari not getting things quite right when it was previously running on a different network and is now on an new network without it having been stopped between changing networks.
Ran into it myself today, w/ plain HTML/JavaScript/PHP XMLHttpRequest request.
I had face one issue that jQuery ajax call fail in IPad in Safari browser. Error is you have no permission to access the page / directory. I fix the issue by changing the Ajax async property to true.
$.ajax({
type: 'GET',
url: "".
async: true,
cache: true,
crossDomain: false,
contentType: "application/json; charset=utf-8",
dataType: 'json',
error: function (jqXHR, err) {
console.log(jqXHR.responseText);
alert("Error" + jqXHR.responseText);
},
success: function (data, status) {
});
There is a bug in Safari Mobile that suddenly and unexpectedly gives troubles with AJAX calls if there is any file serving going on. Safari can starts sending "OPTIONS" http messages rather than POST after it has been served a download with a Content-Disposition: attachment; header. You can look to see if this is happening by using Fiddler between Safari Mobile and the server to see what HTTP messages Safari is sending.
That "condition" in Safari Mobile is reset when restarted.
It is reviewed well here Stackoverflow: JQuery Ajax stopped working with IOS 5.0.1.
I've had to make it so that it re-try up to 20 times on error to make it work. Code example:
function my_original_function(form)
{
my_original_function_ajax(form, 1);
}
function my_original_function_ajax(form, attempts)
{
console.log('Attempts #'+(attempts));
jQuery.ajax({
type: 'POST',
url: form.action,
processData: false,
data: $(form).serialize(),
cache: false,
success: function(html){
console.log('success!!');
},
error: function (xhr, status, error) {
// make up to 20 attempts if error
if (attempts <= 20) {
my_original_function_ajax(form, attempts + 1);
}
}
});
}
I had the same issue but I ended up discovering something different totally.
I had something like:
function load_one(var1 = null, var2 = null) { ... }
function load_two() { ... }
And after that I had
$(window).load(function() {
load_one(var_x, var_y);
load_two();
});
Everything worked fine in Chrome, Firefox, Safari for OSX, Safari for iPhone, Chrome for iPhone, but on Edge and Safari for iPad nothing worked. So I opened it on Edge and inside the developer tools it was showing an error on the line where the load_one function was defined.
I wasn't sure what it was but the error said ) expected so I decided to remove the default values for the function parameters and everything worked all of a sudden. I am not sure if javascript has issues with default parameter values, but apparently some browsers have issues with that.
I have a form I wish to submit via ajax usind the jQuery $.post command.
The form looks like this:
<form action="/wine/merlot/reviews" class="new_review" id="new_review" method="post">
And the jquery call is:
$(document).ready(function() {
$('#new_review').submit(function() {
$.post($(this).attr('action'), $(this).serialize(), null, 'script');
return false;
});
});
I get the following error on the server:
ActionController::MethodNotAllowed (Only get, put, and delete requests are allowed.):
From what I can tell by digging in with firebugs console the problem is the post is posting to this url:
/wine/merlot instead of /wine/merlot/reviews
I can't for the life of me figure out why this is the case.
OK. It turns out I'm an idiot. I had another div on the page with the id "new_review" so I guess it was looking at the wrong element. Renamed and everything working now.
I could not get a form to submit via ajax using the jQuery $.post command with Rails 2.
I modified Ryan Bates' Railcast 136 to submit via a put instead. The kludge I used was to check the (params[:id] == 'update') in the update action to check for this ajax request.
episode-136/store/public/javascripts/application.js
jQuery.fn.blurWithAjax = function() {
this.blur(function() {
// GOOD .ajax javascript update action works even though create on Rails2 does not
jQuery.ajax({
type: "PUT",
url: "/reviews/update",
data: jQuery(this).serialize(),
dataType: "script",
callback: null
});
return false;
})
return this;
};
jQuery(document).ready(function() {
jQuery("#review_content").blurWithAjax();
});
You need to make the parallel changes also;
def create => def update
app/views/reviews/create.js.erb => app/views/reviews/update.js.erb
Not sure, but try /wine/merlot/reviews/ instead of /wine/merlot/reviews?