Bermain-Main Dengan Javascript Console Di Google Chrome

Barusan, teman saya ngebuzz, tanya apa bisa akses JSON dari URL berikut dengan menggunakan AJAX jQuery. Sebab, kata ybs, selalu error saat diproses:

http://www.blibli.com/webapp/wcs/stores/servlet/EMarketingSpotJSON___NewArrivalsProduct?catalogId=10051

Karena ada tantangan, ya saya terima saja:D.

Continue reading “Bermain-Main Dengan Javascript Console Di Google Chrome”

Share

Object, Function, Scope, Prototype, dan Closure Pada Javascript

Sepanjang perjalanan saya menulis kode javascript, saya sadar walau saya senang dengan dialek bahasa yang ada, tapi sedikit sulit untuk dimengerti. Banyak yang mendasarkan ini pada (memang harus diakui memang tidak begitu bagus) desain bahasa, atau penyimpangan implementasi dari yang umum digunakan bahasa lainnya. Yang manapun itu, dengan mengerti sedikit kebenaran yang ada bisa membuat anda pergi jauh dengan javascript. Apa yang akan dijabarkan setelah ini adalah versi tertulis dan ringkas dari kelas pengenalan javascript yang saya berikan pada program pelatihan dan user groups.

Continue reading “Object, Function, Scope, Prototype, dan Closure Pada Javascript”

Share

Mimic Oracle’s LOV Feature for Web Application

Pertama-tama saya mau minta maaf dulu, karena mulai posting ini saya akan semakin banyak memberikan content dalam bahasa Inggris. Saya ingin meningkatkan jumlah pembaca dari luar negeri.

For those of you who happen to develop an oracle application using oracle form, you’ll probably know that it has feature called LOV. This feature will show up a popup window that has a list of value for related field that is shown in grid form. I find this very useful and I miss this feature when I develop an intra net application.

In this post, I try to introduce a solution that mimic Oracle’s LOV. First, we need a javascript library called dHtmlXgrid. After that, we need to create a html form:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>LOV Test</title>
<script language="javascript">
	function callLOV(){
		var url = "lov.php";
		var opt = "width=690,height=180,left=100,top=100,scrollbars=yes,resize=no,menubar=no,toolbar=no,directories=no";
		window.open(url, "lov", opt);
	}
	function fillForm(arr){
		document.getElementById('txtNIM').value = arr[0];
		document.getElementById('txtName').value = arr[1];
		document.getElementById('txtCity').value = arr[2];
		document.getElementById('txtPhone').value = arr[3];
		document.getElementById('txtEmail').value = arr[4];
	}
	function kc(e) {
		var k;
		if (e.charCode) {
			k = e.charCode;
		} else
			if (e.keyCode) {
				k = e.keyCode;
			}
		return k;
	}
</script>
<style type="text/css">
	img { border: none;}
</style>
</head>

<body>
<table width="35%" border="0">
  <tr>
    <td><form id="form1" name="form1" method="post" action="">
<fieldset>
      <legend>Friend List</legend>
      <table width="100%" border="0">
        <tr>
          <td width="23%">NIM</td>
          <td width="77%"><input name="txtNIM" type="text" id="txtNIM" />
		  <a
		  	onClick="callLOV()"
			onKeyPress="if(kc(event) == 13){ callLOV(); }"
			href="javascript:void(0);"
			>
            <img src="dhtmlxgrid/popup.gif" name="imgPopup" width="12" height="15" id="imgPopup" /></a></td>
        </tr>
        <tr>
          <td>Name</td>
          <td><input name="txtName" type="text" id="txtName" /></td>
        </tr>
        <tr>
          <td>City</td>
          <td><input name="txtCity" type="text" id="txtCity" /></td>
        </tr>
        <tr>
          <td>Phone</td>
          <td><input name="txtPhone" type="text" id="txtPhone" /></td>
        </tr>
        <tr>
          <td>E-mail</td>
          <td><input name="txtEmail" type="text" id="txtEmail" /></td>
        </tr>
      </table>
      </fieldset>
</form>
    </td>
  </tr>
</table>
</body>
</html>

This should look like this: You click on popup image and it will launch LOV page.

Ok, form is ready, now move to LOV page. For this, we’ll create another file. Let’s call it lov.php. Here’s the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>LOV Friend</title>
	<script src="dhtmlxgrid/dhtmlXGrid.js"></script>
	<script src="dhtmlxgrid/dhtmlXCommon.js"></script>
	<script src="dhtmlxgrid/dhtmlXGridCell.js"></script>
	<link rel="stylesheet" type="text/css" href="dhtmlxgrid/grid.css">
  </head>
  <body>
<div id="gridbox" height="100%"></div>
<script language="javascript" type="text/javascript">
	function doOnEnter(rowId,cellInd){
            var caller = window.opener;
            arrData = new Array();
            arrData[0] = this.cells(rowId, 0).getValue();
            arrData[1] = this.cells(rowId, 1).getValue();
            arrData[2] = this.cells(rowId, 2).getValue();
            arrData[3] = this.cells(rowId, 3).getValue();
            arrData[4] = this.cells(rowId, 4).getValue();
            caller.fillForm(arrData);
            window.close();
	}
	mygrid = new dhtmlXGridObject('gridbox');
	mygrid.setImagePath("dhtmlxgrid/grid/");
	mygrid.setHeader("ID, NAME, CITY, PHONE, E-MAIL");
	mygrid.setInitWidths("90,230,110,90,150");
	mygrid.setColAlign("center,left,right,right,right");
	mygrid.setColTypes("ro,ro,ro,ro,ro");
	mygrid.setColSorting("str,str,int,int,int");
	mygrid.setOnEnterPressedHandler(doOnEnter);
	mygrid.init();
	mygrid.loadXML("datasource.xml");
</script>
  </body>
</html>

A little explanation from the above code:

<div id="gridbox" height="100%"></div>

is your grid place-holder that is used in the following code

mygrid = new dhtmlXGridObject('gridbox');

The other code is explained in dHtmlXgrid’s documentation, you should see it. One other thing that is need an explanation is this snippet

caller.fillForm(arrData);

This one is the key to connect LOV with our form, which will call fillForm function in html form’s page.

Now, this tutorial is complete, you can test it here. Follow this link to download the source file. Any question, just throw it below in comment form.

Share

Create Multiple File Upload Form Using Javascript And Php

Currently I’m working on a project that required an upload form to be dynamic. That is when I want more file to upload I don’t need to upload lets say 5 at a time, because I can add more field to it. The idea is simple, I just need to manipulate DOM to add the field and modify PHP manual a little bit to match my need. Look below the full source.

Continue reading “Create Multiple File Upload Form Using Javascript And Php”

Share

Strange Javascript Behaviour

Yeah… I’m dumb. But, how do I know that this simple code generate quite difficult to understand error?

	function buildParameter(scr, txt){
		var returnValue = "";
		var temp = txt.split("\n");
		returnValue = '<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?><request>'
					+ '<script>' + scr + '</script>';
		for(i = 0; i < temp.length; i++){
			x = temp&#91;i&#93;.split('=');
			returnValue += '<param name="' + x&#91;0&#93; + '">' + x[1] + '</param>';	
		}
		returnValue += '</request>';
		
		alert(returnValue);
		return returnValue;
	}

Go a head, test it with your editor. Here, I got

unterminated string literal

And how do I know what is generating this error?. You know what? Here’s the suspect :

		returnValue = '<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?><request>'
					+ '<script>' + scr + '</script>';

I don’t know why is this generating error and I’m googling without result. Maybe wrong query. But, I found the solution by trial and error. So, here’s the weapon to terminate this suspect :

		returnValue = '<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?><request>'
					+ '<' + 'script' + '>' + scr + '</' + 'script>';

Share

Using Try.these to make your javascript code robust

Hi there, this is yet another prototype tutorial. Today well learn a simple way to avoid error in our javascript code. We’ll use Try.these method of prototype framework. So, how do we do this? First, we need to call the prototype library. Continue reading “Using Try.these to make your javascript code robust”

Share

Create Updatable Scroller Text

This tutorial came from a project of mine. At that time, someone ask me to create a scrolling text that updated when the data is modified. After look into the problem I found that this problem can be done using simple ajax and php script. This tutorial will show you how I completed this task.
Continue reading “Create Updatable Scroller Text”

Share

HOWTO : Lock Form Field

Sedikit coba-coba dengan event di javascript, akhirnya nemu satu trik sederhana untuk mengunci form agar tidak bisa di-edit tanpa menambahkan atribut readonly maupun disable.
Berikut caranya :

<form name="form">
     <input type="text" size="12" onfocus="this.blur()" value="Locked text!" name="box" />
</form>

.
Perhatikan pada event onFocus, kita beri dia perintah this.blur(), sehingga field tersebut tidak pernah menerima focus.

Share