mythz / jquip Goto Github PK

Hi, I've just started using jquip and am liking it! I noticed that the way $.ajax works in jQuip is slightly different to jQuery:

from http://api.jquery.com/jQuery.ajax/ :

jQuery.ajax( url [, settings] )

url A string containing the URL to which the request is sent.

settings A set of key/value pairs that configure the Ajax request. All settings are optional.

jQuip doesn't let you supply a URL as the first argument - it has to be supplied as part of the settings object. You get a fatal error if you use the jQuery syntax.

I'm not too fussed about whether or not you want to mirror this behaviour - but if not, it would be helpful to have a note about this in the readme, saying that the accepted arguments are different to jQuery?

$isNaN should be $.isNaN.

I'm just a jQuery beginner so I'm learning from your code.

The append function doesn't take into account that setting innerHTML requires the content to be properly nested. Example:

$('table').append("<tr><td>oh no</td></tr>");

Would result in the <tr> being stripped. jQuery get's around this by setting wrappers for the innerHTML and then picking the correct element down the tree.

Here is how I'm doing it: https://github.com/jeyb/jquip/commit/5a8a4aebe9a6d6b7e239117b45c23af172cf96c4

Would you be interesting in such an addition?

http://jsfiddle.net/rFVtC/

This demonstrates that .one() does only fire once, but it loses the context of this, presumably due to the additional "wrapper" callback. More importantly, I can't get .live() to fire at all, anywhere. Can anyone post a working example?

This is probably an IE8 bug/limitation, but jQuery seems to work around it.

I'm trying to use the Chosen component with jQuip instead of jQuery. It seems to mostly work (apart from getting a 0px size initially, that I had to override manually), but mouse events don't work and generate an error, as you can see on this screenshot:

It seems that event.target is undefined for these events. Any ideas where can we get this from? Can jQuip work around this IE8 bug as jQuery does?

http://jquip.ubixar.com/ is not working

jquip.fn.not is not filtering out elements, but instead is whitelisting

Invocations of Array.prototype.slice on NodeLists blows up in IE8 at the moment with a "this" is not a javascript object

It might be useful to use strict to call out leaks and such.

The accessibility plugin for Bootstrap, developed by eBay/PayPal seems to be incompatible with jquip. The respective lines of failing code:

bootstrapaccessibilityplugin/src/js/functions.js:

      $.extend( $.expr[ ":" ], {

bootstrapaccessibilityplugin/src/js/alert.js:

    $('.close').removeAttr('aria-hidden').wrapInner('<span aria-hidden="true"></span>').append('<span class="sr-only">Close</span>')

bootstrap/src/js/modal.js:
This only happens when you trigger a modal. So far the first incompatible bootstrap part.

        var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })

bootstrap/src/js/dropdown.js:
This error happens when you trigger a dropdown.

$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))

Hopefully these could be resolved! :)

It would be awesome if the library supported CommonJS style modules and/or AMD (asynchronous module loading; preferred for web libraries I guess).

Both would make it easier to manage dependencies between modules, load dependencies on demand (or not), etc.There are many existing tools for loading, packing or serving such modules.

My GET calls were corrupted with two '?'.

We're currently evaluating jquip for our project and I was interested to find out what jquip will be doing when jquery releases 1.9 and 2.0 next year. As mentioned on their blog jQuery 2.0 will be removing IE 6/7/8 support which will require users to go with jQuery 1.9 if they need it.

I was wondering what jquip is planning to do when this happens as we're in a position where we handle analytics and monetization and every user matters even the ones stuck on ancient browsers.

