JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Creating a custom (popup) prompt

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Aug 2004
Posts: 24
Reputation: ray_broome is an unknown quantity at this point 
Solved Threads: 0
ray_broome ray_broome is offline Offline
Newbie Poster

Creating a custom (popup) prompt

 
0
  #1
Oct 15th, 2008
Hi all,

I'm trying to create a more customized version of the prompt function built in by javascript where i basically use some dhtml to bring up a div made up to resemble the javascript prompt window. I am getting some problems with hiding/showing it though.

Here's the javascript:
javascript Syntax (Toggle Plain Text) 
  1. <script type="text/javascript">
  2.  
  3. 	/*
  4. 		closePopup function - close a dynamic popup window
  5. 	*/
  6. 	function hide(divId)
  7. 	{
  8. 		var divWind = document.getElementById(divId);
  9.  
  10. 		//alert(divId);
  11. 		//divWind.divWinContent.innerHTML = "";
  12. 		//alert(divId);
  13. 		//if(this.isHidden)
  14. //			return false; // return false if already hidden
  15. //			
  16. 		divWind.style.display = "none";
  17. //		divWind.isHidden = true;
  18. //		return true;
  19. 	}
  20.  
  21.  
  22.  
  23. 	/*
  24. 		initPopup function - initialize the popup window
  25. 	*/
  26. 	function init()
  27. 	{
  28. 		var divWin = document.createElement("div");
  29.  
  30. 		//this.tblName = tblName;
  31. 		//this.selectId = selectId;
  32. 		//this.divId = divId;
  33.  
  34. 		divWin.id = this.divId;
  35. 		divWin.className = "divwindow";
  36.  
  37. 		divWinData = '<div class="divWinTitle">';
  38. 		divWinData += '<h4>Add a new '+ this.selectId +'</h4>';
  39. 		divWinData += '</div>';
  40. 		divWinData += '<div class="divWinContent">';
  41. 		divWinData += '<form name="promptForm">';
  42. 		divWinData += '<p>';
  43. 		divWinData += '<img src="images/quesmark.gif" style="text-align: left;" />';
  44. 		if(this.tblName == "infraspecies" || this.tblName == "syn_infraspecies")
  45. 		{
  46.  
  47. 			divWinData += '<select name="newRank" id="newRank">';
  48. 			divWinData += '<option selected="selected">Rank</option>';
  49. 			divWinData += '<option>f</option>';
  50. 			divWinData += '<option>ssp</option>';
  51. 			divWinData += '<option>var</option>';
  52. 			divWinData += '</select>';
  53. 		}
  54. 		divWinData += '&nbsp;&nbsp;<label for="newName">Name: </label>';
  55. 		divWinData += '<input type="text" name="newName" id="newName" /> <br /> <br />';
  56. 		divWinData += '<span style="text-align:center; display:block;">';
  57. 		divWinData += '<input type="button" id="commitBtn" name="commitBtn" value="GO" /> &nbsp;';
  58. //			divWinData += '<input type="submit" id="cancelBtn" name="cancelBtn" value="Cancel" onclick="promptWin.close()" />';
  59. 		divWinData += '<input type="button" id="cancelBtn" name="cancelBtn" value="Cancel" />';
  60. 		divWinData += '</span>';
  61. 		divWinData += '</p>';
  62. 		divWinData += '</div>';
  63. 		divWinData += '</form>';
  64. 		divWin.innerHTML = divWinData;
  65.  
  66. 		//divWin.close = this.close;
  67. 		//divWin.submitValues = this.submitValues;
  68.  
  69. 		document.getElementById("main").appendChild(divWin);
  70.  
  71. 		document.getElementById("cancelBtn").onclick = this.hide(this.divId);
  72. 		document.getElementById("commitBtn").onclick = this.submitValues(this.divId); // return values when user clicks GO
  73.  
  74. 		//return divWin;
  75. 	}
  76.  
  77.  
  78.  
  79. 	/*
  80. 		showPopup
  81. 	*/
  82. 	function show()
  83. 	{
  84. 		var divWind = document.getElementById(this.divId);
  85.  
  86. 		//if(!divWind.isHidden)
  87. //			return false; // if shown return false
  88.  
  89. 		divWind.style.display = "block";
  90. 		//divWind.isHidden = false;
  91. 		return true;
  92. 	}
  93.  
  94.  
  95. 	/*
  96. 		submitValues
  97. 	*/
  98. 	function submitValues(divId)
  99. 	{
  100. 		var url="additem.php";
  101. 		var divWind = document.getElementById(divId);
  102.  
  103. 		if(document.getElementById("newRank"))
  104. 		{
  105. 			var url="additem.php";
  106. 			var extra = document.getElementById("newRank").value;
  107. 			var name = document.getElementById("newName").value;
  108.  
  109. 			url += "?t="+divWind.tblName+"&v="+name+"&o="+divWind.orderBy+"&v2="+extra;
  110. 			alert(url);
  111. 			//url=url+"&sid="+Math.random();
  112. 			//xmlHttp.onreadystatechange = stateChanged;
  113. //				xmlHttp.open("GET",url,true);
  114. //				xmlHttp.send(null);
  115. 		}
  116. 		else
  117. 		{
  118. 			var url="additem.php";
  119. 			var name = document.getElementById("newName").value;
  120.  
  121. 			url += "?t="+divWind.tblName+"&v="+name+"&o="+divWind.orderBy+"&v2=";
  122. 			//alert(url);
  123. 			//url=url+"&sid="+Math.random();
  124. 			//xmlHttp.onreadystatechange = stateChanged;
  125. //				xmlHttp.open("GET",url,true);
  126. //				xmlHttp.send(null);
  127. 		}
  128. 		hide(divId);
  129. 		//document.getElementById(divId).style.display = "none";
  130. 	}
  131.  
  132.  
  133.  
  134.  
  135. 	/*
  136. 		divWindow constructor
  137. 	*/
  138. 	function divWindow(tblName,selectId,orderBy,divId)
  139. 	{
  140. 		/* properties */
  141. 		this.tblName = tblName;
  142. 		this.selectId = selectId;
  143. 		this.orderBy = orderBy;
  144. 		this.divId = divId;
  145. 		//this.isHidden = true; // start off hidden
  146. 		this.newRank = "";
  147. 		this.newName = "";
  148.  
  149.  
  150. 		/* methods */
  151. 		this.init = init;
  152. 		this.show = show;
  153. 		this.hide = hide;
  154. 		this.submitValues = submitValues;
  155.  
  156. 		//this.submitValues = submitValues;
  157.  
  158.  
  159. 		//var divWin = document.getElementById(divId);// get a ref to the window
  160. //		
  161. //		if(divWin == null)
  162. //		{
  163. 		//divWin = this.initPopup; // if div window does not yet exist, create it
  164.  
  165. 		//}
  166.  
  167.  
  168. 		//document.getElementById("cancelBtn").onclick = divWin.close; // close "window" when user clicks cancel
  169. //		document.getElementById("commitBtn").onclick = divWin.submitValues; // return values when user clicks GO
  170. 	}
  171. </script>

Here's the css:
css Syntax (Toggle Plain Text) 
  1. <style type="text/css">
  2. /* divwindow class definition */
  3. .divwindow {
  4. 	position:fixed;
  5. 	left:500px;
  6. 	top:200px;
  7. 	border:1px solid black;
  8. 	display:none;
  9. 	height:auto;
  10. 	background-color: #999999;
  11. }
  12.  
  13. .divWinTitle {
  14. 	border-bottom:1px solid black;
  15. 	background-color:#3366FF;
  16. 	height:auto;
  17. 	opacity: 0.8;
  18. 	filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);
  19. 	-moz-opacity: 0.8;
  20. 	cursor:default;
  21. }
  22.  
  23. .divWinTitle h4 {
  24. 	font-family:Arial, Helvetica, sans-serif;
  25. 	font-size:smaller;
  26. 	background-color:#3366FF;
  27. 	display:inline;
  28. }
  29.  
  30. .divWinContent {
  31. 	font-family:Arial, Helvetica, sans-serif;
  32. 	font-size:12px;
  33. 	overflow:auto;
  34. 	padding:5px;
  35. }
  36. </style>

and HTML:
html Syntax (Toggle Plain Text) 
  1. <p>
  2. 		<select name="family" id="family">
  3.             <option value="1" selected="selected">Fam1</option>
  4.             <option value="2">Fam2</option>
  5.             <option value="3">Fam3</option>
  6.     	</select>
  7.         <script type="text/javascript">
  8. 			var familyPrompt = new divWindow('families','family','family_name','promptFam');
  9. 			familyPrompt.init();
  10. 		</script>
  11.         <a href="javascript:void(0)" onclick="familyPrompt.show();" title="add new family">Add</a>
  12.     	<!--<a href="javascript:void(0)" onclick="new divWindow('families','family','family_name','promptFam');" title="add new family">
  13. Add</a>-->
  14.     </p>

Any help is greatly appreciated...
Last edited by ray_broome; Oct 15th, 2008 at 2:27 pm. Reason: updated code tags
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxexample ajaxjspservlets array browser bug captcha captchaformproblem cart checkbox child class close codes cookies createrange() cursor date debugger dependent disablefirebug dom dropdown editor element embed engine enter events explorer ext file firefox form forms frameworks getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl maps marquee masterpage math matrixcaptcha media menu object onerror onmouseoutdivproblem onreadystatechange parent paypal pdf php position post programming progressbar prototype rated redirect runtime safari scale scriptlets scroll search security session shopping size software star stars synchronous toggle unicode variables web webservice wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC