A javascript framework I wrote

Hi Guys,

So we had a few server issues over the past few days; the blog and forum is still not back yet, but the site is now running again; there are still issues to sort out, but they will get there soon

One big change that I'm working on is how elements are accessed, at the moment you can use:

Code:

$('elementId')

to access a DOM element, I'm thinking of making it:

Code:

pax.$('elementId')

So that PAX can work seamlessly alongside jQuery, scriptaculous, and so on. The alternative is to still use $(... and then have a method you can call, to enable use with those libraries.

Does anyone have an opinion on this change?

 

This is very nifty, I'll bookmark it for future use, thanks yoink!

 

@bogaurd: thanks!
@n000b: how did you go with the demo page I setup for you? Did the "handle" drag and drop work?

Now, based on feedback, I will leave the $ function as-is, but internally use pax.$, plus have a pax.compatible() function, so that you can use PAX with jQuery, and prototype, and any library that uses the "$" function, by simply calling the pax.compatible() function

The new version is due out early January; I have made some progress with the dropdown menu, plus the tree, they should both make it in the next release

 

how did you go with file handling? iframe trick?

 

Haven't had a chance to look at the drag and drop stuff yet, will do it soon.

Will you have the CSS fixed up for the next release?

 

It's still in the pipeline - I have a basic working "thingy", but I'm not happy about how it works with HTTPS, (you get a warning...). I'm not sure there is a workaround for that, but I'm going to try, before releasing it, so sorry that it's not ready yet, but I don't want to release it, and then it doesn't work...

The CSS will be quite different for the next release, and I will be using your example case, for testing it

 

Cool no worries. Take your time.

File handling feature is very important to me, so I hope you can get it right

 

Ok, I now have a working file upload, including HTTPS, and validations! Example here, and php source:.

PHP:

<?php
if( isset($_REQUEST['paxAjaxSubmit'])) {
    $submitType = "iframe";
    if( ! isset($_REQUEST['paxIframeSubmit']) ) {    //    Set the JSON header only, if it is not via the iframe
        header('Content-type: application/x-json');
        $submitType = "ajax";
    }
    print "You submitted via " . $submitType . "!, name: '" . $_REQUEST['myname'] . "', email: '" . $_REQUEST['email'] . "'";
    print "Files: ";        //    You would handle the files upload in PHP via the $_FILES array here.
    print_r( $_FILES );
} else {
?>
<div>
    Below is a form with a few fields, and dual file upload fields:<br/>
    <form name='myForm' id='myForm' action='test_form_02.php' type='multipart/form-data'>
        <label for='myname'>Name: </label><input type='text' name='myname' id='myname' value='John Smith'/><br/>
        <label for='email'>Email: </label><input type='text' name='email' id='email' value='test@test.com'/><br/>
        <label for='file_upload'>Image: </label><input type='file' id='file_upload' name='file_upload'/><br/>
        <label for='file_upload2'>Image: </label><input type='file' id='file_upload2' name='file_upload2'/><br/>
        <input type='submit' value='Submit' id='submit_button'><span id='spin'></span><br/>
    </form>
</div>

<script type="text/JavaScript" src="../pax/pax_prod.js"></script>
<script>
    pax.load.onloaded( function() {
        //    Make form submit via ajax
        pax.form.useAjaxSubmit( pax.$('myForm'), {
            submitButton: pax.$( 'submit_button' ),
            callBack: function ( xml, txt, url ) {
                alert( txt );
            }
        } );
        
        //    Add validation(s) to the form
        pax.validate.initValidation( 'myForm', {
            file_upload: { mask: 'notEmpty' }
        } );
        
    } );
</script>
<? } ?>

You will need to download the unreleased version of pax here, if you want to use it before the next release, it would actually be great if you could test it, and verify it works as you expect

 

Hi Guys,

I have released version 0.85.03 for PAXJS, the changelog is:

The CSS has been improved, but is not yet as I would like it. n000b, is an improvement, but it won't quite yet work with your CSS.

Anyway, you can all download it here:

http://paxjs.com/download.htm

-- yoink

 

does your framework support tooltip kinda thing?
something like this: http://www.walterzorn.com/tooltip/tooltip_e.htm

which supports html etc?

i searched your API, but couldnt find anything.

any suggestion?

 

No, it doesn't directly support that, (though see pax.box). I will add that as an official widget, though it won't work exactly as the one you linked (I don't like non-unobtrusive scripts).
I will let you know when I have added it. I'm thinking it will have the following configurable features:

. CSS class
. Position (North, East, South, West)
. Opacity

Any other faetures you would need / could forsee as handy?

 

things i can think of off the top of my head

- ability to set the delay before it comes visible
- transition effects
- set the delay before it dissapears
- make tooltip static once it appears, the tooltip might have its own close button

 

+1

very good idea!

 

I like those ideas, I should have a working version up by the weekend

 

can you not make the tooltip restricted to a size? (unlike your validation pop up?)

 

You will be able to specify width / height, if that's what you mean?

 

no, i meant, the size of the tooltip will depend on the content of the tooltip.
so there's no set size of width and height...

am i making sense?.... i need coffee

 

Yes, it will do that, plus you can set either the width or the height if you want

 

be interesting to see what you come up with yoink. I need to practise my javascript so i've been building a little tooltip of my own. Doubt it would come close to yours though

 

Thanks for this, extremely useful