yui2 - Developer IT

YUI Calendar: Skinning and CSS

- by dound

I'm using YUI 2's calendar in YUI 3. I want to make a few minor changes to the default sam skin. What is the best way to do that? Also, how does it load Sam's skin CSS? I didn't manually include it (though it seems like I should so the user can download it in the one request I make to the combo loader for css?). This is how I'm loading the CSS and JS now: <head> ... <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.0/build/cssreset/reset.css&3.1.0/build/cssfonts/fonts.css&3.1.0/build/cssbase/base.css"/> ... </head> ...  <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js&3.1.1/build/oop/oop-min.js&3.1.1/build/event-custom/event-custom-base-min.js&3.1.1/build/event/event-base-min.js&3.1.1/build/json/json-parse-min.js&3.1.1/build/querystring/querystring-stringify-simple-min.js&3.1.1/build/io/io-base-min.js&3.1.1/build/dom/dom-base-min.js&3.1.1/build/dom/selector-native-min.js&3.1.1/build/dom/selector-css2-min.js&3.1.1/build/node/node-base-min.js&3.1.1/build/node/node-style-min.js&3.1.1/build/stylesheet/stylesheet-min.js&2in3.1/2.8.0/build/yui2-calendar/yui2-calendar-min.js&2in3.1/2.8.0/build/yui2-yahoo/yui2-yahoo-min.js&2in3.1/2.8.0/build/yui2-dom/yui2-dom-min.js&2in3.1/2.8.0/build/yui2-event/yui2-event-min.js"></script> <script type="text/javascript">//<![CDATA[ YUI().use('yui2-calendar', function(Y) { var YAHOO = Y.YUI2; var cal = new YAHOO.widget.Calendar("cal",{navigator:true,mindate:'1/1/2000'); cal.render(); // ... The main problem I'm having is that it seems to dynamically load the Sam's skin, so any CSS I specify in my stylesheet or in the <head> section seem to be overridden. I can modify the style by getting the nodes and using YUI's Node.setStyle() method, but this doesn't seem like the best way to do things. Note: The script does include more than I need for just YUI 2's calendar, but that's because I use YUI 3 for other things irrelevant to this question.

Read the article

How can I find the checked rows in a YUI DataTable?

- by Justin Tanner

I'm using a YUI DataTable with a checkbox column like this: var myColumnDefs = [ {key:"check", label:'', formatter:"checkbox"}, {other columns...} ]; How can I iterate over all the rows that have been checked?

Read the article

YUI Calendar: how does it load the Sam's Skin CSS?

- by dound

I'm using YUI 2's calendar in YUI 3. How does it load Sam's skin CSS? I didn't manually include it (though it seems like I should so the user can download it in the one request I make to the combo loader for css). Strangely, I don't see it being downloaded nor do I see it in the JS files themselves. I must be overlooking it. This is how I'm loading the CSS and JS now: <head> ... <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.0/build/cssreset/reset.css&3.1.0/build/cssfonts/fonts.css&3.1.0/build/cssbase/base.css"/> ... </head> ...  <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js&3.1.1/build/oop/oop-min.js&3.1.1/build/event-custom/event-custom-base-min.js&3.1.1/build/event/event-base-min.js&3.1.1/build/json/json-parse-min.js&3.1.1/build/querystring/querystring-stringify-simple-min.js&3.1.1/build/io/io-base-min.js&3.1.1/build/dom/dom-base-min.js&3.1.1/build/dom/selector-native-min.js&3.1.1/build/dom/selector-css2-min.js&3.1.1/build/node/node-base-min.js&3.1.1/build/node/node-style-min.js&3.1.1/build/stylesheet/stylesheet-min.js&2in3.1/2.8.0/build/yui2-calendar/yui2-calendar-min.js&2in3.1/2.8.0/build/yui2-yahoo/yui2-yahoo-min.js&2in3.1/2.8.0/build/yui2-dom/yui2-dom-min.js&2in3.1/2.8.0/build/yui2-event/yui2-event-min.js"></script> <script type="text/javascript">//<![CDATA[ YUI().use('yui2-calendar', function(Y) { var YAHOO = Y.YUI2; var cal = new YAHOO.widget.Calendar("cal",{navigator:true,mindate:'1/1/2000'); cal.render(); // ... Edit: I want to make a few minor changes to the default sam skin. What is the best way to do that? I answered this part of my question. If I wrap the calendar in an extra div, then specifying CSS rules which include that div as part of the selector makes the rule more specific so the browser uses it over Sam's skin. Rough example: <style type="text/css"> .magic .yui-skin-sam .yui-calendar td.calcell { height: 10em; width: 15em; } </style> ... <div class="magic"> <div class="yui-skin-sam"> <div id="cal"></div> </div> </div>

