2 Replies - 1579 Views - Last Post: 18 October 2008 - 12:07 AM

#1 kerchunk  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 21-July 08

javascript/ajax/jsp jambalaya (or Why does my function come to a halt?

Posted 16 October 2008 - 06:29 PM

I've build a jsp with three tabbed folders:

http://www.purpleliz...project_try.jsp

the page opens displaying the first tab.
the 2nd and third tabs contain empty select boxes. Additionally the 2nd tab contains a form and an "update" button.

opening the 2nd or third tab trigger javascript function refreshProjectBoxes(), which populates the empty select boxes using an ajax call to a database.

PROBLEM 1) this works as in the select boxes get populated, but only after clicking through three "call was not completed" alerts. It's as if there's some looping going on but the flow refreshProjectBoxes -> update_projname_boxes only contains one ajax call. I'm stumped with this behavior

in the 2nd folder making a selection triggers another ajax call to pull data from the database and populate the form with field values for that particular project. This works.

You should be able to change the data then click the "Update" button to push the form data back to the database for an update.

PROBLEM 2: clicking the "Update" button does start the function updateProject() but execution stops just past the 4th statement. Which is crazy because these statements are identical to those found in function grabProjNameEditBoxVal which had to have worked else the select box would never have gotten populated.

You can review the code itself by doing a View->Page Source on my page or look through it below:

