We Keep Coding

How do I add a RadToolTip to a JQuery dynamically generated table cell text

How do I add a Radtooltip to a text that appears in a dynamically created table cell using JQuery. The Tooltip popup should show the data from the cell along with a hyperlink. This is for a table displaying issues and the tooltip is suppose to display a link taking use to a resolution page.
function GenerateProblemResoultionLinks() {
// Open up the landing page for addressing the problem.
function problemLink_Click() {
// Get the problem data from the row.
var $self = $telerik.$(this);
var oProblemData = JSON.parse(
$self.attr("data-Problem")
);
// Add the original message to the problem data.
oProblemData["problemText"] = $self
.text()
.trim();
// Convert the object back to JSON and encode it for transport.
var strProblemDataArgument = encodeURIComponent(
JSON.stringify(oProblemData) );
var strURL =
"problemresolutionpage.aspx?problemData=" +
strProblemDataArgument;
window.open(strURL, "_blank");
}
// Set up the delegated event handler.
$telerik
.$(".PROBLEMDETAILS> tbody")
.on("click", ".problemLink", problemLink_Click);
}

I resolved my problem by modifying my code as follows:
function GenerateProblemResoultionLinks() {
function problemLink_Click() {
// Get the problem data from the row.
var $self = $telerik.$(this);
var oProblemData = JSON.parse(
$self.attr("data-integrationProblem")
);
// Add the original message to the problem data.
oProblemData["problemText"] = $self
.text()
.trim();
if (oProblemData){
// Generate problem soltuion tooltip for each problem type. Needs to stay within the scope of the onclick.
switch(oProblemData.type){
case "ProblemType1":
var IDForSolution1=oProblemData.data["layoutIDT"];
var IDForSolution2 = oProblemData.data["keywordTableIDT"];
var Soltuion1Link="UpdateItem";
var Solution2Link="Add New Record";
var toolTipTMsg ="A new record may be added to the record table <br/> OR<br/> item can be updated in the item table."
var radToolTip = $find("<%= RadToolTip1.ClientID %>");
radToolTip.set_targetControl(this);
radToolTip.set_content("<p>" +toolTipTMsg +"</p>-------------------</br>" + Soltuion1Link +"<br/>"+ Soltuion2Link);
radToolTip.show();
break;
default:
break;
}
}
}
// Set up the delegated event handler.
$telerik
.$(".IMPORTEXPORTDETAILS > tbody")
.on("click", ".problemLink", problemLink_Click);
}
and I added the following as well:
<telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" runat="server" Title="Problem Solution(s)" IsClientID="true" Callout="false" RelativeTo="Element" Position="MiddleRight" ShowEvent="FromCode" Height="220" Width="300" HideEvent="LeaveToolTip">
</telerik:RadToolTip>

Can't get HTML element by id

