I'm implementing LinkedIn Login into my web app..
I'm using following script as :
<script type="in/Login"> </script>
to load the LinkedIn Sign In button. This script automatically loads a LinkedIn Sign in button with fix design or image..
but I want to Customize a button with my custom Image of LinkedIn and this button should generate the LinkedIn login event after clicking on it.. that is it should serve above script's purpose
Plz Help
Other way to do this:
Place an image that you like:
<img onclick="liAuth()" src="./img/widget_signin.png">
Create JS function like this:
function liAuth(){
IN.User.authorize(function(){
callback();
});
}
Use LinkedIn user data:
IN.API.Profile("me")
.fields("firstName", "lastName", "headline")
.result(resultFunction);
Yes, it's possible. We're using jQuery, so here is our solution:
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: apikey
onLoad: onLinkedInLoad authorize: true
</script>
<script type="text/javascript">
function onLinkedInLoad() { // Use a larger login icon.
$('a[id*=li_ui_li_gen_]').css({marginBottom:'20px'})
.html('<img src="/images/shared/linkedin-register-large.png" height="31" width="200" border="0" />');
}
</script>
Under the head tag
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: xxxxxxxxx
authorize: true
// onLoad: onLinkedInLoad
//scope: r_basicprofile r_emailaddress
</script>
<a href="javascript:void(0)" class="btn btn-default btn-linkedin" onclick='call_linkedin()'>
<i class="fa fa-linkedin-square" aria-hidden="true"></i> <span>Sign In With LinkedIn</span> </a>
<script type="text/javascript">
function call_linkedin() {
if(IN.User.authorize()){
getProfileData();
}else{ IN.Event.on(IN, "auth", function() {getProfileData();});}
}
// Use the API call wrapper to request the member's profile data
function getProfileData() {
IN.API.Profile( "me" ).fields( "id", "first-name", "last-name", "headline", "location", "picture-url", "public-profile-url", "email-address" ).result( displayProfileData ).error( onError );
}
// Handle the successful return from the API call
function displayProfileData( data ) {
console.log(data)
}
</script>
Please try this and let me know
You can use your own custom html code like this:
<html>
<head>
<title>LinkedIn JavaScript API</title>
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: put_your_api_key_here
</script>
<script type="text/javascript">
function onLinkedInLoad() {
IN.UI.Authorize().place();
IN.Event.on(IN, "auth", function () { onLogin(); });
IN.Event.on(IN, "logout", function () { onLogout(); });
}
function onLogin() {
IN.API.Profile("me").result(displayResult);
}
function displayResult(profiles) {
member = profiles.values[0];
alert(member.id + " Hello " + member.firstName + " " + member.lastName);
}
</script>
</head>
<body>
<input type="button" onclick="onLinkedInLoad()" value="Sign in using LinkedIn account" />
</body>
</html>
method for custom linkedin button
<div onclick="liAuth()">sign in with linkedin</div>
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: YOUR_API_KEY_HERE
authorize: true
onLoad: onLinkedInLoad
</script>
<script type="text/javascript">
function liAuth(){
IN.User.authorize(function(){
});
}
// Setup an event listener to make an API call once auth is complete
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
// Handle the successful return from the API call
function onSuccess(data) {
console.log(data);
}
// Handle an error response from the API call
function onError(error) {
console.log(error);
}
// Use the API call wrapper to request the member's basic profile data
function getProfileData() {
IN.API.Raw("/people/~").result(onSuccess).error(onError);
}
</script>
**LinkedIn Customize button onclick function you can call linked in login function**
<!-- language: lang-html -->
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: Your App Key //add your linkedIn aap key here
authorize: true
</script>
//create your customized linkedIn button with css
<div id="wLinkedIn">
// use onLinkedInLoad onclick function in customized button
<a href="#" onclick="onLinkedInLoad();">
<span id="icon-bg"><i class="fa fa-linkedin"></i></span>
<span id="icon-label-bg">Login with LinkedIn</span>
</a>
</div>
<!-- language: lang-js -->
// ----------------------------LinkedIn Sdk---------------------
function onLinkedInLoad() {
IN.UI.Authorize().place();
// call onLinkedInLogin on click of button
IN.Event.on(IN, "auth", function () { onLinkedInLogin(); });
//IN.Event.on(IN, "logout", function () { onLinkedInLogout(); });
}
function onLinkedInLogin() {
//alert('logged in');
//get all user data from linked in plugin
IN.API.Raw("/people/~:(id,firstName,lastName,emailAddress)format=json").result(function (data)
{
console.log(data);
var profileData = data;
LinkedInFName = profileData.firstName;
LinkedInLName = profileData.lastName;
LinkedInEmail = profileData.emailAddress;
LinkedInId = profileData.id;
//alert("LinkedInFName : " + LinkedInFName);
GetLinkedinLoginDetails(LinkedInEmail, LinkedInId)
}).error(function (error) {
console.log('Error : ' + error);
});
}
function onSuccess(data) {
}
Related
I have a page called PayOut.cshtml. On this page, I have a button called Pay, which opens a new small window called Authenticate.cshtml for a user to authenticate himself by specifying his email and password.
Once a user has been authenticated, the the Authenticate.cshtml should be dismissed, and showing a button called Confirm in the PayOut.cshtml page.
I have tried the following:
public AuthenticateController(Authenticate obj)
{
var success = false;
if (auth) {
success = true;
}
return View("close");
}
View for close:
<body>
<script type="text/javascript">
window.close();
</script>
</body>
How can I dismiss the the authenticate view and show a button in the PayOut view by using session ? Please help.
You can use "postMessage", in the main window use something like this:
<!DOCTYPE html>
<html>
<header>
<title>PostMessage Demo</title>
</header>
<body>
<button id="btn" onclick="openPopup();">Open Popup</button>
<script>
window.addEventListener("message", onMessage, false);
function onMessage(event){
document.getElementById("btn").innerText = "you typed " + event.data;
document.getElementById("btn").disabled = false;
};
function openPopup(){
document.getElementById("btn").textContent = "popup active";
document.getElementById("btn").disabled = true;
window.open("/popup", "popup window");
}
</script>
</body>
</html>
Then in the popup window this:
<!DOCTYPE html>
<html>
<header>
<title>Popup</title>
</header>
<body>
<input id="textEdit" type="text" value=""></input>
<button onclick="_close();">Close popup</button>
<script>
function _close(){
let pUri = window.location.protocol + "//" + window.location.host + "/";
window.opener.postMessage(document.getElementById("textEdit").value, pUri);
window.close();
}
</script>
</body>
</html>
When you click the "Close popup" button in the popup window it will close and trigger the onMessage event in the main window with the text you typed in the "textEdit" input.
For security reasons, the specs actually don't allow this. Although, I just tested this with Edge, Chrome, Firefox, and IE and it worked. Could you clarify how it didn't work?
Anyway, I decided to try another method that doesn't involve a window trying to close itself and it worked in the same four browsers.
In Payout.cshtml
var newWindow;
function authenticate() {
newWindow = window.open("#Url.Action("Authenticate")");
window.setTimeout(tryCloseWindow, 5000);
}
function tryCloseWindow() {
try {
if (newWindow.closeMe == undefined) {
window.setTimeout(tryCloseWindow, 1000);
return;
}
} catch(ex) {
// window was closed by user
return;
}
newWindow.close();
}
Authenticate.cshtml
<button onclick="pay();">pay</button>
#section Scripts
{
<script>
function pay() {
window.location = "#Url.Action("Close")";
}
</script>
}
Close.cshtml
#section Scripts
{
<script>
window.closeMe = true;
</script>
}
I have successfully implemented autocomplete search option in my laravel project "book shop managing". Again from my homepage if I click on the name of a book then it would show the specific book. But how can I add link to my search result, so that if I click on a book from the result then it would take me to the page that contains the book details.
my index.blade.php
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#books" ).autocomplete({
source: 'auto_complete'
});
});
</script>
<div class="ui-widget">
<label for="books">Books: </label>
<input id="books">
</div>
controller
public function search(){
$search = Input::get('term');
$books = Book::where('title','like','%'.$search.'%')->get();
foreach ($books as $book) {
$data[] = $book->title;
}
// return $books;
return $data;
}
route
Route::get('auto_complete', 'BooksController#search');
CONTROLLER
public function search(){
$search = Input::get('term');
// return $search or dd($search) check if request get the value please
$books = Book::where('title','like','%'.$search.'%')->get();
// return $books or dd($books) check if request get the values please
$results = array();
foreach($books as $key => $v){
$results[]=['id' => $v->id];
}
// return a json object
return response()->json([
'suggestions'=>$results]);
}
JS
$(function() {
$( "#books" ).autocomplete({
source: 'auto_complete',
onSelect: function (data) {
location.href = "www.yourwebsite.com+data.suggestions.id" // this redirect for example book id:1 to www.yourwebsite.com/1
// Or use jquery to redirect: window.location.replace("http://stackoverflow.com");
}
});
});
Use the same route, let me know if there is some error in network or console!
I supposed that you integrated the jquery library and autocomplete library js :)
New to Phonegap and having a hard time understanding the FileWriter function. I am trying to get this example to work on iOS6 but I'm stuck with the error message
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
var fileWriter;
function onNotesLoad() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFSComplete, fail);
}
function onFSComplete(fileSystem) {
// Load the notes.txt file, create it if it doesn't exist
fileSystem.root.getFile("notes.txt", {create: true}, onFileEntryComplete, fail);
}
function onFileEntryComplete(fileEntry) {
// set up the fileWriter
fileEntry.createWriter(onFileWriterComplete, fail);
}
function onFileWriterComplete(fileWriter) {
// store the fileWriter in a
// global variable so we have it
// when the user presses save
fileWriter = fileWriter;
}
function saveNotes() {
// make sure the fileWriter is set
if (fileWriter != null) {
// create an oncomplete write function
// that will redirect the user
fileWriter.onwrite = function(evt) {
alert("Saved successfully");
$.mobile.changePage("index.html");
};
var form = document.getElementsByTagName('form')[0].elements;
var notes = form.notes.value;
// save the notes
fileWriter.write(notes);
} else {
alert("There was an error trying to save the file");
}
return false;
}
function fail(error) {
alert(error.code);
}
</script>
HTML:
<body>
<div data-role="page" id="notes-page">
<div data-role="header" data-position="inline">
Cancel
<h1>Your Thoughts?</h1>
<a onClick="return saveNotes()" href="#"
data-icon="check" data-theme="b">Save</a>
</div>
<form action="index.html" method="post">
<textarea name="notes" rows="30" cols="10"></textarea>
</form>
</div>
</body>
The onwrite handler is called as a progress event. I believe you will want to hook to the onwriteend handler.
I'm using the TinyMCE editor in chat and very uncomfortable to send a message by submit-button.
I would like to know, how post message use "onkeypress" in TinyMCE ?
I do this so:
<script type="text/javascript">
tinyMCE.init({
...
setup : function(ed) {
ed.onKeyPress.add(
function (ed, evt) {
if(evt.shiftKey && evt.keyCode == 13) {
AjaxPost();
//alert('shift + enter key');
return;
}
});
}
...
</script>
<script type="text/javascript">
function PostAjax()
{
var Message=document.getElementById('Message').value;
$.ajax({
type: "POST",
url: "PostTinyMCE.php?Message="+Message,
success: function(html)
{
$("#General").html(html);
}
});
}
</script>
<textarea name="content" id="Message" style="width:100%"></textarea>
but it does not give me the desired effect, functions AjaxPost(); does't start, where is my mistake?
Please help me...
Use an alert statement in function AjaxPost to check if the function AjaxPost(); gets executed. If no, try to place your js function before the tinymce init. If yes you need to verify your ajax code.
In a single asp.net MVC page, I've to show 3 reports of same layout/structor. So I created a page that generated a report using Knockout databind and 10 reports are generated by passing some additional parameters.
I tried to load all 3 reports using Ajax partial view and by this way I'm populating those 10 reports in one single page.
Now I happen to see a strange issue, the last report data appears for all the 3 reports though the data for each report is different. Anyone knows how to handle this issue ?
Main Page View, where I call 3 reports via Ajax call.
<div id="RecentlyAddedReport" ></div>
<div id="RecentlyConsultedReport"></div>
<div id="RecentlyPrescribedReport"></div>
<!-- start here -->
<script type="text/javascript">
$(document).ready(function () {
AjaxLoadReport('RecentlyAddedReport', 'Patient/Report?type=RecentlyAdded&name=Recently Added');
AjaxLoadReport('RecentlyConsultedReport', 'Patient/Report?type=RecentlyConsulted&name=Recently Consulted');
AjaxLoadReport('RecentlyPrescribedReport', 'Patient/Report?type=RecentlyPrescribed&name=Recently Prescribed');
});
function AjaxLoadReport(reportType, actionURL) {
var resultDiv = $('#' + reportType);
$.ajax({ type: "GET", url: actionURL, data: {},
success: function (response) {
resultDiv.html('');
resultDiv.html(response);
}
});
}
</script>
Report View - I call this same view for all the 3 reports
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<TryHomeo.Web.UI.Models.UserControlViewData>" %>
<script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
<script src="../../Scripts/jquery.timeago.js" type="text/javascript"> </script>
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"> </script>
<h1>
<%:Model.ReportName%>
</h1>
<div class='loadingIndicator' title="Loading..."></div>
<ul id="<%=Model.ReportType %>" data-bind="template: { name: 'patient-template', foreach: patients}"></ul>
<script type="text/html" id="patient-template">
<span>
<li>
<div>
<a data-bind="text: PatientName"></a>- (<abbr class='timeago' data-bind="timeago: DatedString"></abbr>)
</div>
</li>
</span>
</script>
<script type="text/javascript">
// ReportViewModel View Model //
function ReportViewModel() {
var self = this;
self.patients = ko.observableArray([]);
}
var objVM = new ReportViewModel();
ko.applyBindings(objVM);
// Using jQuery for Ajax loading indicator
$(".loadingIndicator").ajaxStart(function () { $(this).fadeIn(); }).ajaxComplete(function () { $(this).fadeOut(); });
$(document).ready(function () {
$.ajax({
dataType: 'json',
url: '/Patient/GetPatientReport/?type=' + '<%=Model.ReportType %>' + '&' + '<%=DateTime.Now.ToString() %>',
success: SetData,
error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
});
});
function SetData(data) {
objVM.patients(data);
}
ko.bindingHandlers.timeago = {
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var $this = $(element);
// Set the title attribute to the new value = timestamp
$this.attr('title', value);
// If timeago has already been applied to this node, don't reapply it -
// since timeago isn't really flexible (it doesn't provide a public
// remove() or refresh() method) we need to do everything by ourselves.
if ($this.data('timeago')) {
var datetime = $.timeago.datetime($this);
var distance = (new Date().getTime() - datetime.getTime());
var inWords = $.timeago.inWords(distance);
// Update cache and displayed text..
$this.data('timeago', { 'datetime': datetime });
$this.text(inWords);
} else {
// timeago hasn't been applied to this node -> we do that now!
$this.timeago();
}
}
};
</script>