Newbie: Need to look in a database and update field. 2

[MontrealSoft]

Hi, I am very familiar with ASP, but this new project needs a bit of Javascript so I need help from the experts.

I have a page with a form grid showing the details of an invoice. When the user gets out of the first field(itemcode), I need the page to show a list of the inventory items that correspond to what was entered.
I successfully inserted an iframe in the bottom of the page, and it runs showing the right information on the lost focus of the first field.

Now, I can`t seem to have the iframe sends the information back to the first field when the user clicks one of the "OK" links in the iframe.

If needed, I could made a copy of the page on the net in order to get help.

Thanks,

MontrealSoft.com

http://www.montrealsoft.com

 

[feherke]

Hi

I successfully inserted an iframe in the bottom of the page

That is quiet deprecated technology this days. AJAX replaced such [tt]iframe[/tt] tricks. Some of the reasons I would mention :
[ul]
[li]with [tt]iframe[/tt] you have to send back a whole HTML document -- with AJAX you send partial document or only data[/li]
[li]with [tt]iframe[/tt] the new document needs its own scripts and styles -- with AJAX the new content will be part of the original document so will access its scripts and styles[/li]
[li]with [tt]iframe[/tt] you can place the new content only in one place -- with AJAX you can insert it in multiple places in the original document[/li]
[li]with [tt]iframe[/tt] if the inner document's length differs from case to case, you will have either huge white space inside the [tt]iframe[/tt] or the user will have to scroll the [tt]iframe[/tt] separately -- with AJAX the new content is rendered together with the original document, so will not disrupt its flow[/li]
[li]with [tt]iframe[/tt] the browser's back and forward navigation differs ( some include the [tt]iframe[/tt]'s URLs in the navigation history, others not ) -- with AJAX you will have a single document so the navigation remains predictable[/li]
[/ul]
More about AJAX in forum1600. More about your question when we will see some code...

Feherke.

http://rootshell.be/~feherke/

 

[MontrealSoft]

Thanks, will look for information on AJAX. I guess I will need to install stuff on my w2kserver for that to work ?

Is this the way google shows match while we populate the search box ?

MontrealSoft.com

http://www.montrealsoft.com

 

[Diancecht]

There's a AJAX forum in tek-tips.

Also here you have a tutorial. It says Ajax started in 2005 with google suggest.

Cheers,
Dian

 

[feherke]

Hi

I guess I will need to install stuff on my w2kserver for that to work ?

No. AJAX is just making request programmatically : not the browser "personally" talks to the web server, but the JavaScript. On the server side you need just the web server, nothing else. And of course the server-side scripts must be aware about talking with JavaScript, to format the response accordingly.


Feherke.

http://rootshell.be/~feherke/

 

[MontrealSoft]

That`s great ! I managed to do it with example gathered from the net, it does exactly what I needed, I only had to convert the php example to asp and plug it to my database.

