Tag Archives: web

jQuery using $.on to call newly added elements

More than a year ago, I had written a blog about how to bind events to newly added elements using jQuery.

The scenario can be found here: http://blog.kongnir.com/2012/02/08/jquery-function-not-binding-to-newly-added-dom-elements/

In my previous solution, I had used $.live() in place of $.change(). However, as noted by a commenter in that blog, as of time of writing, $.live() is deprecated.

Instead, we should now use $.on() if you need to capture events of newly added elements.

For example, in normal circumstance, we would do this:

$(".existing-button").click(function() {
    alert("This will work if button already exist on load");
});

However, if you add new elements to the document using AJAX, then the above will not work. That button doesn’t exist.

In both circumstances, this will work:

$(document).on("click",".new-button", function() {
    alert("This will work even if element is newly added");
});

If you notice, the syntax is quite different. The element to call on is the containing element, not the element that the event is called. So let’s say “.new-button” is contained within “#main”, then the following should work too.

$("#main").on("click",".new-button", function() {
    alert("This will work even if element is newly added"); 
});

Reference: http://api.jquery.com/on/

Tricky WebDev: Fix missing list’s text in Mobile browsers

I had this very strange bug that didn’t show up in Desktop browsers (Chrome and Firefox) but in Mobile browsers, specifically iOS Safari and Chrome.

On Desktop:
tags_on_desktop

On Mobile:
tags_on_mobile

Since I couldn’t find a way to debug on the Mobile browsers, I had spent quite a while trying to figure out what went wrong. It’s also very strange to actually see the texts that have more than 1 word to appear, but yet it only shows the first word.

So I checked the HTML code from Chrome and saw this:

<li>
    "                             Face                             "
</li>

That’s because in my PHP code, I had actually echoed the text on a new line like this:

<li>
    <?php echo $tag; ?>
</li>

Out of curiosity and pure trial-and-error, I had decided to try this:

<li><?php echo $tag; ?></li>

To produce this:

<li>Face</li>

Guess what?
That solved the bloody issue I had been investigating for many hours.
I think I really need to re-learn the basics of HTML.

Free Web development tools for Mac users

This is an on-going post which will be updated when I find or learn something better. Please leave a comment if you have any suggestion or if you find any error. Help me to help others! Thanks. :) (I found many spams coming in, so please leave out the website if you don’t have any to share.)

Free Web development tools for Mac, especially for PHP developers. Of course, there’re many other free tools available out there. These are the tools that I have been using personally and I find them very useful. I hope you’ll find them useful too.

