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).
Related
<button id=trainingbutton document.getElementById("trainingbutton").addEventListener("click",
}); ></button>
function(){
trainingbuttonclicked=()=>document.getElementById("trainingbtn").innerHTML = "Hello World";
Completely new to JavaScript and am trying to hook up a button to show an alert. Above is my HTML first and my app.js is below. I would like to try to hook up the event without using a simple onclick event handler. My preferred method would be either the event handler or the inner HTML method. Any advice appreciated. I know it's something simple but maybe Ive been staring at it too long, because I can't see the answer
You need your script tag in order to insert an eventlistener, like so
<script>
const button = document.querySelector('#trainingButton"); // # id's and . for selecting a
class in the dom (document object model)
button.addEventListener('click', function(event) {
const string = 'some string';
alert(string);
});
</script>
Your Button id should only contain a string like trainingButton so that it becomes <button id="trainingButton">
> the script tag should be placed in the bottom of your body tag, in order for the DOM to load properly before any javascript runs
for more info
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
You need to separate your HTML from your javascript. You can either have them in separate files or in the same.
If you'd like them in the same file you can do the following. (Note: the script has to be after the button because we want it to run after the button has been created)
<button id="trainingbutton">Training Button</button>
<script>
var trainingbutton = document.getElementById("trainingbutton");
trainingbutton.addEventListener('click', function(event) {
trainingbutton.innerHTML = "Hello World";
});
</script>
You can also define the script above between the script tags in a seperate file (*.js) and link it to your HTML file using <script src='*.js'></script>. As you add more to your HTML and JS it can help to organize.
Im using ngImgCrop as can be seen in this JSFiddle.
What I try to achieve is that the image selection box will open automatically when i show(using ng-if) the:
<div ng-if="showImageSelector">
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
</div>
</div>
that is: i want to programatically open the image selection window, without even showing the user the:
<input type="file" id="fileInput" />
Iv'e tried put in the controller several variations of click event of the input, but none of them worked, so far iv'e tried:
1.
$timeout(function() {
angular.element('#fileInput').triggerHandler('click');
}, 0);
2.
angular.element(document).ready(function () {
angular.element('#fileInput').triggerHandler('click');
});
3.
setTimeout(function(){
angular.element('#fileInput').triggerHandler('click');
}, 1000);
4.
setTimeout(function(){
document.getElementById('fileInput').click();
}, 1000);
For trigger the file selector open programmatically, the answer is yes.
But you need to make sure this event was fired by THE USER.
For example, you have a button there, you attach the click event on it. After the user click this button, inside the event handler, you can trigger by javascript code e.g,document.getElementById('fileInput').click(). This should work.
However, if you want to simply run several lines of javascript code to open a file selector without user's click, that's not possible, because that violate the security policy.
So I added some code to your sample,
html,
<button ng-click='open()'>Open selector</button>
javascript,
$scope.open = function() {
document.getElementById('fileInput').click(); //this work
};
Hope this would solve your problem. : )
Ended up wrapping the ngImgCrop with my directive, in it iv'e placed that:
$timeout(function () {
angular.element(document.querySelector('#fileInput')).click();
$log.debug("poped it");
}, 250);
in the link function.
Aside the real element i show for the img selector, iv'e placed this at my index.html:
<div ng-show="false">
<my-image-select cropped-image="groupDetails.newPic" return-func="groupDetails.imageSelectFinish"></my-image-select>
</div>
and it works.
without the extra invisible my-image-select in index.html, the file chooser only auto open from the second attempt.
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?
I want to create a div who can change the background dynamically with jquery and angularjs.
When I click on the text inside background, it open a new windows (Jquery ui Dialog) and I can choose another background image.
When I click on the image, I would like change background!
I have two questions:
Why I can't use ng-click into dialog dynamic content?
I have a dialog with dynamic data:
$( "#dialog" ).load( item+".html" ).dialog( "open" );
The data that have been loaded:
<img ng-controller="BackgroundCtrl" src="http://etickets.dev10.dev.infomaniak.ch/images/templates/background.jpg" width="20%" height="20%" ng-click="changeBackground.doClick('http://etickets.dev10.dev.infomaniak.ch/images/templates/background.jpg')" />
When I put data direclty into dialog div, I use ng-click directive.
The second questions is:
When I click, I update
$scope.BackGroundImage
Why the div don't change his background image?
The full exemple is here:
http://plnkr.co/edit/?p=streamer&s=og6gLDAeSNgi6clQ
As I understand it you are trying to build dynamic HTML with jQuery and expect Angular to understand it.
That does not work. Angular needs to know about everything that is going on, so building content "outside" of Angular is a problem.
To tell Angular about the new HTML content do something like:
$("#dialog").load(item+".html", function () {
var $this = $(this);
var html = $this.html();
var angularCompiled = $compile(html)($scope);
$this.html(angularCompiled);
}).dialog("open");
This is only theory and there are probably other ways to do this also, but this gives you an idea.
Can I use exactly the same code to handle clicks for static and for Ajax-generated buttons? The reason I ask is that I can't get a click handler to work for an Ajax button, but if I write the equivalent static HTML, the click does work.
This code is the static version, which does work:
// in JS file:
$(function(){
$('input.sButton').click(function(){
var f = $.farbtastic('#picker');
f.linkTo(this);
return false;
});
});
In the "static HTML":
<div id = "inputArea">
<label style="white-space: nowrap; line-height: 14px; height: 14px; vertical-align: bottom;">
<input id="sButton1" class="sButton" type="button" style="background-color: rgb(113, 16, 232);">
fubar1
</label>
</div>
The normal "dynamic HTML" looks like this:
<div id = "inputArea">
</div>
The Ajax code loads the buttons into 'inputArea'. I derived the static version of this code from Firebug. I ran the Ajax routine, then got the HTML view in Firebug, which included the server output, and cut-and-pasted it exactly into my static test code, which is reproduced above. In other words, I know that the static and dynamic HTML are equivalent.
But - the static code works, and the dynamic one doesn't. Firebug shows the JS click handler being entered for the static version, and the farbtastic colour picker pops up, but this doesn't happen in the dynamic code. Any ideas?
If you are using jquery 1.7+, use on instead of click
http://api.jquery.com/on/
$("body").on("click","input.sButton",function(){
//do whatever you want
});
if you use a lower version of jquery, use live
$('input.sButton').live("click",function(){
//do whatever you want
});
$('input.sButton').live('click', function(){
var f = $.farbtastic('#picker');
f.linkTo(this);
return false;
});
.live listens even for ajax content. Thsi should do the trick. Also, you may want to look into jquery .on() as well. Make sure you're using the latest jquery.
there is a jQuery live function just for that purpose, check out it here