Skip to main content

Posts

JQuery Templates - too much recursion

I am using jquery templates to generate a tree structure to later display as a treeview of sections and items. The structure of data looks like this, where each section has items and sections and each item can have more sections: section items item sections item sections sections section sections items ...and so on My templates then recursively call each other: <script id="my-item-tmpl" type="text/x-jquery-tmpl"> <li> <span>${text}</span> <ul> {{each sections}} {{tmpl($value) "sectionTmpl"}} {{/each}} </ul> </li> </script> <script id="my-section-tmpl" type="text/x-jquery-tmpl"> <li> <span>${text}</span> <ul> {{each items}} {{tmpl($value) "itemTmpl"}} {{/eac

Is it possible to upload file via $.ajax(options) or xhr.send(file) only?

I'm using file api and xhr2 spec. I created an uploader (backed by flash for older browsers) that was using FormData and $.ajax(options) where the FormData object with File was part of options.data object. Everything was working. Now I decided to remove FormData because of weak browser support. And I can't figure a way to upload the file other than var xhr = new XMLHttpRequest(); xhr.setRequestHeader("Cache-Control", "no-cache"); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.setRequestHeader("X-File-Name", file.name); xhr.send(file); Which doesn't return Promise that I can use in the recursion function. My code is like this : startUpload: function() { var that = this; that.recurseSend(that.queue); }, _initProgressListener: function (options, file) { var that = this; var xhr = $.ajaxSettings.xhr(); options.contentType = 'multipart/form-da

HTML5 script element - async attribute - when (and how best) to use?

Can you confirm my understanding of HTML5's <script async> attribute? Any libraries referenced by other code in the page should not specify the async attribute. For example, my script references might appropriately look like: <script src="jquery..." /> <!-- async not used - ensure that this is loaded before JQuery UI and my code --> <script src="jquery.ui..." /> <!-- async not used - ensure that this is loaded before my code --> <script src="my_code1.js" async /> <!-- async used, for page load performance --> <script src="my_code2.js" async /> <!-- async used, for page load performance --> For any code in a $(document).ready(function () { } block, I can be assured that all async script have already loaded. Do I have this right? Source: Tips4all

problem in file upload

I have the following markup: <select multiple="multiple" id="targetFilesList" style="width:200px;height:110px;"> </select> <input type="button" value="Get" id="btnGet" /> and following javascript: $(function() { $('#btnGet').click(function() { var fileupload = $("<input type='file' name='filetoupload' style='visibility:hidden;'/>"); $('body').append(fileupload); fileupload[0].onchange = function() { $('#targetFilesList').append('<option >' + fileupload.val() + '</option>'); return false; } fileupload.click(); }); }); Scenario is that i have to upload multiple files and once user has chosen the file to be uploaded i have to show the file name to user.Then,on submitting the

How to send FormData objects with Ajax-requests in jQuery?

The XMLHttpRequest Level 2 standard (still a working draft) defines the FormData interface. This interface enables appending File objects to XHR-requests (Ajax-requests). Btw, this is a new feature - in the past, the "hidden-iframe-trick" was used (read about that in my other question ). This is how it works (example): var xhr = new XMLHttpRequest(), fd = new FormData(); fd.append( 'file', input.files[0] ); xhr.open( 'POST', 'http://example.com/script.php', true ); xhr.onreadystatechange = handler; xhr.send( fd ); where input is a <input type="file"> field, and handler is the success-handler for the Ajax-request. This works beautifully in all browsers (again, except IE). Now, I would like to make this functionality work with jQuery. I tried this: var fd = new FormData(); fd.append( 'file', input.files[0] ); $.post( 'http://example.com/script.php', fd, handler ); Unfortunately, that won't w

JQGRID: any easy way to implement undo on excel like jqGrid implementation

Just to give little update before putting my question.... I've been able to come up with some additional features on the jqgrid that I'm using (after going through many forums) including: copy-paste back and forth from Excel to jqgrid, edit cell on keypress and dblclick, copy and paste multiple cells from one block to another on the same grid using mouse selection (from here Using Javascript to 'sum selected cells' in IE6 ) Most of the copy paste features works on IE only as of now. I save all the changes together on "Save" button click so all the updates on the cells are on screen only until user hits the "Save" button. Although, things are still in flux right now, I'd like to have the implementation design on paper now than later. I'm looking for an easy way to UNDO only the LAST change. I've been thinking of using jQuery's "data()" and "removeData()" methods to implement this but if there is anything al