How can I reload Reddit buttons with jquery? I have load more ajax function and Reddit buttons don't appear when loaded via jquery. I tried to use:
$.ajax({ url: 'http://www.reddit.com/static/button/button2.js', dataType: 'script',
cache:true});
This is the actual button attached to each post:
<script type="text/javascript">
reddit_url = "http://domain.com/post-num";
</script>
<script type="text/javascript" src="http://www.reddit.com/static/button/button2.js">
</script>
Thanks
You can accomplish this by updating the Reddit iframe's "src".
$('some-surrounding-div-here').find('iframe').attr('src','http://www.reddit.com/static/button/button2.html?width=51&url=http%3A%2F%2Fdomain.com%2Fpost-num');
Here it is in a full working example:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#refresh_reddit_button').click(function(){
$('#reddit_button_container').find('iframe').attr('src','http://www.reddit.com/static/button/button2.html?width=51&url=http%3A%2F%2Fdomain.com%2Fpost-num');
});
});
</script>
</head>
<body>
<input id="refresh_reddit_button" type="button" value="Refresh Reddit">
<div id="reddit_button_container">
<script type="text/javascript">
reddit_url = "http://domain.com/post-num";
</script>
<script type="text/javascript" src="http://www.reddit.com/static/button/button2.js">
</script>
</div>
</body>
</html>
Related
I am very new to jquery and have been working on some snippets I found online. I have reached a problem where I think because I have 2 different jquery libraries called to the page and 2 functions both using $(function) are causing the page not to work. I've tried using the no.conflict option but not sure I used this properly or missed something out elsewhere. Would appreciate if someone can explain or tell me what the solution would be? Thanks in advance.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.revolution.js"></script>
</head>
<body>
<div id="overlay"></div>
<div id="container">
<div id="jstwitter"></div>
<script type="text/javascript" >
$(function() {
$('#container').revolution();
});
</script>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="nested.jstwitter.js"></script>
<script type="text/javascript" src="automate.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript">
$(function () {
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
</html>
Don't know why do you need two versions, but you can try something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
$('#container').revolution();
})( jQuery_1_10_2 );
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jQuery_1_8_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
JQTWEET.loadTweets();
})( jQuery_1_8_2 );
</script>
Could you not just combine them?
<script type="text/javascript">
$(function () {
// Container Revolution
$('#container').revolution();
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
I want to create simple custom popup using jquery. My html code is as follows.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Thiws should be custom popup");
});
});
</script>
</head>
<body>
<button id="btn1">Show Text</button>
</body>
</html>
On clicking button it should open a form in popup asking username, email address and also it should have submit button
For reference what i want to ask
http://www.c-sharpcorner.com/UploadFile/736ca4/custom-popup-window-using-jquery/
You can use the function and css I wrote here:
https://jsfiddle.net/mm7b7t5t/
Opening a hello world popup:
var hello = new popup([{text:"Close"}], "Hello!", "<p>Hello World</p>");
hello.open();
You can make popups draggable, add multiple buttons etc etc
jQuery dialog is a mess in my opinion, I prefer my own popup code ^^
Just create a html file and copy/paste that code.
<html>
<head>
<title></title>
</head>
<body>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#OpenDialog").click(function () {
$("#dialog").dialog({modal: true, height: 400, width: 400 });
});
});
</script>
<a id="OpenDialog" href="#">Click here to open dialog</a>
<div id="dialog" title="Dialog Title">
<p>test</p>
</div>
</body>
</html>
test.html:
<html>
<body>
<script type="text/javascript" data-main="app" src="require.js" />
<div id="box">
</div>
</body>
</html>
and app.js:
require(["domReady"], function (dom_ready) {
dom_ready( function () {
document.getElementById('box').innerHTML = 'test';
});
});
I dropped the require.js and domReady.js files in the same directory:
https://raw.githubusercontent.com/requirejs/domReady/latest/domReady.js
http://requirejs.org/docs/release/2.1.11/minified/require.js
My browser does not display the "test" string in the webpage when I open it (tried with FF and chromium).
However, the "test" string is displayed if I add an empty tag:
<html>
<body>
<script type="text/javascript" data-main="app" src="require.js" />
<script type="text/javascript"></script>
<div id="box">
</div>
</body>
</html>
What did I miss ?
Close the script-tag properly.
<script type="text/javascript" data-main="app" src="require.js"></script>
I downloaded jQuery UI 1.10.3.
And it comes with an older version of jQuery which is 1.9.1.
And I have a later version of jQuery: 1.10.2.
But jQuery UI seems does not like to work with 1.10.2...
Is there anyway to make it works?
Or I should just live with it..
<script src="js/jquery-1.9.1.js"></script>
<!--
<script src="jquery-1.10.2.min.js">
-->
<script src="js/jquery-ui-1.10.3.custom.js"></script>
</script>
<script src = song_Selector.js>
</script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 50
});
});
</script>
<body>
<p id="demo">Click the button to do something.</p>
<button onclick="draw_Progress_Bar ()">Try it</button>
<h2 class="demoHeaders">Progress Bar</h2>
<div id="progressbar"></div>
</body>
Codes are above, without the <html> tag.
When you are loading the script, you've forgotten the end tags, and you've also forgotten your <head> tags if this is the whole document:
<!-- <script src="js/jquery-1.9.1.js"></script> -->
<script src="jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script src = song_Selector.js></script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 50
});
});
</script>
<body>
<p id="demo">Click the button to do something.</p>
<button onclick="draw_Progress_Bar ()">Try it</button>
<h2 class="demoHeaders">Progress Bar</h2>
<div id="progressbar"></div>
</body>
What happened was actually the following when you uncommented jQuery 1.10.2:
<script src="jquery-1.10.2.min.js">
<script src="js/jquery-ui-1.10.3.custom.js"></script>
</script>
As any text inside a <script> tag is ignored with an src attribute set and will not be parsed, this will not be loaded.
Before, it would have worked fine as it would have simply been the following:
<script src="js/jquery-ui-1.10.3.custom.js">
</script>
</script>
... with the text inside the tag being ignored, as there is a src attribute (with this having no effect).
you can this by function load script
function loadscript(url){
var doc = document.getelementbytagname("head");
var script = document.createlement("script") ;
script.url = script
}
Is it possible to load js file on some event like mouseover or click?
I try to load a whole js file not a specific function.
This example loads the specified js file on onClick() event of button
<button onclick="myFunction()">Click me</button>
<script type="text/javascript">
function myFunction(){
var file = document.createElement("script");
file.setAttribute("type", "text/javascript");
file.setAttribute("src", "js/js_file.js");
document.getElementsByTagName("head")[0].appendChild(file);
}
</script>
Similarly, you can also load the js on onMouseOver() event of the button or any other HTML element.
Example using jQuery
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myButton').mouseenter(function() {
$("head").append($("<script />").prop("type", "text/javascript").prop("src", "http://code.jquery.com/jquery.mobile-1.2.0.js"));
});
});
</script>
</head>
<body>
<input type="button" id="myButton" value="CLICK" />
</body>
</html>