<%@ page contentType="text/html" %>
<html>
<head>
  <!--  a html comment -->
  <title>project management page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  
  <!--  start of stuff to make tabbed folders work -->
  <style type="text/css">
	td{FONT-FAMILY: Comic Sans MS,Arial; FONT-SIZE: 12pt; }
	 a{FONT-FAMILY: Comic Sans MS,Arial; FONT-SIZE: 12pt; }
	.tab { background-color: #CCCCCC}
	#Tab1 { background-color: #FFCC99}
	.folder { background-color: #CCCCCC}
	#Folder1 { background-color: #FFCC99}
  </style>
  <script type="text/javascript" language="Javascript1.2">

  function init() {
	// assigns objects events to functions
	document.getElementById('projnamebox_edit').onchange = grabProjNameBoxEditVal;
	document.getElementById('projnamebox_delete').onchange = grabProjNameBoxDeleteVal;
  }

  var curTab = "Tab1";	 // global to keep track of current
  var curFld = "Folder1";

  function turnOn( newTab, newFld) {
	if( curTab != newTab) {
	  var thisTab = document.getElementById(newTab);
	  thisTab.style.backgroundColor = "#FFCC99";
	  var olldTab = document.getElementById(curTab);
	  olldTab.style.backgroundColor = "#CCCCCC";
	  curTab = newTab;

	  var thisFld = document.getElementById(newFld);
	  thisFld.style.backgroundColor = "#FFCC99";
	  thisFld.style.visibility = "visible";
	  var olldFld = document.getElementById(curFld);
	  olldFld.style.backgroundColor = "#CCCCCC";
	  olldFld.style.visibility = "hidden";
	  curFld = newFld;

	  refreshProjectBoxes();
	  
	}
  }
  </script>
  <!--  end   of stuff to make tabbed folders work -->

  <!--  start of stuff to generate a project_sku -->
  <script type="text/javascript" language="Javascript1.2">
  var httpRequest = false;
  
  function createRequest() {
	try {
	  httpRequest = new XMLHttpRequest();
	} catch (trynewmicroshaft) {
	  try {
		httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
	  } catch (tryoldmicroshaft) {
		try {
		  httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (failed) {
		  httpRequest = false;
		}
	  }
	}
	if( !httpRequest) {
	  alert("Error initializing XMLHttpRequest");
	}
  }

  function get_new_project_sku( name_of_project) {
//  var nodeb = document.getElementById("project_name_target");
//  nodeb.innerHTML = name_of_project;
	createRequest();
	httpRequest.open("POST", "add_project", true);
	httpRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded");
	httpRequest.onreadystatechange = process_new_project;
	httpRequest.send("name=" + name_of_project);
  }

  function process_new_project() {
	var nodeb = document.getElementById( "project_add_target");
	if( httpRequest.readyState == 4) {  //   call is completed
	  if( httpRequest.status == 200) {	//   HTTP is successful
		nodeb.innerHTML = httpRequest.responseText;
	  } else {
		alert("Error loading page\n" + httpRequest.status + ":" + httpRequest.statusText);
	  }
	}
  }

  function refreshProjectBoxes() {
//  var nodec = document.getElementById( "snooker");
//  nodec.innerHTML = "roadside";
	createRequest();
	httpRequest.open("GET", "list_project_names", true);
	httpRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded");
	httpRequest.onreadystatechange = update_projname_boxes;
	httpRequest.send(null);

  }

  function update_projname_boxes() {
	var selbox_name_arry = new Array('projnamebox_edit','projnamebox_delete');
	var project_data_arry = new Array;
	var selbox_id;
	if( httpRequest.readyState == 4) {  //   call is completed
	  if( httpRequest.status == 200) {	//   HTTP is successful
		var data_str = httpRequest.responseText;
		project_data_arry = data_str.split(';');
		for( jj = 0; jj < selbox_name_arry.length; jj++ ) {
			selbox_id = document.getElementById( selbox_name_arry[jj]);
			for( ii = 0; ii < project_data_arry.length; ii++ ) {
				selbox_id.options[ii] = new Option( project_data_arry[ii]);
			}
		}
	  } else {
		alert("Error loading page\n" + httpRequest.status + ":" + httpRequest.statusText);
	  }
	} else {
	  alert("call was not completed");
	}
  }

  function grabProjNameBoxEditVal() {
//  var nodec = document.getElementById('snooker');
	var selbox_id = document.getElementById('projnamebox_edit');
	var projpicked = selbox_id.options[this.selectedIndex].value;
	var indx = projpicked.indexOf(' - ');
	var project_id = projpicked.substring( 0, indx);
	var params = "pid=" + encodeURI( project_id);
//  nodec.innerHTML = project_id;
	createRequest();
	httpRequest.open("POST", "get_project_data", true);
	httpRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded");
	httpRequest.onreadystatechange = update_project_form;
	httpRequest.send( params);
  }

  function update_project_form() {
	var project_data_arry = new Array;
	if( httpRequest.readyState == 4) {  //   call is completed
	  if( httpRequest.status == 200) {	//   HTTP is successful
		var data_str = httpRequest.responseText;
		project_data_arry = data_str.split(";");
		document.forms.LoadProject.pname.value	= project_data_arry[0];
		document.forms.LoadProject.location.value = project_data_arry[1];
		document.forms.LoadProject.bid_date.value = project_data_arry[2];
	  } else {
		alert("Error loading page\n" + httpRequest.status + ":" + httpRequest.statusText);
	  }
	}
  }

  function updateProject() {
	var noded = document.getElementById('nineball');
	noded.innerHTML = "got inside updateProject";
	var selbox_id = document.getElementById('projnamebox_edit');
	noded.innerHTML = "got past selbox_id stmt";							   //   gets to here
	var projpicked = selbox_id.options[this.selectedIndex].value;
	noded.innerHTML = "got past projpicked stmt";							 //  does not get to here
	var indx = projpicked.indexOf(' - ');
	noded.innerHTML = "got past indx stmt";
	var project_id = projpicked.substring( 0, indx);
	noded.innerHTML = "got past project_id stmt";
	var params = "pid=" + encodeURI( project_id) + 
				 "&name=" + encodeURI( document.forms.LoadProject.pname.value) +
				 "&location=" + encodeURI( document.forms.LoadProject.location.value) +
				 "&bid_date=" + encodeURI( document.forms.LoadProject.bid_date.value);
	createRequest();
	httpRequest.open("POST", "update_project", true);
	httpRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded");
	httpRequest.onreadystatechange = update_project_reply;
	httpRequest.send( params);
  }

  function update_project_reply() {
	var nodec = document.getElementById( "snooker");
	nodec.innerHTML = "got inside update_project_reply";
	if( httpRequest.readyState == 4) {  //   call is completed
	  if( httpRequest.status == 200) {	//   HTTP is successful
		nodec.innerHTML = httpRequest.responseText;
	  } else {
		alert("Error loading page\n" + httpRequest.status + ":" + httpRequest.statusText);
	  }
	} else {
	  alert("call was not completed");
	}
  }

  function grabProjNameBoxDeleteVal() {
	var selbox_id = document.getElementById('projnamebox_delete');
	var projpicked = selbox_id.options[this.selectedIndex].value;
	var indx = projpicked.indexOf(' - ');
	var project_id = projpicked.substring( 0, indx);
	var params = "pid=" + encodeURI( project_id);
	createRequest();
	httpRequest.open("POST", "delete_project", true);
	httpRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded");
	httpRequest.onreadystatechange = delete_project_reply;
	httpRequest.send( params);
  }

  function delete_project_reply() {
	var noded = document.getElementById( "billiards");
	if( httpRequest.readyState == 4) {  //   call is completed
	  if( httpRequest.status == 200) {	//   HTTP is successful
		noded.innerHTML = httpRequest.responseText;
	  }
	}
  }

</script>

</head>
<body onload="init()">
<p>
<!-- create tabs -->
<div id="Tab1" class="tab"
  style="position:absolute;  left:20px; top:40px; width:80px; height:20px; z-index:1;">
  <a href="java script:turnOn('Tab1','Folder1');">Add</a>
</div>
<div id="Tab2" class="tab"
  style="position:absolute; left:100px; top:40px; width:80px; height:20px; z-index:1;">
  <a href="java script:turnOn('Tab2','Folder2');">Edit</a>
</div>
<div id="Tab3" class="tab"
  style="position:absolute; left:180px; top:40px; width:80px; height:20px; z-index:1;">
  <a href="java script:turnOn('Tab3','Folder3');">Delete</a>
</div>
<!-- create matching folders -->
<div id="Folder1" class="folder"
  style="position:absolute; left:20px; top:60px; width:800px; height:500px; z-index:1; visibility:visible; overflow:auto">
  <p>
  <center><h3>Project Addition</h3></center>
  <p>
  Project Name <input type="text" id="projname" size="60" maxlength="60">
  <p>
  <center><input type="button" value="Submit" onclick="get_new_project_sku(document.getElementById('projname').value);"></center>
  <p>
  <div id="project_add_target"></div>
</div>
<div id="Folder2" class="folder"
  style="position:absolute; left:20px; top:60px; width:800px; height:500px; z-index:2; visibility:hidden;  overflow:auto">
  <center><h3>Project Edit</h3></center>
  <p>
  <center><select id="projnamebox_edit" size="5"></select></center>>
  <p>
  <p>
  <table>
	<form name="LoadProject" method="post">
	  <tr>
		<td align="right">Name:</td>
		<td><input name="pname" type="text" size="60" maxlength="60">
		<td id="msg_pname">&nbsp;</td>
	  </tr>
	  <tr>
		<td align="right">Location:</td>
		<td><input name="location" type="text" size="60" maxlength="60">
		<td id="msg_location">&nbsp;</td>
	  </tr>
	  <tr>
		<td align="right">Bid Date:</td>
		<td><input name="bid_date" type="text" size="12" maxlength="12"></td>
		<td id="msg_bid_date">&nbsp;</td>
		<td>&nbsp;&nbsp;&nbsp;must be in YYYY-MM-DD format</td>
	  </tr>
	</form >
  </table>
  <p>
  <center><input type="button" value="Update Project" onclick="updateProject();"></center>
  <p>
  <p>
  <div id="nineball"></div>
  <p>
  <div id="snooker"></div>
</div>
<div id="Folder3" class="folder"
  style="position:absolute; left:20px; top:60px; width:800px; height:500px; z-index:3; visibility:hidden;  overflow:auto">
  <center><h3>Project Deletion</h3></center>
  <center><select id="projnamebox_delete" size="5"></select></center>
  <p>
  <center><input type="button" value="Delete Project" onclick="deleteProject();"></center>
  <p>
  <p>
  <div id="billiards"></div>
</div>
</body>
</html>




I'd be hugely grateful for some help with this. I'm fairly new to mixing up this java/ajax/servlets/javascript jambalaya

TIA,

Still-Learing Steve

Is This A Good Question/Topic? 0
  • +

Replies To: javascript/ajax/jsp jambalaya (or Why does my function come to a halt?

#2 kerchunk  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 21-July 08

Re: javascript/ajax/jsp jambalaya (or Why does my function come to a halt?

Posted 16 October 2008 - 09:24 PM

I've since learned that just because a readystate does not return a code == 4 does not necessarily mean it failed.
So I've removed the extraneous alerts from my code and that solved Problem 1.

Now the select boxes dynamically populate and making a selection fills in the form wonderfully.

But then clicking the "Update" button still stalls shortly after entering the updateProject() function.

http://www.purpleliz...project_try.jsp

1/2 way home...

Still-Learning Steve
Was This Post Helpful? 0
  • +
  • -

#3 kerchunk  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 21-July 08

Re: javascript/ajax/jsp jambalaya (or Why does my function come to a halt?

Posted 18 October 2008 - 12:07 AM

The solution to Problem 2 is to use

var projpicked = document.selbox_id.options[selbox_id.selectedIndex].value
instead of
var projpicked = document.selbox_id.options[this.selectedIndex].value

even though the latter works the first time it is executed on the page. Go figure.

CASE CLOSED

Thanks to all to replied!

Still-Learning Steve
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1