Develop Reference

Aurelia Custom Elements data binding

I am using a custom-element with my Aurelia app. When I am binding data from my view-model with the custom-element, it is working fine. Even if I make some changes in the data in the custom-element control, the change is also reflected to the data in my view model, thanks to the two-way data binding.
However, if I make some changes in the data from the view model (using javascript), the data is not updated in the custom-element. I have replicated this problem for a simpler setting.
Simple View Model
export class Playground {
public testObj: any;
counter = 0;
constructor() {
this.testObj = {
prop1: "This is prop1 value"
, collection2: [{ id: "item21" }]
}
}
updateProp1() {
alert("before update: "+this.testObj.prop1);
this.testObj.prop1 = "Sayan " + this.counter++;
alert(this.testObj.prop1);
}
verifyChange() {
alert(this.testObj.prop1);
}
}
Simple View
<template>
<h1>
Playground
</h1>
<div >
<div repeat.for="item of testObj.collection2">
<div class="row">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="prop1"
value.bind="$parent.testObj['prop1']">
</div>
</div>
</div>
<button click.delegate="updateProp1()" class="btn btn-primary"> Update Prop1 </button>
<button click.delegate="verifyChange()" class="btn btn-primary"> Verify Change </button>
</div>
</template>
Now whenever I click Verify Change after changing the value in textbox, the changed value comes in the alert. But, if I click the Update Prop1 button, the prop1 value gets updated, but the change doesn't reflect in the view.
I am not sure exactly what I am missing.
Note: Instead of using $parent.testObj['prop1'], if $parent.testObj.prop1 is used, the databinding works as it should. However, my actual custom-element is of generic kind and the property name is not known before hand, hence it seems that I need to keep using $parent.testObj['prop1'] notation instead of dot notation: $parent.testObj.prop1.
At pointer/suggestion/feedback is appreciated.
Update: If anyone can point out the the difference between the dot notation and indexer notation w.r.t. aurelia data-binding (I have checked this already), that will be of great help.

This was an issue in earlier builds of the aurelia/binding module. Here's the related issue(s):
https://github.com/aurelia/binding/issues/75
https://github.com/aurelia/binding/pull/76
I tried your view/view-model in the latest version of aurelia and everything worked. Here's a screencast of what I saw: http://screencast.com/t/KqcuqXWjkU2
Make sure you have the latest version of the aurelia components installed- update steps here: http://blog.durandal.io/2015/05/01/aurelia-may-status-and-releases/

Using Javascript to display an input (A number) from a user to a div

I have looked at the other questions that are asking similar things to this question however when I attempted to create my own I can't get it to work properly and i dont understand why. It's only very basic before I introduce it into a more complex system I just wanted to try and get the functionality done.
This is my HTML;
<div id="test2">
Please enter a number: <input type="number" id="RValue1">
<button id="test" onclick="R1Value()">Change Value</button>
</div>
<div id="ShowR1"></div>
And this is the JavaScript;
function R1Value() {
var t = document.getElementById("RValue1");
var div = document.getElementById('ShowR1');
div.innerHTML = t.value;
}
I have made this fiddle to save time and so you can have a look at it,
http://jsfiddle.net/2ufnK/52/
I can't see why this doesn't seem to work so if anyone can see why I would really appreciate it. Thanks.

Try it without the button:
Try out this: http://jsfiddle.net/2ufnK/56/
Type in the text, then you can just call the, ".value", method to get its text. Then everything else works the way you've written it.

Using AngularJS code in template property of kendo window

I am using kendo window with AngularJS in the following way.
HTML Code
<div kendo-window="showProspectDetailWindow" k-title="'Prospect Detail window'"
k-width="" k-height="" k-visible="false"
k-content="{template:confirmationWindowTemplate}"
k-on-open="" k-on-close=""></div>
JavaScript Code
$scope.confirmationWindowTemplate = 'Are you sure you want to delete?<br />This data will not be recoverable, do you want to continue ?<br /><div class="pull-right"><button class="k-primary" ng-click = "yesButton()">Yes</button><button class="k-button" ng-click="noButton()"> No</button></div>';
I have created a model in the script in the following way
$scope.createProspectDetailModel = function(data)
{
$scope.prospectDetail.AccountId = data.AccountId;
$scope.prospectDetail.BusinessType = data.BusinessType;
$scope.prospectDetail.FirstName= data.FirstName;
}
The above code works. With the help of debugger I can verify that the values from the data field are going into each of the $scope.prospectDetail value. However, when I change my template into
$scope.confirmationWindowTemplate = 'Are you sure you want to delete {{prospectdetail.FirstName}}'
It doesn't work. I also tried
$scope.confirmationWindowTemplate = 'Are you sure you want to delete {{#= prospectdetail.FirstName #}}'
but it doesn't work as well. I have referred this link on SO but didn't help. I have searched a lot but still cannot find the solution to this. Any help would be appreciated.

