We are developing a excel plugin using Excel JS. The server code written in java and deployed in wildfy server.
Through excel plugin I'm unable to make the rest call to retrieve the user data. The aim is to perform login operation and retrieve the excel byte format stored at server and display in excel.
Any suggestions? Following is sample code which we tried so-far.
index.html
<body class="ms-font-m ms-welcome">
<div id="content-header">
<div class="padding">
<h1>Welcome</h1>
</div>
</div>
<div id="content-main">
<button id="ping-server3" onclick="pingServer2()">Ping server2</button>
<p id="demo"></p>
<p id="demo1"></p>
<button id="ping-server">Ping server</button>
<p></p>
<div class="padding">
<form>
<div class="container">
<label for="uname"><b>Username</b></label>
<input id="uname" type="text" placeholder="Enter Username"
name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw"
required>
<button id="login-button" onclick="pingServer2()">Login</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<span class="psw">Need password help?</span>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="node_modules/core-js/client/core.js">
</script>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.js">
</script>
<script type="text/javascript" src="node_modules/office-ui-fabric-
js/dist/js/fabric.js"></script>
<script type="text/javascript" src="app.js" ></script>
<script type="text/javascript" src="utility.js" ></script>
</body>
app.js
(function () {
Office.initialize = function (reason) {
$(document).ready(function () {
if (!Office.context.requirements.isSetSupported('ExcelApi', 1.7)) {
alert("ERROR");
console.log('Sorry. The tutorial add-in uses Excel.js APIs that are
not available in your version of Office.');
}
$('#login-button').click(createTable);
});
};
function createTable() {
axios({
method: 'post',
url: 'http://localhost:8183/x/operation.do?&operationId=LOGIN_USER',
data: {emailAddress : 'x#xyz.com,password : '123#asdA'}
})
.then(response => {
$('#demo').innerHTML = response.data;
content=response.data.uiUser.createdBy;
$('#demo1').innerHTML = content;
})
.catch(error => {
$('#demo').innerHTML = response.status;
});
Excel.run(function (context) {
const currentWorksheet =
context.workbook.worksheets.getActiveWorksheet();
const expensesTable = currentWorksheet.tables.add("A1:D1", true
/*hasHeaders*/);
expensesTable.name = "ExpensesTable";
expensesTable.getHeaderRowRange().values = [["Date", "Merchant",
"Category", "Amount"]];
expensesTable.rows.add(null /*add at the end*/, [["1/1/2017", "The
Phone Company", "Communications", "120"], ["1/2/2017", "Northwind
Electric Cars", "Transportation", "142.33"], ["1/5/2017", "Best For You
Organics Company", "Groceries", "27.9"], ["1/10/2017", "Coho Vineyard",
"Restaurant", "33"], ["1/11/2017", "Bellows College", "Education",
"350.1"], ["1/15/2017", "Trey Research", "Other", "135"], ["1/15/2017",
"Best For You Organics Company", "Groceries", "97.88"]]);
expensesTable.columns.getItemAt(3).getRange().numberFormat =
[['€#,##0.00']];
expensesTable.getRange().format.autofitColumns();
expensesTable.getRange().format.autofitRows();
return context.sync();
}).catch(function (error) {
console.log("Error: " + error);
if (error instanceof OfficeExtension.Error) {
console.log("Debug info: " + JSON.stringify(error.debugInfo));
}
});
}
})
the URL you're trying to POST is in http format:
http://localhost:8183/x/operation.do?&operationId=LOGIN_USER
The Excel AddIn is deployed using https.
If you inspect the AddIn, using the F12 Debugger Tools, you will see a Mixed Content error.
Mixed Content: The page at
'https://Your_AddIn_Url' was loaded over HTTPS, but requested an insecure resource
'http://localhost:8183/x/operation.do?&operationId=LOGIN_USER'. This request has
been blocked; the content must be served over HTTPS.
Using an https endpoint should solve your issue.
Related
I've just implemented invisible recaptcha into a web form. Everything works fine with Chrome. But with Microsoft Edge, the image challenge always occurs with every form submission. Which is embarrassing for the users of the website. An idea?
Thanks a lot for your insights and advice :o)
Laurent
Javascript code:
window.onScriptLoad = function () {
var htmlEl = document.querySelector('.g-recaptcha');
var captchaOptions = {
'sitekey': 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
'size': 'invisible',
'badge': 'inline',
callback: window.onUserVerified
};
var inheritFromDataAttr = true;
recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);
};
window.onUserVerified = function (token) {
$.ajax({
url: 'process.php',
type: 'post',
dataType: 'json',
data : {
'lastname' : $("#lastnameField").val(),
'firstname' : $("#firstnameField").val(),
'city' : $("#cityField").val(),
'postalCode' : $("#postalcodeField").val(),
'g-recaptcha-response' : token
},
success:function(data) {
// informs user that form has been submitted
// and processed
},
error: function(xhr, textStatus, error){
// informs user that there was a problem
// processing form on server side
}
});
};
function onSubmitBtnClick () {
window.grecaptcha.execute;
}
HTML code:
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script>
<script type="text/javascript" src="js/petition.js"></script>
...
</head>
<body>
<form id="petitionForm" onsubmit="return false;">
<input id="lastnameField" type="text" name="lastname" placeholder="Lastname" required value="Doe">
<input id="firstnameField" type="text" name="firstname" placeholder="Firstname" required value="John">
<input id="postalcodeField" type="text" name="postalCode" placeholder="Postal Code" required value="ABCDEF">
<input id="cityField" type="text" name="city" placeholder="City" value="Oslo">
....
<input type="submit" name="login" class="g-2" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxx" id="signButton" data-callback='' value="Signer" onclick="onSubmitBtnClick();">
<div class="g-recaptcha" id="recaptchaElement" style="align-content: center"></div>
</form>
...
</body>
</html>
I am creating a webworks application, so my code is not being placed on a server. The youtube data api does not work when accessing from your local file system, but that it how my application works. I need a work around, or a way to make a local private web server with pure js, no command line tools.
html
<!DOCTYPE HTML>
<html>
<head>
<title>add song</title>
<link type="text/css" href="../css/AS_Style.css" rel="stylesheet">
</head>
<body>
<div id="main">
<p id="response">a</p>
<form action="#">
<p><input type="text" id="search" placeholder="Type something..." autocomplete="off" class="form-control" /></p>
<p><input type="submit" value="Search" class="form-control btn btn-primary w100"></p>
</form>
<div id="results"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../js/AS.js"></script>
<script src="https://apis.google.com/js/api.js"></script>
<script>
function init() {
gapi.client.init({
'apiKey':'key here',
});
search();
}
gapi.load('client',init);
</script>
</body>
</html>
JavaScript
function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res}
function search() {
$("form").on("submit", function(e) {
e.preventDefault();
// prepare the request
var request = gapi.client.youtube.search.list({
part: "snippet",
type: "video",
q: encodeURIComponent($("#search").val()).replace(/%20/g, "+"),
maxResults: 3,
order: "viewCount",
});
// execute the request
request.execute(function(response) {
var results = response.result;
$("#results").html("");
$.each(results.items, function(index, item) {
$.get("item.html", function(data) {
$("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}]));
});
});
resetVideoHeight();
});
});
$(window).on("resize", resetVideoHeight);
};
function resetVideoHeight() {
$(".video").css("height", $("#results").width() * 9/16);
}
Can you show the code you're using to call Youtube's API? You can get the API data with pure javascript:
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=CHANNEL_ID&maxResults=1&fields=items&order=date&key=API_KEY", false);
xhr.send();
document.write(xhr.responseText);
Did you try triggering a shell script via javascript, and making the shell script run the API code?
Apparently this worked: https://stackoverflow.com/a/21484756/7922428
Youtube API doesnt work without connection to the internet, which when your locally testing, is done through local servers.
Here are my suggestions:
Use Nodejs
Use python -m SimpleHTTPServer
I have a requirement to show the notification send by administrator.
My menu will be loaded only once.
I also have broadcast notification page where I will send notification to others. On click of save buttom using Hub I am sending the message to the clients.
Here my unread message count (like we have in fb) is placed in the layout .
All my send and receive code is in the Broadcast notification page. Notification count is not getting displayed on the layout menu like (like fb) .
What will be the issue.?
Count is updated on the Webpage where admin will send notification. Other pages say Home page or any other page the notification count which is ther in the layout is not getting updated.
Answer to this will be very helpful for me.
Hub class : on button click i am calling this hub method
public void BroadcastNotifications(string message)
{
// Save data to database
Utility.AddNotification(message);
// Call method to get the number of unread messages (consider the status = read / unread)
int UnreadCount = Utility.getUnreadMessageCount();
UnreadCount = 12;
IHubContext context = GlobalHost.ConnectionManager.GetHubContext<BroadcastMessage>();
context.Clients.All.receiveNotification(message, UnreadCount);
}
Admin page where notification message is going to send .
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Notification</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Message)
</div>
<p>
<input type="button" id="button1" value="Create" />
</p>
</fieldset>
}
#section Scripts
{
<script src="~/Scripts/jquery-1.11.3.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.signalR-1.1.4.js" type="text/javascript"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
$.connection.hub.logging = true;
var proxy = $.connection.broadcastMessage;
$.connection.hub.start().done(function () {
$('#button1').click(function () {
proxy.server.broadcastNotifications($("#Message").val());
});
});
proxy.client.receiveNotification = function (message, UnreadCount) {
**$("#notification_count").html(UnreadCount);
$("#notification_count").show();**
};
$.connection.hub.start();
});
</script>
}
And the layout page where the notification count should display is
<li class="dropdown" id="notification_li">
<a href="#" class="fa fa-globe fa-inverse dropdown-toggle"
data-canvas="body" style="color:gray;padding-top:17px" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
<span id="**notification_count**" class="notification_count">0</span></a>
<ul class="dropdown-menu" id="popup">
</ul>
</li>
This is the _layout page where i have to display the count of unread mesasges.
If i trigger the send button the unread count is getting updated on all the admin add notification open pages. But the other pages it remains empty.
Updated _Layout as per the comment
I have moved the signal r client call to _layout
<head>
<meta charset="utf-8">
<title>Services</title>
<!-- Bootstrap core CSS -->
#Styles.Render("~/Content/bootstrapcss")
#Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/jquery.signalR-1.1.4.js" type="text/javascript"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
debugger;
$.connection.hub.logging = true;
var proxy = $.connection.broadcastMessage;
proxy.client.receiveNotification = function (message, UnreadCount) {
debugger;
$("#notification_count").html(UnreadCount);
$("#notification_count").show();
};
$.connection.hub.start();
$.connection.hub.start().done(function () {
$('#button1').click(function () {
proxy.server.broadcastNotifications($("#Message").val());
});
});
});
</script>
</head>
<body>
#Html.Partial("_RightMenu")
**#Html.Partial("_TopMenu") **//** Notificationcount span is in this partial view**
<div class="container-fluid body-content">
<div class="row" id="Content">#RenderBody()</div>
<br />
<br />
<footer>
<p>© #DateTime.Now.Year - FOOTER</p>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrapjs")
#Scripts.Render("~/Scripts/abcjs")
#RenderSection("scripts", required: false)
</body>
</html>
I have updated as above. In _Layout there are two partial views in which the count i am displaying on one partial view. Is it the correct way to add.
tthis is the signal r file generated automatically
$.hubConnection.prototype.createHubProxies = function () {
var proxies = {};
this.starting(function () {
registerHubProxies(proxies, true);
this._registerSubscribedHubs();
}).disconnected(function () {
registerHubProxies(proxies, false);
});
proxies.broadcastMessage = this.createHubProxy('broadcastMessage');
proxies.broadcastMessage.client = { };
proxies.broadcastMessage.server = {
broadcastNotifications: function (message) {
return proxies.broadcastMessage.invoke.apply(proxies.broadcastMessage, $.merge(["BroadcastNotifications"], $.makeArray(arguments)));
}
};
return proxies;
};
signalR.hub = $.hubConnection("/signalr", { useDefaultPath: false });
$.extend(signalR, signalR.hub.createHubProxies());
}(window.jQuery, window));
I think the problem is the following: You are only receiving notifications on the admins' sites.
I would place the hub script section within the _layout.
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/jquery.signalR-2.2.0.js" type="text/javascript"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
debugger;
$.connection.hub.logging = true;
var proxy = $.connection.broadcastMessage;
proxy.client.receiveNotification = function (message, UnreadCount) {
debugger;
$("#notification_count").html(UnreadCount);
$("#notification_count").show();
};
$.connection.hub.start();
$.connection.hub.start().done(function () {
$('#button1').click(function () {
proxy.server.broadcastNotifications($("#Message").val());
});
});
});
</script>
#RenderSection("scripts", required: false)
<li class="dropdown" id="notification_li">
<a href="#" class="fa fa-globe fa-inverse dropdown-toggle"
data-canvas="body" style="color:gray;padding-top:17px" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
<span id="notification_count" class="notification_count">0</span>
</a>
<ul class="dropdown-menu" id="popup"></ul>
</li>
You can take a look in a sample project I created for the case:
https://github.com/blfuentes/SignalR_StackOverflow_Question
I updated the nuget packages to the latest version of SignalR 2.2.0
I have found this JSFiddle that clear text from input? http://jsfiddle.net/xavi3r/D3prt/
How do I use this for Html.TextBox in razor View in MVC and then refresh page?
So far my solution is this (it works):
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(function () {
//this part clean text from textboxes
$('#button').click(function () {
$(':input', '#form')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
});
//this part submit my search button - it is like refresh button, returns state as it was in begin - this is the same as I click on search without entering parameters
$('#button').click(function () {
document.myForm.onSubmit.click();
});
});
</script>
using (Html.BeginForm("Index", "LoginUser", FormMethod.Get, new { id = "form", name = "myForm"}))
{
<div class="form-group">
#Html.TextBox("order", Model.Search.Order, new { placeholder="Luška št.", id ="quantity1", #class="quantity form-control"})
<button type="submit" class="btn btn-primary" name="onSubmit">Search</button>
<input type="button" class="btn btn-primary" value="Clear" id="button" />
</div>
}
In _Layout:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="~/scripts/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
Realy thanks for help...
Your view will be rendered like this as html:
<div class="form-group">
<input type="text" name="order" id="quantity1" placeholder="Luška št." class="quantity form-control" value="SomeValue" />
<input type="button" />
</div>
and you can do it with this code:
$(function () {
$('.form-group input:button').click(function () {
$('input#quantity1').val('');
});
});
I'm pretty new at AngularJS and i'm trying to use it in my new project. I have made an basic login form. When i submit the form, i'm unable to read the values that AngularJS in sending.
Here is my View
<html>
<head>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="~/Style/Style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<title>Welcome to Elara!</title>
<script>
var formApp = angular.module('formApp', []);
function formController($scope, $http) {
$scope.formData = {};
$scope.processForm = function () {
$http({
method: 'POST',
url: 'Home/Login',
data: { UserName: $scope.formData.UserName, Password: $scope.formData.Password },
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.success(function (data) {
console.log(data);
if (!data.success) {
//do things here
} else {
//do things here
}
});
};
}
</script>
</head>
<body ng-app="formApp" ng-controller="formController">
<div id="FormArea">
<div id="Login" class="well well-sm">
<form role="form" ng-submit="processForm()">
<div class="form-group">
<label for="LoginUserName">User Name</label>
<input type="text" class="form-control" id="LoginUserName" placeholder="Username" ng-model="formData.UserName">
<br />
<label for="LoginPassword">Password</label>
<input form="LoginPassword" type="password" class="form-control" placeholder="Password" ng-model="formData.Password" />
<br />
<button type="submit" class="btn btn-default">Login</button>
</div>
</form>
</div>
<div id="Login">
</div>
</div>
</body>
</html>
And my controller
public bool Login(string UserName, string Password)
{
var userName = UserName;
var password = Password;
return Login(userName, password);
}
The problem is username and password is always null. I'm receiving a string like this from post event
Request.Form = {%7b%22UserName%22%3a%22h%22%2c%22Password%22%3a%22h%22%7d}
You're not really submitting a model, rather 2 arguments, so use params instead of data in your $http request:
$http({
method: 'POST',
url: 'Home/Login',
params: { UserName: $scope.formData.UserName, Password: $scope.formData.Password },
})
Secondly, I hope you're not trying to post this to an MVC controller, post it to a Web API controller instead.