A javascript framework I wrote

Discussion in 'Programming & Software Development' started by yoink, Oct 20, 2008.

Page 3 of 7
  1. rockuman_ex

    rockuman_ex Member

    Joined:
    Apr 3, 2002
    Messages:
    3,874
    Location:
    Brisbane
    yes, tried it from your link.
    I got nothing in firefox when submit button is clicked and the URL becomes like this
    Code:
    http://paxjs.com/test/test_form.php?myname=John+Smith&email=test%40test.com
    oh, and did u get my pm? have a look at the upload function i did on that site.

    thanks
     
    rockuman_ex, Nov 29, 2008
    #41
  2. n000b

    n000b Member

    Joined:
    Jul 4, 2002
    Messages:
    2,489
    Location:
    Melbourne
    I wanted to try out your framework on a website that I'm building but I can't get it to work.

    I included the CSS file using this line in my <head> tags:

    Code:
    <style type='text/css'>@import url( /pax/resource/css/pax_consolidated.css );</style>
    I then included your main JS file inside the <body> tags using this:

    Code:
    <script src="/pax/pax_dev.js" type="text/javascript"></script>
    And I then put this code in for a simple date picker (copied straight from your tutorial):

    Code:
    <script>pax.load.onloaded( function() {
    pax.widget.datePick.init( $('dob'), { dateFormat: 'd-m-Y' } );
} );</script>

<form name='valForm' method='post'>
    <label for='name'>Name</label><input name='name' id='name' type='text' value=''/><br/>
    <label for='dob'>Date of birth</label><input name='dob' id='dob' type='text' size='30' value=''/><br/>
</form>
    When I open the page in FireFox, I'm getting two errors in my Error Console:

    Line 54 in the second error is the first line from the code I quoted above.

    Do you know what is causing these errors and how I can fix it?

    Thanks :)

    PS. I also tried signing up to your forums but never received an activation e-mail.
     
    n000b, Nov 30, 2008
    #42
  3. Rezin

    Rezin Member

    Joined:
    Oct 27, 2002
    Messages:
    9,485
    Be aware that NoScript may have a cry about click jacking... depending on how you do it.
     
    Rezin, Nov 30, 2008
    #43
  4. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,516

    Ok, It looks as though there is an issue with the current build, your code works, if the path is adjusted accordingly, so this works on a clean download of the current build:

    Code:
    <style type='text/css'>@import url( /paxjs/pax/resource/css/pax_consolidated.css );</style>
<script src="/paxjs/pax/pax_dev.js" type="text/javascript"></script>

<script>
pax.load.onloaded( function() {
    pax.widget.datePick.init( $('dob'), { dateFormat: 'd-m-Y' } );
} );
</script>

<form name='valForm' method='post'>
    <label for='name'>Name</label><input name='name' id='name' type='text' value=''/><br/>
    <label for='dob'>Date of birth</label><input name='dob' id='dob' type='text' size='30' value=''/><br/>
