Search Results

Search found 263 results on 11 pages for 'yui'.

Page 1/11 | 1 2 3 4 5 6 7 8 9 10 11  | Next Page >

  • How to cache YUI DataSource?

    - by Matt McCormick
    I'm setting up a YUI DataTable with filtering by following the steps on the YUI site However, I am using JSON as the DataSource ResponseType. When I type in a value to filter, the request will be sent to the server again. I find this to be wasteful as all the data has already been retrieved the first time. Is there a way to cache the initial data returned and then filter only according to that data so another AJAX request does not have to be made?

    Read the article

  • YUI-css problem in IE 6 and 7

    - by cvack
    If you look at the screenshot below you can see that the right menu box in red has the wrong position in IE6 and 7: <div id="doc4" class="yui-t2"> //yui-t2 = 180px on the left <div id="bd"> <div id="yui-main"> <div class="yui-b"> <div class="yui-gc"> // yui-gc 2/3, 1/3 <div class="yui-u first">content</div> // 2/3 <div class="yui-u">right menu</div> // 1/3 </div> </div> </div> <div class="yui-b">left menu</div> // 180px </div> <div id="ft">footer</div> </div> Anyone know how I can fix this problem?

    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

  • YUI Menu rendering below "fold" on first open

    - by Flash84x
    I have a YUI menu on the bottom navigation of the screen which creates a large white space beneath it where the action list would be rendered if visible... On the first click the menu will render in that white space which requires the user to scroll to see it... on the second click however it will draw upward (ideally) so that the user does not have to scroll to see the menu... the second click also kills that block of white space... i found adding a style of display:none to the div kills the white space... but then YUI doesn't set the display to block, which from what I understood it should... so I wrote another method that would do that manually... but the same behavior happens, the menu first renders below the fold requiring the user to scroll.... 2nd time its works fine... some reason the top/left positions are not being calculated properly on the first click and i cannot seem to figure out why

    Read the article

  • Exporting data from a YUI DataTable

    - by Bears will eat you
    What's the easiest/fastest way to grab data out of a YUI DataTable and turn it into a single CSV or TSV string? I basically just want to implement a one-click way to get the entire DataTable (it should preserve the currently-applied sorting) into a form that users can paste into a spreadsheet. My DataTable can get pretty big - 5000 to 10000 rows, 5 to 10 columns - so efficiency does matter.

    Read the article

  • YUI Uploader hangs after choosing file

    - by stephenbayer
    Below is my entire code from a User control that contains the YUI Uploader. Is there something I'm missing. Right now, when I step through the javascript code in Firebug, it hangs on the first line of the upload() function. I have a breakpoint on the first line of the ashx that handles the file, but it is never called. So, it doesn't get that far. I figure I'm just missing something stupid. I've used this control many times before with no issues. I'm using all the css files and graphics provided by the samples folder in the YUI download. If I'm not missing anything, is there a more comprehensive way of debuging this issue then through stepping through the javascript with FireBug. I've tried turning the logging for YUI on and off, and never get any logs anywhere. I'm not sure where to go now. <style type="text/css"> #divFile { background-color:White; border:2px inset Ivory; height:21px; margin-left:-2px; margin-right:9px; width:125px; } </style> <ajaxToolkit:RoundedCornersExtender runat="server" Corners="All" Radius="6" ID="rceContainer" TargetControlID="pnlMMAdmin" /> <asp:Panel ID="pnlMMAdmin" runat="server" Width="100%" BackColor="Silver" ForeColor="#ffffff" Font-Bold="true" Font-Size="16px"> <div style="padding: 5px; text-align:center; width: 100%;"> <table style="width: 100% ; border: none; text-align: left;"> <tr> <td style="width: 460px; vertical-align: top;"> <!-- information panel --> <ajaxToolkit:RoundedCornersExtender runat="server" Corners="All" Radius="6" ID="RoundedCornersExtender1" TargetControlID="pnlInfo" /> <asp:Panel ID="pnlInfo" runat="server" Width="100%" BackColor="Silver" ForeColor="#ffffff" Font-Bold="true" Font-Size="16px"> <div id="infoPanel" style="padding: 5px; text-align:left; width: 100%;"> <table> <tr><td>Chart</td><td> <table><tr><td><div id="divFile" ></div></td><td><div id="uploaderContainer" style="width:60px; height:25px"></div></td></tr> <tr><td colspan="2"><div id="progressBar"></div></td></tr></table> </td></tr> </table> </div></asp:Panel> <script type="text/javascript" language="javascript"> WYSIWYG.attach('<%= txtComment.ClientID %>', full); var uploader = new YAHOO.widget.Uploader("uploaderContainer", "assets/buttonSkin.jpg"); uploader.addListener('contentReady', handleContentReady); uploader.addListener('fileSelect', onFileSelect) uploader.addListener('uploadStart', onUploadStart); uploader.addListener('uploadProgress', onUploadProgress); uploader.addListener('uploadCancel', onUploadCancel); uploader.addListener('uploadComplete', onUploadComplete); uploader.addListener('uploadCompleteData', onUploadResponse); uploader.addListener('uploadError', onUploadError); function handleContentReady() { // Allows the uploader to send log messages to trace, as well as to YAHOO.log uploader.setAllowLogging(false); // Restrict selection to a single file (that's what it is by default, // just demonstrating how). uploader.setAllowMultipleFiles(false); // New set of file filters. var ff = new Array({ description: "Images", extensions: "*.jpg;*.png;*.gif" }); // Apply new set of file filters to the uploader. uploader.setFileFilters(ff); } var fileID; function onFileSelect(event) { for (var item in event.fileList) { if (YAHOO.lang.hasOwnProperty(event.fileList, item)) { YAHOO.log(event.fileList[item].id); fileID = event.fileList[item].id; } } uploader.disable(); var filename = document.getElementById("divFile"); filename.innerHTML = event.fileList[fileID].name; var progressbar = document.getElementById("progressBar"); progressbar.innerHTML = "Please wait... Starting upload.... "; upload(fileID); } function upload(idFile) { // file hangs right here. ************************** progressBar.innerHTML = "Upload starting... "; if (idFile != null) { uploader.upload(idFile, "AdminFileUploader.ashx", "POST"); fileID = null; } } function handleClearFiles() { uploader.clearFileList(); uploader.enable(); fileID = null; var filename = document.getElementById("divFile"); filename.innerHTML = ""; var progressbar = document.getElementById("progressBar"); progressbar.innerHTML = ""; } function onUploadProgress(event) { prog = Math.round(300 * (event["bytesLoaded"] / event["bytesTotal"])); progbar = "<div style=\"background-color: #f00; height: 5px; width: " + prog + "px\"/>"; var progressbar = document.getElementById("progressBar"); progressbar.innerHTML = progbar; } function onUploadComplete(event) { uploader.clearFileList(); uploader.enable(); progbar = "<div style=\"background-color: #f00; height: 5px; width: 300px\"/>"; var progressbar = document.getElementById("progressBar"); progressbar.innerHTML = progbar; alert('File Uploaded'); } function onUploadStart(event) { alert('upload start'); } function onUploadError(event) { alert('upload error'); } function onUploadCancel(event) { alert('upload cancel'); } function onUploadResponse(event) { alert('upload response'); } </script>

    Read the article

  • Call click event on last clicked row in YUI datatable

    - by Javi
    Hello, I have a YUI datatable and I have a function which is invoked when I click on a row: ... YAHOO.keycoes.myDatatable = myDatatable; ... myDatatable.subscribe("rowClickEvent", oneventclickrow); var oneventclickrow = function( args ) { ... } I'd like to invoke the function subscribed to rowClickEvent on the row which is currently highlighted in the datatable (the row which was clicked for the last time). I've tried to do something like this: YAHOO.keycoes.myDatatable.getSelectedRows()[0].rowClickEvent() but getSelectedRows() doesn't return any row. How can I get the highlighted row in the datatable and then call the function associated with rowClickEvent? Thanks

    Read the article

  • YUI DataTable with JSON and client side filtering Data Error

    - by user316574
    Hi, I don't understand what I'm doing wrong here ! I keep getting a Data Error. But I validated the JSON and it's ok... Here is the javascript from the YUI Datatble example (slightly modified). <div class="markup"> <label for="filter">Filter by state:</label> <input type="text" id="filter" value=""> <div id="tbl"></div> -- YAHOO.util.Event.addListener(window, "load", function() { //var Ex = YAHOO.namespace('example'); var dataSource = new YAHOO.util.DataSource("jsondb/json_meta_proxy.html",{ responseType : YAHOO.util.DataSource.TYPE_JSON, responseSchema : { resultsList: "records", fields: [ {key:"idprojet"}, {key:"nomprojet"} ], metaFields: { totalRecords: "totalRecords" } }, doBeforeCallback : function (req,raw,res,cb) { // This is the filter function var data = res.results || [], filtered = [], i,l; if (req) { req = req.toLowerCase(); for (i = 0, l = data.length; i and here is the JSON data in the file "jsondb/json_meta_proxy.html" { "recordsReturned": 1, "totalRecords": 1, "startIndex": 0, "sort": "idprojet", "dir": "asc", "records": [ { "idprojet": "11256", "nomprojet": "" } ] } Many thanks for your help !!!

    Read the article

  • Rich Text Editor (YUI Simple Text Editor used) not sending data to next page

    - by Aman Chhabra
    I am using a simple text editor from YUI, but when I click submit the code in the textarea/editor is not sent to the next page. I want to be able to receive it on the subsequent page and then store it in a DB(MySql). I have wasted lot of time already. Please help. HTML FILE: <html> <head> <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.9.0/build/yahoo-dom-event/yahoo-dom-event.js&2.9.0/build/container/container_core-min.js&2.9.0/build/element/element-min.js&2.9.0/build/editor/simpleeditor-min.js"></script> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/editor/assets/skins/sam/simpleeditor.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/assets/skins/sam/skin.css"> <!-- Utility Dependencies --> <script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script src="http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js"></script> <!-- Needed for Menus, Buttons and Overlays used in the Toolbar --> <script src="http://yui.yahooapis.com/2.8.2r1/build/container/container_core-min.js"></script> <script src="http://yui.yahooapis.com/2.8.2r1/build/menu/menu-min.js"></script> <script src="http://yui.yahooapis.com/2.8.2r1/build/button/button-min.js"></script> <!-- Source file for Rich Text Editor--> <script src="http://yui.yahooapis.com/2.8.2r1/build/editor/editor-min.js"></script> <script> YAHOO.util.Event.on('submit', 'click', function() { myEditor.saveHTML(); var html = myEditor.get('element').value; }); (function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var myConfig = { height: '200px', width: '900px', dompath: true, }; myEditor = new YAHOO.widget.SimpleEditor('msgpost', myConfig); myEditor.render(); })(); </script> </head> <body class="yui-skin-sam"> <form action="submit.php" method="post"> <textarea name="msgpost" id="msgpost" cols="50" rows="10"></textarea> <input type="submit" value="Submit" onsubmit="return myDoSubmit()"/> </form> </body> </html>

    Read the article

  • Facebook Style YUI Tabs

    - by Amaç Herdagdelen
    Does anyone know how to style YUI Tabview component [1] so it will look like Facebook tabs [2]? I am using YUI 2. A very crude attempt is below (I modified the example code given in Devtacular [3]). But it does not handle the spacing between the tabs, nor the outer lines around the selected tab. http://developer.yahoo.com/yui/tabview/ http://dl.dropbox.com/u/121472/facebook_tab.jpg http://devtacular.com/articles/bkonrad/how-to-style-an-application-like-facebook/ Thanks! .yui-navset .yui-nav a { padding: 8px; background-color: #d8dfea; color: #3b5998; font-weight: bold; font-size: 12px; float: left; margin-right: 4px; text-decoration: none; cursor: hand; } .yui-navset .yui-nav a:hover { background-color: #3b5998; color: #ffffff; text-decoration: none; } .yui-navset .yui-nav .selected a { background-color: #ffffff; color: #333333; text-decoration: none; }

    Read the article

  • yui datatable inline cell editor problem

    - by Eli
    Hi, When using inline cell editor in my datatable I want to round value to 10 multiple This is my code : mydatatable.subscribe("cellDblclickEvent",datatable_DetailsCommande.onEventShowCellEditor); var onCellEdit = function(oArgs) { var oColumn=oArgs.editor.getColumn(); var column=oColumn.getKey(); var oRecord = oArgs.editor.getRecord(); var newValue=oRecord.getData(column); var row = this.getRecord(oArgs.target); // calculate the modulo n = newValue % 10; if(n!=0) { newValue=parseInt(newValue); oRecord.setData(column,eval(newValue+(10-n))); } } mydatatable.subscribe("editorSaveEvent", onCellEdit); Function result : After double clicking in cell I change value to 17 for example and I click save, I want then to have 20 in my datatable cell but I got 17. After second time double clicking in my datatable cell I obtain 20 in the inline cell editor. How to put the rounded value in my datatable cell? regards,

    Read the article

  • 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&amp;3.1.0/build/cssfonts/fonts.css&amp;3.1.0/build/cssbase/base.css"/> ... </head> ... <!--and at the end of the body tag:--> <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js&amp;3.1.1/build/oop/oop-min.js&amp;3.1.1/build/event-custom/event-custom-base-min.js&amp;3.1.1/build/event/event-base-min.js&amp;3.1.1/build/json/json-parse-min.js&amp;3.1.1/build/querystring/querystring-stringify-simple-min.js&amp;3.1.1/build/io/io-base-min.js&amp;3.1.1/build/dom/dom-base-min.js&amp;3.1.1/build/dom/selector-native-min.js&amp;3.1.1/build/dom/selector-css2-min.js&amp;3.1.1/build/node/node-base-min.js&amp;3.1.1/build/node/node-style-min.js&amp;3.1.1/build/stylesheet/stylesheet-min.js&amp;2in3.1/2.8.0/build/yui2-calendar/yui2-calendar-min.js&amp;2in3.1/2.8.0/build/yui2-yahoo/yui2-yahoo-min.js&amp;2in3.1/2.8.0/build/yui2-dom/yui2-dom-min.js&amp;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

  • YUI DataTable - Howto have just one paginator?

    - by Rollo Tomazzi
    Hello, I'm using the YUI DataTable in a Grails 1.1 project using the Grails UI plugin 1.0.2 (YUI being 2.6.1). By default, the DataTable displays 2 paginators: one above and another one below the table. Looking up the YUI API documentation, I could see that I can pass an array of YUI containers as a config parameter but - what are the names of these containers? I've tried loooking at the HTML of the page using Firebug. The ID of the divs containing the paginators are: yui-dt0-paginator0 (above) and yui-dt0-paginator1 (below). If I use them to configure the containers for the navigator, then the navigator is just not displayed at all. Here's the relevant extract of the GSP page containing the Datatable element. <div class="body"> <h1>This is the List of Control Accounts</h1> <g:if test="${flash.message}"> <div class="message">${flash.message}</div> </g:if> <div class="yui-skin-sam"> <gui:dataTable controller="controlAccount" action="enhancedListDataTableJSON" columnDefs="[ [key:'id', label:'ID'], [key:'col1', label:'Col 1', sortable: true, resizeable: true], [key:'col2', label:'Col 2', sortable: true, resizeable: true] ]" sortedBy="col1" rowsPerPage="20" paginatorConfig="[ template:'{PreviousPageLink} {PageLinks} {NextPageLink} {CurrentPageReport}', pageReportTemplate:'{totalRecords} total accounts', alwaysVisible:true, containers:'yui-dt0-paginator1' ]" rowExpansion="true" /> </div> </div> Any help? Thanks! Rollo

    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

  • How do I use SLIDE instead of FADE in a YUI Menu animation?

    - by Avry
    I'm using the following configuration for a menu that is attached to a button: var srchTypeMenuConfig = { shadow: false, effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration: .25 } }; I get a nice fade in and out for my menu when I click on the button; I'd rather have it slide in and out though. I replace YAHOO.widget.ContainerEffect.FADE with YAHOO.widget.ContainerEffect.SLIDE and the menu doesn't appear. Is there a way for me to get YUI to give me the slide effect? Here's what I've done so far: 1) Looked at the examples. 2) Looked at some effects examples from DavGlass' blog. 3) Searched the forums for 'ContainerEffect.SLIDE'. 4) Searched SO for 'ContainerEffect.SLIDE [YUI]'. I haven't found any helpful information. I suspect that I need to add something to my configuration, but I don't understand why fade would work but slide doesn't.

    Read the article

  • Comparing YUI and Ext JS

    - by Spike Williams
    I've been using Ext JS as my rich-widget toolkit for a while, but I'm thinking of moving to YUI, partly because of the less restrictive license. The component-oriented model used in YUI seems quite similar to the one that I've enjoyed so much in Ext JS, but I'm interested in how deep those similarities are. So I'm interested in feedback from people who've used both Ext JS and YUI. What is the same, and what is different? What do I lose by moving to YUI, and what do I gain?

    Read the article

  • Is it possible to have yui editor change paragraph style without selecting text?

    - by user126861
    Is it possible to change the behavior of the yui text editor so that when you make markup changes (via the toolbar bar buttons), for example changing from a paragraph to say a heading or to a list, and you dont have any text selected it assumes you mean the current block that the cursor is in So to change a paragraph to a heading rather than selecting the whole line you just place the cursor somewhere in the paragraph and select heading from the styles drop down.

    Read the article

  • Why does calling the YUI Datatable showCellEditor not display the editor?

    - by t-boy
    Clicking on the second cell (any row) in the datatable causes the cell editor to display. But, I am trying to display the cell editor from code. The code looks like the following: var firstEl = oDataTable.getFirstTdEl(rowIndex); var secondCell = oDataTable.getNextTdEl(firstEl); oDataTable.showCellEditor(secondCell); When I debug into the datatable.js code (either with a click or from the code above) it follows the same path through the showCellEditor function but the above code will not display the editor. I am using YUI version 2.8.0r4.

    Read the article

  • YUI button onclick get value

    - by Simon
    I have a a set of yui buttons generated using the standard yui html. <span class="yui-button yui-checkbox-button" id="analystbutton1"> <span class="first-child"> <button type="button" class="facetbutton" tabindex="0" id="analystbutton1-button"> Joe Bloggs </button> </span> </span> I create the buttons like so, and I then have some javascript to create the button and the listener. var analystCButton1 = new YAHOO.widget.Button("analystbutton1", { type:"checkbox", value:"BLOGGS", checked:false }); analystCButton1.on("click", onFacetClick); Finally I have the onFacetClick function var onFacetClick = function (e) { // e is the event var target = YAHOO.util.Event.getTarget(e); var button = new YAHOO.widget.Button(target); alert(button.get('type')); alert(button.get('id')); alert(button.get('value')); }; When I click on any of my buttons the first two alerts display the type and id (although not what I would expect). I cannot get the value, the alert doesn't fire, but I see no error in FireBug or the error console. alert(button.get('type')); returns push - I would expect checkbox alert(button.get('id')); returns analystbutton1-button

    Read the article

  • Incorporation of YUI 3 in rails

    - by lorefnon
    I was wondering if any effort has been made towards integration of YUI3 with rails asset pipeline. By integration, I don't just mean a couple of helpers for including the library but rather a complete integration of YUI module loader. I'll elaborate the idea in detail: Currently, developers developing modules using YUI rely on Ant tasks for concatenating the module components and wrapping them up with some associated metadata and generating target files ( and optionally minifying and running jslint). Also, when fetching the modules, the YUI loader calculates the module dependencies and generates a single file comprising of all the dependencies which havent been included already in the page. I was wondering if the whole functionality could be seamlessly integrated into the Asset pipeline of rails.

    Read the article

1 2 3 4 5 6 7 8 9 10 11  | Next Page >