1. Local web server for testing

  • MAMP to manage local website (http://www.mamp.info/). This is only essential if you’re working with server side language PHP. Updated: If you’re too lazy to set up the Mac with its included Apache server like me, this is a very good app to start with. Just install, run the app and you’re good to go.
  • This tutorial shows how easy it is to set things up in Mac with MAMP for WordPress. I followed this to install a testing development for my work.
  • If you can’t get Aptana (mentioned below) to read the files from MAMP’s default Document root, scroll to the bottom to read more.
  • Mac’s Web Sharing for developers who are only developing using HTML, CSS and Javascript, Mac comes with a web server installed by default. You may want to google “How to enable web sharing on Mac Lion”. Updated: Thanks Glenn for pointing out. If you’re a little command line savvy, you may do away with MAMP and set up your Mac with PHP and MySQL. Just follow the tutorial here. I haven’t tested it though.
  • OS Mountain Lion: Unfortunately, Apple has removed the web sharing option in the sharing preference panel (see here). You can bing it back using command line by following this tutorial. But then again, they really look too much work. I prefer to use MAMP. And because the configuration is self-contained within MAMP, if I messed up the settings, I can simply delete the app and reinstall to reset to default.
  • AMPPS (http://www.ampps.com/): I was preparing for a web design class and was looking for a tool for Windows users similar to MAMP. And then I found this AMPPS. It supports both Windows and Mac, and is said to be portable. I’ve yet to give it a try, I probably will in the near future although MAMP is enough for me at the moment. Read this article about AMPPS vs MAMP: http://bit51.com/bye-bye-mamp-pro-hello-ampps/

2. Text Editor

Both tools provide syntax-highlighting, but Aptana provides auto-complete and syntax error alert features which are slightly more useful for me.

  • Aptana as web development IDE http://aptana.com/
  • I had been using TextWrangler before I finally found this tool. The syntax error alert feature really saves me a lot of trouble trying to debug. And the auto-complete saves me some typing too.
  • One thing I don’t really like is the default white text on black background theme. To change the white text on black background to black text on white background, click the color wheel icon on the top of the Aptana window and select “Aptana Studio 2.x”, “Eclipse” or “Dreamweaver” theme.
  • I didn’t spend time trying to set up Aptana for debugging web environment because I could use MAMP to run the web and see my development while I’m doing my work.
  • Aptana works even better if you have Git installed. It can track branches and changes by indicating them on the left panel. This is a simple yet extremely useful feature. Apple’s Xcode comes with Git. My iMac (with Xcode and SourceTree installed) worked pretty well for Aptana, but my MacBook (no Xcode, only SourceTree installed) didn’t work. So it’s probably advisable to install Xcode along with Git so you don’t have to figure out how to configure Git to work with Aptana.
  • TextWrangler as text editor http://www.barebones.com/products/textwrangler/
  • TextWrangler doesn’t support auto-complete and doesn’t prompt you if there’s any syntax error. You need to know exactly what you’re doing. I have had hard time debugging when I was using this tool. It is still a very good free tool though.

3. Source repository and management

Source control and management is crucial in a development work. Because it is the core of the business. It is important for us to find a good storage and to keep track of all changes done to the source.

  • BitBucket https://bitbucket.org/
  • You can create unlimited private repositories.
  • Each repository is limited to 5 users for free account.
  • I have been using this for several months. It is very easy to use and configure. The SourceTree client works out of the box with BitBucket. And recently they had refreshed and improved their web UI. Very impressed. Not to mention they provide unlimited private repositories.
  • GitHub https://github.com/
  • You can create unlimited public repositories.
  • Private repositories come with a price.

4. Source repository client

You can always use the web page to upload changes. This is just a convenient way to commit the changes to the repository from the Mac.

  • SourceTree app http://www.sourcetreeapp.com/
  • Any Git or Mercurial repositories.
  • I’ve been using this tool and find it very easy to use.
  • The client allows us to add any git repository, not limited to BitBucket. I had tried adding GitHub and “it just works”.
  • For Git beginners the concept of Fetch, Pull, Push, Commit and Checkout may seem overwhelming… but they are the fundamentals of Git that I think it’s good to know. It becomes very useful if you ever want to use Git with command line.
  • GitHub for Machttp://mac.github.com/
  • Limited to GitHub account.
  • I have not personally tried this but the UI looks very intuitive.
  • The UI is so simple that some concepts of Git have been hidden from users. It may be difficult for you to switch to other clients or command line if you don’t have the concept of Fetch, Pull, Push, etc. Nevertheless, it is a simple client for newbie to start using Git within minutes.

While the 2 clients are extremely useful for synchronizing your work on the cloud (their servers), you can always choose to leave the work in your local machine. Simply use commit and not use the Pull and Push commands. But repositories are best for collaboration, so usually developers will sync them to a server for sharing (and backup too).

Using Git from the Terminal

Sometimes you may need Git from the Terminal. In my case, I wanted to use Composer.org to install some dependencies in my Laravel project. So I need Git in my Terminal. It’s not that difficult to install, just go to this link, download the latest package and install it.

https://code.google.com/p/git-osx-installer/downloads/list

5. Aptana & MAMP troubleshoot (Document Root issue)

I didn’t use the default root in MAMP because it didn’t work for me. Aptana doesn’t seem to be able to see the files in the htdocs folder. It’s better to put your work outside the MAMP app, in case it got corrupted and you have to delete it.

Open MAMP, go to “Preferences”, under “Apache” tab, change the Document Root to somewhere else. I like to put it under

/Users/your_username/Sites

This folder is automatically created prior to Mountain Lion. If you purchased the MacBook with Mountain Lion then most probably this folder doesn’t exist. You can always create it or choose another folder. :)

When you launch http://localhost:8888 the next time, it will read directly from this folder.

Additional info:
If you have subdirectories inside this folder, simply use http://localhost:8888/subfolder

6. Managing MySQL database

The best tool to manage MySQL database is the tool made by Oracle themselves. They have clients for many platforms, including Windows, Mac and some Linux.

MySQL Workbench: a very nice tool to manage MySQL databases. http://dev.mysql.com/downloads/tools/workbench/

7. FTP Client

There’re many free FTP clients available in the market but these are the few that I have been using and I find them easy to use.

  1. Cyberduck (http://cyberduck.ch/)
  2. Filezilla (https://filezilla-project.org/)

Warning: Be aware that by default Filezilla stores and transmit your password in plain text. I’m not sure if this has been resolved but it has certainly compromised some of my sites before. There’s a way to “fix” it but it sounds too troublesome.

Cyberduck on the other hand stores your password using Mac OS’ keychain. One slight inconvenience in Cyberduck is that it doesn’t have the feature to only upload files that have changed. Filezilla is better in that sense.

More FTP clients here: http://mac.appstorm.net/roundups/internet-roundup/top-7-free-ftp-clients-for-mac/

8. LESS CSS compiler

LESS is a dynamic stylesheet language which extends CSS with dynamic behavior such as variables, mixins, operations and functions. If you want to learn more about LESS, visit www.lesscss.org.

LESS makes CSS logically easy to write and reusable. The only troublesome part, in my opinion, is that you need to compile LESS script into CSS format. The team that came up with LESS has provided a command-line tool to do that. Command-line?! Sounds complicated? Fortunately, there’re many GUI tools that can help us with that. The 2 that I have been using are simple and free of charge.

  1. SimpLESS (http://wearekiss.com/simpless) – SimpLESS was a very easy-to-use and straight-forward GUI compiler. However, I was having a lot of trouble trying to compile Twitter Bootstrap v3. So I switched to…
  2. Koala (http://koala-app.com/) – Koala is not just a LESS compiler, it also supports Sass, Compass and CoffeeScript. It can run on Windows, Mac and Linux. The GUI is also very straight-forward. The only thing that’s currently quite annoying is that it doesn’t allow user to add a single file to compile. You have a add the whole folder, then delete all the files that you don’t want to compile. Other than that, the functionality is comparable to SimpLESS.

For more GUI compilers, you may want to read up here: https://github.com/less/less.js/wiki/GUI-compilers-that-use-LESS.js

9. Configure AMPPS

  1. Download the latest version from http://www.ampps.com/downloads (as of writing it was version 2.0)
  2. Launch the app and Start both Apache and MySQL.
  3. Launch a browser and go to address http://localhost/
  4. You will be asked if you would like to make AMPPS secure. Go ahead and enter a password.
  5. The root folder is by default at /Applications/AMPPS/www/
  6. If you create a subfolder under the root folder, you can access your subfolder site using the URL http://localhost/subfolder

I’m trying out AMPPS now and considering if I should migrate all my projects from MAMP to AMPPS. The main advantage for me is that AMPPS supports both Windows and Mac, while MAMP is only for Mac. Other than that, I don’t feel much difference between the 2, as of now.

jQuery function not binding to newly added dom elements

Updated (14 Nov 2013): $.live() is deprecated. I had written another blog on the new $.on() which will do the same. http://blog.kongnir.com/2013/11/14/jquery-using-on-to-call-newly-added-elements/

I was trying to use jQuery’s .append() function to insert some HTML code into a div.

This was the HTML (Example):

<div class="conditions-basic">
	<span class="function">
		<select name="someName"
                    id="someID" class="ddlSelect">
		<option selected="selected" value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		</select>
	</span>
	// More elements here
</div>
<div class="conditions-more"></div>

The div class “conditions-basic” contains a select input. So when a user clicks on an ADD button somewhere, I want to duplicate the same select input in div class “condition-more” by doing this:

$('#btnAnd').click( function () {
	var appendHtml = $('div.conditions-basic').html().trim();
	$('div.conditions-more').append(appendHtml);
});

The select input will make some changes to its own newly appended elements. However, the .change() function doesn’t work for newly added elements.
Upon some research, I had read that instead of using .change(), we should use .live() instead.

Reason: live is a late-binding dynamic handler that can attach to elements added to the DOM after the handler is declared. See documentation for more info.

Instead of using .change() event directly like this:

$('.ddlSelect').change(function () {
    alert("this is not working");
});

Use .live() like this:

$('.ddlSelect').live("change", function () {
    alert("this is working");
});

Reference: http://stackoverflow.com/questions/6537323/jquery-function-not-binding-to-newly-added-dom-elements