I was reading several posts about this, and make some changes to my code but no luck.
Can anyone look into this, to see what's going on here? Or perhaps another way to do what I need (retrieve city, state by a zip code using ziptastic)
The code works fine in Chrome (http://jsfiddle.net/7VtHc/117/)
html
<asp:TextBox ID="txtZipCode" runat="server"></asp:TextBox>
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
<asp:TextBox ID="txtState" runat="server"></asp:TextBox>
script
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[id$='txtZipCode']").keyup(function () {
var el = $(this);
if (el.val().length === 5) {
$.ajax({
url: "http://zip.getziptastic.com/v2/US/" + el.val(),
cache: false,
dataType: "json",
type: "GET",
success: function (result, success) {
$("input[id$='txtCity']").val(result.city);
$("input[id$='txtState']").val(result.state);
}
});
}
});
});
</script>
Thanks,
Actual issue in your code is showing "No Transport" error in ajax error call back. add this line jQuery.support.cors = true; would solve your problem
Try this below code in IE and other browser.
<html>
<head>
<script type='text/javascript' src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
jQuery.support.cors = true;
$("#zip").keyup(function() {
var el = $(this);
if (el.val().length === 5) {
$.ajax({
url: "http://zip.getziptastic.com/v2/US/" + el.val(),
cache: false,
dataType: "json",
type: "GET",
success: function(result, success) {
$("#city").val(result.city);
$("#state").val(result.state);
}
});
}
});
});
</script>
</head>
<body>
<p>Zip Code: <input type="text" id="zip" /></p>
<p>City: <input type="text" id="city" /></p>
<p>State: <input type="text" id="state" /></p>
</body>
</html>
Check out these links:
CORS
No Transport error
The issue is IE8 doesn't support the Cross Origin Resource Sharing (CORS) XHR, so you can't do a cross domain ajax call with the native XHR or jQuery's $.ajax.
For IE8, Microsoft decided to come up with their own cross domain XHR instead of using the CORS XHR, which is called XDomainRequest, so you'll have to implement that to support IE8 users. An example usage can be found in this answer.
Alternatively, you could proxy the cross domain request through your local server side, making the external request a server to server situation, which won't be subject to Same Origin Policy.
Your request look fine but if it's a IE8 then you probably have a problem with header of file that you are loading, it have to be application/json
PHP example
header('Content-Type: application/json');
Very simple, add the following line on your page:
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
Related
i simply want the button click to redirect to a different page..
at the beginning my code looked like this :
<asp:Button runat="server" ID="Register_BTN" Text="Register here !"
OnClientClick="Register_BTN_Click();"/>
<script type-"text/javascript">
function Register_BTN_Click() {
window.location.href("Registration.aspx");
}
the error that was thrown : Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.
i have searched about it online and found this question :
JavaScript console.log causes error: "Synchronous XMLHttpRequest on the main thread is deprecated..."
later i changed the code :
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
$.ajaxSetup({async:true});
function Register_BTN_Click() {
window.location.href("Registration.aspx");
}
and still same exception..
also tried this change and it didn't help..
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
$.ajax({
async: true, // this will solve the problem
type: "POST",
url: "/Page/Method",
contentType: "application/json",
data: JSON.stringify({ ParameterName: paramValue }),
});
function Register_BTN_Click() {
window.location.hash("Registration.aspx");
}
how can i fix this ?
Thanks
window.location.href is a property, not a function, and you should use it like this:
window.location.href = "Registration.aspx";
it works when i change the asp control to an html control
for example :
this solution doesnt work :
<asp:Button runat="server" ID="Register_BTN" Text="Register here !"
OnClientClick="Register_BTN_Click();"/>
<script type-"text/javascript">
function Register_BTN_Click() {
window.location.href="Registration.aspx";
}
but this one does :
<input type="button" value="Register here !" onclick="Register_BTN_Click();" id="Register_BTN" />
<script type="text/javascript" >
function Register_BTN_Click() {
window.location.href = "Registration.aspx";
}
</script>
can someone tell me why when i use the asp control i get this error thrown :
- Synchronous XMLHttpRequest on the main thread is deprecated
Hello there I am totally new to ASP.NET and learning it to my own. I am good at Java J2EE (Struts2 Framework)! I know how can i update or change any control/text inside any div element using struts2 and ajax code.
My Problem
Actaully, I'm trying to do the same thing in ASP.NET just for the learning! Suppose that I have a Default.aspx page with the javascript and ajax methods as:
<head runat="server">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript">
function Change() {
$.ajax({
type: "GET",
url: "temp.aspx",
dataType: "text/html;charset=utf-8",
success: function(msg) {
$("#changer").html(msg);
}
});
}
</script>
<title>Untitled Page</title>
</head>
<body>
<div id="changer">//this is the div i want to update it using ajax
Hello Old Text
</div>
<input type="button"id="but" value="Hello Changer" onclick="Change()"/>
</body>
and suppose that I have my temp.aspx as:
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<div id="changer">
Hello New Text
</div>
</body>
I just want to know if this is possible in ASP.NET because with Java I am familiar with such an operation but I don't know why this is not working in case of ASP.NET!
Any hints or clues are favorable for me, Please don't mind for my question because I am totally new to ASP.NET but I am good at Java
Thanks in Advance!
dataType must define as html like this;
function Change() {
$.ajax({
type: "GET",
url: "temp.aspx",
dataType: "html",
success: function(msg) {
$("#changer").html(msg);
}
});
}
From jQuery Docs;
dataType (default: Intelligent Guess (xml, json, script, or html))
Type: String
Additionally, you can inspect errors using error.
function Change() {
$.ajax({
type: "GET",
url: "temp.aspx",
dataType: "html",
success: function(msg) {
$("#changer").html(msg);
},
error: function(xhr, status, err) {
console.error(status, err.toString());
}
});
}
This is not related to ASP.NET or other web frameworks. It is just related to jQuery and Javascript. jQuery didn't recognise this "text/html;charset=utf-8". If you didn't use dataType, the ajax request worked successfully. It is just verification and result is interpreted according to dataType. For example, you are returning a JSON and the mime type of the your endpoint is not json (considering its mime type is html) just changing of the dataType as "JSON" you can parse the result as object.
I wrote a little script, in first example, I set dataType as HTML and in other example, I set dataType as JSON.
You could add a generec handler called Temp.ashx wich return the new text.
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("Hello New Text");
}
In your ajax call you need to specify you are expecting a text.
<script type="text/javascript">
function Change() {
$.ajax({
type: "GET",
url: "temp.ashx",
dataType: "text/plain",
success: function(msg) {
$("#changer").html(msg);
}
});
}
</script>
Trying to send a simple Jquery GET request, which doesn't work.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#clk").click(function() {
$.get('http://www.abelski.com/courses/ajax/emailajaxservice.php', { email: 'mymail#example.com'}, function() {
alert("Sent");
});
});
});
</script>
</head>
<body>
<input type="text" id="email" />
<input type="button" id="clk" />
<span id="res"></span>
</body>
</html>
http://www.abelski.com/courses/ajax/emailajaxservice.php is on.
I don't get any alert. what is the problem in my code?
Why don't you try this one:
$.ajax({
type: "GET",
url: RequestURL,
dataType: "html",
success: function(htm) {
alert(htm);
}
}
});
In your code snippet, the function
function() { alert("Sent"); }
will be called when the request succeeds. If it fails for any reason (cross-domain requests are forbidden, answer returns with a non OK code, ...) nothing will be executed.
You can add a .fail() listener to see if an error was triggered :
$.get( ... ).fail(function(){ alert("Error"); });
Check your web console to have more detail on the failure.
I've written a JSON API, but I won't be working on the views.
How do I test the JSON API with a simple webpage with prettify, syntax highlighted JSON result?
Let's use the following GET API call as an example:
http://www.google.com/calendar/feeds/developer-calendar#google.com/public/full?alt=json
NOTE: this question is meant to be instructional, answer will be provided. I searched and didn't find a similar answer.
Here's the entire HTML file with in-line javascript.
I used jQuery and highlight.js in the solution.
I ran the result on Chrome, I don't believe it works properly in IE.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/default.min.css" />
<script>
$(document).ready(function() {
hljs.initHighlightingOnLoad();
$.ajax({
url: "http://www.google.com/calendar/feeds/developer-calendar#google.com/public/full",
dataType: "json",
//contentType: "application/json; charset=utf-8", // NOTE: use this parameter when calling your host server, but doesn't work with this google api
type: "GET",
data : { alt: "json" },
complete: function(xhr, textStatus) {
// set status
$("#status").html(textStatus);
// set plaintext
$("#result").val(xhr.responseText);
// set prettytext
var data = JSON.parse(xhr.responseText);
var stringify = JSON.stringify(data, undefined, 2);
var prettify = hljs.highlightAuto(stringify).value;
prettify = hljs.fixMarkup(prettify);
$("#prettyResult").html(prettify);
}
});
});
</script>
</head>
<body>
<tt>Status: <span id="status">waiting ...</span></tt><br /><br />
<textarea id="result" style="width: 1024px; height: 100px;"></textarea>
<pre><code id="prettyResult" class="json" style="width: 1024px;"></code></pre>
</body>
</html>
I am using the IMDb API v2.0 located here and I decided to test it. I can't. I think it's beacuse of cross-browser AJAX request from external sites.. but I don't know any other way. For example, here's a test at imdbapi avatar
See? Here's my code.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>IMDB api</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#movie').keyup(function() {
var yourMovie = $("#movie").val();
$("#debug").append("You are searching for ... "+yourMovie+"\n");
dataString = "t=Avatar";
$.ajax({
type: "GET",
url: "http://www.imdbapi.com/",
cache: false,
data: dataString,
success: function(html){
//$("#more").after(html);
alert("Success!");
}
});
});
});
</script>
</head>
<body>
<form action="#" method="get" enctype="text/html" >
<input type="text" id="movie" maxlength="50" />
</form>
<div id="other">
Trigger the handler
</div>
<br />
<textarea id="debug" style="width: 500px;height:150px;border:1px solid black;font-face:typewriter;"></textarea><br />
<textarea id="more" style="width: 500px;height:150px;border:1px solid red;font-face:typewriter;"></textarea>
</body>
</html>
I am using Google Chrome.
Here's what worked for me:
<script type="text/javascript">
$(document).ready(function()
{
$('#movie').keyup(function() {
var yourMovie = $("#movie").val();
$("#debug").append("You are searching for ... "+yourMovie+"\n");
dataString = "callback=?&t=Avatar";
$.getJSON('http://www.imdbapi.com/', dataString, function(html){
//$("#more").after(html);
alert("Success!");
});
});
});
</script>
Replace:
$.ajax({
type: "GET",
url: "http://www.imdbapi.com/",
cache: false,
data: dataString,
success: function(html){
//$("#more").after(html);
alert("Success!");
}
});
With
$.getJSON('http://www.imdbapi.com/?' + dataString, function(json_data){
alert(JSON.stringify(json_data));
});
It is a cross domain AJAX call, therefore you need a callback. jQuery makes this really easy, just add ?callback=? to your url.
url: "http://www.imdbapi.com/?" + dataString + "&callback=?"
Skip the data = dataString in this case, makes it easier (I find).
Try this, and continue on it further:
$.getJSON("http://www.imdbapi.com/?" + dataString + "&callback=?").success(function(data){
console.log(data); // will contain all data (and display it in console)
})
This is the same as:
$.ajax({
type: "GET",
url: "http://www.imdbapi.com/?"+dataString+"&callback=?",
dataType: 'JSONP'
success: function(data){
console.log(data);
}
You can run cross domain Ajax with jQuery. Set the crossDomain option at the call site:
http://api.jquery.com/jQuery.ajax/
crossDomain(added 1.5)Boolean Default: false for same-domain requests,
true for cross-domain requests If you wish to force a crossDomain
request (such as JSONP) on the same domain, set the value of
crossDomain to true
Edit-
Actually, what exactly is your problem? I tried this and it returns Json properly.
http://jsfiddle.net/7VcUJ/
Response example:
HTTP/1.1 200 OK Cache-Control: no-cache Pragma: no-cache Content-Type:
text/html; charset=utf-8 Expires: -1 Server: Microsoft-IIS/7.0
X-AspNet-Version: 4.0.30319 X-Powered-By: ASP.NET Date: Mon, 02 Apr
2012 22:28:14 GMT Content-Length: 618
{"Title":"Avatar","Year":"2009","Rated":"PG-13","Released":"18 Dec
2009","Genre":"Action, Adventure, Fantasy, Sci-Fi","Director":"James
Cameron","Writer":"James Cameron","Actors":"Sam Worthington, Zoe
Saldana, Sigourney Weaver, Michelle Rodriguez","Plot":"A paraplegic
marine dispatched to the moon Pandora on a unique mission becomes torn
between following his orders and protecting the world he feels is his
home.","Poster":"http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw##._V1_SX320.jpg","Runtime":"2
hrs 42
mins","Rating":"8.1","Votes":"386930","ID":"tt0499549","Response":"True"}
Add a callback parameter to the URL to use JSONP:
dataString = "t=Avatar&callback=?";
Using a $ will cause jQuery to auto-generate a callback function for you and handle the response automatically.
Recommended reading: What is JSONP all about?