The best place to *find* answers to programming/development questions, imo, however it's the *worst* place to *ask* questions (if your first question/comment doesn't get any up-rating/response, then u can't ask anymore questions--ridiculously unrealistic), but again, a great reference for *finding* answers.

My Music (Nickleus)

20151008

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.

20150929

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.

20150909

[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 );
}


20150715

[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

:)

20150630

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)

20150625

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:


20150609

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>

...

20150311

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

20150217

mac norwegian keyboard curly braces brackets shortcut

alt+shift+8:
left curly bracket, {

alt+shift+9:
left curly bracket, }

20150211

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

20150128

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