Good day, friends. I can't make zeroclipboard working with my page. In HTML page I have:
<script type="text/javascript" src="ZeroClipboard.js"></script> //Script was loaded successfully.
...
<button id="copy_clipboard">Test me</button>
<script>
ZeroClipboard.setMoviePath('http://olymp/ZeroClipboard.swf'); //Path correct. It's local php server
var clip = new ZeroClipboard.Client();
clip.setText('test');
clip.glue('copy_clipboard');
</script>
This return me an error:
ZeroClipboard.setMoviePath is not a function
After deleting
ZeroClipboard.setMoviePath('http://olymp/ZeroClipboard.swf');
I got an error:
ZeroClipboard.Client is not a constructor
Hope this would help a little bit:
Try using:
ZeroClipboard.setDefaults({moviePath: 'http://olymp/ZeroClipboard.swf'});
And also:
var clip = new ZeroClipboard();
For your another question, try using :
clip.on('dataRequested', function(client, args){
clip.setText("YOUR TEXT HERE");
});
instead of using clip.setText alone :)
sometimes you need to init the zeroclipboard client on document ready
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/ZeroClipboard.min.js"></script>
<script>
$(document).ready(function() {
var client = new ZeroClipboard($('#buttonId'), {
moviePath : 'util/ZeroClipboard.swf'
});
});
</script>
<input type="button" id="buttonId" data-clipboard-target="inputId" />
<input type="text" id="inputId" />
will copy in cplipboard the contents of the input text, for me it worked also for localhost
Related
in my site i have google reCaptcha component which allows me to specify a callback function inside the attribute "data-callback".
this is my html file:
<html>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script type="text/javascript">
var txtClientResponse = document.getElementById('txtClientResponse');
var txtServerResponse = document.getElementById('txtServerResponse');
function successCallback(value) {
this.txtClientResponse.value = value;
this.txtServerResponse.innerText.clear();
}
</script>
<body>
<div class="g-recaptcha" data-callback="successCallback" data-error-callback="errorCaptcha" data-sitekey="xxxxxx" />
<input ID="txtClientResponse" />
<input ID="txtServerResponse" />
</body>
Everything works great except the fact that i can not access the local variable txtClientResponse, that holds a DOM element, from the callback function "successCallback". to local variables like var test = 1, i can access using this.test.
i tried to pass the "this" using like i am doing on Angular but it didn't work. i need a pure javascript solution - not angular:
<div class="g-recaptcha" data-callback="successCallback.bind(this)" data-error-callback="errorCaptcha" data-sitekey="xxxxxx"/>
I didn't use pure JavaScript for long time because i am using Angular, i forgot that the script tag with the javascript code should be at the very bottom of the body tag content or at least to assign the variables with the getElementById inside the document.onreadystatechange event.
The problem was that the lines:
var txtClientResponse = document.getElementById('txtClientResponse');
var txtServerResponse = document.getElementById('txtServerResponse');
executed before the HTML elements where ready.
Here is the fix for users that may find this question using google
<html>
<body>
<div class="g-recaptcha" data-callback="successCallback" data-error-callback="errorCaptcha" data-sitekey="xxxxxx" />
<input ID="txtClientResponse" />
<input ID="txtServerResponse" />
<script src='https://www.google.com/recaptcha/api.js'></script>
<script type="text/javascript">
var txtClientResponse = document.getElementById('txtClientResponse');
var txtServerResponse = document.getElementById('txtServerResponse');
function successCallback(value) {
this.txtClientResponse.value = value;
this.txtServerResponse.innerText.clear();
}
</script>
</body>
</html>
I'm really new at this and I need a random button on my page that would show a new line of information in a div every time someone click on the random button. I was also wondering if there is over 800 lines is it possible to put it in an outside file as txt or html.
Here is what I got so far and well it doesn't work and I'm getting confuse... Please help
<script type="text/javascript" src="jquery-2.2.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#text').hide();
$('a#random').click(function(){
$('#text').toggle();
})
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
document.getElementById('#text').innerHTML=textarray[rannum];
}
var textarray = [
"Hello",
"How are you",
"Good Bye"
];
$("#text").load()
})
</script>
<body>
<div id="text">Line to Show</div>
RANDOM
</body>
Uh. Pretty much this:
$('a#random').click(function(){
$('#text').toggle();
RndText(); //you're good
});
Although I will point out that RndText() uses document.getElementById when it could use $("#text") instead. (there's a .html() method that will write the value instead of the .innerHTML property).
document.getElementById is also not currently working because you used "#text" instead of "text", jQuery uses CSS selectors, getElementById does not.
Add execution of RndText when you clicks on Random button.
$('a#random').click(function(){
$('#text').show();
RndText();
})
This will give you a button and you can run this code by clicking the button below. However, I did not quite understand you second part of the question: 800 lines in separate file, what do you wanna do with it? Tell me so that I can helo you further...
Editted:
<?php
$data = file_get_contents('demo.txt');
$lines= split("\n",$data);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
var textarray = <?php echo json_encode($lines); ?>;
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
$('#text').text(textarray[rannum]);
console.log(textarray[rannum]+" "+rannum+" "+textarray.length);
}
$(document).ready(function(){
$('#text').hide();
$('#random').click(function(){
$('#text').show();
RndText();
});
});
</script>
<body>
<div id="text"></div>
<button id="random">RANDOM</button>
</body>
I'm struggling to implement this case, I really appreciate your help.
UPDATE :
page1.html
<html>
<head>
<title></title>
</head>
<body >
<form>
filled value : <input type="text" id="one">
</form>
</body>
</html>
page2.html
<form>
<input type="button" onclick='go();' value='call_page1'/>
</form>
First attempt : page1 shows up, but value is not set
<script>
function go(){
var newWindow;
newWindow= window.open('page1.html', 'form', 'width=400,height=350');
newWindow.document.getElemetById('one').value='xxx';
}
</script>
Second attempt : page1 is not even shown up
<script>
function go(){
var detailsWindow;
detailsWindow = window.open('page1.html', 'form', 'width=400,height=350');
detailsWindow.onload = function{
document.getElementById('one').value='test';
}
}
<script>
Question : setting value' value to page1.html, when it's called in page2.html?
Or if there's an alternative (but please take it easy on me, i'm just learning this stuff ). I don't use JQuery, if there's something unclear, i'm happy to hear it.
regard.
// page1.html
<script>
var newWindow = window.open('page2.html', 'formUntukUpdate', 'width=400,height=350');
newWindow.onload = function(){
newWindow.document.getElementById('one').value = 'ok 2';
};
</script>
// page2.html
<input type="text" id="one" value="ok" />
First of all javascript is case sensetive, and n is missing. so replace getElemetByID with getElementById.
Second is that the code executes immediately and doesn't wait the page to load. You must wrap your code in window.onload :
newWindow.onload = function(){
newWindow.document.getElementById('one').value='xxx';
}
there's 3 bugs in the update:
function in detailsWindow.onload = function must be declared with detailsWindow.onload = function() to work.
your end script is must be replaced from <script> to </script>
you are missing detailsWindow in document.getElementById('one').value = 'test'; it must be detailsWindow.document.getElementById('one').value = 'test';
I have been trying to pass a value from an external javascript file to an HTML form with no luck. The files are rather large so I am not sure I can explain it all but ill try.
Basically a user clicks a link then a js file is initiated. Immediately after a new HTML page loads.
I need this value passed to the HTML page in a form field.
Javascript:
var divElement = function(){
divCode = document.getElementById(div1).innerHTML;
return divCode; };
document.getElementById('adcode').value = divElement();
Afterwards it should be passed to this Form field
HTML Form Field:
<p>Ad Code:<br>
<input type="text" name="adcode" id="adcode"/>
<br>
</p>
Thanks for any help!
Your HTML file needs to reference the JavaScript js file. Have a function in your JavaScript that returns the value that you need. Use JavaScript (I like jQuery) to set the form field to what you need.
JS file:
<script>
var divElement = function(){
divCode = document.getElementById(div1).innerHTML;
return divCode; };
document.getElementById('adcode').value = divElement();
function GetDivElement() {
return divElement();
}
</script>
HTML file:
<p>Ad Code:
<br />
<input type="text" name="adcode" id="adcode"/>
<br />
</p>
<script src="wherever that js file is" />
<script>
window.onload = function() {
document.getElementById('adcode').value = GetDivElement();
}
</script>
Although, really, this might do what you want (depending on what you are trying to do):
<p>Ad Code:
<br />
<input type="text" name="adcode" id="adcode"/>
<br />
</p>
<script src="wherever that js file is" />
<script>
window.onload = function() {
GetDivElement();
}
</script>
Can it be this?:
function divElement(divCode){
return divCode;
}
divElement(document.getElementById('adcode').value);
I'm trying to use Knockout js in a simple web application.
Here's my dummy javascript code:
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
But when I run the index.html, the debug console says "ko.applyBindings is not a function"!
Help!
Thanks
You have not included the link to the knockout.js library in your source code or the link is wrong. Fix this and it will work.
<script src="/scripts/knockout-2.0.0.js" type="text/javascript"></script>
Where the /scripts directory is the location on the server where knockoutjs resides.
EDIT
Here is an example of your code that works.
<html>
<head>
<script src="knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
</script>
</body>
</html>