</form>
    Ie: add "/paxjs" in front of all pathes to the JS and CSS files. It also appears that I need to adjust the CSS file, as no images are appearing.
    I have uploaded a temporary CSS file for you here, load that into the resource directory instead, (overwrite pax_consolidated.css), and you should be good to go :thumbup:
     
    yoink, Dec 1, 2008
    #44
  5. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,516
    Hmmm... weird - works fine for me, try clearing your cache maybe? - can anyone else get this to work?
    Edit: you should see a popup with the values you submitted...

    Cheers - there are *many* issues with ajaxForm submission, I'll have to be quite careful indeed...
     
    Last edited: Dec 1, 2008
    yoink, Dec 1, 2008
    #45
  6. rockuman_ex

    rockuman_ex Member

    Joined:
    Apr 3, 2002
    Messages:
    3,874
    Location:
    Brisbane
    yoink, confirmed on my 3 pcs and a laptop with firefox 3.04, it doesn't work (no popup).

    but my IE7 works ok

    oopss... guess IE6 doesn't work either???

    [​IMG]
    Click to view full-sized image!
    Hosted by UGBox Image Store
     
    rockuman_ex, Dec 1, 2008
    #46
  7. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,516
    Hmmmm... I dunno what to say, I can't replicate the problem, have tried 3 different machines, each with different versions of FF and IE7 and IE6...

    Are you letting it load the page completely before hitting submit? - I could add functionality to hide it until the page has loaded, if that is the problem?
     
    yoink, Dec 1, 2008
    #47
  8. MoorKhan

    MoorKhan Member

    Joined:
    Feb 16, 2004
    Messages:
    1,181
    Works fine in my firefox 3.04. Although I get the behaviour you describe if NoScript is turned on (as you would expect).

    IE6 errors on load (before form submission) with a very helpful "pax.load is null or not an object". It's possible that's just because of the multiple IE version of IE6 I'm using, but it doesn't normally have any issues.
     
    MoorKhan, Dec 1, 2008
    #48
  9. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,516
    Thanks :)
    The IE6 error is weird - I can't replicate it on my VM IE6...
    I've just updated the page to use pax_prod.js, (the minified version), can you please all try the new link here :thumbup:
     
    yoink, Dec 1, 2008
    #49
  10. MoorKhan

    MoorKhan Member

    Joined:
    Feb 16, 2004
    Messages:
    1,181
    I wouldn't stress about the IE6 error. I tested on a VM ie6 here and it works fine.

    As I mentioned above it's probably just an issue with the Multiple IE package and not your code.

    MultipleIE is really only for testing page layout. As I understand it, it uses the installed IE's js engine not the native ie6 one which sometimes causes strange errors (thats why I mentioned it above).
     
    MoorKhan, Dec 1, 2008
    #50
  11. rockuman_ex

    rockuman_ex Member

    Joined:
    Apr 3, 2002
    Messages:
    3,874
    Location:
    Brisbane
    rockuman_ex, Dec 1, 2008
    #51
  12. n000b

    n000b Member

    Joined:
    Jul 4, 2002
    Messages:
    2,489
    Location:
    Melbourne
    Nope, still couldn't get it to work :( Same errors as before.

    Edit: fixed! I had some old Scriptaculous JS code on my website, I removed that and yours works perfectly :)

    Edit 2: is there any way we can edit the templates for the existing widgets? Your CSS is conflicting with my existing CSS so I will need to specify the CSS classes used in your widgets.
     
    Last edited: Dec 1, 2008
    n000b, Dec 1, 2008
    #52
  13. Elyzion

    Elyzion Member

    Joined:
    Oct 27, 2004
    Messages:
    7,461
    Location:
    Singapore
    If your referring to http://tredosoft.com/Multiple_IE

    Multiple IE does not work with AJAX. And some IE functions cause errors. Multiple IE should not be used for testing JavaScript at all.
     
    Elyzion, Dec 1, 2008
    #53
  14. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,516
    Thanks for that :thumbup:
    That just leaves rockuman_ex, what exact version of IE6 are you using?
     
    yoink, Dec 1, 2008
    #54
  15. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,516
    Yes you can, let me know what your CSS looks like, and what is conflicting - 'm in the niddle of redesigning the CSS, so that it won'tonflict too much, so this would be great feedback, and really help me out :thumbup:
     
    yoink, Dec 1, 2008
    #55
  16. MoorKhan

    MoorKhan Member

    Joined:
    Feb 16, 2004
    Messages:
    1,181
    I said exactly that in both of my earlier posts ... quite clearly in the second one. :)

    It actually does work with AJAX, it just uses a newer JS engine with the older browser, which occassionally causes issues. Thats why I checked it under a VM as well and reported it a non-issue.

    Given that I got exactly the same error as Rockuman listed above, there's a fair chance he is testing with the same version of IE6.
     
    MoorKhan, Dec 2, 2008
    #56
  17. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,516
    Hey n000b, have you had a chance to get your CSS sorted out yet? If not, please post it, (or PM), and I'll check it out :)
     
    yoink, Dec 2, 2008
    #57
  18. n000b

    n000b Member

    Joined:
    Jul 4, 2002
    Messages:
    2,489
    Location:
    Melbourne
    Here are my two stylesheets on my website:

    http://andrew.estyles.com.au/menu.css (for the menu)
    http://andrew.estyles.com.au/styles.css (for everything else)

    And here is what my site looks like with the datepicker open (this is with your CSS file included AFTER mine, ie last):

    http://andrew.estyles.com.au/css.jpg

    Not sure why it's stuffing up the date picker navigation so much actually.

    Would it be possible if you could make the CSS not overwrite all of the default objects (body, label, fieldset etc) and just specify actual classes in your HTML?

    Also, how do I modify the templates for the existing widgets?
     
    n000b, Dec 2, 2008
    #58
  19. rockuman_ex

    rockuman_ex Member

    Joined:
    Apr 3, 2002
    Messages:
    3,874
    Location:
    Brisbane
    yep. confirmed! it's Multiple IE's version of IE's problem. Didn't know it's meant to be used for layout purpose only :lol:

    tried it on my VPC's IE6, works fine :thumbup:

    Good work yoink!! :thumbup::thumbup:
     
    rockuman_ex, Dec 2, 2008
    #59
  20. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,516
    The reason I overwrite body, label, fieldset, etc, is mainly to reset things, so that issues that you are seeing won't happen - there are still things I need to add.
    Looks like your table defintion is the issue in style.css, if you comment out lines 431 to 481, plus line 28, it works. So, you end up with:

    Code:
    /* ---------------------------------------- */
/* Generic, Body Items                		*/
/* ---------------------------------------- */
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	/* background-image: url(images/bg.gif); */
	background-color: #000000; 
	background-repeat: repeat;
	background-attachment: fixed;
}
body,td,th 
{
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 11px;
	color: #999999;
}

form
{
	display: inline;
}

table
{
	/*border-collapse: collapse;*/
}


/* ---------------------------------------- */
/* Body Navigation               			*/
/* ---------------------------------------- */

a:link 
{
	color: #ffaa00;
}
a:visited 
{
	color: #ffaa00;
}
a:hover 
{
	color: #ff0000;
	text-decoration: underline;
}
a:active 
{
	color: #ff0000;
}
a 
{
	text-decoration: none;
}

/* ---------------------------------------- */
/* Headings                					*/
/* ---------------------------------------- */

h1 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #ffaa00;
	letter-spacing: -1px;
}
h2 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #ffaa00;
	letter-spacing: -1px;
	font-style: italic;
}
h3 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #ffaa00;
	letter-spacing: -1px;
}
h4 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #ffaa00;
	letter-spacing: -1px;
}
h5 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffaa00;
}
h6 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffaa00;
}

/* ---------------------------------------- */
/* Fonts                					*/
/* ---------------------------------------- */

.warning 
{
	font-weight: bold;
	color: #ff0000;
}

/* ---------------------------------------- */
/* Layout Containers               			*/
/* ---------------------------------------- */


/* Heading Graphic */
#banner
{
	width: 100%;
	height: 100px;
	margin: 0px;
	background-color: #000000;
	background-image: url('../images/hdr_bg.gif');
	background-repeat: no-repeat;
	background-position: left;
	text-align: right;
}

/* Heading Text Container */
#pageTitle
{
	height: 24px;
	margin: 0px 0px 10px 0px;
	padding: 2px 5px 2px 45px;
	border-top: 1px solid #885c00;
	border-bottom: 1px solid #885c00;
	background-color: #222222;
}

/* Heading Text */
#pageTitle .title
{
	float: left;
	font-family: Arial, Helvetica, Serif;
	font-size: 20px;
	font-weight: bold;
	font-stretch: condensed;
	color: #ffaa00;
	width: 350px;
}

/* Heading Text Log In Controls */
#pageTitle .logoff
{
	padding: 2px 5px 2px 50px;
	border: 0px;
	text-align: right;
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 11px;
	color: #885c00;
	margin: 0px 0px 0px 600px;
}