Many micro libraries have cropped up in the last year, all of them claiming some level of compatibility with jQuery, but none of them actually use the jQuery variable - because they are not jQuery. Using the jQuery Identifier variable is misleading to end developers and misrepresents your project as a simple drop-in replacement for jQuery, while also tacitly implying an endorsement by jQuery and/or jQuery core developers, which is not the case. We are taking the task of exploring approaches to reduce jQuery's size very seriously (Building A Slimmer jQuery, File Size Considerations ), but I think that distributing your own library with the name "jQuery" in it will only serve to confuse users, who will only be getting something that's "mostly like" the window.jQuery they're used to - if it is indeed your intention to actually have people use jQuip. If, as you mention in the readme, you're only doing this project to "measure the demand" for "jQuery into organizing its code to be more modular," you can be assured that we're already well aware of the demand, and are investigating ways to achieve that end without slashing the functionality jQuery's users expect.

    function data(el, name, setVal){
        if (!el) return {};
        if (name && setVal){
            el.setAttribute(name, setVal);
            return null;
        }
        var o = {};
        _each(attrs(el), function(val, aName){
            if (aName.indexOf("data-") !== 0 || !val) return;
            o[aName.substr("data-".length)] = val;
        });
        if (isS(name)) return o[name];
        return o;
    } $['data'] = data;

by the above logic, you have to use this method like:

set: $.data(document.body, 'data-sample', 'sample')
get: $.data(document.body, 'sample')

which I don't think is the right way it's supposed to work.

add this lines in jquip.ajax.js:

after:
var url = o['url'], data = null;
var isPost = o['type'] == "POST" || o['type'] == "PUT";
if( o['data'] && o['processData'] && typeof o['data'] == 'object' )
data = $'formData';
.......
insert this (the o['cache'] part):
.......
if (!isPost && data) {
url += "?" + data;
data = null;
if(o['cache']===false)
url=url+"&="+(new Date().getTime());
}else(!isPost && o['cache']===false)
url=url+"?="+(new Date().getTime());
xhr.open(o['type'], url);
..........

here is my HTML form code:

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" id='files' name='file-imgs' ></input>
</form>

and here is my javascript code:

$.ajax({
	url: '/uploadImg_article',
    	type: 'POST',
   	cache: false,
    	data: new FormData($('#uploadForm')[0]),
    	processData: false,
    	contentType: 'multipart/form-data'
})

and....unfortunately , it didn't work. is there something wrong with my code ? or i just using the jquip ajax the wrong way. :/

thanks.

Calling .find() on a document fragment with multiple roots will give TypeError:undefined_method warnings. For example:

$('<p>foo</p> <p class="yo">bar</p>').find('.yo')

The issue stems from the space character between the two <p> tags. That is considered to be a Text node and doesn't provide querySelectorAll as requested on jquip.js:534.

This only gives warnings and does not break functionality. However, limiting the number of exceptions occurring inside jquip could be a good thing.

I am using WebPack to compile my JavaScript resources and alike into a single JavaScript and CSS file. Long story short; I realized how jQuery takes ~250kb of my script. Now add the unoptimized bulk of Socket.IO (300kb) and Bootstrap (you can guess it...) and you sit in my situation with this at the top of the webpack output:

Version: webpack 1.8.9
Time: 3178ms
                                 Asset       Size      Chunks             Chunk Names
  3daa08fd071dfaad35ca6f2954714881.jpg    1.09 MB              [emitted]  
  f4769f9bdb7466be65088239c12046d1.eot    20.1 kB              [emitted]  
 fa2772327f55d8198301fdb8bcfc8158.woff    23.4 kB              [emitted]  
  e18bbf611f2a2e43afc071aa2f4e1512.ttf    45.4 kB              [emitted]  
  89889688147bd7575d6327160d64e760.svg     109 kB              [emitted]  
  f7c2b4b747b1a225eb8dee034134a1b0.eot    60.8 kB              [emitted]  
97493d3f11c0a3bd5cbd959f5d19b699.woff2    56.8 kB              [emitted]  
 d9ee23d59d0e0e727b51368b458a0bff.woff    71.5 kB              [emitted]  
  706450d7bba6374ca02fe167d86685cb.ttf     122 kB              [emitted]  
  2980083682e94d33a66eef2e7d612519.svg     313 kB              [emitted]  
  2516339970d710819585f90773aebe0a.png    12.8 kB              [emitted]  
