I want to simple share button on my page, which after clicked open pop-up window to share the current url.
I try to do it using facebook developers code (from official site)
https://developers.facebook.com/docs/plugins/share-button
but when I add ruby variable request.url (but with data-href="http://myweb.com" it works)
<div class="fb-share-button" data-href="#{request.url}"></div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
it doesn't work - I have the window below
How can I do it correctly ?
Are you trying to open up the share button in a new window? Are you also using the correct variable for that model you have it in?
Try switching it to this since I'm assuming you're using erb
<div class="fb-share-button" data-href="<%= request.url %>"></div>
Related
I have looked through certain resources on the stack over flows but some doesn't have answer nor they are inactive.
I will want to autoplay a twitter video when some arrives on my website.
Currently It looks like this:
I was able to do Youtube, so believe this should be possible also?
Note: The solution below does not work anymore out of the box due to new CORS policies of the browsers.
The twitter widget script seems to inject the player after clicking the image into an iframe, but the link to click is... embedded in an iframe. So when you see on your screen the "player" to click, it is in fact not the player but just a link to activate the injection of the player.
So your goal is to activate this injection by the following steps:
set up a target listener for the widget factory
get the widget element, once it's added to the DOM (but after it has been altered by the widget factory)
get it's iframe document's link that triggers the embedding of the player
Set up Twitter for websites
Prepare your page according to the following documentation:
<div id="videoTarget"></div>
<!--<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>-->
<script>
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
</script>
Our factory target will be the videoTarget. This is the place, where the iframe with the video injection link will be placed.
Create the embed link
First wait for the twttr to be ready. Read more in this in the scripting events.
Then use the factory function to create your video.
Once it's loaded, you can use jQuery to find the iframe content's link, that triggers the injection.
Code:
window.twttr.ready(function(_twttr) {
_twttr.widgets.createVideo(
'560070183650213889',
$('#videoTarget').get(0), {
lang: "en",
}
)
.then(function(el) {
const dataId = $(el).attr('data-tweet-id');
const doc = $('iframe').get(0).contentWindow.document;
const link = $(doc).find("a[href*=" + dataId + "]")[0];
link.click();
});
});
Working solution: https://jsfiddle.net/5qmh1Lpn/121/
Summary
Twitters video embed lacks of proper ways to do autoplay. However, it is IMHO an antifeature and it should be the user's decision, wether to play a video or not.
The solution is only a hack and may not work on all browsers in all situations.
Please create a fork, if you want to extend the fiddle to your needs.
Edit: Just for your interest, I found a hidden link with cookie consent in this code, which basically breaks down to "if you click this you agree to our policies" which is very strange, since nobody can't see this message as it's hidden.
Thanks to:
https://stackoverflow.com/a/2893315/3098783
https://stackoverflow.com/a/303961/3098783
I started learning Rails 3 months ago.And now I'm trying to add Ajax in my Rails app.
So it have some problems.
In my Index.html.erb file:
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET","demo.txt", true);
xhttp.send();
}
</script>
<button type="button" onclick="loadDoc()">click</button>
<p id="demo"></p>
And I created a file that demo.txt.I try to show content in demo.txt when I click the button.But it shows nothing.
So have any tut for me.
Thanks !
The second parameter of the xhttp.open(...) call should be a URL, not simple a file name. If you are running the Rails application with "rails s" then your url might look something like "http://localhost:3000/demo.txt" if the file demo.txt is in your public folder. Without a URL in that second parameter, I suspect that the request is never finding your rails application.
You might also want to dig into jquery (since you tagged it) to understand how to use that library to issue the request. The interface is much simpler than the low-level js.
As instructed on the FB Developer site, I've integrated the social comments plugin on our website and changed the lang parameter to Dutch. However this does not seem to affect the interface. The plugin is still in English.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/nl_BE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Example:
http://www.miramiro.be/nl/festival/programma/die-verdammte-fanfare-cabrio
Anyone an idea?
Many tnx
Gino
Visit Facebook Developer page and go to edit the App Settings. In there, select the app you wish to edit and visit the 'AppDetails' tab. In there, change your primary language to Dutch and it should work.
How does one go about displaying a controller action inside of jquery modal dialog?
Firstly you'll need your Javascript to load a url via ajax, this will depend on which kind of modal you are using etc, there's a ton of libraries out there. I will assume you are using the basic JQuery UI dialog Modal.
Example Link
<!-- this points to your action below.. -->
<a class="some-link" title="title here" href="mycontroller/test">testing</a>
Example Javascript (quick example found on google, many examples out there..)
$(document).ready(function() {
$('.some-link').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
});
});
});
Now you need to make sure your action doesn't render the main layout when providing the content for the modal via the ajax request.
Here's a really simple method of doing that by replacing the base layout with an empty view for ajax requests. This isn't the best method but it's the simplest for this case ;)
Example Action
public function testAction()
{
if($this->getRequest()->isXmlHttpRequest()) {
$this->layout('application/layout/ajax-layout');
}
return new ViewModel(array()); // ..
}
application/layout/ajax-layout.phtml
<?php echo $this->content ?>
I think you want this kind of code http://jqueryui.com/dialog/#modal-message
inside the just display your action
Otherwise it's about to open an url into your modal it's like that http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
I am currently in the process of creating an MVC4 web application, and I seem to have run into a weird issue. I have created a unordered list with some list items in it, and their respective anchor tags, in which I am going to be able to click, that will return the respective /CONTROLLER/ACTION view.
<div>
<ul>
<li>
<a class="ajax" href="/Test/One"></a>
</li>
<li>
<a class="ajax" href="/Test/Two"></a>
</li>
<li>
<a class="ajax" href="/Test/Three"></a>
</li>
<li>
<a class="ajax" href="/Test/Four"></a>
</li>
</ul>
</div>
<div id="body">
</div>
I have then created some jQuery to call when you click either of the anchor tags, looking for a class of "ajax", and if you are to click the anchor tag, it will then run another function called GetContent, passing through the HREF value of the anchor tag, which will be used as the path for the ajax call.
$(document).ready(function () {
$(".ajax").click(function () {
var path = $(this).attr("href");
GetContent(path);
});
});
function GetContent(path) {
$.ajax({
url: path,
type: 'POST',
async: false,
success: function (result) {
$("#body").html(result);
}
});
}
I have heard of a function you can call, called preventDefault I believe. I am finding that I am not sure when to call this preventDefault to override the click of the anchor tag.
I did try placing it into a couple of places, but with no luck... I am finding at the moment I am able to click any of the anchor tags, and the default action occurs, it simply returns the whole website with the new view loaded. However if I open up the console in google chrome developer tools, and call the function GetContent, passing through the path I am expecting, it will then call the function, return the ajax, and update my web page.
If someone is able to point out where I am supposed to call the preventDefault function that would be great.
preventDefault is a method of event object. You get the reference to event object as first param of the click event handler…
$(".ajax").click(function (event) {
var path = $(this).attr("href");
GetContent(path);
event.preventDefault();
});