.input 
{ 
 	background-color: #222222; 
	border: 1px solid #444444;
	color: #aaaaaa;
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 12px;
}

.inputButton
{
	background-color: #666666; 
	border: 1px solid #000000;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 11px;
	line-height: 14px;
}


/* Main Content Area */
#contentBox
{
	voice-family: "\"}\"";
	voice-family: inherit;
	margin: 0px 140px 0px 160px;
}

html>body #contentBox {
	margin-left: 160px;
	margin-right:140px;
}


/* Articles */
#article
{
	width: 100%;
	border-bottom: 1px solid #333333;
	/* border-bottom: 1px solid #885c00; */
	
}

#article .header
{
	background-color: #222222;
	padding: 2px 5px 2px 5px;
	border-top: 1px solid #885c00;
	border-bottom: 1px solid #885c00;
	font-family: Arial, Helvetica, Serif;
	font-size: 18px;
	font-weight: bold;
	font-stretch: condensed;
	color: #ffaa00;
}

#article .content
	padding: 0px 5px 5px 5px;
}

#article .content p
{
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 12px;
	color: #dddddd;
}

#article .content h3
{
	font-family: Verdana, Arial Helvetica, Serif;
	font-size: 18px;
	color: #ffaa00;
}

#article .content address
{
	text-align: right;
}

#article .content address b
{
	color: #ffaa00; 
}

/* Right Hand Column */
#rightcolumn
{
	width: 115px;
	border: 0px;
	background-color: #222222;
	padding: 5px 0px 5px 5px;
	min-height: 400px;
	
	position: absolute;
	right: 0px;
	top: 153px;
}

#rightcolumn p
{
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 11px;
	color: #999999;
}

#rightcolumn h3
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffaa00;
}

#rightcolumn ul
{
	margin-left: -20px;
}

/* Footer */
#footer
{
	margin: 0px 140px 20px 160px;
	border: 1px solid #444444;
	background-color: #000000;
	padding: 2px 5px 2px 5px;
	text-align: center;
	font-size: 11px;
	color: #aaaaaa;
	font-weight: 500;
}

/* ---------------------------------------- */
/* Other Items      	          			*/
/* ---------------------------------------- */

#divBreak
{
	width: 100%;
}


#logon
{
	width: 400px;
	margin: auto;
	margin-top: 100px;
	border-bottom: 1px solid #885c00;
	
}

#logon .header
{
	background-color: #222222;
	padding: 2px 5px 2px 5px;
	border-top: 1px solid #885c00;
	border-bottom: 1px solid #885c00;
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 18px;
	font-weight: bold;
	font-stretch: condensed;
	color: #ffaa00;
}

#logon .content .logonTable
{
	margin: auto;
	margin-top: 15px;
	margin-bottom: 15px;
}

#logon .content .logonTable .label
{
	text-align: right;
}

#logon .content .logonTable .userInput
{
	text-align: left;
}

#logon .content .logonTable .theButtons
{
	text-align: left;
}

#logon .content .logonTable .checkBox
{
	text-align: left;
	color: #888888;
}

#logonDisclaimer
{
	width: 400px;
	margin: auto;
	margin-top: 10px;
	color: #885c00;
}


#tabs
{
	width: 100%;
	
	text-align: right;
}

#tabs #breadcrumb
{
	float: left;
}

#tabnav
{
	list-style-type: none;
	
	margin: 0px 25px 0px 0px;
	padding: 0px;
	
	line-height: 18px;
}


#tabnav li
{
	width: 100px;
	
	display: inline;
	
	margin-left: 10px;
	
	background-color: #000000;
	
	
}

#tabnav li a
{
	width: 80px;
	
	border: 1px solid #885c00;
	
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 11px;
	color: #ffaa00;
	
	padding: 3px 10px 3px 10px;
	
	text-decoration: none;
}

#tabnav li a:hover
{
	color: #ffaa00;
	
	background-color: #333333;
}

#tabnav li a.tabactive
{
	background-color: #222222;
	
	border-bottom: 1px solid #222222;
}

