The best place to ask programming/development questions, imo. UPDATE: stackoverflow is 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 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

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