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
Related
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 !
Please help,
My javascript code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
var url = "../Account/DeconnecterUtilisateur";
var statutLogin = #HttpContext.Current.User.Identity.Name;
$.getJSON(url, { usr: id }, function (data) {
console.log(data);
})
});
</script>
is throwing this error message
(index):87 Uncaught ReferenceError: patrice is not defined
And I can not get arround it.
My aim is to call within my account controller a method that will log off the user when ever that specifc view(that cobtains the script) is loaded.
Rewrite to this:
var statutLogin = '#HttpContext.Current.User.Identity.Name';
Notice you need the apostrophes above since c# is generating js code before the script runs.
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.
I'm using the LinkedIn Javascript API to sign in users to my application, however the API is not returning the email address even though I'm requiring permission for that specific field. I'm including the API script as follows:
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: API_KEY
scope: r_fullprofile r_emailaddress
</script>
then I'm including the Log In button in the markup:
<script type="in/Login" data-onAuth="onLinkedInAuth">
and finally I have a function to add the callback for the API response:
function onLinkedInAuth() {
var fields = ['first-name', 'last-name', 'email-address'];
IN.API.Profile("me").fields(fields).result(function(data) {
console.log(data);
}).error(function(data) {
console.log(data);
});
};
I'm only getting the First and Last Name but the API doesn't return the email field.
Reference: https://developer.linkedin.com/documents/profile-fields#email
1- be sure you made email permission (r_emailaddress) in your app http://developer.linkedin.com/documents/authentication#granting
2- then you may use this
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: key
**onLoad: onLinkedInLoad**
authorize: true
</script>
<script>
function onLinkedInLoad() {
IN.Event.on(IN, "auth", onLinkedInAuth);
}
// 2. Runs when the viewer has authenticated
function onLinkedInAuth() {
IN.API.Profile("me").fields("first-name", "last-name", "email-address").result(function (data) {
console.log(data);
}).error(function (data) {
console.log(data);
});
}
</script>
hope this will help you :)
thanks
Hello there #Ulises Figueroa,
May be I am coming in a bit late but this is how I had got this done:
Start off with the initial script tag on the top of your page within the head section:
<script>
Client Id Number here:
onLoad: onLinkedInLoad
authorize: true
</script>
Then, in your JS File,(I had placed an external JS File to process this API sign up/ Auth), have the following details placed:
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
function onSuccess(data) {
console.log(data);
}
function onError(error) {
console.log(error);
}
function getProfileData(){
IN.API.Profile("me").fields(["firstName","lastName", "email-address", "positions"]).result(function(data) {
var profileData = data.values[0];
var profileFName = profileData.firstName;
var profileLName = profileData.lastName;
if(data.values[0].positions._total == "0" || data.values[0].positions._total == 0 || data.values[0].positions._total == undefined) {
console.log("Error on position details");
var profileCName = "Details Are Undefined";
}
else {
var profileCName = profileData.positions.values["0"].company.name;
}
var profileEName = profileData.emailAddress;
//console.log all the variables which have the data that
//has been captured through the sign up auth process and
//you should get them...
});
}
Then last but not the least, add the following in your HTML DOCUMENT which can help you initiate the window popup for the linkedin auth sign up form:
<script type="in/Login"></script>
The above setup had worked for me. Sure this will help you out.
Cheers and have a nice day.
Implementation looks good. I'd believe this is a result from the profile's privacy settings. Per linked-in's docs:
Not all fields are available for all profiles. The fields available depend on the relationship between the user you are making a request on behalf of and the member, the information that member has chosen to provide, and their privacy settings. You should not assume that anything other than id is returned for a given member.
I figured out that this only happens with certain LinkedIn accounts, so this might be caused because some privacy setting with the email. I couldn't find any reference to the documentation so I had to consider the case when email field is not available.
I am just new to XMPP, and I am making the first "HELLO" code. Please take your time look at the following code (the .zip is at the end of this topic):
<html>
<head>
<title>Hello - Chapter 3</title>
<style type="text/css">
body {
font-family: Helvetica;
}
h1 {
text-align: center;
}
.hidden {
display: none;
}
#log {
padding: 10px;
}
</style>
<script language="javascript" type="text/javascript" src="scripts/jQuery.js"></script>
<script language="javascript" type="text/javascript" src="scripts/jQueryUI.js"></script>
<script language="javascript" type="text/javascript" src="scripts/strophe.js"></script>
<script language="javascript" type="text/javascript" src="scripts/flXHR.js"></script>
<script language="javascript" type="text/javascript" src="scripts/strophe.flxhr.js"></script>
<link rel="stylesheet" href="hello.css"></link>
<script language="javascript" type="text/javascript">
var Hello = {
connection: null,
log: function(msg) {
$("#log").append("<p>" + msg + "</p>");
}
};
$(document).ready(function() {
$("#login_dialog").dialog({
autoOpen: true,
draggable: false,
modal: true,
title: "Connect to XMPP",
buttons: {
"Connect": function() {
$(document).trigger("connect", {
jid: $("#jid").val(),
password: $("#password").val()
});
$("#password").val("");
$(this).dialog("close");
}
}
});
$(document).bind("connect", function(ev, data) {
var conn = new Strophe.Connection("http://bosh.metajack.im:5280/xmpp-httpbind");
conn.connect(data.jid, data.password, function(status) {
if (status === Strophe.Status.CONNECTED) {
$(document).trigger("connected");
} else if (status === Strophe.Status.DISCONNECTED) {
$(document).trigger("disconnected");
}
});
Hello.connection = conn;
});
$(document).bind("connected", function() {
// Inform the user
Hello.log("Connection established");
});
$(document).bind("disconnected", function() {
Hello.log("Connection terminated.");
// Remove dead connection object
Hello.connection = null;
});
});
</script>
</head>
<body>
<h1>Hello</h1>
<div id="log"></div>
<!-- Login dialog -->
<div id="login_dialog" class="hidden">
<label>JID:</label><input type="text" id="jid">
<label>Pwd:</label><input type="password" id="password">
</div>
</body>
</html>
According to the document, and the code, it must either say "Connection establised" or "Connection terminated". But it doesn't. I tried to put alert("It runs to here!"); in every line of the code, and it still alert(). It doesn't alert anymore when I put it in bind("connected") and bind("disconnect"). So I guess the code can not run to there. I've never done it before, and there is rarely documents about this, so I don't know what to do now.
Question: Could you guys please take a look at it, and tell me what was wrong? I myself is still working on debugging it!
Extra information: These are what is in my web folder (I am afraid of missing javascript framework files). All js files are latest version.
index.html
scripts/
jQuery.js
jQueryUI.js
strophe.js
flensed.js
flXHR.js
flXHR.swf
flXHR.vbs
swfobject.js
updateplayer.swf
checkplayer.js
css/
Not important...
Here are my code, please take time to view it: http://xx3004.kodingen.com/XMPP
I would appreciate any view of help.
[x]
your code is alright,
the problem is in the URL provided to make the connection using Strophe.
var conn = new Strophe.Connection("http://bosh.metajack.im:5280/xmpp-httpbind");
Try to find the location of the server, otherwise install an xmpp server(vysper), locally on your machine, and change the URL as http://localhost:8080/bosh/
Also try to comment the flxhr inclusion.
If you are running Openfire on your localhost make sure
bosh_service_url = 'http://127.0.0.1:7070/http-bind/'
ie
var conn = new Strophe.Connection("http://127.0.0.1:7070/http-bind/");
And if you are running ejabberd on your localhost make sure
bosh_service_url = "http://127.0.0.1:5222/http-bind/"