I am newcomer to Javascript and have been tasked with migrating our product's UI from YUI2 to YUI3.
It doesn't look like there's a migration guide anywhere, so I'm browsing internet posts and the yui docs for now.
In my global scope, I've temporarily added something like var Y = YUI().use('*',function(Y){});
I've encountered a YAHOO.util.Dom.get(...) elsewhere which doesn't work with YUI3, and it looks like Y.DOM.byId(...) is the recommended migration. But, I'm getting the error that "Y.DOM" is undefined!
Whoever's using Y.DOM.(...), how did this get resolved?
I don't know where you found the idea of Y.DOM.byId
Try
var node = Y.one('#elementID');
or if you want to use classes:
var nodes = Y.all('.className');
For more information on how to get nodes in YUI3, see their documentation
EDIT:
<script>
YUI().use('node', function (Y) {
var node = Y.one('#elementID');
});
</script>
Related
I am very new to syncfusion controls for mvc. While exploring how to set dynamic datasource to grid, I came across this line of javascript code which I cannot understand. I have been through the javascript api docs for ej grid but couldn't find the meaning.
var obj = $("#Grid").ejGrid("instance");
If someone can explain the meaning and point out some reference documentation, I will be highly grateful.
The example I came across
https://help.syncfusion.com/aspnetmvc/grid/how-to
The javascript api I have been through
https://help.syncfusion.com/api/js/ejgrid#members:datasource
P.s: I know from a comment I came across that this has something to do with current instance of ej grid but I would like a solid understanding via a reference so I can understand.
From my little experience with Syncfusion controls the documentation explaining how to perform tasks is not well stated. If you have a license you can ask questions in their forum but I can tell you what little I learned perusing their forum.
In their JS 1 version
var obj = $("#Grid").ejGrid("instance");
and in their JS 2 version
var obj = document.getElementById('Grid').ej2_instances[0];
The variable obj appears to get an object reference to the grid identified by the id Grid. I am not sure what the instance value refers to other than the examples in the documentation show it and it works when it is used.
Not sure if I was much help.
In the Below code example Grid – Grid ID and you can take the Grid instance using the above code example. From the instance you can get the details regarding the column, dataSource, filterSettings, sortSettings etc currently applied to ejGrid. We have given support to customize the Grid using several public method. You can call those method by taking the Grid instance.
#(Html.EJ().Grid<EJGrid.Models.Order>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.Columns(col =>
{ col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Width(75).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(90).Add();
col.Field("Freight").HeaderText("Freight").Format("{0:c}").TextAlign(TextAlign.Right).Width(90).Add();
col.Field("ShipCity").HeaderText("Ship City").Width(90).Add();
col.Field("Child.Test").HeaderText("TEst").Format("{0:c}").Width(90).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(90).Add();
})
)
<script>
var obj = $("#Grid").ejGrid("instance");
var value = $("#colValue").val();
//Add custom parameter to the server
var query = new ej.Query().addParams("EmployeeID", value);
//Creating ejDataManager with UrlAdaptor
var dataManager = ej.DataManager({ url: "/Home/GetData", adaptor: new ej.UrlAdaptor() });
var promise = dataManager.executeQuery(query); promise.done(function (e) {
//Assign the result to the grid dataSource using "dataSource" method.
obj.dataSource(e.result);
</script>
To update the Grid, you can use dataSource() method. To call that method you need to take the Grid instance and call that method.
Refer the below API documentation for your reference
https://help.syncfusion.com/api/js/ejgrid#methods:datasource - used to update the Grid dataSource dynamically
https://help.syncfusion.com/api/js/ejgrid#members:datasource - returns the Grid dataSource.
Please get back to us if you have further queries.
XPages Dojo Data Grid and Custom REST Service
*** Note: Mine is an XPINC application!
I've managed to get the above method working, but I want to pass a parameter through to the Rest Service in order to build a better return set.
In the above example it the script looks like this:
<script>
var jsonStore = new dojo.store.JsonRest(
{target:"CURRENT_PAGE_NAME_HERE.xsp/gridData"}
);
var dataStore = dojo.data.ObjectStore({objectStore: jsonStore});
</script>
But, I want to do something like this:
<script>
var jsonStore = new dojo.store.JsonRest(
{target:"CURRENT_PAGE_NAME_HERE.xsp/gridData?OpenXpage¶1=Value1¶2=Value2"}
);
var dataStore = dojo.data.ObjectStore({objectStore: jsonStore});
</script>
I've tried a number of methods, but no success.
Method 1 - Use Request/View/SessionScope variable
On the "CURRENT_PAGE_NAME_HERE.xsp" I've added a "xp:this.beforePageLoad" event to create Scope variable to hold para1 and para2 taken from the paramValues of the URL.
I thought a simple requestScope would store them so I could pick them up when the "CURRENT_PAGE_NAME_HERE.xsp/gridData" was called. However, the Rest Service is called in the "onClientLoad" event of the page and the Scope variables don't seem to be available at this time.
Method 2 - Inline Javascript
I've also tried "${javascript:viewScope.para1;}" to pass it through:
<script>
var jsonStore = new dojo.store.JsonRest(
{target:"CURRENT_PAGE_NAME_HERE.xsp/gridData?OpenXpage¶1=${javascript:viewScope.para1;}¶2=${javascript:viewScope.para2;}"}
);
var dataStore = dojo.data.ObjectStore({objectStore: jsonStore});
</script>
This didn't work.
Method 3 - Hardcoding
I have hardcoded the values.
<script>
var jsonStore = new dojo.store.JsonRest(
{target:"CURRENT_PAGE_NAME_HERE.xsp/gridData?OpenXpage¶1=Apples¶2=Oringes"}
);
var dataStore = dojo.data.ObjectStore({objectStore: jsonStore});
</script>
This works! But, only for Apples & Oranges
I'm starting to look at using an Environment Variable to pass the values, but this just seems to be more of a hack than a solution.
Any help or guidance would be appriciated.
Dan,
You may have a couple of things to check.
First thing is that you need to use # instead of $ to avoid
evaluating the expression on page load
In some cases you cannot inject SSJS into the CSJS - if this is "evaluated" at page load time. You could be hitting this.... An easy
way to check is to create a couple of local variables and assign the
values from your SSJS. That'll make it easy to debug in the browser.
I guess you could do something like this (and then you can set a breakpoint in your browser and see if the values are as expected).
<script>
var p1 = "#{javascript:viewScope.para1;}";
var p2 = "#{javascript:viewScope.para2;}";
var jsonStore = new dojo.store.JsonRest(
{target:"CURRENT_PAGE_NAME_HERE.xsp/gridData?OpenXpage¶1=" + p1 + "¶2=" + p2}
);
var dataStore = dojo.data.ObjectStore({objectStore: jsonStore});
</script>
If this does not work then I suggest creating a script block in the beginning of your page with a simple little "getter" method for each variable (or the entire arg. string) and then use the SSJS there.
Happy coding!
/John
As this is an XPINC appplication, I felt it was safe to just use an Environment Variable.
On the view action button that calls the XPage, I write the Environment variable down onto the system. Then when I open the Xpage in the client, the Rest Service is hardwired to:
var param1:String = session.getEnvironmentString("Param!");
I still think this feels more like a hack, but with Notes, I'm getting used to it. LOL
I want to open a new tab with a gloda conversation from inside calendar code.
I receive an error from error console:
window not defined (or document not defined), depending on which of the two I use to Access tabmail:
let tabmail = window.document.getElementById("tabmail");
let tabmail = document.getElementById("tabmail");
The code works fine if the js file is included in an overlay xul-file.
But I want to use it outside of xul in my code.
Somewhere in my calendar code (in my 'addevent'), the same code throws the error.
This code is originally called from a rightclick on an email, but several layers deep into calendar code.
In MDN, I read that window is global? So what do I Need to do to add an tab?
This part works if tabmail is properly referenced:
tabmail.openTab("glodaList", {
collection: queryCollection,
message: aCollection.items[0],
title: tabTitle,
background: false
});
So how do I get a reference for tabmail?
Any help is appreciated.
after trying and looking through code for really some time before posting, it took only ca. 20 minutes to accidentally find the solution after submitting the question..
While browsing mailutils on mxr for something else, I found the solution in some function:
mail3PaneWindow = Services.wm.getMostRecentWindow("mail:3pane");
if (mail3PaneWindow) var tabmail = mail3PaneWindow.document.getElementById("tabmail");
Has anyone succeeded in using Protractor to detect an ionicPopup alert?
I've tried all the workarounds suggested here but no luck.
I need Protractor to detect the alert and check the text in the alert.
Here's the class I wrote to test that the popup exists and to ensure the text is correct in the header and body:
var TestUtilities = function(){
this.popup = element(by.css('.popup-container.popup-showing.active'));
//Tests to see if $ionicPopup.alert exists
this.popupShouldExist = function() {
expect(this.popup.isDisplayed()).toBeTruthy();
};
//Tests to see if $ionicPopup.alert contains the text provided in the argument exists in the header
this.popupContainsHeaderText = function (text) {
this.popupShouldExist();
expect(this.popup.element(by.css('.popup-head')).getText()).toMatch(text);
};
//Tests to see if $ionicPopup.alert contains the text provided in the argument exists in the body
this.popupContainsText = function (text) {
this.popupShouldExist();
expect(this.popup.element(by.css('.popup-body')).getText()).toMatch(text);
};
};
module.exports=TestUtilities;
Also check out this site for more on testing Ionic in protractor it talks about how to check to see if the popup exists: http://gonehybrid.com/how-to-write-automated-tests-for-your-ionic-app-part-3/
I've tested Ionic popups successfully by setting the popup variable as follows:
var popup = element(by.css('.popup-container.popup-showing.active'));
And in the test:
expect(popup.isDisplayed()).toBeTruthy();
Ionic Popups are just made of DOM elements, so you should be able to use normal locators to find/test them. Because they're not made of alerts, the workarounds in the issue you linked to are probably not useful.
I got it - I saw a lot of issues out there trying to do it in very complex ways, but in the end I tried this and it turns out to be this simple.
Inspect your element and find its ng-repeat value, then
var button = element(by.repeater('button in buttons')).getText()
You also need to have the browser sit out somehow for a couple seconds so it doesn't resolve to the tests while the ionic popup isn't actually there.
For that, browser.sleep(3000);
That's it! However, getting the other button in there is proving to be a little problem. var button = element(by.repeater('button in buttons')).get(0) or .get(1) return undefined is not a function.
Please accept the answer if you like it! If I figure out how to get the other button, I'll post it here.
I am learning PhoneGap for an app project and need to use the database for certain aspects, I am trying out the Nova Data framework,
https://cordova.codeplex.com/wikipage?title=How%20to%20use%20nova.data
I am trying to use my code to put together a test entity, but I am getting a db error telling me there is a missing table. The documentation does not specify that the database should be created beforehand, but I am starting to think that may be the case. Has anyone out there used the Nova framework in a project? I just need a little guidance.
Here is my code I am using to kick off the DB Context:
var DataContext = function () {
nova.data.DbContext.call(this, "HealthDb", "1.0", "Health DB", 1000000);
this.Temperatures = new nova.data.Repository(this, Temperature, "Temperatures");
};
DataContext.prototype = new nova.data.DbContext();
DataContext.constructor = DataContext;
And my entity (Temperature) :
var Temperature = function () {
nova.data.Entity.call(this);
this.Value = 101;
};
Temperature.prototype = new nova.data.Entity();
Temperature.constructor = Temperature;
It is creating an empty database with the proper name, just no tables! I am grateful for any assistance!
Thanks for using our library. I have made the html5 sqlite as a standalone library. Please get it from github.
A live demo link is also available there. And the documentation is more complete. The lib itself has also been updated and a few bugs fixed.
Thanks,
Leo
Turns out I was trying to start up the dbcontext before I defined my entity classes....
Changed the order of my js files and it works.