chernikovalexey / prevel Goto Github PK

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.

It would be nice feature
Please, point me to the best way to implement it.

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.

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

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.

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.

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.

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

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.

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.

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.

Hi, good job, thank you. Android browser are supported?

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 ''

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.

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.

Using some textarea such as:

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.

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:

1. Create an html page, include prevel, and a script call to a non-existent id:

   pl('#i-do-not-exist);

2. 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.

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

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

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.

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

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.

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

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.

nvm, looks like you merged in my last pull. I'll put in another one for this.

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()

Using some textarea such as:

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.