Trying to use ZClip within Knockout - javascript

I am trying to create a website with dynamically loaded text, using Knockoutjs, that I want the user to be able to click on and have it copied to their clipboard. For the copy to clipboard functionality I'm using Zclip and I have it working when the text is statically loaded.
In my ViewModel, I have a function copyFunction that looks like this:
self.copyFunction = function(html) {
console.log(html);
$('#copytext').zclip({
path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
copy: function() {
return $('#copytext').text();
}
});
}
This is called anytime one of the items is clicked on the web-page.
And in my HTML I have this sort of content being dynamically generated for each item I have:
<div class="row" data-bind="foreach: itemList">
<div class="col-xs-3 text-center">
<a data-bind="click: $parent.copyFunction, text: text" href="#" id="copytext"></a>
</div>
</div>
I know that my copyFunction isn't correct but I don't know what I need to do to get it working for me. Ideally, I would like to apply the ZClip to the <a> tag that calls it, but I have no clue how to accomplish this.
The only way I've used ZClip before is the most well-known example: setting up an id in your HTML and using a jQuery event handler. However, I can't get that to work either because I'm new to JS and I'm pretty sure that the id isn't fully loaded when my jQuery function is, and thus it doesn't link up to the DOM correctly.
If you could help me gain insight as to how I can get this working I would greatly appreciate it.

Solved my problem by passing in the event as a parameter to the function.
Here is how the function looks now:
self.copyFunction = function(html, event) {
var target = event.target;
$(target).zclip({
path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
copy: function() {
return $(target).text();
}
});
}
An additional quirk I'm having is the Zclip only works when I upload the website to my server, but not from my localhost. Does anybody have a clue as to why this could happen?

Related

Having an issue with Polymer not recognizing a class I make in the imported file

fairly new to Polymer -- I'm having an issue that I can't seem to figure out. I have this bit of javascript code at the end of the file I am importing for my custom polymer element:
Polymer('metafaq-name', {
ready: function (){
var subby = document.querySelector('.classname');
console.log(subby);
subby.onclick = function () {
console.log('clicky');
}
}
});
and despite me being relatively new to javascript I'm pretty sure there's no (major) errors because it works on any class that's in the main html file, just not on the classes IN the custom polymer element html file where I create it.
Any ideas? I can't seem to get it to recognize any class or ID that's in the file. My thoughts have been that there might be an issue with how the custom element is actually getting imported, like maybe it's adding the script before the rest of the element, but I thought by adding a 'ready' it would fix this issue, so now I'm out of ideas.
Any help would be appreciated! Thanks!
Shan
Your node resides in shadow DOM (in template, if you will), so you should do a query on shadowRoot.
Like this:
this.shadowRoot.querySelector('.className')
If you just want to assign a click handler, you could just say so in in your tag as an on-click - (check under 'Declarative event mapping') - attribute.
For example:
<button on-click="{{hiThere}}">
And then:
Polymer('your-element)', {
hiThere: function() {
alert('hi')
}
})

Use Basic Javascript Function to Insert Code into Div

