We are using jQuery 3.3.1 in our project. When we are using and testing on localhost the jQuery works fine and its loading without any issue.
However, now we have deployed our web application on AWS and after deploying it is giving the below error
Failed to load resource : the server responded with a status of 500 (Internal Server Error)
We are loading third party payment providers iFrame in our html page. Is that causing an issue ? If it is an issue then why does it works fine in localhost ?
Also, we have kept the file in our solution itself and tried with jQuery CDN as well. But it gives the same error.
#using Microsoft.AspNetCore.Mvc.Rendering;
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>PaymentProviders</title>
<script src="~/jquery.min.js"></script>
</head>
<body>
<div class="form-control">
<label>Payment Provider Name:- </label>
#Html.DropDownList("ID", new SelectList(ViewBag.PaymentProvidersList, "ID", "PaymentProviderName"), "Please select", new { #id = "ddlPaymentProviders", #onChange = "SelectedValue(this)" })
</div>
<div id="divContainer"></div>
</body>
</html>
<script>
function SelectedValue(ddlObject) {
var selectedText = ddlObject.options[ddlObject.selectedIndex].innerHTML;
$.ajax({
type: "GET",
url: "/Home/Index",
data: { 'paymentProviderName': selectedText },
success: function (data) {
$('#divContainer').html(data);
$('#divContainer iframe').height("500");
}
});
}
</script>
Below is the screenshot for the same.
Any help on this appreciated !
Related
working on side project using openweathermap api...
i am using my own api key, the one mentioned here is generic and works for someone who doesnt have an account, it's free anyways...
Also i am using bootstrap toggle lib...
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Weather Now</Title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1 class="text-center">Local Weather</h1>
<input id="tog" type="checkbox" checked data-toggle="toggle" data-size="large" data-on="℃" data-off="℉" data-onstyle="primary" data-offstyle="success">
<ul>
<li id="city"></li>
<li id="weatherType"></li>
<li id="temp"></li>
<li id="windSpeed"></li>
</ul>
</body>
</html>
JS/jQuery:
$(document).ready(function(){
var long,lat,weatherType,temp,kelvin,celsius,fahrenheit,city,apiObj;
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
long = position.coords.longitude;console.log(long);
lat = position.coords.latitude;console.log(lat);
apiObj = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=b1b15e88fa797225412429c1c50c122a1";
console.log(apiObj);
$.getJSON(apiObj,function(data){
console.log("hi");
weatherType = data.weather[0].description;console.log(weatherType);
kelvin = data.main.temp;console.log(kelvin);
fahrenheit = (kelvin)*(9/5)-459.67;console.log(fahrenheit);
celsius = kelvin-273;console.log(celsius);
city = data.city;console.log(city);
if($('#tog').prop('checked')){
$('#temp').html('hi '+celsius); //doesnt work
}
else{
$('#temp').html(fahrenheit);
}
});
console.log("bye");
});
}
});
Example JSON:
http://samples.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=b1b15e88fa797225412429c1c50c122a1
{
"coord":{
"lon":139.01,
"lat":35.02
},
"weather":[
{
"id":800,
"main":"Clear",
"description":"clear sky",
"icon":"01n"
}
],
"base":"stations",
"main":{
"temp":285.514,
"pressure":1013.75,
"humidity":100,
"temp_min":285.514,
"temp_max":285.514,
"sea_level":1023.22,
"grnd_level":1013.75
},
"wind":{
"speed":5.52,
"deg":311
},
"clouds":{
"all":0
},
"dt":1485792967,
"sys":{
"message":0.0025,
"country":"JP",
"sunrise":1485726240,
"sunset":1485763863
},
"id":1907296,
"name":"Tawarano",
"cod":200
}
Console Output:
Outputs Long, Lat, api-url and bye...nothing in between(the code in getJSON)...
What's happening?
UPDATE:
So as mentioned by the ppl here i checked stuff and it was throwing an error...the error was "Blocked loading mixed active content”
What is Mixed Content?(refered from stackoverflow answer)
When a user visits a page served over HTTP, their connection is open for eavesdropping and man-in-the-middle (MITM) attacks. When a user visits a page served over HTTPS, their connection with the web server is authenticated and encrypted with SSL and hence safeguarded from eavesdroppers and MITM attacks.
However, if an HTTPS page includes HTTP content, the HTTP portion can be read or modified by attackers, even though the main page is served over HTTPS. When an HTTPS page has HTTP content, we call that content “mixed”. The webpage that the user is visiting is only partially encrypted, since some of the content is retrieved unencrypted over HTTP. The Mixed Content Blocker blocks certain HTTP requests on HTTPS pages.
The API call provided by 'openweathermap' is 'http', in my case since it is a side project i hard coded/added 's' making it 'https' and it worked!
If you are writing professional code i suggest ask API vendor for https/secure connection! Thanks for all the help!
The thing between "api-url" and "bye" is the jQuery.getJSON() call. That function in there is the success-callback. That fact that it does not get executed, means that the getJSON() must not have completed successfully.
To figure out why, you should debug that request.
Does that URL give a response at all?
Is it a success-response (status code 2xx)?
Does it return JSON?
If none of those help you, you could convert the getJSON-call to a $.ajax-call and add an error-callback. That should certainly get called. See what kind of error it gets.
$.ajax({
dataType: "json",
url: apiObj,
success: function (data) { /* your function body */ }
}).fail(function(jqXHR, textStatus, errorThrown) {
console.error(jqXHR, textStatus, errorThrown);
console.error(jqXHR.responseJSON);
});
Update: I am getting 401 Unauthorized as a response.
{
"cod": 401,
"message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."
}
I've very new to JavaScript. I'm trying to implement a simple SignalR server callback in JavaScript.
First, the _Layout.cshtml
<body>
<div class="container body-content">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
Next, my Index.html
<body>
#section scripts
{
<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="/Scripts/jquery.signalR-2.1.2.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
console.log("HELLO WORLD");
$.connection.hub.url = 'http://blah:8094/signalr';
var proxy = $.connection.DashboardHub;
proxy.client.NotifyAllClientsOfChanges = function () {
var searchUrl = "Home/GetData";
$.ajax({
url: searchUrl,
type: "POST",
success: function (data) {
$("#divData").html(data);
}
});
};
$.connection.hub.start({ transport: 'auto', xdomain: true })
.done(function () {
console.log('Connected.');
})
.fail(function (e) {
console.log('Unable to connect:' + e);
});
});
</script>
}
#using (#Html.BeginForm("Index", "Home"))
{
<div id="divData">
#{
var grid = new WebGrid(Model);
#grid.GetHtml(
mode: WebGridPagerModes.All,
columns:
grid.Columns
(
grid.Column(columnName: "SiteId", header: "Site Id", format: #<text>#item.SiteId</text>),
grid.Column(columnName: "Instrument", header: "Instrument", format: #<text>#item.InstrumentId</text> ),
.
.
.
))
}
</div>
}
</body>
I see the "HELLO WORLD" console log at the top, yet I don't see either of the Console logs for "Connected" or "Unable to connect"
I see an error in the console that says "Cannot read property 'client' of undefined"
I've followed many SO posts on similar topics and tried many things. I'm not entirely sure that I have this coded correctly.
Anyone see what's wrong?
Thanks
Not sure about the whole function but for starters:
var proxy = $.connection.DashboardHub;
should be
var proxy = $.connection.dashboardHub;
Needs to start with lowercase
some mistakes that I catch. first, if you are using a cross domain server as your signalR hubs, then you should include it in you header instead the local one
<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="/Scripts/jquery.signalR-2.1.2.js"></script>
<script src="http://blah:8094/signalr/hubs"></script>
Second, when you declare the name in client side of SignalR, you HAVE TO use a small case for the first word, even if you set it as an upper case in your server. Means that, if you declare `MyChatHub' in your server, you Will call it as 'myChatHub' in your javascript.
var proxy = $.connection.dashboardHub;
proxy.client.notifyAllClientsOfChanges
third, why would you use a POST method in your AJAX when it is a GET method?
Please refer following URL hope it will help you.
https://learn.microsoft.com/en-us/aspnet/signalr/overview/guide-to-the-api/hubs-api-guide-server
I am developing an application in which from a website project I give a call to web api method using ajax call javascript. When I run both projects locally it works fine, but when I do publish web api project on demo site the ajax call does not reach to the web api method.
My ajax call is as follows-
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var url = 'http://abc.demo.in/c60/api/Patient/Create/';
$.ajax({
url: url,
data: getData(),
type: 'POST',
contentType: "application/json",
success: function (result) {
console.log(result);
alert("success")
},
error: function (result) {
alert('POST failed.');
}
});
function getData() {
var patient = new Object();
patient.Name = "Mugdha";
patient.Gender = "Female";
patient.Email = "mugdhaShenoy#yahoo.co.in";
patient.Mobile = "";
patient.BloodGroup = "AB+";
patient.MedicalHistory = "High BP, Cholosterol, Diebetis";
patient.Allergy = "Dust, wind";
patient.EmergencyContactName = "Riya Sahani";
patient.EmergencyContactNo = "9988990200";
patient.ProfileImage = "";
patient.FormNo = "92";
patient.BirthDate = new Date(1989, 09, 08).toISOString();
return patient;
}
</script>
</head>
<body>
</body>
</html>
When I try to reach the api domain(which is on different server) I have faced an error as -
XMLHttpRequest cannot load http://abc.demo.in/c60/api/Patient/Create/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:49370' is therefore not allowed access.
Is there any solution for this? I have added CorsHandler.cs file in my webapi project.
I'm trying to scrape a web page, but getting some weird results in my browser's console (as seen below). Here's my code:
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Icefilms Searcher</title>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
</head>
<body>
<script type="text/javascript" src="script.js"></script>
<div id="container" style="width:1100px;position:relative;"></div>
</body>
</html>
script.js
$(document).ready(function(){
var currNum = 168000;
var maxNum = 168005;
function generateNextUrl(){
currNum++;
return currNum-1;
}
scrapeThis(generateNextUrl());
function scrapeThis(theUrl){
$.ajax({
url:
"php.php",
data:
"icefilmsURL=" + theUrl,
success:
function(response){
var movieTitle = $(response).find("#videotitle").find("span:first").text();
$("#container").append("<a href='http://www.icefilms.info/ip.php?v="+theUrl+"' target='blank'>"+movieTitle+"</a><br>");
},
complete:
function(){
if(currNum < maxNum+1){
scrapeThis(generateNextUrl());
}
},
error:
function(xhr,err){
$("#container").append("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
$("#container").append("responseText: "+xhr.responseText);
}
});
};
});
php.php
<?php
echo file_get_contents("http://www.icefilms.info/ip.php?v=".$_GET["icefilmsURL"]);
?>
The code works fine, but this is what I see in my console:
Any ideas?
You are seeing those in the console because the page you are scraping contains references to relative paths.
That is to say rather than
<img src="http://www.icefilms.info/someimage.jpg">
The code is
<img src="someimage.jpg">
Therefore, when you grab and display their HTML on your own domain the browser is trying to load the image from your domain, localhost in this case. But you do not have the image on your server.
You can use a base href in the HTML to resolve this, or you could find and replace relative path images to include the domain.
<base href="http://www.icefilms.info/">
I have attempted to go about the use of Paypal Lightbox a bit differently.
I have used a button to trigger an ajax call which then generates the PayKey and if all goes well then triggers the form (from the documentation) to be created and submitted.
When i click the button the lightbox html is created but the content is not loaded into it. Instead i get the error:
Load denied by X-Frame-Options: https://www.sandbox.paypal.com/us/cgi-bin/webscr?cmd=_dispatch-failed does not permit cross-origin framing.
My Code:
<head>
<script src="https://www.paypalobjects.com/js/external/dg.js" type="text/javascript"></script>
</head>
External Script:
$("#checkout").click(function() {
var id = $(this).data("id");
if(id) { pay(id); }
});
function pay(id) {
$.ajax({
url : 'paypal/Pay-Chained.php',
type : 'POST',
data : "id="+id,
success : function (data) {
var info = (JSON.parse(data));
if (info['Type'] == 'Success') {
var output = info['URL'].substr(0, 64) + "expType=light&" + info['URL'].substr(64);
$("body").append('<form action="'+output+'" target="PPDGFrame" class="standard"><input type="submit" id="submitBtn"></form>');
$("#submitBtn").click();
} else {
alert("Error: Please try again or contact support.");
}
},
error : function () {
alert("Error: Please try again.");
}
});
}
At the bottom of the buttons page:
<script type="text/javascript" charset="utf-8">
var embeddedPPFlow = new PAYPAL.apps.DGFlow({trigger: 'checkout'});
</script>
I am thinking maybe it has to do with the order things are executed but can't seem to figure it out. Any help would be great!
EDIT: I just created a blank page and copied the script from the documentation exactly. I still get the same error. Might it have something to do with server settings? I am running a WampServer with an address like 192.168.1.1/mysite/index.html.