jqGrid - Changing the Label of a Column - javascript

I have all UI related methods in UIManager.js module, i.e. loadGrid, filterGrid, reloadGrid, clearGrid etc. I have a need of changing the Heading of a column in my App. So I wrote a function in UIManager as,
var UIManager = (function() {
"use strict";
var setGridOptions = function (options) {
var args = options;
args.$grid.jqGrid(args.options);
};
return {
setGridOptions:setGridOptions
};
})();
then I called it as,
UIManager.setGridOptions({
$grid: $grid,
options: ["setLabel", "rn", "Sample Heading"]
});
Please note that following variable was initialized before calling the UIManager.setGridOptions.
var $grid = $("#grid"); //Element.
Sadly, the UIManager.setGridOptions doesn't work. I am not sure if there is something wrong with passing the options as array or anything else.
But, if I change the UIManager.setGridOptions to the following then it works, but it looses the purpose of having a function.
var setGridOptions = function (options) {
var args = options;
args.$grid.jqGrid("setLabel", "rn", "Sample Heading");
//$grid.jqGrid(args.options);
};
Can we fix the code in the call, to use our function? Your help will be appreciated.

Related

Nested functions have no access to requirejs callback parameters

While migrating to requirejs I have run into a problem that I cannot seem to find the answer to.
The problem is that my nested functions do not have access to the parameters passed to the requirejs callback.
for example:
define(['knockout', 'knockoutmapping', 'other'], function(ko, mapping, other) {
var Something = function() {
var self = this;
self.items = ko.observableArray([]);
self.doSomeStuff = function(data) {
// I would think I would still be able to access
// parameters ko, mapping and other
// trouble is, I cannot. I only have
// a valid 1st parameter, "ko".
var d = ko.toJSON(self.items()); // this works fine
self.items(mapping.fromJS(data));// this does not work (undefined)
// do not have access to "other" either.
};
};
return {
Something: Something,
};
});
Any help with this would be appreciated. I know I could put these into variables in the callback, but that doesn't seem like the correct approach to me.
Thank you in advance.
in define, callback is first argument and it have one parameteter require function, try:
define(function(require) {
var knockout = require('knockout');
var knockoutmapping = require('knockoutmapping');
var other = require('./other');
var Something = function() {
...
};
return {
Something: Something,
};
});

how to export 2 different functions from one js file into another Js file in Protractor

