I am trying to use Aviary API in my ruby on rails site. I have trouble to get back the URL created by Aviary in the onSave function. I don't know how to access it in ruby. Do you have an idea?
The variable i would like to have in ruby is newURL
<% if #photo.image? %>
<!-- Load widget code -->
<script language="JavaScript" type="text/javascript" src="https://dme0ih8comzn4.cloudfront.net/js/feather.js"></script>
<!-- Instantiate the widget -->
<script type="text/javascript">
var featherEditor = new Aviary.Feather({
apiKey: ' f20374413e3ff5a8',
apiVersion: 2,
theme: 'light',
tools: 'all',
appendTo: '',
fileFormat: 'jpg',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
},
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
<!-- Add an edit button, passing the HTML id of the image and the public URL to the image -->
<a href="#" data-refresh="true" onclick="return launchEditor('editimage1',
'<%= #photo.image.url %>');">Edit!</a>
<img id='editimage1' src='<%= #photo.image.url %>' height="352" width="470"/>
<% end %>
Related
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
Hello I have a joomla site with plugin called rokcomments. This plugin enables livefyre comments on my site. I'm trying to get text to emoticon to work on the livefyre comments but I don't have much javascript experience and not having any luck. I have found the php that loads the livefyre comments and here it is:
elseif ($system == 'livefyre') {
// livefyre comments
if ($this->commentpage == false) {
if (!defined('ROKCOMMENT_COUNT'))
{
$headscript = '
<script type="text/javascript" src="http://zor.livefyre.com/wjs/v1.0/javascripts/CommentCount.js"></script>';
$document->addCustomTag($headscript);
define('ROKCOMMENT_COUNT', 1);
}
$output = '
<div class="rk-commentcount{rk-icon}">
<span class="livefyre-commentcount"
data-lf-site-id="{account}"
data-lf-article-id="{post-id}">0 Comments
</span>
</div>';
} else {
$output = "
<!-- START: Livefyre Embed -->
<div id='livefyre-comments'></div>
<script type='text/javascript' src='http://zor.livefyre.com/wjs/v3.0/javascripts/livefyre.js'></script>
<script type='text/javascript'>
(function () {
var articleId = '{post-id}';
fyre.conv.load({}, [{
el: 'livefyre-comments',
network: 'livefyre.com',
siteId: '{account}',
articleId: articleId,
signed: false,
collectionMeta: {
articleId: articleId,
url: fyre.conv.load.makeCollectionUrl(),
}
}], function() {});
}());
</script>
<!-- END: Livefyre Embed -->";
I have then created a js file and tried to link it in this page but still getting no luck. Here is what i have in the js file
<script>
function myFunction() {
var str = document.getElementById('livefyre-comments').innerHTML;
var res = str.replace(":)", '<img src="http://website.com/images/emoticons/emoticon_smiley.gif');
document.getElementById('livefyre-comments').innerHTML = res;
}
</script>
I'm not sure what to do to accomplish this? Any help is greatly appreciated.
I am building a website using the Twitter and Facebook JavaScript SDKs. I am attempting to perform tweets and facebook shares from the site. But I am getting the following error when I try to send a tweet OR facebook share from my website:
Chrome:
Unsafe JavaScript attempt to access frame with URL http://edro.no-ip.org:3000/#_=_ from frame with URL http://platform.twitter.com/widgets/tweet_button.1354761327.html#_=1355186876357&count=none&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Fedro.no-ip.org%3A3000%2F%23_%3D_&related=xbox%3AGhostfire%20Games&size=m&text=Check%20out%20this%20fun%20story!%20%23atalltale&url=http%3A%2F%2Fedro.no-ip.org%3A3000%2Fstories%2FiqU9xW1FJI. The frame requesting access set 'document.domain' to 'twitter.com', but the frame being accessed did not. Both must set 'document.domain' to the same value to allow access.
Safari:
Unsafe JavaScript attempt to access frame with URL http://edro.no-ip.org:3000/ from frame with URL http://platform.twitter.com/widgets/tweet_button.1354761327.html#_=1355197702032&count=none&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Fedro.no-ip.org%3A3000%2F&related=xbox%3AGhostfire%20Games&size=m&text=Check%20out%20this%20fun%20story!%20%23atalltale&url=http%3A%2F%2Fedro.no-ip.org%3A3000%2Fstories%2FiqU9xW1FJI. Domains, protocols and ports must match.
Here's the code (I only included the relevant parts):
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>Title</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
</body>
<center>
<h1>Page Header</h1>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
// Once the Facebook SDK is fully loaded, this callback will be invoked
window.fbAsyncInit = function()
{
FB.init({
appId: "250634021702621",
status: true,
cookie: true,
channelUrl: '//edro.no-ip.org:3000/channel.html',
});
FB.Event.subscribe('auth.statusChange', handleStatusChange);
};
// Callback for once we are logged in and authorized
function handleStatusChange(response) {
document.body.className = response.authResponse ? 'connected' : 'not_connected';
if (response.authResponse)
{
}
};
// Declare a generic SDK loading function
var loadSDK = function(doc, script, id, src)
{
var js, fjs = doc.getElementsByTagName(script)[0];
if (!doc.getElementById(id))
{
js = doc.createElement(script);
js.id = id;
js.src = src;
js.async = true; // Makes SDK load asynchronously
fjs.parentNode.insertBefore(js,fjs);
}
};
// Twitter SDK loading
loadSDK(document, 'script', 'twitter-wjs', 'https://platform.twitter.com/widgets.js');
// Facebook SDK loading
loadSDK(document, 'script', 'facebook-jssdk', '//connect.facebook.net/en_US/all.js');
// Facebook callback - useful for doing stuff after Facebook returns. Passed as parameter to API calls later.
var myResponse;
function callback(response)
{
if (response)
{
// For debugging - can query myResponse via JavaScript console
myResponse = response;
if (response.post_id)
{
}
else
{
// Else we are expecting a Response Body Object in JSON, so decode this
var responseBody = JSON.parse(response.body);
// If the Response Body includes an Error Object, handle the Error
if(responseBody.error)
{
}
// Else handle the data Object
else
{
}
}
}
}
// All API calls go here
$(document).ready(function ()
{
// Post to your wall
$('#post_wall').click(function ()
{
FB.ui(
{
method: 'feed',
// useful if we want the callback to go to our site, rather than the JavaScript, so we can log an event
redirect_uri: 'http://edro.no-ip.org:3000',
link: 'http://edro.no-ip.org:3000/stories/{game.id}',
picture: 'http://fbrell.com/f8.jpg',
name: 'name',
caption: 'caption',
description: 'description'
// display: 'popup'
},
callback
);
return false;
});
});</script>
<!-- Tweet code-->
Tweet
<!-- Facebook share code-->
<p id="msg">Share on Facebook</p>
</center>
</html>
"Domains, protocols and ports must match."
Typical mismatch in (older versions of ?) Safari is http://www.example.com and http://example.com.
Valumes doesn't show UPLOAD button under Firefox (MVC3 Project).
It works fine under: IE, Chrome
I am going to kill myself but I don't understand why is it?
ANYYY CLUUU pleaseeee!
<script src="#Url.Content("~/Scripts/valums/FileUploader.js")" type="text/javascript"></script>
<div id="fileUploader">
<noscript>
<p>
Please enable JavaScript to use file uploader.</p>
<!-- or put a simple form for upload here -->
</noscript>
</div>
.................
var button = $('#fileUploader')[0];
var uploader = new qq.FileUploader({
element: button,
allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
sizeLimit: 2147483647,
action: '#Url.Action("UploadFile")',
multiple: false,
onComplete: function (id, fileName, responseJSON) {
var uploadedFile = "/Images/Orders/thumb-" + responseJSON.uploadedFile;
$("#uploadedImage").attr("src", uploadedFile);
$("#ImageErrorMessage").text("");
}
});
Just put the VALUMS code within $(document).ready(function () { // here });
and keep it under the <HEAD> tag. That's it!
I have this code in a .html.erb file:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
FB.Event.subscribe('edge.create',
function(response) {
send_fb_like();
}
);
FB.Event.subscribe('edge.remove',
function(response) {
send_fb_unlike();
}
);
function send_fb_like()
{
var business_name = '<%= #consumer.name %>';
alert("You liked"+consumer_name);
}
function send_fb_unlike()
{
var business_name = '<%= #consumer.name %>';
alert("You unliked"+consumer_name);
}
</script>
This is working correctly, and I can access the #consumer.name correctly. However, if I change this to:
Where facebook_consumer.js looks like this:
$(function(){
FB.Event.subscribe('edge.create',
function(response) {
send_fb_like();
}
);
FB.Event.subscribe('edge.remove',
function(response) {
send_fb_unlike();
}
);
function send_fb_like()
{
var business_name = '<%= #consumer.name %>';
alert("You liked"+consumer_name);
}
function send_fb_unlike()
{
var business_name = '<%= #consumer.name %>';
alert("You unliked"+consumer_name);
}
});
It will dump this:
You liked <%= #consumer.name %>. I have tried saving the file as js.erb, but then it seems it doesn't know what #consumer is.
Any thoughts on what is the best approach?
Your best bet is probably to create an app-wide JS object to store values you need. At the top of the page, you can add elements to this object, and they will be available to your linked scripts.
<script type="text/javascript">
app = app || {}
app.keyName1 = "<%= #variable1 %>";
app.keyName2 = "<%= #variable2 %>";
</script>
You can't inline Ruby code into .js files. If you want to use Ruby code, you need to create a .js.erb file and then render a partial inside of that.
# controller
render :partial => "/path/to/js/partial.js.erb"
# inside your JS partial
# you can use <%= #consumer.name %> freely in this file
# and then add the line below to render your normal html.erb file
$("#reviews").append("<%= escape_javascript(render(:partial => '/path/to/partial.html.erb' )) %>");