448c34a56d699c29117adc64c43affeb.woff2      18 kB              [emitted]  
  089d2e0083252f402c6b5888fe27eab4.jpg    23.4 kB              [emitted]  
  98e3f8fbdac57fef3d6d239da334e924.png    69.3 kB              [emitted]  
  60031ca76bf60b012afc26c5a96c8b67.png    14.1 kB              [emitted]  
  0f24b53179ba5959ed8227eb79b8c97b.png    21.8 kB              [emitted]  
          6e57378d03faae1b5d08-main.js     716 kB        0, 2  [emitted]  main <--------- Gulp...
           1.6e57378d03faae1b5d08-1.js     508 kB        1, 2  [emitted]  
    6e57378d03faae1b5d08-libwebpack.js    3.76 kB           2  [emitted]  libwebpack
         6e57378d03faae1b5d08-main.css     260 kB        0, 2  [emitted]  main
       6e57378d03faae1b5d08-main.0.map  106 bytes  0, 2, 0, 2  [emitted]  main, main
          6e57378d03faae1b5d08-1.1.map     555 kB        1, 2  [emitted]  
 6e57378d03faae1b5d08-libwebpack.2.map     3.8 kB           2  [emitted]  libwebpack

So I found jquip. But if you thought a step ahead, you'd realize that WebPack is ment to compile everything at once, into one thing. It does have a function to asyncronously load additional chunks - and you can see that in the above output too. It contains the entireness of HighlightJS. it is loaded conditionaly, if there is one or more <code><pre>...</pre></code> sets present.

Now, imagine I dropped jquip in and lets just assume all the plugins and bootstrap would just work... what would happen, if I was to have a client with an older browser? jquip would normally load the Sizzle.js via cdnjs. But what, if I already bundled Sizzle and would want to intercept the sizzle download and instead just require and return it from an additional chunk of data, for example?

Therefore I am proposing a feature request, pretty much. It'd be awesome if you could have people get the ability to sneakily intercept these "if not exist then download" lines with something more fitting for their system - i.e., when using RequireJS already.

I hope to use jquip in the future and I will see how far I can get bootstrap to work ontop of it. Because it would be handy to strip away ~200KB of code I'd barely ever use.

Kind regards,
Ingwie!

Using "tag.class" selectors on methods like children, siblings, etc. appear to short-circuit on matches of "tag".

Demo using jQuip:
http://jsfiddle.net/ZBTVJ/1/

Demo using jQuery:
http://jsfiddle.net/hH4yF/1/

It appears that the helper events from Jquery, dont appear to work. The jquip src references these events as if they were native, but I'm pretty sure that the Jquery does some work with them... I'll look into it some more and see if I can create a solution.

IE8's fireEvent will raise an 'Invalid Argument. ' for events that are not in its predefined list (onclick, onblur, etc.)

Fixing would require tracking events outside addEvent and bubbling them.

What are thoughts about moving the loadAsync parts out of core? It could help compatibility with those who are using other loaders and also trim some size.