Read the article

How do I set YUI2 paginator to select a page other than the first page?

- by Jeremy Weathers

I have a YUI DataTable (YUI 2.8.0r4) with AJAX pagination. Each row in the table links to a details/editing page and I want to link from that details page back to the list page that includes the record from the details page. So I have to a) offset the AJAX data correctly and b) tell YAHOO.widget.Paginator which page to select. According to my reading of the YUI API docs, I have to pass in the initialPage configuration option. I've attempted this, but it doesn't take (the data from AJAX is correctly offset, but the paginator thinks I'm on page 1, so clicking "next" takes me from e.g. page 6 to page 2. What am I not doing (or doing wrong)? Here's my DataTable building code: (function() { var columns = [ {key: "retailer", label: "Retailer", sortable: false, width: 80}, {key: "publisher", label: "Publisher", sortable: false, width: 300}, {key: "description", label: "Description", sortable: false, width: 300} ]; var source = new YAHOO.util.DataSource("/sales_data.json?"); source.responseType = YAHOO.util.DataSource.TYPE_JSON; source.responseSchema = { resultsList: "records", fields: [ {key: "url"}, {key: "retailer"}, {key: "publisher"}, {key: "description"} ], metaFields: { totalRecords: "totalRecords" } }; var LoadingDT = function(div, cols, src, opts) { LoadingDT.superclass.constructor.call( this, div, cols, src, opts); // hide the message tbody this._elMsgTbody.style.display = "none"; }; YAHOO.extend(LoadingDT, YAHOO.widget.DataTable, { showTableMessage: function(msg) { $('sales_table_overlay').clonePosition($('sales_table').down('table')). show(); }, hideTableMessage: function() { $('sales_table_overlay').hide(); } }); var table = new LoadingDT("sales_table", columns, source, { initialRequest: "startIndex=125&results=25", dynamicData: true, paginator: new YAHOO.widget.Paginator({rowsPerPage: 25, initialPage: 6}) }); table.handleDataReturnPayload = function(oRequest, oResponse, oPayload) { oPayload.totalRecords = oResponse.meta.totalRecords; return oPayload; }; })();

Read the article

YUI: ensuring DOM elements and scripts are ready

- by dound

If I put my inline script after the DOM elements it interacts with, should I still use YUI 3's domready event? I haven't noticed any problems, and it seems like I can count on the browser loading the page sequentially. (I already use YUI().use('node', ... to make sure the YUI functions I need have been loaded since the YUI script is a separate file.) Is there a way to speed up the loading of widgets like YUI 2's calendar? I load the appropriate script in <head> element of my page. I use YUI().use('yui2-calendar', ... to make sure the Calendar widget is available. Unfortunately, this causes a short but noticeable delay when I load my page with the calendar. If I omit the YUI().use('yui2-calendar', ... code then it shows up without a noticeable delay - but I guess this could cause the Calendar to not show up at all if the YUI script doesn't load in time? With regards to #2, is it possible to reduce the visual artifact of the calendar not being present and then showing up? I've made it slightly better by specifying a height and width for the parent div so that at least the space is already allocated = minimal shifting around when it does load.

Read the article

Can YUIs DataTable do inline cell editing with auto completion?

- by Justin Tanner

I'm trying to get YUIs DataTable to work using Inline Cell Editing that can Auto Complete. In this thread: http://yuilibrary.com/projects/yui2/ticket/2528064 Somebody provides a non-working solution, that seems close. Has anybody tried to get this to work?

Read the article

Problems crossing the boundary between protected greasemonkey execution space and the unsafeWindow l

- by Chilly

Hi guys. Here is my problem: I've registered some callbacks into a Yahoo event driven webpage (betfair.com market views) and am trapping the betsPlaced events with a handler. So far so simple. Next stage is to get the event back into greasemonkey land, and while I know that from greasemoney space you can call unsafeWindow.stuff, there is no reverse operation (by design). So if I want to send the contents of the event over, say, a cometd queue, my carefully set up jquery, greasemonkey, YUI2, betfair environment fails by telling me that unsafeWindow processes cant call GM_ajax stuff. This is obviously safe and sane, but it basically stops me doing what I want to do. Has anyone tried doing this (ignore the cometd stuff, just general ajax calls) and succeeded? I've had a look at pages like this: http://wiki.greasespot.net/0.7.20080121.0%2B_compatibility but it doesnt appear to work for all the calls.

Read the article

Using cellUpdateEvent with YUI DataTable and JSON DataSource

- by Rob Hruska

I'm working with a UI that has a (YUI2) JSON DataSource that's being used to populate a DataTable. What I would like to do is, when a value in the table gets updated, perform a simple animation on the cell whose value changed. Here are some relevant snippets of code: var columns = [ {key: 'foo'}, {key: 'bar'}, {key: 'baz'} ]; var dataSource = new YAHOO.util.DataSource('/someUrl'); dataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; dataSource.connXhrMode = 'queueRequests'; dataSource.responseSchema = { resultsList: 'results', fields: [ {key: 'foo'}, {key: 'bar'}, {key: 'baz'} ] }; var dataTable = new YAHOO.widget.DataTable('container', columns, dataSource); var callback = function() { success: dataTable.onDataReturnReplaceRows, failure: function() { // error handling code }, scope: dataTable }; dataSource.setInterval(1000, null, callback); And here's what I'd like to do with it: dataTable.subscribe('cellUpdateEvent', function(record, column, oldData) { var td = dataTable.getTdEl({record: record, column: column}); YAHOO.util.Dom.setStyle(td, 'backgroundColor', '#ffff00'); var animation = new YAHOO.util.ColorAnim(td, { backgroundColor: { to: '#ffffff'; } }); animation.animate(); }; However, it doesn't seem like using cellUpdateEvent works. Does a cell that's updated as a result of the setInterval callback even fire a cellUpdateEvent? It may be that I don't fully understand what's going on under the hood with DataTable. Perhaps the whole table is being redrawn every time the data is queried, so it doesn't know or care about changes to individual cells?. Is the solution to write my own specific function to replace onDataReturnReplaceRows? Could someone enlighten me on how I might go about accomplishing this? Edit: After digging through datatable-debug.js, it looks like onDataReturnReplaceRows won't fire the cellUpdateEvent. It calls reset() on the RecordSet that's backing the DataTable, which deletes all of the rows; it then re-populates the table with fresh data. I tried changing it to use onDataReturnUpdateRows, but that doesn't seem to work either.

Read the article

typeahead.js remote with subset matching

- by rebelde

Instead of returning to the server after each additional letter is typed, I want it to only go to the server once, get all matching words, and filter the downloaded data after that. We are having trouble making this work. We are successfully using "remote" to wait until two letters are typed, but we can't get it to stop going to the server as additional letters are typed. Steps: 1. After two letters are typed, retrieve all matching words that start with those two letters. 2. When a third and additional letters are typed, don't go to the server again, just filter from the previous list that was sent. An example: "mo" is typed in. All 100 words that start with "mo" are returned. (Only 10 are shown.) "mor" - now with a third letter, we don't go back to the server. We just find the 20 words that match from within the previous set of words. Can anybody make this work? In real life (using YUI2), we do this and then go back to the server if somebody types in a space after the word. At that point, we know to retrieve additional words. Thanks!

Developer IT