I am trying to call up an "example.js" file containing an image gallery (the bulk of the code for the gallery, seeing as how i will have 3 to choose from) using:
<img src="img.jpg" onClick="thisAction()" />
What I want to do is place all of the contained "example.js" code within a div elsewhere in the page. I have a seperate javascript.js file that references the thisAction() function, but I can't seem to figure out where to go from there, nothing is working.
I have tried a load function, and I've delved into ajax, not really knowing what I'm doing... Please help!
Ok, so just to clarify ^^^above^^^, I am not actually trying to call in any javascript in my "example.js", I was simply instructed to do so, because of some reason I can't recall that had to do with recognizing the formatting.... because what I actually want is some html to be inserted, which includes some divs. What i'd like, if possible, is to insert all the code in "example.html" which may contain something like this:
<div id="navbuttonleftcontainer"></div>
<div id="image_holder"><img src="examplepic.jpg" /></div>
<div id="navbuttonrightcontainer"></div>
into a div elsewhere on the page in my existing "gallery.html" by calling the function with the
<img src="examplenavpic.jpg" onClick="thisAction() />
tag.
The closest I've been able to come was with this:
function thisAction()
{
$('#divonmygalleryhtml').html('gallery1.html');
}
But this doesn't actually spit out the above mentioned example.html code, it just puts the text "gallery.html" into the div. I've tryed simply copying all the code from example.html and replacing it with
function thisAction()
{
$('#divonmygalleryhtml').html('
<div id="navbuttonleftcontainer"></div>
<div id="image_holder"><img src="examplepic.jpg" /></div>
<div id="navbuttonrightcontainer"></div>
');
}
But that won't do a thing... Ive tried the last 2 suggestions with no luck... Any suggestions would be great.
Not sure if i get you right. With jQuery's AJAX - function and the HTML - function you can reload code from the server and place it in a div on your page:
$(document).ready(function({
function thisAction(){
$.ajax({
url: "/pathToFile/example.js",
cache: false
}).done(function( data ) {
$("#targetDiv").html( data );
});
}
thisAction();
});
To call a external javascript file you would do
function thisAction(){
var divfill = getElementById(targetDiv);
var newscript;
newscript.src ="example.js";
divfill.innerHTML = (newscript);
}
Hope that works :).
Looks like you can use jQuery then you can use the .load() to load the contents of a remote source to an element
function thisAction() {
$('#divonmygalleryhtml').load('example.html');
}

Monitor changes to content of html binding

I am trying to bind HTML to a div element, edit the content of that div with some sort of edit in place editor, click a save button and retrieve the new content, but I have been unsuccessful.
The view looks like this:
<div id="content" data-bind="html: content"></div>
<button data-bind="click: function(){ save() }">Save</button>
With this Javascript:
var viewModel = {
content: ko.observable("<h3>Test</h3>"),
save: function(){
console.log(ko.toJSON(viewModel));
}
}
$(function(){
ko.applyBindings(viewModel);
$("#content").html("<h4>Test</h4>");
ko.applyBindings(viewModel,document.getElementById('content'));
});
See also this jsfiddle.
When I click save the console still says <h3>Test</h3>.
Is it possible to do what I am trying to do here?
The html binding does not setup any event handlers to catch changes, as it is normally placed on elements that are not editable.
Here is a sample of using the contenteditable attribute: http://jsfiddle.net/rniemeyer/JksKx/ (from this thread).
If you are looking to integrate with an editor like TinyMCE, then here is a sample: http://jsfiddle.net/rniemeyer/GwkRQ/ (from this thread).

Click event not processed when using prototype (with lowpro)

I have JS code that uses lowpro (prototype extension) to reorder a set of dynamically generated questions. So when I click a.move-up I want to move that element's parent up. And a.move-down suppose to move it down.
I'm using lowpro since the elements are generated after dom:loaded.
http://www.danwebb.net/2006/9/3/low-pro-unobtrusive-scripting-for-prototype
JS code:
document.observe('dom:loaded', function() {
Event.addBehavior( {
'a.move-up:click': function(event) {
alert('Moving up!')
//moveUp(this);
//event.stop();
},
'a.move-down:click': function(event) {
alert('Moving down!')
//moveDown(this);
//event.stop();
}
});
});
I have two links for each element (div.question) that allow that element to be moved up or down. However these click events don't get processed.
<div id="questions">
<div class="question">Q1 stuff
<a href="#" class="move-up" />Up</a>
<a href="#" class="move-down"/>Down</a>
</div>
<div class="question">Q2 stuff
<a href="#" class="move-up" />Up</a>
<a href="#" class="move-down"/>Down</a>
</div>
</div>
As part of debugging I've cut down the code to bare minimum, just trying to make sure event handling works. I don't even see the alert pop-up when I click the JS-backed links. So the "click" event isn't being handled properly.
What am I doing wrong???
Thank you!
After doing some reading/research I realized that elements that are generated dynamically...
wait for it...
are not registered/bound after DOM loads, thus the addBehavior needs to be reload()-ed for it to pick up new elements.
So after dynamically generating new elements, there has to be a call to
Event.addBehavior.reload();
After that call, new dynamically-generated elements can be moved up/down just like I want.
I knew it had to be something as simple and obvious as that... sigh

Javascript: var is null

I have this piece of Javascript and it just won't work. I allready checked JSlint but that said everything works. Still doesn't work. The javascript is located not in the HTML but is linked in the <head>
note: I am working with a local server, so pageload in instant.
function changeVisibility() {
var a = document.getElementById('invisible');
a.style.display = 'block';
}
var changed = document.getElementById('click1');
changed.onchange = changeVisibility;
This here is the corresponding HTML
<input type="file" name="click[]" size="35" id="click1" />
<div id="invisible" style="display: none;">
Attach another File
</div>
So what happens is I click on the input, select a file and approve. Then then onchange event triggers and the style of my invisible div is set to block.
Problem is, I keep getting this error:
"changed is null:
changed.onchange = changeVisibility;"
i don't get it, I seriously don't get what I'm overlooking here.
EDIT: question answered, thank you Mercutio for your help and everyone else too of course.
Final code:
function loadEvents() {
var changed = document.getElementById('click1');
var a = document.getElementById('invisible');
document.getElementById('addField').onclick = addFileInput;
changed.onchange = function() {
a.style.display = 'block';
}
}
if (document.getElementById) window.onload = loadEvents;
This here is the corresponding HTML:
<input type="file" name="click[]" size="35" id="click1" />
<div id="invisible" style="display: none;">
Attach another File
</div>
Also, thanks for the link to JSbin, didn't know about that, looks nifty.
This sounds like the DOM object doesn't exist at the time of referencing it. Perhaps change your code to execute once the document has fully loaded (or place the javascript at the bottom of your page)
note: I am working with a local server, so pageload in instant.
that's not the issue - the constituent parts of a document are loaded in order. It doesn't matter how fast they are loaded, some things happen before others :D
The onlything I'd like to do now is remove the Javascript link from the ...
Place an id on there, and inside your function do this:
document.getElementById('addField').onclick = addFileInput;
Or, as you already have the div as the variable 'a':
a.firstChild.onclick = addFileInput;
But this obviously leaves you with an invalid anchor tag. Best practice suggests that you should provide a way to do it without javascript, and override that functionality with your javascript-method if available.
mercutio is correct. If that code is executing in the HEAD, the call to "document.getElementById('click1')" will always return null since the body hasn't been parsed yet. Perhaps you should put that logic inside of an onload event handler.
I think its because you are trying to modify a file element.
Browsers don't usually let you do that. If you want to show or hide them, place them inside of a div and show or hide that.
Right, I've modified things based on your collective sudgestions and it works now. Onlything bothering me is the direct reference to Javascript inside the anchor
You need to wrap your code in a window.onload event handler, a domReady event handler (available in most modern js frameworks and libraries) or place at the bottom of the page.
Placing at the bottom of the page works fine, as you can see here.
Decoupling event responder from your markup is covered under the topic of "Unobtrusive JavaScript" and can be handled in a variety of ways. In general, you want to declare event responders in a window.onload or document.ready event.

Categories

Resources