<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue augue, 64GB-DDRAM scelerisque vitae convallis consequat, fringilla quis urna.</a>
<a href="#">Nullam consequat molestie metus, vel fermentum mauris molestie eu. Aenean ornare lectus quis turpis congue condimentum.</a>

Dan katakan pulak kandungan anchor ni kita takleh nak tukar awal-awal (dari service lain ataupun dari database). So, kita hanya boleh tukar bila page tu dah generate. Apa nak buat sekarang ialah nak letak 64GB-DDRAM atau perkataan seangkatan dengannya dalam elemen .

Guna javascript macam ni.. jangan lupa include jQuery!

$(document).ready(function(){
  pattern = new RegExp(/[A-Za-z0-9]*[-]+[A-Za-z0-9]*/)
  $('a').each(function(v){
    tmp = $(this).html().match(pattern);
    if(tmp)
    {
      str = $(this).html().replace(pattern, '<span class="something">' + tmp + '</span>');
      $(this).html(str);
    }
  })
})

Nak explain ke tak, aku rasa agak simple kod ni untuk difahami. Kalo ade soklan tanya la dalam comment.

Ni kita guna sihir regex sikit. Untuk cari pattern yang match 64GB-DDRAM. Nak cari pattern lain pun boleh, mahir-mahirkan lah diri dalam regex. Nanti leh jadi superhero macam ni..

Kod problem dia lebih kurang gini,

// ... bla bla bla
console.log('jadi ke tak?')

$.functionPentingYangMestiRun();

Bila kat Firefox dan seangkatan dengannya, ok je benda ni. Function penting tu run. Tapi bila IE 7/8, dia stop! Dia campak error, pastu dia takmo run dah, setakat tu je.

Maka takmo la jadi macam tu, kena la letak condition.

if(window.console)
{
  console.log('jadi ke tak?');
}

// ataupun

if(typeof console != 'undefined')
{
  console.log('jadi ke tak?');
}

Tak pun letak console.log tu dalam function.

function habaq_kat_console(msg)
{
   if(window.console)
   {
      console.log(msg);
   }
}

// Bila nak pakai

habaq_kat_console('Tak leh la..');

Setakat ni saja.. ada lagi beberapa post dalam pipeline. Akan ku usahakan untuk post!

• jQuery
• jQuery Form
• jQuery Validation Engine

Kali ni, kod overload. Kalau ada rasa loya-loya sikit bila tengok kod banyak sangat, sila undur ke belakang perlahan-lahan dan cari beg plastik sebagai persiapan untuk muntah, pastu teruskan membaca.

Untuk makluman semua, kod dibawah digunakan bersama dengan Validation Engine 1.6.3. Untuk version 2.0 ni, tak berapa pasti, tapi mengikut firasat aku, takde beza kot (nanti la aku test).

So kalau nak tengok demo untuk validation engine tu, gi la ke demo page dia.

Validation Engine
Plugin ni ada client-side validation, tapi aku ni, malas sikit nak buat client side validation ni kerana server-side validation kena buat jugak. Oleh kerana aku lebih suka meluangkan masa di reddit daripada buat client-side validation, aku buat server-side je lah.

Kalau nak buat client-side validation, kat site dia ada cerita, dalam docs tu dan bila invalid data, dia keluar pop-up macam ni,

Amacam? Menarik? Hehehe.

Oh, benda ni bukan limit pada codeigniter je, kalau php biasa pun leh guna. Sebab aku guna codeigniter, aku kasi spotlight la kat CodeIgniter. Hehehe.

Ok, first sekali kena set jquery form plugin.

var options = {
  beforeSubmit:  loading,  // pre-submit callback
  dataType: 'json',
  success: cleanup  // post-submit callback
};
$('#nama_form').ajaxForm(options);

Form dia, aku kasi contoh, gini la rupa dia

<?php echo form_open('register/create', array('id' => 'registration_form')); ?>
	<h3>Account Info</h3>
	<div>
		<label>Email Address<span class="required">*</span></label>
		<input type="text" class="email-address text" id="username" name="username" value="" />
		<span class="field_info">Type in your email address, an email will be sent afterwards</span>
	</div>
</form>

Ha, simple je. Pastukan, kita taruk ni pulak

