HTML5 form validation w jQuery ajax POST

a simple impl of a web form that uses built-in HTML5 validation, but submits the form using ajax, inside a jQuery click-event handler, instead of the default HTTP post request vis a vis the form tag.

See the Pen HTML5 form validation w jQuery ajax POST by Nick Humphrey (@nickleus) on CodePen.

jquery reusable handler function for event binding n how to send an array of eventData parameters/arguments for dynamic inline ckeditor instances

today i learned how to write reusable jquery handler functions for event binding n how to send an array of eventData parameters/arguments to the handler n how to extract them in the handler.

the context for this was to optimise code reuse for dynamic, inline ckeditor instances, to make them initialized/editable on doubleclick/dblclick, instead of the default single click.

what i'll show u further down is an improvement on this original, user-written ckeditor code i started out with:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// note: this block is inside "document ready" var ed = { init: function () { ed.wysiwyg(); }, wysiwyg: function () { $(".ckeditorInline") .on("dblclick", function (e) { e.preventDefault(); e.stopPropagation(); $(this).attr("contenteditable", "true"); CKEDITOR.inline(this); // "Turns a DOM element with the contenteditable attribute set to true into a CKEditor instance" $(this).focus(); // makes the toolbar popup after a double click. (you'd think it would b click(), but not in this case) }); } }; ed.init();

n when i needed to initialize a dynamic ckeditor instance i had to duplicate some of the code, like this:

1 2 3 4 5 6 7 8 9 10

// inside some other function // ... item.find(".ckeditorInline").on("dblclick", function (e) { e.preventDefault(); e.stopPropagation(); $(this).attr("contenteditable", "true"); CKEDITOR.inline(this); $(this).focus(); }); // ...

not very effective, right?

here's how i improved it, as described up top:

1 2 3 4 5 6 7 8 9 10