I'm stuck trying to retrieve the selected value from a 'select' element via javascript. I can't even get the element from the DOM with either jQuery or document.getElementById().
Here is my code:
function getDropdown(headerText, options, id) {
var container = document.createElement('div');
container.setAttribute('class', 'nfvo-drop-down-container');
var dd = document.createElement('select');
$(dd).attr('id', id);
for(var val in options) {
$('<option />', {value: val, text: options[val]}).appendTo(dd);
}
if(headerText) {
var span = document.createElement('span');
span.setAttribute('class', 'panel-header');
span.appendChild(document.createTextNode(headerText));
container.appendChild(span);
}
container.appendChild(dd);
return container;
}
var dd = getDropDown('My dropdown', [1,2,3,4], 'ddID);
var e = document.getElementById('ddID');
var e2 = $('#ddID');
var e3 = $('#ddID').val();
var e4 = $('#ddID').text();
If I were to console.log these values I would get these results:
console.log(e) -> 'null'
console.log(e2) -> <Got the element>
console.log(e3) -> 'undefined'
console.log(e4) -> <Nothing, just a blank>
Any ides on what might cause this problem?
This block of code is within a '.then' function call e.g:
$.when(...).then(function(...)
<Here is the code>
);
EDIT: There was a typo in the post which have now been fixed. This is not the source of my problem.
I should also mention that I add this div to a ContentPane via the Dojo toolkit and I can see dropdown in the DOM via the inspection tool in chrome.

You won't get select box object by using document.getElementById('ddID')
since you have not added your object to any object in the document.
You will get select box object from the dd object by using dd.childNodes[1]

getDropDown creates an element with that id, puts it in a div, and then returns the div.
It never adds any of those elements to any element in the document.
Thus, when you search the document for an element with the matching id, it isn't there.

Insert text and add it to a named range for later retrieval

I am trying to write a Google Apps Script for Documents that will insert some text, and then add inserted text to a named ranged. To make sure that the inserted text is saved to a named range, I just want to select the inserted text.
Here's the code:
function insertText() {
var doc = DocumentApp.getActiveDocument();
var docUi = DocumentApp.getUi();
var cursor = doc.getCursor();
if (cursor) {
var insert = cursor.insertText('{insertedtext}');
var rangeBuilder = doc.newRange();
if (insert) {
rangeBuilder.addElement(insert);
} else {
docUi.alert('Cannot insert text here.');
}
} else {
docUi.alert('Cannot find a cursor.');
}
var savedInsert = rangeBuilder.build()
doc.addNamedRange('myInsertedText', savedInsert)
doc.setSelection(doc.getNamedRangeById('myInsertedText').getRange());
}
When I run the script, doc.setSelection(doc.getNamedRangeById('myInsertedText').getRange()); generates the following error:
TypeError: Cannot call method "getRange" of null.
Any idea of what I am doing wrong?

'myInsertedText' is actually the namedRange's name, not the id:
var namedRange = doc.addNamedRange('myInsertedText', savedInsert);
var namedRangeId = namedRange.getId();
doc.setSelection(doc.getNamedRangeById(namedRangeId).getRange());

ContextMenu using Right Click button

I need to create a ContextMenu that will only show when you right click on a label. MenuManager is where I have the list of menu on my context menu and it is on another file so what I did is initialize the MenuManager.
.MyLayerEdit.Add is the Element I created. I'm not really sure if I did the right ContextMenu function, I just copied this from the other files.
//**initialization of class MyLayerEdit
var MyLayerManager = new MyLayerEdit();
var menuManager = MenuManager.MyLayerEdit.Add;
//***Creating a class 'MyLayerEdit'
var MyLayerEdit = Class.create(){
MyLayerEdit.prototype {
initialize : function () {
this.define();
},
//**Creating ContextMenu
var ContextMenu = Class.create()
ContextMenu.prototype(element, layerNo, layerName {
this.define(element, layerNo, layerName)
},
function MyLayer(){
this.conMenu = new ContextMenu(this);
this.conMenu.call(this.conMenu, menuManager);
//***errorhandler callback
var errorHandler = function(callback){
KKC.Error.checkError(msg, ex)
}
},
Now I don't know what the next thing to do to show the context menu. Anyone know how to create a simple context menu? Using right click button?
On my Specs, its says Create a Class
var MyLayerEdit = Class.create()
and then define is as:
var MyLayerManager = new MyLayerEdit()
before I initialize MyLayerEdit to the other file and call the error method where I did.
I made an element MyLayerEdit under MenuManager in the other file.
Next is to call the show method of context menu to display it, i need to create the context menu:
var ContextMenu = Class.create()

JavaScript Node assembling

I'm trying to create a function for rendering dom elements and I seem to be getting stuck with assembling more than one dom element before appending.
I've tried this: http://jsfiddle.net/RruyA/1/
And I can't seem to wrap my image with a link.
And using appendChild() where innerHTMl is now (marked with comment in the fiddle) produces an invalid pointer error.
I have a bunch of theories on what might be going wrong, but no solution yet. Help would rock!
Here's the full code:
(function () {
"use strict";
function tag (name, attributes, contents) {
var tag = {};
tag.name = name;
tag.attributes = attributes;
tag.contents = contents
tag.create = function () {
tag.element = document.createElement(tag.name);
for (var prop in tag.attributes) {
tag.element.setAttribute(prop, tag.attributes[prop]);
}
// This is the problem:
tag.element.innerHTML = contents;
}
tag.render = function () {
document.body.appendChild(tag.element);
}
return tag;
}
var p = tag('p', {'id':'details', 'class':'red nice lovely'}, 'Once upon a time in a golden castle on a silver cloud...');
var img = tag('img', {'src':'http://miyazakihayao.blog.com/files/2010/05/castle-in-the-sky-x1.jpg', 'width': '200px', 'alt':'Golden Castle'});
img.create();
img.render();
p.create();
p.render();
var a = tag('a', {'href':'http://google.com', 'target':'_blank'}, img.element);
a.create();
a.render();
}());

Your problem is that you are attempting to add text and HTML elements in the same way. Text will work fine with innerHTML although elements will be coerced to strings, and appendChild will add HTML elements, but you would need to wrap Strings in TextNodes.
So you can choose between those types and it works fine.
// This is a solution
if (contents) {
if (contents instanceof HTMLElement) {
tag.element.appendChild(contents);
}
else {
tag.element.innerHTML = contents;
}
}