function cleanup(data)
{
	$('#submitbtn').removeAttr('disabled');
	if(data.status == 'success')
	{
		window.location = data.url
	}
	if(data.status == 'error')
	{
		$('#submitbtn').removeAttr('disabled');
		$('#submitbtn').val('Submit');
		$('#submitbtn').parent().prepend('<span id="status_msg">There was a slight problem with your submission (see above).</span>')

		$('#status_msg').fadeOut(3000, function(){
			$(this).remove();
		});

		$.each(data.error, function(index, value){
			$.validationEngine.buildPrompt(value[0],value[1],value[2])
			$('.'+value[0].substr(1)+'formError').click(function(){
				$.validationEngine.closePrompt(value[0])
			})
		})
	}
}

Ape fungsi function diatas? Untuk paparkan popup yang memaparkan error pada validation. Haa.. function cleanup ni dipanggil bila form tu dah disubmit secara ajax pada nilai “action” form tersebut. Action ni url dimana form tu hantar data tu le.

Garu kepala sikit, apa benda kandungan fungsi function cleanup ni!? Argh! Kalo nak paham, kena pi tengok kod server-side. Jom…

function create()
{
	$this->load->library('form_validation');
	$this->form_validation->set_rules('tnc', 'Terms and Conditions', 'trim|required|xss_clean');
	$this->form_validation->set_rules('username', 'username', 'trim|required|xss_clean|valid_email|callback__check_username');
	$this->form_validation->set_rules('fullname', 'fullname', 'trim|required|xss_clean');
	$this->form_validation->set_rules('password', 'Password', 'trim|required|xss_clean|min_length['.$this->config->item('password_min_length').']|max_length['.$this->config->item('password_max_length').']|alpha_dash');
	$this->form_validation->set_rules('verify_password', 'Confirm Password', 'trim|required|xss_clean|matches[password]');
	$this->form_validation->set_rules('captcha', 'Confirmation Code', 'trim|xss_clean|required|callback__check_captcha');

	if($this->form_validation->run() === FALSE)
	{
		$response['status'] = 'error';

		$errors = $this->form_validation->_error_array;
		$field_errors = array();
		$error_details = array();
		foreach($errors as $key => $data)
		{
			$error_details[] = "#$key";
			$error_details[] = $data;
			$error_details[] = "error";

			$field_errors[] = $error_details;
			$error_details = array();
		}
		$response['error'] = $field_errors;
		echo json_encode($response);
	}
	else
	{

		$response['status'] = 'success';
		$response['url'] = site_url('something/completed');
		echo json_encode($response);
	}
}

Ha.. yang lain tu kosmetik je. Yang penting bila form tu tak dapat validate, dia masuk dalam line 13. Apa dia buat kat sini, dia bagi create key dan value je. Key nya ialah id html element, value nya.. error tu la. Tak dapat bayangkan, jom kita tengok apa kata si serangga api (firebug).

Image tu kecik sikit, kena klik untuk tengok saiz penuh. Nampak? Dia iterate semua element dalam key “error”. Total ada 5 element. Setiap satu mewakili input field pada form. Click pada tab JSON kat firebug tu dia papar gini,

Bila nilai-nilai JSON ni dihantar kembali, jquery form tu dia laksanakan function cleanup. Cleanup to melalui semua element error dan generate popup untuk setiap satu element. Ha.. tapi aku lupa nak bagitau sesuatu, sebelum submit dia ada panggil function “loading”. Takde ape sangat pun, cuma nak reset submit button dan buang semua error popup.

function loading()
{
	$('#status_msg').remove();
	$('#submitbtn').attr('disabled', 'true');
	$('#submitbtn').val('Processing..')
	$.validationEngine.closePrompt('.formError');
}

Ok settle. Setakat ni, kalau dah reti pakai jquery validation engine, pastu nak implement benda ni, takde masalah (bagi aku takde masalah, kalau ada mai la habaq sini). Nak tunjuk step-by-step sampai jadi, payah sikit la. So godek-godek la kod diatas bagi jadi.

Sebelum aku terlupa, kod-kod ni untuk tutup error popup tu kalau dia menganggu. Ye la, dah banyak sangat popup, mesti la dia lindung benda lain satgi.

$('input').click(function(){
	$.validationEngine.closePrompt($(this))
})
$('input').focus(function(){
	$.validationEngine.closePrompt($(this))
})

Jadi, hasilnya lebih kurang macam ni,

Moga diberi masa untuk post lagi pada masa akan datang. Setakat tu je sembang untuk kali ni, masa untuk programming pulak!

Contohnya, input box dibawah

Memang simple habis. Tapi kalau ditambah, “hint” dibawahnya, jadi gini pulak..

Ok la tu.. ada hint. Tapi disesetengah situasi, nak kena hint tu ada DALAM text box tu. Macam ni..

Ni dia panggil watermark. Aku pun tak pasti apsal dia panggil watermark, aku lagi suka “input hint” tapi ape-ape je lah.

Jadi, watermark tu digunakan seperti berikut..

Haaaaa.. tu dia. Nanti ko mesti pasti teriak, TAPI APSAL DIA MACAM BIASA JE, TAK KELABU PUN WATERMARK TU. Aku, kalau ada sebelah ko, aku pasti akan membuat look of disapproval.

Ye lah, ko tak apply CSS dia, macam mana dia nak jadi kelabu. So, taruk nih.

.watermark{ color: #999999 !important; font-style: italic; }

Yang ni aku implement dalam aplikasi aku.

Ha, gitu lah kisahnya watermark dan “input hint” untuk setakat ni. Pembayang ni takde hal nak letak mana pun, bawah ke, dalam ke, asalkan ada. Baru nampak “canggih” sket. Haha.

Takde la, kadang-kadang benda kecik ni orang tak perasan, tapi kalau ada, ianya membantu. Dan benda-benda kecik ni memang banyak (sikit kat situ, sikit kat sini) dan aku kategorikan sebagai “remeh”. Tapi tu la, remeh ni la yang buat aplikasi jadi best. Macam sikit-sikit jadi bukit gitu. IT ALL ADDS UP TO DA TOTAL USER EXPERIENCE (walaupun usernya aku sorang je). Ha.. jadi setakat ni saja semoga berjumpa lagi untuk bersembang di post yang akan datang.

Suatu hari sedang berlegar-legar di ruangan opis, rakan sekerja ku bertanya. Apa benda simbol dollar ni? Terkedu sikit aku. Rasa macam nak call Robert Langdon pun ada, symbologist terkenal, untuk meminta pertolongan beliau didalam hal ini, tapi sekretari dia kata dia takdak la pulak.

Aku pun buka almari ku yang berhabuk dan bersawang dengan sarang tarantula gergasi dimana bermulanya pertempuran sebegini. Ngeri bai. Nasib baik aku dapat belasah labah-labah tu, level up sikit.

Peristiwa aku menyerang raksasa..

Ok, terbabas ke gaung jalan cerita ni. Dimana ya? Oh, $(). $() ni selalu digunakan didalam Javascript Library dan orang menggelarnya Factory Function¹. Sebenarnya bukan $(), cuma simbol $ yang dijadikan function sebab tu jadi $(). $ ni macam satu gudang besar yang misteri. Kita masukkan lembu kedalam gudang tu, dia keluarkan rendang daging. Masukkan ayam, keluar jadi KFC. Haaaa… misteri sungguh gudang ni.

So anyway, simbol ni cuma shorthand untuk library yang memakainya. Kalau kita buat gini,

$('.some-class')

maknanya kita hantar argument “.some-class” ke function $, dan katakan disituasi ni kita pakai jQuery, kita hantar “.some-class” ke jQuery dan mintak dia tolong proseskan dimana jQuery akan amik semua elemen yang berkelaskan “some-class”. Adeh, aku pun makin konpius la. Takpe, satu lagi contoh.. katakan aku buat library javascript nama dia janganKacau.js, tapi aku ni hipster sikit, takmo mainstream-mainstream ni, jadi aku nak guna simbol lain yang menyusahkan!

var ಠ_ಠ = function(s){
  alert('ish, jangan la kaco');
};

So, kacau disituasi ni, kita nak panggil semua elemen berkelaskan “some-class”, kita buat macam ni.

ಠ_ಠ('.some-class');

Ish, nak panggil library ni pun dia dah kerut kening dia dengan pandangan yang penuh dengan ketidakselesaan. Pastu kita diberitahu supaya jangan kacau dia. Ok, ok, sorry bro, wa tak kacau lu lagi.

¹ Johnathan C. and Swedberg K., Learning jQuery, Packt Publishing, 2007.

if($.browser.msie)
{
	$('.menu li ul').css('position', 'absolute');
	$('.menu li ul').css('left', '0');
	$('.menu li').css('z-index', '2000');
	$('.menu li ul').css('z-index', '1000');
	$('.menu li').hover(
		function(){
			$(this).find('ul').css('display', 'block');
		},
		function(){
			$(this).find('ul').css('display', 'none');
		}
	)
}

Semoga dapat memperingatkan diri bila terjumpa balik bug ni.

Kalau nak tau javascript tu telah di ‘pack‘ (atau minify), bila buka sumber kod dengan menggunakan text editor, dia keluar macam ni…

Ni contoh regex selector untuk jQuery.

jQuery.expr[':'].regex=function(elem,index,match){var matchParams=match[3].split(','),validLabels=/^(data|css):/,attr={method:matchParams[0].match(validLabels)?matchParams[0].split(':')[0]:'attr',property:matchParams.shift().replace(validLabels,'')},regexFlags='ig',regex=new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''),regexFlags);return regex.test(jQuery(elem)[attr.method](attr.property));}

