I am using PrimeNG. I wrote code for auto-complete as follows
<p-autoComplete name="searchSuggestions" [(ngModel)]="suggestion"
(completeMethod)="searchSuggestions($event)" [suggestions]="searchSuggestionsResult" field="field"></p-autoComplete>
I am clearing suggestion in a method, but not clearing autocomplete input value. It's clearing only if I select from suggestions.
this.suggestion = undefined;
Use onClear() method & set your model values = null.
====HTML
(onClear)="clearValue()
==ts
clearValue()
{
this.suggestion = null;
}
This function will get called only when you are cleared all the values from auto-complete list.
Hope this will work!!
Kindly upgrade your primeng version up to "primeng": "^1.1.1", then this will work as well.
Related
I cannot access any value in typescript inside the function triggered by the onAdd event of the dxo-item-dragging element. All come undefined
HTML Code :
<dxo-item-dragging group="'server'" [data]="tasks"
[allowReordering]="true" [onDragStart]="onDragStart" [onAdd]="onAdd" [onRemove]="onRemove">
</dxo-item-dragging>
TS Code:
onAdd(e) {
e.toData.splice(e.toIndex, 0, e.itemData);
let a = this.tasks;
}
When I do let a = this.tasks, this.tasks comes as undefined. Actually I defined it.
When I type [onAdd]="onAdd.bind(this)" instead of [onAdd]="onAdd", I can access all properties, but this time the ui slows down a lot and freezes.
Thanks in advance for your help
I tried binding the event event to a function.
I was expecting to access all properties in that function, but I can't.
in the example in this link https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/DnDBetweenGrids/Angular/Light/ there is a solution to my problem. For those who have the same problem as me, the solution to my problem is to put
this.onAdd = this.onAdd.bind(this);
It was enough for me to write. Have a nice day
I have a country dropdown and I set the selected attribute to US. I can clearly see select="selected" into select OPTION having value US in firebug. But neither firefox or chrome shown US as selected.
I have code for populate & selected country as follows.
var countryData = getCountryData();
var html = '<option value="">Select Country</option>';
$.each(countryData, function(key,value) {
if(defaultValue == value.id)
{
html = html + '<option value="'+value.id+'" selected="selected">'+value.name+'</option>';
}
else
{
html = html + '<option value="'+value.id+'">'+value.name+'</option>';
}
});
countryField.html(html);
If it is really possible for any reason to browser not shown the selected even we set the attribute selected.
UPDATE : Ok guys, As I was expecting it must be conflicted by other code. And that is the case . I am using bootstrapValidator and a special call "resetForm" which did this behavior. However one thing I did not understand why still html select in firebug shown selected attribute ? But at last I placed this code after resetForm call. Thanks to all for suggestions & help.
I had this peculiar problem of multiple select not selecting the selected values. What I ended up doing is select them with JS (I have jQuery in my app, so that makes it easier) like so:
$('#select_element').find('option[selected="selected"]').each(function(){
$(this).prop('selected', true);
});
I know this is ugly, and it should be avoided, but if nothing works, this WILL work.
you dont need to set selected="selected", selected itself is sufficient
<option value="anything" selected>anything</option>
Also check, is your HTML markup is correct. You are closing the <option> with </value>. It is wrong, should be <option></option>
EDIT
If the above solution is not working, you could set it through JavaScript:
document.getElementById("idOfSelect").selectedIndex = "1";//index starts from 0
This works for me but you can try this:
countryField.html(html).trigger('change');
you don't need selected="selected" just value.id + ' selected>' + ...
also it should be not
lastly, check that
defaultValue == value.id
in the debugger.
I had a similar issue but in my case it was not JS, but the GET variable value of another option matched the name of an option and that didn't work.
So: https://example.com?section=instruments&instruments=0 failed. Renaming to unique names fixed it for me.
Background:
I'm trying to run a callback when something inside the code of a directive in AngularJS happen.
Pertinent code:
HTML:
<img-cropper onselect="updateAvatarData" x="100" y="100" src="{{tempAvatar}}" id="avatarCropper"/>
Controller:
$scope.updateAvatarData = function(c){
alert("¡¡¡Funciona!!!!");
};
Directive:
<<more code up here>>
link: function(scope,element, attr) {
scope.wsId = attr.id+'WS';
scope.pvId = attr.id+'preview';
scope.x = attr.x;
scope.y = attr.y;
scope.aspectRatio = scope.x/scope.y;
scope.previewStyle = "width:"+scope.x+"px;height:"+scope.y+"px;overflow:hidden;";
scope.onSelectFn = scope.$eval(attr.onselect);
<<more code down here>>
The problem is in that last line "scope.onSelectFn = scope.$eval(attr.onselect);". That "scope.$eval(attr.onselect);" returns 'undefined'. The attr.onselect works fine, it returns the name of the function typed on the 'onselect' attribute.
I have made others directives with functions passed via attibutes with no problem, but am unable to find what I am doing wrong here.
Thanks in advance
Why you are doing like this when u can easily use '&' feature available with angular
calling method of parent controller from a directive in AngularJS
Still if you want to call parent function like this then you should be using $parse instead of eval see a very below small example when using
link: function (scope,element,attrs) {
var parentGet = $parse(attrs['onselect']);
var fn = parentGet(scope.$parent);
fn();
},
scope.$eval(attr.onselect) should work.
Here is a working fiddle (tested in Chrome) with a minimal link function:
link: function(scope, element, attr) {
scope.onSelectFn = scope.$eval(attr.onselect);
console.log(attr.onselect, ',', scope.onSelectFn);
scope.onSelectFn();
},
The only other thing I can think of is that since onselect is an HTML attribute, maybe it doesn't work on some other browsers. So maybe try using a different attribute name.
By default, $eval only evaluates the given expression against the current scope. You can pass in a different data object to evaluate against, and in your case it is the parent scope. You should call it like this:
scope.onSelectFn = scope.$eval(attr.onselect, scope.$parent);
See the documentation here
Anyone knows how to get the variant tabs to work as actual tabs and not as a drop down?
This is how sr.wikipedia.org has it:
and this is how I have it on my zablude.com/wiki/ page:
and I've tried everything I found and searched everywhere I could think of but I wasn't able to find a solution... anyone has any ideas how this works?
They hack it in JavaScript — see this piece of code at the bottom of Медијавики:Vector.js:
//to be able to switch the language variant (overrides the default buttons with more visible ones)
function tabWorkaround() {
if(mw.config.get('wgUserVariant') == 'sr') {
var tab_urls = {};
tab_urls[0] = document.getElementById('ca-varlang-0').getElementsByTagName('a')[0].href; //Ћирилица
tab_urls[1] = document.getElementById('ca-varlang-1').getElementsByTagName('a')[0].href; //Latinica
$('#p-variants').remove();
mw.util.addPortletLink('p-namespaces', tab_urls[0], 'Ћирилица');
mw.util.addPortletLink('p-namespaces', tab_urls[1], 'Latinica');
}
}
$(document).ready(tabWorkaround);
It would probably be cleaner to do it with a MediaWiki hook, though. The following code is untested, but should work if I haven't made any silly mistakes:
// show language variants as tabs in Vector skin
function tabWorkaround( &$skintemplate, &$links ) {
$links['namespaces'] += $links['variants'];
$links['variants'] = array();
return true;
}
$wgHooks['SkinTemplateNavigation::Universal'][] = 'tabWorkaround';
(In MW 1.17, this hook is only called from the Vector skin. In MW 1.18, it will affect all skins. If you don't want that, you could test whether $skintemplate->skinname == 'vector'.)
Try $wgVectorFeatures['collapsibletabs']['global'] = false;. That is intended for the dropdown on the other side, but might work for other dropdowns as well.
I'm at my wit's end with this.
Can anyone see anything wrong with this line? The function won't fire by clicking on the checkbox for some reason, but the calling function works fine (if I copy the exact "onclick" attribute over to the label for the checkbox, it works fine).
<input type="checkbox" name="match_35_0" id="match_35_0d" value="d0" onclick="checkSwap(document.page_form.match_35_0d, document.page_form.match_35_0)"></input>
If anyone can see why on earth this wouldn't be working, I would really appreciate it.
Thanks!
EDIT: Since a couple people asked, here's the checkSwap function (all it does is throw an alert so I can see that my onclicks are working before I add any code):
function checkSwap(radioid, groupid) {
alert("radio: " + radioid + " group: " + groupid);}
And here's the whole sample of the table cell that the checkbox in question is in (apologies for the formatting, the code sample doesn't seem to want to accept my newlines):
<td><label onclick="checkSwap(document.page_form.match_34_0d,document.page_form.match_34_0)" for="match_34_0">N</label><input type="checkbox" name="match_34_0" id="match_34_0d" value="d1" onclick="checkSwap(document.page_form.match_34_0d, document.page_form.match_34_0)"></input></td>
EDIT: Alright, canceling out a separate function that was limiting the checkboxgroup to 1 checked box was the issue.
The code that does the limiting was setting an onclick attribute for each checkbox, and that is apparently overriding the tag-set attribute. I'll have to figure out how to hack around it.
This syntax
document.page_form.match_35_0d
actually searches in the form with name of page_form for an input element with name of match_35_0d. But you have actually set it as an id of the checkbox where the onclick is definied.
You could solve your problem with the following call in the onclick:
checkSwap(this, document.page_form.match_35_0)
By the way, a checkbox is not the same as a radiobutton and you're actually not passing the ID's to the function, but instead the whole elements. Rewrite your function as
function checkSwap(checkbox, group) {
var checkboxId = checkbox.id;
for (var i = 0; i < group.length; i++) {
var element = group[i];
var elementId = element.id;
// ...
}
// ...
}
To obtain an element by ID, just use Document#getElementById().
var element = document.getElementById('someId');
If JQuery's ready method is already defined then Chek box onclick event do not work. You can fire the event if you add a Jquery click event inside ready. Not sure if this is IE issue ..?
Incase you already have Jquery's ready function then Onclick attribute of the ckeckbox will not fire. You have to add the click event in Jquery. Only then it works
Like below. I don't know the reason.
$('#cbFinalAttest').click(function (event) {
...
}
this function does fire - checked in firebug
<input type="checkbox" name="match_35_0" id="match_35_0d" value="d0" onclick="alert('55')"></input>
you have to check 'checkSwap'
It would be easier to pass in this to the function, then the parameter would be a reference to the element that called the function. So you can do:
function checkSwap(self){
alert(self.id);
}
Edit: Also, document.page_form.match_35_0.id will get the id, not the way you have it.