/*
table
{
	margin: 20px;
	border: 1px solid #885c00;
}

table th
{
	background-color: #222222;
	
	border-bottom: 2px solid #885c00;
	
	text-align: left;
	padding-left: 5px;
	
	font-size: 13px;
	font-weight: bold;
	
	height: 25px;
}

table td
{
	padding-left: 5px;
	
	font-size: 11px;
}

table tr.row1
{
	background-color: #080808;
}

table tr.row2
{
	background-color: #111111;
}

table th.subheading
{
	background-color: #181818;
	
	border-bottom: 1px solid #885c00;
	
	font-size: 12px;
	font-weight: bold;
	
	height: 20px;
}
*/

.table2
{
	margin: 20px;
	
	border: 0px;
}

.table2 tr
{
	
}

.table2 th
{
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 12px;
	font-weight: bold;
	
	line-height: 20px;
	
	background-color: #222222;
	
	border: 5px solid #000000;
	
	text-align: left;
	
	padding-left: 20px;
	
	vertical-align: top;
}

.table2 td
{
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 11px;
	font-weight: normal;
}

.errorlabel
{
	color: #FF0000;
	font-weight: bold;
}


input, select
{
	width: 200px;
	height: 18px;
	
	border: 1px solid #885c00;
	
	background-color: #222222;
	
	padding-left: 5px;
	
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 12px;
	color: #DDDDDD;
}


input.submit
{	
	padding: 0px 10px 0px 10px;
	margin-left: 2px;
	
	border: 2px solid #885c00;
	
	background-color: #222222;
	
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 14px;
	color: #DDDDDD;
	font-weight: bold;
	
	width: auto;
	height: 30px;
}

input.checkbox
{
	width: 13px;
	height: 13px;
}

textarea
{
	width: 300px;
	height: 150px;
	
	border: 1px solid #885c00;
	
	background-color: #222222;
	
	padding-left: 5px;
	
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 12px;
	color: #DDDDDD;
}


.perm_list_ul0
{	
	list-style-type: none;

}


.perm_list_li0
{

}


.widgets
{
	padding: 0px;
	margin: 0px auto 25px auto;
	
	width: 450px;
}

.widgets .title
{
	background-color: #222222;
	padding: 2px 5px 2px 5px;
	border-top: 1px solid #885c00;
	border-bottom: 1px solid #885c00;
	font-family: Arial, Helvetica, Serif;
	font-size: 18px;
	font-weight: bold;
	font-stretch: condensed;
	color: #ffaa00;
	
	cursor: move;
}

.widgets .content
{
	padding: 0px 5px 5px 5px;
	
	border-bottom: 1px solid #444444;
}

.widgets .content p
{
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 12px;
	color: #dddddd;
}

.widgets .content h3
{
	font-family: Verdana, Arial Helvetica, Serif;
	font-size: 18px;
	color: #ffaa00;
}

#widgetColumn1
{
	float: left;
	
	width: 47%;
	
	padding: 0px 10px 0px 10px;
	
	min-height: 200px;
}

#widgetColumn2
{
	float: right;
	
	width: 47%;
	
	padding: 0px 10px 0px 10px;
	
	min-height: 200px;
}


.pinButton
{
	width: 80px;
	height: 80px;
	
	background-color: #777777;
	
	color: #000000;
	font-size: 30px;
	font-weight: bold;
}


.errorBox
{
	font-family: Verdana, Arial, Helvetica, Serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;

	background-color: #E89C9C;
	border: 2px solid #FF0000;

	margin: 25px auto 25px auto;
	padding: 25px 0px 25px 0px;
	
	min-height: 32px;
}

.errorTitle
{
	float: left;
	width: 32px;
	height: 32px;

	background-image: url("../../../images/important32x32.png");
	background-repeat: no-repeat;
	background-position: top left;
	
	padding: 0px;
	margin: 0px 25px 0px 25px;
}
    I would suggest you simply create a definition for your tabel, using a different class.
     
    yoink, Dec 2, 2008
    #60
Page 3 of 7

Share This Page

Advertisement: