chernikovalexey / prevel Goto Github PK
View Code? Open in Web Editor NEWLightweight (5 Kb) all-purpose development tool (DOM, Ajax, etc).
Lightweight (5 Kb) all-purpose development tool (DOM, Ajax, etc).
This is very odd. I assume you use Build.js to build prevel-full.js, but it keeps giving me errors. First, it complains about not being able to find uglify, which I fixed in the code. Then, it apparently tries to read Build.js from ../Sources and comes up with undefined. Is it something about my environment or is it really broken implying that you use the old builder to build prevel-full.js?
Thanks,
-Herb
Setup a pl.ajax() call that returns an HTTP error, provide an error func, make the call, and the error function is never called, instead the success function is called.
Using some textarea such as:
<textarea id="foo">Default</textarea>Then running javascript code:
pl('#foo').attr({value: 'bar'}); // works
pl('#foo').attr({value: ''}); // does nothing
pl('#foo').attr({value: ' '}); // works (note single space)
When value is the empty string, instead of emptying the value, nothing happens.
Prevel has the bind() method for binding events in a cross-browser way. However, there is no similar cross-browser way to trigger events. Please evaluate if such a method should be added to prevel to support asynchronous processing and event triggering.
Hey Alexey,
I built prevel-full with node ./Build.js 1.1.2 '*' '*'
(on Ubuntu) and got a file that won't parse properly because Manipulate.js appears after several other modules in the code. Consequently, pl.fn
is undefined and a TypeError is raised. Please see if you can fix the order in the generator. For now, I'll fix it manually in my project.
Thanks,
-Herb
Lots of times when I'm setting classes I want to ensure that a class is on the element, such as setting a status message. I'm doing this currently with remove and add. I can't just add it, otherwise I get a bunch of extra of the same class in the attribute. Here's what I do now:
pl('#statusmsg').removeClass('successful').addClass('successful').text('It worked');
As this is verbose and inefficient, what I'd really like is to have a method like:
pl('#statusmsg').ensureClass('successful')
Alternatively, just make sure 'addClass()' doesn't add the class if it's already there, as in CSS I don't believe this ever does anything.
nvm, looks like you merged in my last pull. I'll put in another one for this.
If you can't reproduce it, I'll look into it further, but in my tests, I haven't found any exceptions.
Steps to reproduce:
Create an html page, include prevel, and a script call to a non-existent id:
pl('#i-do-not-exist);
Open in Internet Explorer, I tested IE9
Expected behavior:
Call doesn't do anything, but doesn't throw any errors.
Actual behavior:
Javascript error is thrown, script execution halts from thereon.
Investigation:
Culprit is the prevel code Sources/Find.js, line 156:
if(pl.browser('ie') && sets.id !== idx) {
The error results from calling "sets.id" when sets is null. A simple fix suffices:
if(pl.browser('ie') && sets && sets.id !== idx) {
I've tested this and it appears to fix the issue I had. It's up to you whether to include it or investigate further.
Prevel works great when I have a CSS selection string such as:
pl('#commentbtn').doSomething();
However sometimes I have the element already such as:
node = element.parentNode
In this case I want to use prevel functionality, such as:
pl(node).show()
However it doesn't appear there's any way to use prevel in this fashion, unless I'm missing something.
The pl().hide() and pl().show() functions work differently than in most other frameworks. Namely, they change the visibility of the elements. What this means is that not only the element but the space taken up by the element disappears.
Typically, this isn't how you want hide and show to work. Instead of changing the CSS visibility property, you want to change the display property. This means you want to change it to "none" for hiding, and back to what it was before for showing. This will leave the page layout identical, but simply have the element transparent or showing.
Suggested fix is either to change the hide and show events to use display property instead of invisibility, or alternatively to introduce new methods that work on the display property instead of the visibility property.
Some API support ajax calls where an error code is returned (for instance 500) and a json as the response which gives details regarding the error, such as a list of fields with validation errors.
The prevel Ajax library does not currently handle this case. On on error code response, the error function is called with error code and text. However the HTTP response is lost and there is no way to access it. This means APIs are not accessible that function in this way.
Prevel Core has JSON for parsing, which is good and which I'm using. However it is missing JSON stringify. Since some browsers lack it, it would be best to include it in the library. For code efficiency, it is best to not replace the function if it already exists. Here is a discussion.
http://stackoverflow.com/questions/1480393/alternatives-of-json-stringify-in-javascript
pl() event binding works for click and several other events, but most javascript events are missing. For instance, biding the onfocus and onblur events does nothing. If you define them directly via JS it works, but they are not handled by the pl framework.
Many times I'm putting .attr('value') and .attr({value: 'foo'}) on form items. A helper method would be useful such as:
.value() => .attr('value')
.value(foo) => .attr({value: 'foo'})
Consider it as it would make code dealing with form items less verbose.
Try a prevel ajax call to any URL returning HTTP error status with a null response. For instance, I tested with HTTP 501 and null response and here was the error thrown by the prevel library:
Uncaught SyntaxError: Unexpected end of input
pl.extend.JSONbase.js:2
pl.extend.ajax.c.b.onreadystatechange
If an error is returned with json content, everything works fine. However the API I am using sometimes returns HTTP 501 with null response and this poses an issue.
Try creating any ajax call with parameters:
pl.ajax({url: 'http://foo.com?bar=baz'});
ajax.call();
Checking the call in firebug, you will see that a "?" is added to the end of the output, which causes the query to fail.
Prevel should be able to handle a full url, at least for GET calls, to be compatible with many APIs.
Hi, good job, thank you. Android browser are supported?
I am new to prevel so please excuse me if I have made a mistake or misunderstand the usage.
When I tested the example ajax call it worked fine until I changed it to a GET call
trimmed down example
pl.ajax({
async: true,
url: 'index.php',
type: 'GET',
dataType: 'text',
charset: 'utf-8',
data: {
debug: 'test'
},
....
};
This results in a get call formatted like so which fails index.php&debug=test
The initial ? is missing from the parameter list
Javascript errors are thrown in ie8 with min version and also have a look at this http://stackoverflow.com/questions/7566584/adding-click-event-to-window-or-document-buggy-in-ie
Hi thanks for fixing the window issue, it seems there is a problem with also the method that creates a new element with tagname accepting attributes as second parameter in constructor , DOM module. Do below and you will know
pl("<div>",{class:"text"}).get()
which returns <div></div>
but not <div class="text"></div>
also try them on the input elements
pl("<input>",{type:"text"}).get()
which is returning ''
Try the example #2 from the ajax docs in firefox 11, the "data" field as a string instead of map appears busted:
// Example #2
pl.ajax({
url: 'prevelAjaxTests.py',
type: 'GET',
data: 'name=Abdala&id=1',
success: function(text) {
alert('Server\'s answer: ' + text);
}
});
Instead of producing the expected call, it produces a funky escaped version:
prevelAjaxTests.py?0=n&1=a&2=m&3=e&4=%3D&5=A&6=b&7=d&8=a&9=l&10=a&11=%26&12=i&13=d&14=%3D&15=1
It would be nice feature
Please, point me to the best way to implement it.
When handling an event in prevel, such as a click event, I want to find the target element that triggered the event. Unfortunately, prevel does not provide a way to find this trigger element. Instead, I must do some cross-browser javascript, such as:
function doSomething(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
}
http://www.quirksmode.org/js/events_properties.html#target
It would be more useful if prevel had a way to encapsulate this into an event object, such as:
pl(event).target()
Others relating to events would also be useful:
pl(event).keyCode()
pl(event).mouseCoords()
pl(event).mouseButton()
To dynamically set the title, prevel can be used. Normally this works fine:
pl(title).html('Test Title');
However on android phones (tested Samsung Galaxy II), it fails with DOM Exception 7. There is a workaround:
pl(title).text('Test Title');
Which works fine.
Hi,
I am pretty sure that at least part of it is broken, specifically here:
else if(a[i].pl || a[i].length && !a[i].nodeType) {
for(var k = 0; k < a[i].length; ++k)
r.push(a[i][k]);
I don't think anything will trigger the first condition, and if you are looking for pl instances, I think you want to cycle through the elements.
Rather than fumble in the dark, I thought I'd ask you what your intention is here. I'm having a really hard time adding nodes recursively, and I think that this function is responsible. Any suggestions would be greatly appreciated.
Hello, I've upgraded to the latest prevel.min.js from git, and noticed that all my ajax calls stopped working. It appears that json responses are no longer being parsed, but only returned as a string. This is even true if dataType: 'json' is explicitly passed.
Using some textarea such as:
<textarea id="foo">Default</textarea>Then running javascript code:
pl('#foo').attr({value: 'bar'}); // works
pl('#foo').attr({value: ''}); // does nothing
pl('#foo').attr({value: ' '}); // works (note single space)
When value is the empty string, instead of emptying the value, nothing happens.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.