I just threw jquip into my system instead of jQuery...and straight away saw a problem:

    ;$['plug']("ajax", function ($) {

This line throws an "$.plug is not defined" error. The entire code is wrapped in these lines:

/* 2 */
/***/ function(module, exports, __webpack_require__) {
    /* WEBPACK VAR INJECTION */(function($) {

    // ... snip. Jquip goes in here.

    /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(2)))
/***/ },

The __webpack_require__(2) resolves to that very module. This can, but does not have to, happen. A solution would be to replace first or second line of jquip with this:

// Original
    window['$'] = window['jquip'] = (function(){

// Replace
    var $ = window['$'] = window['jquip'] = (function(){

This way, we gain these things:

• A local reference to the object that we are building. Previously polluted $'s will be shaddowed by this one.
• We can figure out if we have module.exports present and return jquip this way, too.

At the start or end of jquip:

if(typeof module != "undefined" && typeof exports != "undefined") {
    // "return" the jquip instance.
    exports = $;
}

I am not very familiar with AMD, but the first 20 lines of jQuery show a good example on how to go about them.

For now I have to fall back to jQuery, since there is no appearant way I can monkeypatch this problem out without having to fork this project ... for one line, at most.

JQuery and most other Javascript frameworks add the X-Requested-With="'XMLHttpRequest" header to each Ajax request [1] , so it's possible to check if the request was made via Ajax on the server side.

[1] https://github.com/jquery/jquery/blob/master/src/ajax/xhr.js#L92

I just downloaded version 2.0 (cc4cff1) and tried to compute the width of some DOM elements.

Browser: Chrome 15 on Windows 7

My code:

$('a').width(20);

I've included jquip.js, jquip.events.css and jquip.css.js right before the closing body tag of a simple HTML5 page.

Expected:

All links should have width:20px

Actual result:

Uncaught TypeError: Object #<$> has no method 'css'

Seems like the reference to this.css is broken:

// jquip.css.js line 164
return this.css(type, typeof size === "string" ? size : size + "px");

Greetings,
Christoph

Create a Github Pages branch to allow live running of tests.

Move all scripts to /src folder.
Move all minimized scripts to /min folder.
Add minimizer script (I recommend Rake). Something like https://github.com/madrobby/zepto/blob/master/Rakefile.

What do you think about it?

I have been trying to compile jquip using Closure Compiler in Advanced mode simply by compiling jquip.js alone (no other plug-ins). I get a heap of warnings. Am I doing something wrong?

To re-create what I am trying to do go to:

http://closure-compiler.appspot.com/home

Run the closure compiler in ADVANCED & include the link to the raw jquip.js code:

https://raw.github.com/mythz/jquip/master/src/jquip.js

You can simply do this by adding this header to the top:

// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @output_file_name default.js
// @code_url https://raw.github.com/mythz/jquip/master/src/jquip.js
// ==/ClosureCompiler==

You will get a log of warnings like this:

23: java.lang.RuntimeException: INTERNAL COMPILER ERROR.
Please report this problem.
Unexpected variable trimLeft$$inline_78
Node(NAME trimLeft$$inline_78): https://raw.github.com/mythz/jquip/master/src/jquip.js:745:73
: function(text){ return text == null ? "" : text.toString().replace(trimLeft, "").replace(trimRight, ""); };
Parent(CALL): https://raw.github.com/mythz/jquip/master/src/jquip.js:745:49
: function(text){ return text == null ? "" : text.toString().replace(trimLeft, "").replace(trimRight, ""); };

the list of errors / warnings will go on
...

I get the same results with closure.jar

Any help would be appreciated. Thanks for all the efforts you guys are putting into jquip I think it's a great idea.

Using jQuip with colorbox () produces this error:

jQuery is not defined

because of line 875 in jquery.colorbox-1.3.18.js:

 }(jQuery, document, this));

I'm not an expert javascript programmer, so how could the colorbox jQuery plugin be modified to support swapping in jQuip?

Backbone's invocation of ajax() passes data that has been stringified.

if (!options.data && model && (method == 'create' || method == 'update')) {
  params.contentType = 'application/json';
  params.data = JSON.stringify(model.toJSON());
}

When ajax() is called, JSON.stringify is called again. This causes the string to get double encoded. For example: "{\"name\":\"ted\",\"age\":22}" Parsing that on the server turns into a string instead of an object.

I've created an example comparison between jQuery and jquip. Look at the payloads.

As for a solution, is the call to JSON.stringify necessary? It doesn't match the behavior of jQuery's ajax().