Ok. I found the answer myself. I changed the HTML Code . Removed the k-content
<div kendo-window="confirmationWindow" k-title="'Confirmation window'"
k-width="" k-height="" k-visible="false"
k-on-open="" k-on-close=""></div>
and assigned it in the script
$scope.confirmationWindow.content('Are you sure you want to delete'+ $scope.prospectDetail.FirstName '?<br />

why is $(this).data('mycontrol') undefined?

Unfortunately my front end skills are lacking as my role puts me more on the server side / db technologies as opposed to css / js. In any event, I am trying to implement this:
https://github.com/blueimp/jQuery-File-Upload/wiki/Complete-code-example-using-blueimp-jQuery-file-upload-control-in-Asp.Net.
And more specifically I was able to find an asp.net example here:
http://www.webtrendset.com/2011/06/22/complete-code-example-for-using-blueimp-jquery-file-upload-control-in-asp-net/
Basically allowing you to do mass image uploads.
I've set up the front end with the correct css and js files. I had to modify some of the js files to make use of on() instead of live() as live is deprecated. My form loads and looks like the following:
So far so good, however, as soon as I "Add file" or drag and drop a file chrome developer tools tells me the following:
Uncaught TypeError: Cannot read property '_adjustMaxNumberOfFiles' of undefined
It specifies the file as jquery.fileupload-ui.js and more specifically points me to this:
var that = $(this).data('fileupload');
that._adjustMaxNumberOfFiles(-data.files.length);
I alerted that and of course it seems to be undefined...But I don't know enough jquery to understand why it is undefined. My fileupload div markup was as follows:
<div id="fileupload">
<form action="/Handler.ashx" method="POST" enctype="multipart/form-data">
<div class="fileupload-buttonbar">
<label class="fileinput-button">
<span>Add files...</span>
<input id="file" type="file" name="files[]" multiple>
</label>
<button type="submit" class="start">Start upload</button>
<button type="reset" class="cancel">Cancel upload</button>
<button type="button" class="delete">Delete files</button>
</div>
</form>
<div class="fileupload-content">
<table class="files"></table>
<div class="fileupload-progressbar"></div>
</div>
</div>
So what could be causing this to be undefined? This is what _adjustMaxNumberOfFiles does
_adjustMaxNumberOfFiles: function (operand) {
if (typeof this.options.maxNumberOfFiles === 'number') {
this.options.maxNumberOfFiles += operand;
if (this.options.maxNumberOfFiles < 1) {
this._disableFileInputButton();
} else {
this._enableFileInputButton();
}
}
},
I'm using jquery 2.0.3 and jquery ui 1.10.3
Update
I've gotten it down to the point that the example link which I posted (2nd link above) the only difference is the version of jquery they are using, appears to be 1.8.2 and I am using 2.0.3. The difference and problem is this piece of code:
var that = $(this).data('fileupload');
In the example download this returns some strange object:
a.(anonymous function).(anonymous function) {element: e.fn.e.init[1], options: Object, _sequence: Object, _total: 0, _loaded: 0…}
In my version (using 2.0.3) I am getting undefined for this:
var that = $(this).data('fileupload');
Is there another way I can do this one line of code?

After much playing around in the console window I got it with this:
var that = $("#fileupload").data('blueimpUI-fileupload');
So for anyone that is using anything > jQuery 1.8 please change this line:
var that = $(this).data('fileupload');
to this:
var that = $("#fileupload").data('blueimpUI-fileupload');

How are you initializing the plugin? The issue might be your selector. Target the form itself, vs. the wrapping div.
Based on your html...
Try changing: $('#fileupload').fileupload({ /*options*/ });
To: $('#fileupload form').fileupload({ /*options*/ });
Also, you may have to move your .fileupload-content div inside of the form tag as well.

dynamic window.find not working with jQuery

I can't for the life of me figure out why this isn't working.
I want to search the current page for text using a search box. I googled and found this: http://www.javascripter.net/faq/searchin.htm . I implemented the code into my site, but it doesn't work. the function ( findString() ) works, but only when I hard-code a string (as in i can't use javascript or jquery to get the value of a text input). I made this fiddle: http://jsfiddle.net/alyda/CPJrh/4/ to illustrate the problem.
You can uncomment different lines to see what I've tested.

jQuery has a method :contains() that will make easier what you are looking for.
Take a look here: fiddle
$("button[type='submit']").click(function () {
var string = $('#search').val();
var matched = $('li:contains(' + string + ')');
matched.css('color','red');
console.log(matched);
return false;
});

I found a fix (sort of). It seems that the input needs to be placed well AFTER the content to be searched in the DOM. That means I've done the following:
<section class="content">
<h2>Fire</h2>
<h3>Fire Extinguishers</h3>
<ul>
<li>Model 240</li>
<li>Model C352, C352TS</li>
<li>Model C354, C354TS</li>
</ul>
...
<div id="navbar">
<ul>
...
</ul>
<input id="search" type="text" class="form-control pull-left" placeholder="Search for part number">
<button id="submit" type="submit" class="btn btn-default pull-left" style=" margin-top:6px;">Search</button>
</div>
as you can see, I've moved the input (which is in the navbar div) BELOW all of the text I want to search, and used CSS to programmatically place the navbar at the top of the page. I don't particularly like this setup (as it messes with the flow of content) but since I was looking for the quickest and simplest implementation of a single-page search, it will have to do.
I would still love to know why this happens, when the javascript is at the end of the DOM where it belongs...

In firefox I noticed that the fiddle (v4) as given in the question worked, but not in the way the asker expected it to.
What happens in firefox is that the function does find the value..: you have just entered it in the input-field. Then the browser's find method seems to hang in the 'context' of the input 'control' and doesn't break out of it. Since the browser will continue to search from the last active position, if you select anything after the input-field, the function works as expected. So the trick is not to get 'trapped' in the input-field at the start of your search.
A basic (dirty) example on how to break out of it (not necessarily the proper solution nor pure jquery, but might inspire a useful routine, since you now know the root of the problem in FF):
$( "button[type='submit']" ).click(function(){
var tst=$('#search').val(); //close over value
$('#search').val(''); //clear input
if(tst){ //sanity check
this.nextSibling.onclick=function(){findString( tst );}; //example how to proceed
findString( tst ); //find first value
} else { alert('please enter something to search for'); }
return false;
});
Example fiddle is tested (working) in FF.
PS: given your specific example using <li>, I do feel Sergio's answer would be a more appropriate solution, especially since that would never run line: alert ("Opera browsers not supported, sorry..."), but the proper answer to your window.find question is still an interesting one!
PS2: if you essentially are using (or replicating) the browser's search-function, why not educate the user and instruct them to hit Ctrl+F?
Hope this helps!

I had same problem in an angularjs app and I fix it by changing DOM structure.
my HTML code was something like this:
<body>
<div class="content" >
<input class="searchInput" />
<p>
content ....
</p>
</div>
</body>
and I changed it to something like this:
<body>
<div class="search">
<input class="searchInput" />
</div>
<div class="content">
<p>
content ....
</p>
</div>
</body>
Note: I'm aware that this topic is old.