I have a header defined like so:
<h1 id=header" dojoType="dojox.mobile.Heading" back="Back" moveTo="group1" label="Old Header"></h1>
I want to change the label of the header in an onClick event. I first tried this:
var header = dijit.byId("header");
header.innerHTML = "New Header";
This updated the label correctly but my back button disappeared because it was rendered in a that was in the innerHTML (which is now "New Header").
I tried another approach, using dojox.mobile.Heading.setLabel():
var header = dijit.byId("header");
header.setLabel("New Header");
This keeps the back button but does not actually change the label. When inspect console.log(header) I can see label was changed but it does not show up on my page. Its like header needs to "redraw" itself. Any ideas?
try header.set("label", "New Header");
This is a hack that solve my problem (see the comment above).
dijit.byId('header').domNode.lastChild.nodeValue = 'New label';
Related
I have a reactive form and I am using Material Angular, with a tab group and the tab names comes from an array, I need to add the possibility of changing those tabs names for new ones. If a write a new title in the input I need to update the name of the tab label.
I’m getting the value from the input, but I can’t figure it out how to send it to the names of the tabs:
app.component.ts
this.newTitleArm = selection.formdata.titleTextArms;
console.log(this.newTitleArm);
STACKBLITZ
SCREENSHOT
Can you have a look at this Stackblits
Note that I have modified the submit method and have added
if(this.form.get('titleArms').value === 'changeArm'){
this.tabs[this.selected.value].name = this.form.get('titleTextArms').value;
}
Here I'm assigning the titleTextArms control value to selected tab name. You can get selected tab by this.tabs[this.selected.value]
Also added the if condition to check selection of radio button.
UPDATE:
since you have used tab names to create the text in the parent component.
In the submit method
need to do the tab name update before emitting the updateDataEvent.
submit(): void {
if (this.form.get('titleArms').value === 'changeArm') {
if (this.form.get('titleTextArms').value !== '') {
this.tabs[this.selected.value].name =
this.form.get('titleTextArms').value;
}
}
this.updateDataEvent.emit({
formdata: this.form.getRawValue(),
tabs: this.tabs,
});
}
The problem is that you are not updating the respective tab name anywhere, neither in your submit, nor in your updateData.
You submit the value, but you are not updating the tabs.
For example, in your submit method add this hard-coded update and then press the Save button:
this.tabs[0].name = "test";
Because now you updated the first tab's name, you should see the change.
I have created a uib-accordion in my Angular website and can get most of the functionality I want, with dynamic content changing accordingly.
I am having trouble styling the uib-accordion-group dynamically.
<uib-accordion-group panel-class="panel-danger">
<uib-accordion-heading>
Accordion Heading 1
Is fine and colours the whole heading Red/Pink, I want to change this to panel-warning or panel-info based on other variables on the page.
<uib-accordion-group panel-class="{{getPanelColor()}}">
<uib-accordion-heading>
Accordion Heading 1
The function seems to be called correctly and is triggered correctly with ng-click elsewhere.
I appears that I cannot change the value panel-class uses dynamically. So in this instance getPanelColor() returns 'panel-danger', 'panel-info' or 'panel-warning' depending on other variables. If I print this return value out on the page in another div or whatever it changes correctly. If I refresh the page the correct colours are displayed for the changed panel-group.
Is there another way of setting the color - I don't know what the classes are for the accordion-group. I have tried changing the color of a div withing the panel, but this is a child element and does not change the color of the whole heading.
Any help much appreciated. (I'll come up with a JSFiddle if the question is not clear)
If you look at the HTML after the panel-class has changed and Angular has digested the change, you will see this line:
<div class="panel panel-danger" ... panel-class="panel-default">
That is, there is a mismatch between class and panel-class (the former has panel-danger, whereas the latter has panel-default). The uib-accordion-group directive simply does not handle the change in the wanted manner.
One workaround is to add ng-if to the whole group:
<uib-accordion-group ng-if="render" panel-class="{{getPanelColor()}}">
... and just before you want to change panel-class, remove the whole element temporarily, so that Angular re-renders it from scratch. Hopefully, the following code explains the principle:
$scope.render = true;
$scope.panelColor = 'panel-danger';
$scope.setPanelColor = function(val) {
$scope.panelColor = val;
$scope.render = false;
$timeout(function () {
$scope.render = true;
});
};
$scope.getPanelColor = function() {
return $scope.panelColor;
};
See the proposal in action: http://plnkr.co/edit/XfJiPnNi1z4F9cgIVxxw?p=preview. Press 'Clear panel color OK'.
The downside is that the removal of the element causes some flickering.
I have added another button 'Clear panel color FAIL' that shows what happens in your failing case. Here is what the HTML looks like after you press the button, notice the mismatch panel-danger vs. panel-default:
Use an interpolated expression in the class attribute, for example:
class="{{!ctrl.valid?'notValid':'valid'}}"
My greetings !
I am trying to focus on first pagingtoolbar`s button by hot key. For example, when it will be pushed combination CTRL + -->, the focus will be on first enabled button of pagingtoolbar.
At this time I can get fisrt disabled button:
Ext.ComponentQuery.query('pagingtoolbar button{isDisabled()}')[0]
But I need a code like that:
Ext.ComponentQuery.query('pagingtoolbar button{isEnabled()}')[0]
I have thought that there is such method in Ext.button.Button, but I could not find it.
Obviously, I can resolve my problem by another way, for example, I can get all enabled buttons in paging toolbar by this code:
var buttons = Ext.ComponentQuery.query('pagingtoolbar button');
var en_buttons = [];
for(var i=0;i<buttons.length;i++){
if( !buttons[i].isDisabled() )en_buttons.push(buttons[i]);
}
en_buttons[0].focus(false,100);
But I believe that there are no need to write such code, it must be resolved by one line of code.
With regards ,
A
You can use the disabled property.
Disabled buttons:
Ext.ComponentQuery.query('pagingtoolbar button[disabled=true]')
Enabled buttons:
Ext.ComponentQuery.query('pagingtoolbar button[disabled=false]')
How can i have a link field in a content type display a default text when the field is empty.
For now i have a field as a link - and the link is set to have a static title. This Works fine.
But i'd like to display a default title if the field is empty with no link (but still rendered as a link/button).
It's not a view - so i can't use "rewrite output if empty".
I'm a newbee to drupal - so please help
This shows what I've got so far:
http://1fb72c32b5e90467b795f388746f7501b3ad8021.web9.temporaryurl.org/tmp/link2.PNG
When the link field is empty the button doesn't show. Instead of not showing when empty I'd like it to show someting like this as default:
http://1fb72c32b5e90467b795f388746f7501b3ad8021.web9.temporaryurl.org/tmp/link3.PNG (the button "Bestil på tlf...")
By simply using Link module, i don't think this is possible. But, follow below steps in your environment and i think you might achieve the goal:
Make custom template file for the page (i think, its product details page)
In that template file, check whether the link is empty or not
If link is not empty, show the link. If link is empty, show your custom HTML.
In ExtJs how to change label text dynamically
i.e
iam using like this
LabelError.innerText = "New password is required.";
LabelError.style.color = "red";
but its work only in ie and chrome but not in firefox
so how to change label text dynamically in all browsers
As you can see in the label class docs, the right way to do it is to call the function:
LabelError.setText('<span style="color:red">New password is required.</span>', false);
The false argument will prevent the html tags from being mangled by the function. Anyway, you can try to experiment with it.