Kindly help me to find the solution just wanted know how to export 2 functions into spec or in another js file. pls check my below code for ur reference. This is some agentdetails.js file. I want to call the below functions in spec(both the functions) some times i use only one
var AddAgent = function()
{
var AGP = require('D:/Automation/ServCloud/PageObjects/AgentDetailsObjects.js');
var Login = require('D:/Automation/ServCloud/Test DATA/TestData.json');
AGP.Agent.click();
AGP.AddAgentbtn.click();
AGP.Supervisor.click();
AGP.AgtSave.click();
}
module.exports = new AddAgent();
var EditAgent = function()
{
var AGP = require('D:/Automation/ServCloud/PageObjects/AgentDetailsObjects.js');
var Login = require('D:/Automation/ServCloud/Test DATA/TestData.json');
AGP.AgentEdit.click();
AGP.AgtSave.click();
browser.sleep(3000);
var alertDialog = browser.switchTo().alert(); }
module.exports = new EditAgent();
I have tried like this. (FYI - I can make this into one function and i can call it but i wanted to split into 2 functions and call both in one spec separately so that i can comment which ever is not required at times
it('Add Agent Details', function()
{
var aa = require('D:/Automation/ServCloud/Actions/AgentAction.js');
aa.AddAgent();
aa.EditAgent();
});
I don`t think it is possible,
You can do:
varr AggentFunctions = function() {
this.AddAgent = function(){
//some code
};
this.EditAgent = function(){
//some code
};
};
module.exports = AggentFunctions;
Then you can use it like this:
var agentsFuncs = require('yourAgentFile');
var agents = new agentsFuncs;
//and call what you want
agents.AddAgent();
agents.EditAgent();

"this" value that can not be converted to type Ui

I'm using Google Apps Script and I'm trying to re-use code that calls render so that I don't have to re-type everything. I'm running into an issue that seems to relate to "this" getting transformed.
Code:
function render(displayMedium, template_name) {
var js = HtmlService.createTemplateFromFile('javascript.html');
var css = HtmlService.createTemplateFromFile('stylesheet.html');
var t = HtmlService.createTemplateFromFile(template_name);
js.config = config;
css.config = config;
t.config = config;
t.appProperties = appProperties;
js.appProperties = appProperties;
t.jsBlock = js.evaluate().getContent();
t.cssBlock = css.evaluate().getContent();
displayMedium(
HtmlService
.createHtmlOutput(t.evaluate())
.setSandboxMode(HtmlService.SandboxMode.NATIVE)
};
function renderSidebar(){
var displayMedium = DocumentApp.getUi().showSidebar;
var template_name = "app.html";
render(displayMedium, template_name);
};
And when I call renderSidebar() the error I get is as follows:
[ERROR: InternalError: Method "showSidebar" was invoked with [object Object] as "this" value that can not be converted to type Ui.
Any ideas how to fix this?
It should work if you bind the function to the UI object:
var displayMedium = DocumentApp.getUi().showSidebar.bind(DocumentApp.getUi());
When you grab that function reference, then unless you do something like the above the runtime will (or might; it clearly does here) invoke the function with some other this value (depends on the API).

Code Structure with ExtJS

I'm trying to organize my ExtJS javascript a little better. I've an ExtJS object like this:
Ext.define('QBase.controller.ControlModelConfigurationController', {
extend: 'Ext.app.Controller',
views: [
'ControlModelConfiguration'
],
init: function() {
console.log('Initialized ControlModelConfigurationController');
this.control({
'#testBtn': {
click: this.loadModel
}
});
},
loadModel: function() {
console.log('Load Model....');
var conn = new Ext.data.Connection;
conn.request({
url: 'partsV10.xml',
callback: function(options, success, response)
{
if (success)
{
alert("AHHH");
var dq = Ext.DomQuery;
var xml = response.responseXML;
var nodes = dq.select('part', xml,parent);
Ext.Array.forEach(nodes,handleNode);
}
}
});
},
handleNode: function(items) {
console.log(item.name);
}
});
The posted code above is not working. Ext.Array.forEach(nodes,handleNode) causes trouble. Instead of using an anonymous function like :
...
Ext.Array.forEach(nodes,function(item) {
console.log(item)});
}
...
I'd like to extract the anonymous function as a named external one. Unfortunately I'm unable to figure out the right syntax to establish a code structure as shown above.
Meanwhile, I figured out, that putting
function handleNode(item) {
{console.log(item)}
}
at the very end of the file works. Is it possible to make the handleNode method an object - "member" of the controller?
Thanks in advance
Chris
handleNode is a member of the containing object. When loadModel is called, this contains the right object, but at the time the callback is invoked, it will not point to the one we are interested in. You can save this to the local variable self, and use it instead.
loadModel: function() {
var self = this
console.log('Load Model....');
var conn = new Ext.data.Connection;
conn.request({
url: 'partsV10.xml',
callback: function(options, success, response)
{
if (success)
{
alert("AHHH");
var dq = Ext.DomQuery;
var xml = response.responseXML;
var nodes = dq.select('part', xml,parent);
Ext.Array.forEach(nodes, self.handleNode);
}
}
});
},
The solution posted by vhallac is not entirely correct. It assumes that handleNode doesn't reference the current object through this variable. Maybe just a typo, but additionally it's not really the ExtJS way...
Whenever ExtJS provides a callback parameter, there is nearly always a scope parameter to set the value of this within the callback function.
loadModel: function() {
console.log('Load Model....');
var conn = new Ext.data.Connection;
conn.request({
url: 'partsV10.xml',
callback: function(options, success, response) {
if (success) {
alert("AHHH");
var dq = Ext.DomQuery;
var xml = response.responseXML;
var nodes = dq.select('part', xml, parent);
Ext.Array.forEach(nodes, this.handleNode, this);
}
},
scope: this
});
},
handleNode: function(node) {
// From within here you might want to call some other method.
// Won't work if you leave out the scope parameter of forEach.
this.subroutine();
}
Just like forEach uses a scope parameter, the request method uses a scope config option. This is ExtJS convention for passing around the scope. You can alternatively create an extra local variable and reference the scope from there, but in the context of ExtJS this style will feel awkward, plus (I'm pretty sure) it's a lot more bug-prone.

Javascript function objects

I edited the question so it would make more sense.
I have a function that needs a couple arguments - let's call it fc(). I am passing that function as an argument through other functions (lets call them fa() and fb()). Each of the functions that fc() passes through add an argument to fc(). How do I pass fc() to each function without having to pass fc()'s arguments separately? Below is how I want it to work.
function fa(fc){
fc.myvar=something
fb(fc)
}
function fb(fc){
fc.myothervar=something
fc()
}
function fc(){
doessomething with myvar and myothervar
}
Below is how I do it now. As I add arguments, it's getting confusing because I have to add them to preceding function(s) as well. fb() and fc() get used elsewhere and I am loosing some flexibility.
function fa(fc){
myvar=something
fb(fc,myvar)
}
function fb(fc,myvar){
myothervar=something
fc(myvar,myothervar)
}
function fc(myvar,myothervar){
doessomething with myvar and myothervar
}
Thanks for your help
Edit 3 - The code
I updated my code using JimmyP's solution. I'd be interested in Jason Bunting's non-hack solution. Remember that each of these functions are also called from other functions and events.
From the HTML page
<input type="text" class="right" dynamicSelect="../selectLists/otherchargetype.aspx,null,calcSalesTax"/>
Set event handlers when section is loaded
function setDynamicSelectElements(oSet) {
/**************************************************************************************
* Sets the event handlers for inputs with dynamic selects
**************************************************************************************/
if (oSet.dynamicSelect) {
var ySelectArgs = oSet.dynamicSelect.split(',');
with (oSet) {
onkeyup = function() { findListItem(this); };
onclick = function() { selectList(ySelectArgs[0], ySelectArgs[1], ySelectArgs[2]) }
}
}
}
onclick event builds list
function selectList(sListName, sQuery, fnFollowing) {
/**************************************************************************************
* Build a dynamic select list and set each of the events for the table elements
**************************************************************************************/
if (fnFollowing) {
fnFollowing = eval(fnFollowing)//sent text function name, eval to a function
configureSelectList.clickEvent = fnFollowing
}
var oDiv = setDiv(sListName, sQuery, 'dynamicSelect', configureSelectList); //create the div in the right place
var oSelected = event.srcElement;
if (oSelected.value) findListItem(oSelected)//highlight the selected item
}
Create the list
function setDiv(sPageName, sQuery, sClassName, fnBeforeAppend) {
/**************************************************************************************
* Creates a div and places a page in it.
**************************************************************************************/
var oSelected = event.srcElement;
var sCursor = oSelected.style.cursor; //remember this for later
var coords = getElementCoords(oSelected);
var iBorder = makeNumeric(getStyle(oSelected, 'border-width'))
var oParent = oSelected.parentNode
if (!oParent.id) oParent.id = sAutoGenIdPrefix + randomNumber()//create an ID
var oDiv = document.getElementById(oParent.id + sWindowIdSuffix)//see if the div already exists
if (!oDiv) {//if not create it and set an id we can use to find it later
oDiv = document.createElement('DIV')
oDiv.id = oParent.id + sWindowIdSuffix//give the child an id so we can reference it later
oSelected.style.cursor = 'wait'//until the thing is loaded
oDiv.className = sClassName
oDiv.style.pixelLeft = coords.x + (iBorder * 2)
oDiv.style.pixelTop = (coords.y + coords.h + (iBorder * 2))
XmlHttpPage(sPageName, oDiv, sQuery)
if (fnBeforeAppend) {
fnBeforeAppend(oDiv)
}
oParent.appendChild(oDiv)
oSelected.style.cursor = ''//until the thing is loaded//once it's loaded, set the cursor back
oDiv.style.cursor = ''
}
return oDiv;
}
Position and size the list
function configureSelectList(oDiv, fnOnClick) {
/**************************************************************************************
* Build a dynamic select list and set each of the events for the table elements
* Created in one place and moved to another so that sizing based on the cell width can
* occur without being affected by stylesheet cascades
**************************************************************************************/
if(!fnOnClick) fnOnClick=configureSelectList.clickEvent
if (!oDiv) oDiv = configureSelectList.Container;
var oTable = getDecendant('TABLE', oDiv)
document.getElementsByTagName('TABLE')[0].rows[0].cells[0].appendChild(oDiv)//append to the doc so we are style free, then move it later
if (oTable) {
for (iRow = 0; iRow < oTable.rows.length; iRow++) {
var oRow = oTable.rows[iRow]
oRow.onmouseover = function() { highlightSelection(this) };
oRow.onmouseout = function() { highlightSelection(this) };
oRow.style.cursor = 'hand';
oRow.onclick = function() { closeSelectList(0); fnOnClick ? fnOnClick() : null };
oRow.cells[0].style.whiteSpace = 'nowrap'
}
} else {
//show some kind of error
}
oDiv.style.width = (oTable.offsetWidth + 20) + "px"; //no horiz scroll bars please
oTable.mouseout = function() { closeSelectList(500) };
if (oDiv.firstChild.offsetHeight < oDiv.offsetHeight) oDiv.style.height = oDiv.firstChild.offsetHeight//make sure the list is not too big for a few of items
}
Okay, so - where to start? :) Here is the partial function to begin with, you will need this (now and in the future, if you spend a lot of time hacking JavaScript):
function partial(func /*, 0..n args */) {
var args = Array.prototype.slice.call(arguments, 1);
return function() {
var allArguments = args.concat(Array.prototype.slice.call(arguments));
return func.apply(this, allArguments);
};
}
I see a lot of things about your code that make me cringe, but since I don't have time to really critique it, and you didn't ask for it, I will suggest the following if you want to rid yourself of the hack you are currently using, and a few other things:
The setDynamicSelectElements() function
In this function, you can change this line:
onclick = function() { selectList(ySelectArgs[0], ySelectArgs[1], ySelectArgs[2]) }
To this:
onclick = function() { selectList.apply(null, ySelectArgs); }
The selectList() function
In this function, you can get rid of this code where you are using eval - don't ever use eval unless you have a good reason to do so, it is very risky (go read up on it):
if (fnFollowing) {
fnFollowing = eval(fnFollowing)
configureSelectList.clickEvent = fnFollowing
}
And use this instead:
if(fnFollowing) {
fnFollowing = window[fnFollowing]; //this will find the function in the global scope
}
Then, change this line:
var oDiv = setDiv(sListName, sQuery, 'dynamicSelect', configureSelectList);
To this:
var oDiv = setDiv(sListName, sQuery, 'dynamicSelect', partial(configureSelectListAlternate, fnFollowing));
Now, in that code I provided, I have "configureSelectListAlternate" - that is a function that is the same as "configureSelectList" but has the parameters in the reverse order - if you can reverse the order of the parameters to "configureSelectList" instead, do that, otherwise here is my version:
function configureSelectListAlternate(fnOnClick, oDiv) {
configureSelectList(oDiv, fnOnClick);
}
The configureSelectList() function
In this function, you can eliminate this line:
if(!fnOnClick) fnOnClick=configureSelectList.clickEvent
That isn't needed any longer. Now, I see something I don't understand:
if (!oDiv) oDiv = configureSelectList.Container;
I didn't see you hook that Container property on in any of the other code. Unless you need this line, you should be able to get rid of it.
The setDiv() function can stay the same.
Not too exciting, but you get the idea - your code really could use some cleanup - are you avoiding the use of a library like jQuery or MochiKit for a good reason? It would make your life a lot easier...
A function's properties are not available as variables in the local scope. You must access them as properties. So, within 'fc' you could access 'myvar' in one of two ways:
// #1
arguments.callee.myvar;
// #2
fc.myvar;
Either's fine...
Try inheritance - by passing your whatever object as an argument, you gain access to whatever variables inside, like:
function Obj (iString) { // Base object
this.string = iString;
}
var myObj = new Obj ("text");
function InheritedObj (objInstance) { // Object with Obj vars
this.subObj = objInstance;
}
var myInheritedObj = new InheritedObj (myObj);
var myVar = myInheritedObj.subObj.string;
document.write (myVar);
subObj will take the form of myObj, so you can access the variables inside.
Maybe you are looking for Partial Function Application, or possibly currying?
Here is a quote from a blog post on the difference:
Where partial application takes a function and from it builds a function which takes fewer arguments, currying builds functions which take multiple arguments by composition of functions which each take a single argument.
If possible, it would help us help you if you could simplify your example and/or provide actual JS code instead of pseudocode.

Categories