The only problem now is I am new to javascript and I wonder how to make it so different fields act the same way on my form (they all need to use the same dropdown, but I'd like if I could make it without copying 6k of code for each of the 20 fields that need that feature...

Thank`s again,

MontrealSoft.com

http://www.montrealsoft.com

 

[feherke]

Hi

Probably that will be simple to achieve. But we can not help without seeing that page. If is publicly accessible, post the URL.

Feherke.

http://rootshell.be/~feherke/

 

[MontrealSoft]

I made the example public at

http://luc.montrealsoft.com:85/ajax

There are 2 textbox, but the second one isn't working properly. (type '1' in the textbox to get the list of items)

Thank's a lot for any help.

MontrealSoft.com

http://www.montrealsoft.com

 

[feherke]

Hi

Not the nicest solution. There are similar codes which uses only one [tt]div[/tt] for the dropdown list.

The way I modified it supposes that you will use similar [tt]input[/tt] and [tt]div[/tt] identifiers, for example :
[ul]
[li][tt]input id="text"[/tt] - [tt]div id="drop"[/tt][/li]
[li][tt]input id="text2"[/tt] - [tt]div id="drop2"[/tt][/li]
[li][tt]input id="textlast"[/tt] - [tt]div id="droplast"[/tt][/li]
[li][tt]input id="extratext"[/tt] - [tt]div id="extradrop"[/tt][/li]
[/ul]

var xmlHttp;
[red]var text=drop=null[/red]
textfocus = false;
function getvalue()
{
  value = document.getElementById([red]text[/red]).value;
  return value;
}
function dataget()
{
  value = getvalue();
  if (value.length > 0) {
    xmlHttp = GetXmlHttpObject();
    if (xmlHttp==null) {
      alert ("Your browser does not support AJAX!");
      return;
    }
    var url="ajax.asp?ajax=dropdown&value="+[red]escape([/red]value[red])[/red]+"";
    url=url+"&sid="+Math.random();
    xmlHttp.onreadystatechange = function() {
      if (xmlHttp.readyState == 4) {
        var output = xmlHttp.responseText;
        if (output != "") {
          dropshow();
          document.getElementById([red]drop[/red]).innerHTML=output;
        } else {
          drophide();
        }
      }
    }
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
  } else {
    drophide();
  }
}
function drophide()
{
  if (document.getElementById([red]drop[/red])) {
    document.getElementById([red]drop[/red]).style.display="none";
  }
}
function dropshow()
{
  if (document.getElementById([red]drop[/red])) {
    document.getElementById([red]drop[/red]).style.display="block";
  }
}
function insert(place)
{
  drophide();
  document.getElementById([red]text[/red]).value=place;
}
function GetXmlHttpObject()
{
  var xmlHttp=null;
  try {
    xmlHttp=new XMLHttpRequest();
  } catch (e) {
    try {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  return xmlHttp;
}
function findselected()
{
  for (i=0;i<findnumber();i++) {
    if (document.getElementById([red]drop[/red]).childNodes[i].className == "dropitemselected") {
      return i;
      break;
    }
  }
}
function findnumber()
{
  y = 0;
  while(true) {
    if (document.getElementById([red]drop[/red]).childNodes[y]) {
      y++;
    } else {
      return y;
      break;
    }
  }
}
function Key_Up(e)
{
[red]// getting the target borrowed from quirksmode.org
  var targ;
  if (!e) var e = window.event;
  if (e.target) targ = e.target;
  else if (e.srcElement) targ = e.srcElement;
  if (targ.nodeType == 3) targ = targ.parentNode;[/red]

  [red]text=targ.id
  drop=text.replace(/text/,'drop')[/red]

  if (e.keyCode) {
    code = e.keyCode;
  } else if (e.which) {
    code = e.which;
  }
  var keyChar = String.fromCharCode(code);
  if (keyChar == "&" || keyChar == "(") {
    document.getElementById(drop).childNodes[0].focus();
    if (keyChar == "(") {
      itemup();
    } else if (keyChar == "&") {
      itemdown();
    }
  } else if (keyChar == "'") {
    selected = findselected();
    document.getElementById([red]drop[/red]).style.display="none";
    place = document.getElementById([red]drop[/red]).childNodes[selected].innerHTML;
    document.getElementById([red]text[/red]).value=place;
  } else {
    if (textfocus==true) {
      dataget();
    }
  }
}
function On_Click(e)
{
  drophide()
}
function itemup()
{
  selected = findselected();
  newselected = selected + 1;
  if (newselected < findnumber()) {
    document.getElementById([red]drop[/red]).childNodes[newselected].style.backgroundColor="#C4EFA7";
    document.getElementById([red]drop[/red]).childNodes[selected].style.backgroundColor="#FFFFFF";
    document.getElementById([red]drop[/red]).childNodes[newselected].className = "dropitemselected";
    document.getElementById([red]drop[/red]).childNodes[selected].className = "dropitem";
  }
}
function itemdown()
{
  selected = findselected();
  newselected = selected - 1;
  if (newselected >= 0) {
    document.getElementById([red]drop[/red]).childNodes[newselected].style.backgroundColor="#C4EFA7";
    document.getElementById([red]drop[/red]).childNodes[selected].style.backgroundColor="#FFFFFF";
    document.getElementById([red]drop[/red]).childNodes[newselected].className = "dropitemselected";
    document.getElementById([red]drop[/red]).childNodes[selected].className = "dropitem";
  }
}
if (document.addEventListener) {
  document.addEventListener('keyup', Key_Up, false);
} else if (document.attachEvent) {
  document.attachEvent('onkeyup', Key_Up);
}
if (document.addEventListener) {
  document.addEventListener('click', On_Click, false);
} else if (document.attachEvent) {
  document.attachEvent('onclick', On_Click);
}

[red].drop[/red] {
  display:none;
  position:absolute;
  border-top:1px solid #000000;
  border-left:1px dashed #000000;
  border-right:1px dashed #000000;
  border-bottom:1px dashed #000000;
  font-weight:bold;
}

<input type="text" id="text" name="text" autocomplete="off" onfocus="textfocus=true;" onblur="textfocus=false;"/><br/>
<div id="drop" [red]class="drop"[/red]></div>
<input type="text" id="text2" name="text2" autocomplete="off" onfocus="textfocus=true;" onblur="textfocus=false;"/><br/>
<div id="drop2" [red]class="drop"[/red]></div>

Feherke.

http://rootshell.be/~feherke/

 

[MontrealSoft]

That`s WONDERFUL. I modified the page and it worked as you suggested.

Thank`s a lot for your time !

Luc

MontrealSoft.com

http://www.montrealsoft.com

 

[MontrealSoft]

I'm a bit shy to ask more, but I think I found a small issue.
If I go in my test page and type 1 in the first field, if I press TAB, the menu doesn`t close yet the focus changes to the 2nd box... Is there an easy way to prevent this problem ?

Thank's again.

MontrealSoft.com

http://www.montrealsoft.com

 

[feherke]

Hi

Indeed. That is another strangeness of this concept. The simple way is to hide the drop "manually" :

<input type="text" id="text" name="text" autocomplete="off" onfocus="textfocus=true;" onblur="textfocus=false;[red]drophide()[/red]"/><br/>
<div id="drop" class="drop"></div>
<input type="text" id="text2" name="text2" autocomplete="off" onfocus="textfocus=true;" onblur="textfocus=false;[red]drophide()[/red]"/><br/>
<div id="drop2" class="drop"></div>

I would seriously think to try some other solution available on the web. This one is not really flexible.


Feherke.

http://rootshell.be/~feherke/