var bindDblclickToCkeditorInline = function(event) { event.preventDefault(); event.stopPropagation(); $(this).attr("contenteditable", "true"); CKEDITOR.inline(this); $(this).focus(); console.log(event.data); // print the eventData array param }; $(".ckeditorInline").dblclick(["existing ckeditor instance on pageload", "a second param"], bindDblclickToCkeditorInline);

n now when i need to initialize a dynamic ckeditor instance i can reuse the code w a simple one-liner, like this:

1 2 3 4

// inside some other function // ... item.find(".ckeditorInline").dblclick(["dynamic ckeditor instance", "a different param"], bindDblclickToCkeditorInline); // ...

cool, huh?

i got this idea while reading the jquery dblclick() api page.



UPDATE 20150930

after writing this post yesterday i discovered an extremely useful piece of information regarding jquery binding, so that i don't even need that one-liner to manually bind dynamically added DOM elements: "binding way up the DOM tree".

the only change needed is to line 10 above:

10	$(".ckeditorInline").dblclick(["existing ckeditor instance on pageload", "a second param"], bindDblclickToCkeditorInline);

change it to this and u won't need to do anything extra for dynamically added elements (i.e. code block #4 on this page is now unnecessary!):

10	$("body").on("dblclick", ".ckeditorInline", ["existing ckeditor instance on pageload", "a second param"], bindDblclickToCkeditorInline);

###

i used hilite.me for source code highlighting:

hilite.me converts your code snippets into pretty-printed HTML format, easily embeddable into blog posts, emails and websites.

[SOLVED] dynamically created jquery-ui ".resizable" div not resizing

i have jquery code inside a document.ready function that initializes all existing ".resizable" divs with a list of options n custom event listener functions
here's how i was able to add a dynamic jquery-ui resizable div to the HTML DOM n initialize it so it's immediately resizable AND has the same options config that the pre-existing resizable divs got in the main document.ready resizable declaration:

below is a jquery method  where i create a dynamic div (elem), with an inner div w class "resizable ui-resizable" that i want to initialize as "resizable":

$(".selector").on("someevent", function(){
  ...
  // the dynamic div, elem, gets a "resizable" child div
  elem.html('<div class="resizable ui-resizable"><p>dynamic, resizable div</p></div>');
  ...

  // get the resizable options(+event functions: create, start, stop, resize)
  var options = $( ".resizable" ).resizable( "option" );
  // get the elem div's inner "resizable" div
  var resizeElem = elem.find('.resizable');
  // initialize it w the options declared elsewhere in the document.ready script--we don't need to write double code
  resizeElem.resizable(options);
  // this last part was key to get it working--u have to get the instance, then initialize THAT w the options TOO!
  var resizeInst = resizeElem.resizable("instance");
  resizeInst.option( options );

}

[SOLVED] installing Node.js: npm not found: Mac OS X Installer (.pkg) Universal

i wanted to test out Node.js, so i downloaded the Mac OS X Installer (.pkg) Universal (specifically, node-v0.12.7), n the installation completed fine, n it said that node n npm were installed here:

/usr/local/bin/node

/usr/local/bin/npm

and PATH contains that path:

echo $PATH

output:

/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin...

but when i try updating npm:

sudo npm update -g npm

i get:

sudo: npm: command not found

and "ls" confirms that it isn't installed:

sudo ls -la /usr/local/bin

output:

...

lrwxr-xr-x   1 nick  admin        32 May  2  2014 mvnyjp -> ../Cellar/maven/3.2.1/bin/mvnyjp

-rwxr-xr-x   1 root  admin  36046288 Jul 10 00:51 node

lrwxr-xr-x   1 root  admin        45 May 12 15:40 protractor -> ../lib/node_modules/protractor/bin/protractor

-rwxr--r--   1 nick  staff      2757 Mar  2 12:11 pstorm

...

Chris Barber reports that /usr/local/bin/npm should be a symlink to /usr/local/lib/node_modules/npm/bin/npm-cli.js

i can run npm through node:

node /usr/local/lib/node_modules/npm/bin/npm-cli.js -v

outputs:

2.11.3

"ls"-ing "lib":

ls -la /usr/local/lib

shows a curious ownership/permission setting for "node_modules" directory:

drwxr-xr-x   6 24561  wheel     204 May 18 09:57 node_modules

to fix this, the solution seems to be as simple as creating that symlink:

sudo ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm

i tried updating npm again:

sudo npm update -g npm

this time it outputs:

/usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js

npm@2.13.0 /usr/local/lib/node_modules/npm

:)

php add conditional html tag parameter: example how to avoid having to escape quotes w complex (curly) variable parsing syntax

i have a php/html application where i want to add a conditional html tag "title" attribute if a value for "email" exists.

the trouble people usually run into is the escaping of single and/or double quotes, but if u use php's "complex (curly) variable parsing syntax", then u don't have to escape any quotes at all (generally):

<a href="#" <? if($this->data['email'] != '') echo " title='{$this->data['email']}'" ?>>Email</a>

so if "email" is set, then the rendered output for the tag will look like this:
<a href="#" title='example@example.com'>Email</a>

the "title" attribute will most likely be rendered with double quotes (""), not single (''), but for purposes of illustration, i'm showing u the relationship between the php code and the rendered output.

fyi, the "simple syntax" way is like this:
<a href="#" <? if($this->data['email'] != '') echo ' title="'.$this->data['email'].'"' ?>>Email</a>

(gives identical output as "complex" syntax)

ckeditor how to add custom icon button image to toolbar: CKEDITOR.getUrl()

i've built a custom ckeditor toolbar dropdown menu, but i was struggling to find out how to add a custom pilcrow icon for the dropdown, until i found this:
http://blog.ale-re.net/2010/07/custom-icon-in-ckeditor-toolbar.html

so here's how i got it to work:

editor.ui.add( 'MyParagraphDropdown', CKEDITOR.UI_MENUBUTTON, {

    label: 'Paragraph styling',
    icon: CKEDITOR.getUrl('../../images/pilcrow.png'),
    onMenu: function() {
        var active = {};
        // Make all items active.        

        for ( var p in items )
            active[ p ] = CKEDITOR.TRISTATE_OFF;

        return active;
    }
} );

here's the pilcrow ( ¶ ) glyph icon button image i created (png w transparent background); 16x16 (font color [dark grey]: 494949):

and here's what it looks like in the ckeditor toolbar:

how to escape tag name in document selector inside javascript onclick return confirm which also contains php values

i wanted to display another tag value inside an onclick return confirm message that also contained php code, so it was a challenge to figure out how to escape all the single quote and double quotes variables. this one gave me a run for my money, but here's the example code that finally works:

...
<input type="text" name="newString">
<button type="submit" onclick="return confirm('Change [ <?= $this->oldString ?> ] to [ '+document.getElementsByName('newString')[0].value+' ]?')">change string</button>
...

phpstorm automatically select/show current/selected/open file in project list, like eclipse's "linking the Project Explorer view to the active editor"

when i select a file in the phpstorm editor view, i want to automatically see where it is in the project view list.

here's how you do it (in mac osx):
* make sure the project view is visible: cmd+1 or View > Tool Windows > Project
* click the settings icon (cog wheel) in the project view > select Autoscroll from Source

references:
PhpStorm 8.0.2 Help/Project Tool Window

Autoscroll from Source

"If this option is on, PhpStorm automatically navigates from a file in the editor to the corresponding node (file, class, field, method, etc.) in the Project tool window."

PHPstorm project navigation

mac norwegian keyboard curly braces brackets shortcut

alt+shift+8:
left curly bracket, {

alt+shift+9:
left curly bracket, }

do you close an html link tag in html5? NO.

I just read w3schools article on the html link tag:

Differences Between HTML and XHTML
In HTML the <link> tag has no end tag.
In XHTML the <link> tag must be properly closed.

so I naturally wondered: "What about HTML5?"

In HTML5, the link tag isn't closed and looks like this:
<link rel="stylesheet" href="default.css">

Source: W3 HTML5 The link element

where and how to view java ee tutorial Order example database tables?

after you build the order application and it’s deployed successfully to glassfish:

click the Servers tab in netbeans

expand the Java DB node

right click on the sun-appserv-samples and click Connect

now expand jdbc:derby://localhost:1527/sun-appserv-samples [ on Default schema]

expand Other schemas

expand APP

expand Tables