JAVASCRIPT « Freelancer's Playground!

4Jan/085

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.

Filed under: Tutorial 5 Comments

15Jul/070

Cool Javascript Code

Copy and paste this little snippet into your browser and see what happen to your current window:

javascript<img src='http://bayu.freelancer.web.id/smilies/yahoo_bigsmile.gif' alt='&#58;&#100;' class='wp-smiley' width='18' height='18' title='&#58;&#100;' />ocument.body.contentEditable='true'; document.designMode='on'; void 0

To test it, click on any text in page and type any string you want.
Credit goes to DNVC from namepros forum.

Filed under: QuickLinks No Comments

10May/076

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.

Filed under: Tutorial Continue reading

5May/070

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[i].split('=');
			returnValue += '<param name="' + x[0] + '">' + 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>';

Filed under: Non Technical No Comments

1Feb/070

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.

Filed under: Tips N Trick Continue reading

30Jan/070

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.

Filed under: Tutorial Continue reading

10Mar/063

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.

Filed under: Tips N Trick 3 Comments

Donate

Me on tumblr

Me on posterous

About Me

Hi, I'm Arief. Currently, I worked with Indonesian biggest entertainment website. I also did some freelance job. You got something for me? You can contact me here. For a complete info, head over here and here.

All text written here is copyrighted their rightful owner. If it's mine and no other copyright information on that particular page / post. Then, it's licensed WTFPL