How to change dojo/dijit tab title programmatically? - javascript

For example, given the dijit.ContentPane tab below, how do I programmatically change the title "Summary" to something else?
<div id="summaryContent" class="tabClass" dojoType="dijit.layout.ContentPane" title="Summary" selected="true">
I tried:
dojo.byId('summaryContent').title
document.getElementById('summaryContent').style.title
...as well a bunch of other combinations, but it doesn't work? Any ideas?

Just two small mistakes: first, to get a dijit instance (e.g. the dijit.layout.ContentPane javascript object, not the DOM node) you have to use dijit.byId, and secondly, setting a property on a dijit is done with the set method. So:
dijit.byId("summaryContent").set("title", "My new awesome title");
.. should do the trick.

This is what worked for me, not only for title but for any property:
First include "dijit/registry" (https://dojotoolkit.org/reference-guide/1.10/dijit/registry.html)
Then in code do:
var summaryContent = registry.byId("summaryContent");
summaryContent._set("title", "new title here");
//Set something like the icon
summaryContent._set("iconClass", "summary-icon");

Get the instance of the div by using "dijit.byId".
As you have created the instance by using dijit ("dijit.byId"), so use the method 'set' to set the value to the property.
Code:
dijit.byId("summaryContent").set("title", "New Title");
*New Title: is the title which you want to set.

Related

How to overwrite jqGrid's language defaults?

Assuming I can't change the language file because I want the defaults to keep the same except for this particular case.
I want to change the caption for the edit form. Assume as well that there are going to be other grids that will use different captions for that same edit form.
So far, I know that the edit form is launched calling this method:
grid.jqGrid('editGridRow', rowID, {properties});
In the Documentation Wiki, you can find a paragraph about this that says:
These options can be overwritten when passed as options to the method.
When passed to the method we should use by example bSubmit : “Submit”
and not $.jgrid.edit.bSubmit : “Submit”
But it doesn't say what method to which I have to pass the options. 'editGridRow' doesn't have an options parameter, and if I pass it as a property like so:
grid.jqGrid('editGridRow', rowID, { editCaption: "My Edit Caption" });
it doesn't work.
Thanks.
your solution should work, but lets just try this out.
$.jgrid.nav.addtext = "Add";
$.jgrid.nav.edittext = "Edit";
$.jgrid.nav.deltext = "Delete";
$.jgrid.edit.addCaption = "Add Me";
$.jgrid.edit.editCaption = "Edit Me";
you can over ride them like this, include this under your script tag before jQGrid Code, it's not tested though.

Get the title of the panel using id

I have a Ext Js panel and I want to get the Title of the panel for some purpose.
I have the id of the panel and I need to get the title of the panel from it.
I am looking for some thing like this
Ext.getCmp('myPanel').getTitle();
I am using Ext Js 3.4
Since no getTitle() method is defined for the component Ext.Panel, I would go for the property directly:
var myTitle = Ext.getCmp('myPanel').title;

How insert an input field in a table cell?

Sorry for the noob question: I want to create a table with input fields where the can add new ones, if they are needed. But I can'T figure out how add another input field inside a cell where another input field already exists.
My code is:
var par=obj.parentNode;
while(par.nodeName.toLowerCase()!='tr')
{ par=par.parentNode; }
// this gives me the index of the row.. works fine.
cell1=document.getElementById('avz_tabelle').rows[par.rowIndex].cells;
// this puts the content of the cells into the array "cell1"
var feld = cell1[1].createElement("input");
feld.setAttribute("name","avz_keywords" + avz_array + "[]");
feld.setAttribute("onblur","");
feld.setAttribute("type","text");
feld.setAttribute("size","30");
// Now I create a input element
// And now comes the problem:
cell1[1].appendChild(feld); // --> doesn't work
Has anyone a suggestion for me?
I got the idea to work without a table, theoratically that would work with my way. But that wouldn't be satisfying :/
If you look in a debugging console, you should see something like
TypeError: Object #<HTMLDivElement> has no method 'createElement'
Instead of creating the element from cell1[1], use document.createElement()
var feld = document.createElement("input");
You should use document.createElement("input"); instead of cell1[1].createElement("input");
As always (and as also stated in another answer here), the JavaScript console should be the first place to look for hints on what the problem is!
And wouldn't it actually be much easier if each table cell you want to add values to got a separate ID? Something containing perhaps the row index and the column index ... Then you could just select it directly.

Can I use a variable in JS for my html?

I have a JS file CharacterSelection where a user can select an avatar and type their name into a textarea.
Now I want to set a text div in an html file to the contents of the textarea. I will use it to display the player's name at a specific location on the screen.
I know that I can set a div to a text, such as: <div id ="statSheetExitButton">Exit</div> will show "Exit" (style and location depending on css)
I'm wondering if there is any way to put a String variable in there, since I will not know what name the player enters.
I grab the textarea's contents using var name = $("#nameTextBox").val();
I'm thinking that saying <div id ="playerName">name</div> will display the text "name".
Is there a way to accomplish my goal?
$("#nameTextBox").change(function(){
$("#playerName").html($(this).val());
});
This will attach an event handler to the textbox so everytime the name changes the div is updated.
Here is a working example. http://jsfiddle.net/2NkTb/
Please note that for the onchange event you must tab out of textbox or the textbox must lose focus
var name = $("#nameTextBox").val();
$("#playerName").html(name);
Do this:
var name = $("#nameTextBox").val();
$('#playerName').text(name);
You could do something like this which will replace the html of the tag with your JavaScript string:
$('#playerName').html(myNameVar);
Other than that, I don't think you can directly inject JavaScript variables like you would in a template language.
Try:
$('#playerName').html($("#textbo").val());
var playerName = 'John Dow'
document.getElementById('playerName').innerHTML=playerName
You need to set the property innerHTML of you div element.
$("playerName").innerHTML = name;

replace input with javascript

Hello everybody I'm trying to replace the 'text' input type to 'password' . And it works with following code :
function replaceT(obj){
var newO=document.createElement('input');
newO.setAttribute('type','password');
newO.setAttribute('name',obj.getAttribute('name'));
obj.parentNode.replaceChild(newO,obj);
newO.focus();
}
But I want to add class of my previous input to the new input and I tried something like this :
function replaceT(obj){
var newO=document.createElement('input');
newO.setAttribute('type','password');
newO.setAttribute('className' obj.getAttribute('class'));
newO.setAttribute('name',obj.getAttribute('name'));
obj.parentNode.replaceChild(newO,obj);
newO.focus();
}
What am I doing wrong, or if that is not possible, how to set the new class manually .. Thank you
This should work across all browsers:
newO.className = obj.className;
I'm not sure whether you should use className or class in setAttribute, but whatever it is, it is definitely the same as in getAttribute, so this is definitely wrong:
newO.setAttribute('className' obj.getAttribute('class'));
newO.setAttribute('className' obj.getAttribute('class'));
You are using 'className' for setting the attribute, but 'class' for getting it. Both must be 'className'.
Sorry for going in the other direction, but why do you replace the element instead of just changing its type in the first place? Than you won't need to worry about adding the same className to the new element.
Just being curious.

Categories

Resources