Susah nak edit kalau dah pack (bukan mustahil, tapi memang susah dan tak disyorkan demi kesihatan jangka masa panjang)

Kita kena mencantikkan kembali kod tersebut (ataupun unpack) dengan menggunakan javascript beautifier.

Bila dah rupa macam ni, senang la kita mengubahsuai.

Jika tak kena cara, menambakah serabut dan rimas pada pengguna. Dibawah adalah contoh kod javascript yang menggunakan library jQuery.

$('#reset_button').click(function(){
  $(':input','#myform')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');
})

Tetapi terdapat kelemahan didalam cara diatas dimana jika sesuatu elemen mempunyai nilai lalai (default value), ianya akan dipadamkan sekali. Dibawah adalah contoh input yang mempunyai nilai lalai.

Maka cara terbaik adalah menggunakan function reset dimana nilai untuk elemen akan dikembalikan kepada nilai yang berada didalam attribute ‘value’.

$('#reset_button').click(function(){
   $('#myform')[0].reset();
})

Tips: Jika anda menggunakan cara yang kedua (iaitu menggunakan function reset()), elakkan daripada mengguna ‘reset’ sebagai ID elemen anda. Nanti tak jadi!

Selamat programming!

Sumber:

• Reset form with jQuery
• Form reset retain default value

Berikut adalah cara saya menggunakannya dalam bentuk javascript.

$(document).ready(function(){
  $("table tbody tr:nth-child(odd)").addClass("odd");
})

Dimana ia akan memasukkan class ‘odd’ kedalam baris yang ganjil dan formatkan dalam bentuk berikut:

tr.odd{ background-color: #C3D9FF; }

Edit: Terlupa nak beritahu, anda memerlukan jquery.

Apabila kita nak sesuatu fungsi dalam javascript dilaksanakan apabila web telah dimuat turun, kita akan menggunakan samada $(document).ready ataupun $(window).load. Jadi apakah perbezaannya?

$(document).ready(function(){
  // kod disini
})

Fungsi didalam $(document).ready dilaksanakan apabila Document Object Model (DOM) siap sedia digunakan, dengan erti kata lain, apabila semua element HTML (semua isi kandungan didalam ) telahpun dimuat turun.

$(window).load(function(){
 // kod disini
})

Manakala fungsi didalam $(window).load dilaksanakan apabila kesemua element DOM dan juga imej-imej telahpun dimuat turun.

Jadi jika anda hendak mengubahsuai imej-imej (crop, resize, alignment, dsbnya) anda perlu menggunakan $(window).load. Jika anda hendak membuat skrin preload untuk aplikasi web anda, maka perlu menggunakan $(document).load. Guna dua-dua pun tidak mengapa, satu untuk preload dan satu lagi untuk manipulasi imej.

Itu saja setakat ini, selamat programming!

Sumber

• Daily Tip : Difference between $(document).ready and $(window).load in jQuery