Advertisement

07.04.2008 at 06:12AM PDT, ID: 23539399 | Points: 500
[x]
Attachment Details

Dynamically initiating spry validation with AJAX

Asked by Snarfles in Asynchronous Javascript and XML (AJAX), JavaScript, PHP Scripting Language

Tags:

Hey

Ok so I have a form which I am using Spry to validate with. On this form I have amongst other things, what I call 'child' items. So my form which is dependant on the master item will have between 1 and 5 children. Each child item has 4 form elements (2 select and 2 radio button sets). My rules for these children are that the 1st item MUST be filled in. The others are all optional. So I have it all set so that all form elements and the 1st child set are all validated correctly. With the 2nd - 5th children the 2nd to 4th elements are only activated using AJAX if the first select box is used. At this point I need to enforce that the 2nd to 4th elements are required. I can set it up with AJAX that it puts the spry scripts on the page, however they dont seem to work. I am assuming that this is because the spry validation widgets only load when the page first loads and not when I include them with AJAX.  Ok so Im not sure that makes but Ill provide some code and see if you can understand me and give me a hand :)Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:

//This is all on my main page
 
<!-- Item Sizes-->
<span id="spryselect1<?php echo $counter; ?>" class="field">
<label for="product_sizes_names<?php echo $counter; ?>" class="label">Item Size:</label>
<select name="product_sizes_names<?php echo $counter; ?>" class="textinput" id="product_sizes_names<?php echo $counter; ?>" onChange="showsizes(this.value,<?php echo $counter; ?>, <?php echo $maximum_items; ?>); buttons_enable(<?php echo $counter; ?>); <?php if ($has_pages == 1) { ?>showPages(<?php echo $max_pages; ?>, 2); <?php } ?> childValidation(<?php echo $counter; ?>);">
  <option value="0">Please select from here to add an item</option>
 
  <?php
	do {  
	?>
  <option value="<?php echo $row_product_sizes['product_size_key']?>">
  
  <?php echo $row_product_sizes['description']?></option>
  <?php
	} while ($row_product_sizes = mysql_fetch_assoc($product_sizes_names));
  		$rows = mysql_num_rows($product_sizes_names);
  		if($rows > 0) {
      		mysql_data_seek($product_sizes_names, 0);
	  		$row_product_sizes = mysql_fetch_assoc($product_sizes_names);
  		}
  ?>
 
	</select>
	<span class="selectRequiredMsg">Please select a item type.</span><span class="selectInvalidMsg">Please select a item type.</span>
	</span>
 
<!-- Ad Sizes-->
	
	<span id="spryselect2<?php echo $counter; ?>" class="field" >
	<p><label for="ad_size<?php echo $counter; ?>" class="label">Ad Size:</label>
	<select name="ad_size<?php echo $counter; ?>" class="textinput" id="ad_size<?php echo $counter; ?>">
  	<option value="0">Select an item above</option>
  	</select>
	<span class="selectRequiredMsg">Please select an ad size.</span><span class="selectInvalidMsg">Please select an ad size.</span></p>
	</span>
    <div id="AdSizeValidation<?php echo $counter; ?>">
    </div>
    
<!--Bleed-->
	
	<span id="spryradio1<?php echo $counter; ?>" class="field">
      <p><label for="bleed<?php echo $counter; ?>" class="label">Bleed?</label>
       <div class="textinput">
      <strong>Yes</strong><span id="bleed1<?php echo $counter; ?>"><input name="bleed<?php echo $counter; ?>" type="radio" value="2" onClick="showIt('bleed_comment<?php echo $counter; ?>');" <?php if ($counter > 1) { ?>disabled="disabled" <?php } ?>/></span>
      <strong>No</strong><span id="bleed2<?php echo $counter; ?>"><input name="bleed<?php echo $counter; ?>" type="radio" value="1" onClick="hideIt('bleed_comment<?php echo $counter; ?>');" <?php if ($counter > 1) { ?>disabled="disabled" <?php } ?>/></span>
      </div>
      	<span class="radioRequiredMsg">Please make a selection.</span><span class="radioInvalidMsg">Please make a selection.</span></p>
	</span>
    <div id="BleedValidation<?php echo $counter; ?>">
    </div>
	
    <div class = "hide" id="bleed_comment<?php echo $counter; ?>">
    <p><span class="field">
    <span class="formsmall">5mm bleed + 10mm safe area within image space is standard, if you require anything different, please specify &amp; explain.</span>
	<label for="bleed_comment<?php echo $counter; ?>" class="label" id="bleed_comment<?php echo $counter; ?>">Custom bleed size:</label>
    
    <input name="bleed_comment<?php echo $counter; ?>" type="text" id="bleed_comment<?php echo $counter; ?>" size="40" maxlength="255" class="textinput" />
    
    </span>
    </p>
    </div>
     
<!--Colour-->
	<span id="spryradio2<?php echo $counter; ?>" class="field">
      <p><label for="colourMono<?php echo $counter; ?>" class="label">Colour/Spot or Mono?</label>
      <div class="textinput">
      <strong>Colour/Spot</strong><span id="colour1<?php echo $counter; ?>"><input name="colourMono<?php echo $counter; ?>" type="radio" value="1" <?php if ($counter > 1) { ?>disabled="disabled" <?php } ?>/></span>
      <strong>Mono</strong><span id="colour2<?php echo $counter; ?>"><input name="colourMono<?php echo $counter; ?>" type="radio" value="2" <?php if ($counter > 1) { ?>disabled="disabled" <?php } ?>/></span>
      </div>
      <span class="radioRequiredMsg">Please select a colour type.</span><span class="radioInvalidMsg">Please select an a colour type.</span></p>
	</span>
        <div id="ColourValidation<?php echo $counter; ?>">
    </div>
    
<!-- Child validation -->
	<div id="childValidation<?php echo $counter; ?>">
    </div>
 
 
 
//Here is my javascript for showing the sizes which is element 2 (activated from selecting from element 1
 
function showsizes(str,counter,max_items){ 
 
xmlHttp=GetXmlHttpObject();
 
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="creative/sizes.php";
url=url+"?product_sizes_names="+str;
url=url+"&counter="+counter;
var element="ad_size"+counter;
 
xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState == 4) {
     document.getElementById(element).innerHTML=xmlHttp.responseText;
    } 
 }
 
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
 
//enabling my buttons
function buttons_enable(counter){ 
// enable the buttons
 
xmlHttp2=GetXmlHttpObject();
xmlHttp3=GetXmlHttpObject();
xmlHttp4=GetXmlHttpObject();
xmlHttp5=GetXmlHttpObject();
xmlHttp6=GetXmlHttpObject();
 
var url2="creative/enable_buttons.php";
url2=url2+"?button=bleed1";
url2=url2+"&counter="+counter;
var url3="creative/enable_buttons.php";
url3=url3+"?button=bleed2";
url3=url3+"&counter="+counter;
var url4="creative/enable_buttons.php";
url4=url4+"?button=colour1";
url4=url4+"&counter="+counter;
var url5="creative/enable_buttons.php";
url5=url5+"?button=colour2";
url5=url5+"&counter="+counter;
 
var element2="bleed1"+counter;
var element3="bleed2"+counter;
var element4="colour1"+counter;
var element5="colour2"+counter;
 
xmlHttp2.onreadystatechange=function(){
    if(xmlHttp2.readyState == 4) {
     document.getElementById(element2).innerHTML=xmlHttp2.responseText;
    } 
 }
 
xmlHttp2.open("GET",url2,true);
xmlHttp2.send(null);
 
xmlHttp3.onreadystatechange=function(){
    if(xmlHttp3.readyState == 4) {
	 document.getElementById(element3).innerHTML=xmlHttp3.responseText;
    } 
 }
xmlHttp3.open("GET",url3,true);
xmlHttp3.send(null);
 
xmlHttp4.onreadystatechange=function(){
    if(xmlHttp4.readyState == 4) {
	 document.getElementById(element4).innerHTML=xmlHttp4.responseText;
    } 
 }
xmlHttp4.open("GET",url4,true);
xmlHttp4.send(null);
 
xmlHttp5.onreadystatechange=function(){
    if(xmlHttp5.readyState == 4) {
	 document.getElementById(element5).innerHTML=xmlHttp5.responseText;
    } 
 }
xmlHttp5.open("GET",url5,true);
xmlHttp5.send(null);
 
}
 
// This is my enable_buttons.php page which basically makes the buttons for elements 3 and 4 not disabled when the first is selected.
 
<?php 
 
$button = $_GET['button'];
$counter = $_GET['counter'];
 
if ($button == "bleed1") { 
echo "<input name=\"bleed$counter\" type=\"radio\" value=\"2\" onClick=\"showIt('bleed_comment$counter');\"/>";
 }
else if ($button == "bleed2") { 
echo "<input name=\"bleed$counter\" type=\"radio\" value=\"1\" onClick=\"hideIt('bleed_comment$counter');\"/>";
 }
else if ($button == "colour1") { 
echo "<input name=\"colourMono$counter\" type=\"radio\" value=\"1\" />";
 }
else if ($button == "colour2") { 
echo "<input name=\"colourMono$counter\" type=\"radio\" value=\"2\" />";
 }
?>
 
// So everything up to this point works fine.
// this is my child activation javascript
 
function childValidation(counter){
xmlHttp7=GetXmlHttpObject();
 
var url7="creative/sizes_Validation.php";
//url5=url5+"?max_items="+max_items;
url7=url7+"?counter="+counter;
var element7="childValidation"+counter;
 
 
xmlHttp7.onreadystatechange=function(){
//xmlHttp.onreadystatechange = function(element) {
    if(xmlHttp7.readyState == 4) {
     document.getElementById(element7).innerHTML=xmlHttp7.responseText;
    } 
 }
 
xmlHttp7.open("GET",url7,true);
xmlHttp7.send(null);
//end validation
 
}
 
//and finally my sizes_validation.php page 
<?php
$counter=$_GET["counter"];
 
?>
<script type="text/javascript">
<!--
var spryselect2<?php echo $counter; ?> = new Spry.Widget.ValidationSelect("spryselect2<?php echo $counter; ?>", {validateOn:["change", "blur"], invalidValue:"0"});
var spryradio1<?php echo $counter; ?> = new Spry.Widget.ValidationRadio("spryradio1<?php echo $counter; ?>", "none", {validateOn:["change", "blur"], defaultValue:"None", invalidValue:"None"});
var spryradio2<?php echo $counter; ?> = new Spry.Widget.ValidationRadio("spryradio2<?php echo $counter; ?>", "none", {validateOn:["change", "blur"], defaultValue:"None", invalidValue:"None"});
-->
</script>
 
Keywords: Dynamically initiating spry validation wit…
Title
1 AJAX
2 Cannot get ANY AJAX example to work
3 I'm looking for a great example/tutori…
4 ajax jsp problem
5 ajax
6 ajax-printing records field when user …
 
Loading Advertisement...
 
[+][-]07.06.2008 at 04:40PM PDT, ID: 21942017

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]07.07.2008 at 07:45PM PDT, ID: 21950405

Experts Exchange has a courteous staff of administrators who help members get the most out of the website by means of administrative comments like this one.

Start your 7-day free trial to view this Administrative Comment or ask the Experts your question.

 
[+][-]07.10.2008 at 09:08PM PDT, ID: 21979902

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]07.13.2008 at 07:41PM PDT, ID: 21995317

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]07.14.2008 at 05:56PM PDT, ID: 22003420

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]08.10.2008 at 03:12AM PDT, ID: 22199225

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628