943,912 Members | Top Members by Rank

Ad:
Oct 15th, 2008
0

Creating a custom (popup) prompt

Expand Post »
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
Reputation Points: 10
Solved Threads: 0
Light Poster
ray_broome is offline Offline
25 posts
since Aug 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: AJAX Project titles Required
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Using Dojo





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC