I have forms inside a cakephp app that load through ajax. These forms have jquery validation.
The problem is that the validaion script is contained within each form and when the form gets loaded the script gets removed. I can see the request inside firebug and the correct code is getting retrieved with the script but when I look at the dom after it is loaded the script is gone.
I have limited knowlege of cakephp ajax loading and cant see why the scripts is removed. The scripts that are within other forms that do not get loaded by ajax work just fine.
The loaded content does no
cakephp 1.3
Firefox 5.0
Thanks
Update ############################################
Here is the response from the get request in firebug. As you can see the script tag is there. But when I inspect the source code on the page the script is missing. I echo the JSHelper also
<div id="form_box">
<form id="RateAdminEditForm" method="post" action="/res360/res/admin/rates/edit/10" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="PUT" /></div> <input type="hidden" name="data[Rate][id]" value="10" id="RateId" />
<div id="form_tabs" class="column span-17">
<ul>
<li><a href="#form_tabs-1">Rate</a></li>
<li><a href="#form_tabs-2">Description</a></li>
<li><a href="#form_tabs-3">Dates</a></li>
<li><a href="#form_tabs-4">Rooms</a></li>
<li><a href="#form_tabs-5">Images</a></li>
</ul>
<div id="form_tabs-1">
<div class="input checkbox"><input type="hidden" name="data[Rate][enabled]" id="RateEnabled_" value="0" /><input type="checkbox" name="data[Rate][enabled]" class="form_input" value="1" id="RateEnabled" checked="checked" /><label for="RateEnabled">Enabled</label></div><div class="input checkbox"><input type="hidden" name="data[Rate][is_corporate]" id="RateIsCorporate_" value="0" /><input type="checkbox" name="data[Rate][is_corporate]" class="form_input" value="1" id="RateIsCorporate" /><label for="RateIsCorporate">Is Corporate</label></div><div class="input checkbox"><input type="hidden" name="data[Rate][special_offer]" id="RateSpecialOffer_" value="0" /><input type="checkbox" name="data[Rate][special_offer]" class="form_input" value="1" id="RateSpecialOffer" /><label for="RateSpecialOffer">Special Offer</label></div> <div class="input text"><label for="RateListNo">Display Order</label>
<select id="RateListNo" name="data[Rate][list_no]" class="form_input"><option value="0">0</option><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select> </div>
<hr />
<div class="input text"><label for="RateIdRef">Id Ref</label><input name="data[Rate][id_ref]" type="text" class="form_input" maxlength="64" value="b" id="RateIdRef" /></div><div class="input text"><label for="RateTitle">Title</label><input name="data[Rate][title]" type="text" class="form_input" maxlength="128" value="Bed & Breakfast Rate" id="RateTitle" /></div> <div class="input text"><label for="RatePriceQuoteAs">Price Quote As</label>
<select id="RatePriceQuoteAs" name="data[Rate][price_quote_as]" class="form_input"><option value="0">Per Booking</option><option value="1">Per Room</option><option value="2" selected="selected">Per Person</option></select>
</div>
<div class="input text"><label for="RateAdultSupplement">Adult Supplement</label><input name="data[Rate][adult_supplement]" type="text" class="form_input" maxlength="12" value="0.00" id="RateAdultSupplement" /></div><div class="input text"><label for="RateChildSupplement">Child Supplement</label><input name="data[Rate][child_supplement]" type="text" class="form_input" maxlength="12" value="10.00" id="RateChildSupplement" /></div><div class="input text"><label for="RateSupplement">Supplement</label><input name="data[Rate][supplement]" type="text" class="form_input" maxlength="12" value="0.00" id="RateSupplement" /></div>
</div>
<div id="form_tabs-2">
<div class="input text"><label for="RateShortDescription">Short Description</label><input name="data[Rate][short_description]" type="text" maxlength="255" value="" id="RateShortDescription" /></div> <div class="input textarea"><label for="RateDescription">Description</label><textarea name="data[Rate][description]" cols="30" rows="6" id="RateDescription" >Includes Full Irish breakfast each morning.</textarea></div> </div>
<div id="form_tabs-3">
<div class="input select">
<label for="RateAvailabilityDrop">Availability</label>
<select id="RateAvailabile" name="data[Rate][available][]" multiple="multiple"><option value="1" selected="selected">Monday</option><option value="2" selected="selected">Tuesday</option><option value="3" selected="selected">Wednesday</option><option value="4" selected="selected">Thursday</option><option value="5" selected="selected">Friday</option><option value="6" selected="selected">Saturday</option><option value="0" selected="selected">Sunday</option></select> </div>
<div class="input text"><label for="RateMinimumStay">Minimum Stay</label><input name="data[Rate][minimum_stay]" type="text" class="form_input" maxlength="3" value="1" id="RateMinimumStay" /></div><div class="input text"><label for="RateMaximumStay">Maximum Stay</label><input name="data[Rate][maximum_stay]" type="text" class="form_input" maxlength="3" value="100" id="RateMaximumStay" /></div>
<div class="input text">
<label for="RateValidFrom">Valid From</label>
<input id="RateValidFrom" class="form_input form_datepicker" name="data[Rate][valid_from]"
type="text" value="2011-09-01" />
</div>
<div class="input text">
<label for="VoucherValidTo">Valid To</label>
<input id="RateValidTo" class="form_input form_datepicker" name="data[Rate][valid_to]"
type="text" value="2012-09-01" />
</div>
</div>
<div id="form_tabs-4">
<h3>Related Rooms</h3>
<div class="input select"><input type="hidden" name="data[Room][Room]" value="" id="RoomRoom_" />
<select name="data[Room][Room][]" class="multiselect" multiple="multiple" id="RoomRoom">
<option value="16" selected="selected">Classic Triple Room</option>
<option value="15" selected="selected">Deluxe Double Room</option>
<option value="12" selected="selected">Classic Double Room</option>
<option value="13" selected="selected">Classic Twin Room</option>
<option value="14" selected="selected">Classic Single Room</option>
<option value="11" selected="selected">Deluxe Single Room</option>
<option value="17" selected="selected">Family Room - 3 children</option>
<option value="18" selected="selected">Family Room - 1 or 2 children</option>
</select></div> </div>
<div id="form_tabs-5">
<div id="uploader"></div>
<div class="boxgrid grid_8">
<div id="attachments">
<h3>Attachments</h3>
<!-- <div class="buttons"><a href="//www.treacyshotelwaterford.com/res360/res/admin/rates/addfiles/10" class="inbox">edit Images</a></div> -->
<ul>
<li><a href="#"><img src="//www.treacyshotelwaterford.com/res360/res/Media/filter/s/img/corporate_bedroom.png" /></a></li>
</ul>
<div style="clear:both;"></div>
</div>
</div>
<hr />
</div>
</div>
<div id="form_col" class="form_buttons">
<!-- <a class="icon_delete cboxClose" href="#delete(0)">Cancel</a> -->
<div class="submit"><input type="submit" value="UPDATE" /></div>
</div>
</form>
</div>
<div id="error_msg"></div>
<script type="text/javascript">
$(document).ready(function() {
$("div#uploader").resloader();
$("div#uploader").load('//www.treacyshotelwaterford.com/res360/res/admin/rates/addfiles/10',null,function(){}).fadeIn();
$(".multiselect").multiselect();
/* JQuery Datepicker */
$('.form_datepicker').datepicker({
dateFormat: 'yy-mm-dd'
});
// validate form on keyup and submit
$("#RateEditForm").validate({
rules: {
'data[Rate][title]': {required: true, minlength: 3, maxlength:32 },
'data[Rate][id_ref]': {required: true, digits: true },
'data[Rate][supplement]': {number: true, minlength: 1 },
'data[Rate][adult_supplement]': {number: true, minlength: 1 },
'data[Rate][child_supplement]': {number: true, minlength: 1 },
'data[Rate][valid_from]': {required: true, date: true},
'data[Rate][valid_to]': {required: true, date: true},
'data[Rate][minimum_stay]': {required: true, digits: true},
'data[Rate][maximum_stay]': {required: true, digits: true},
'data[Rate][available][]': {required: true},
'data[Room][Room][]': {required: true},
},
messages: {
'data[Rate][title]': {required: "Please Enter a Rate title"},
'data[Rate][id_ref]': {required: "Please Enter an ID Ref"},
'data[Rate][supplement]': {required: "Supplement must be numeric "},
'data[Rate][adult_supplement]': {required: "Adult Supplement must be numeric "},
'data[Rate][child_supplement]': {required: "Child Supplement must be numeric "},
'data[Rate][valid_from]': {required: "Please enter a valid Date From"},
'data[Rate][valid_to]': {required: "Please enter a valid Date To "},
'data[Rate][minimum_stay]': {required: "Please Enter a minimum stay Value"},
'data[Rate][maximum_stay]': {required: "Please Enter a maximum stay Value"},
'data[Rate][available][]': {required: "Please select at least one Availability Day"},
'data[Room][Room][]': {required: "Please select at least one Related Room"},
},
errorPlacement: function(error, element) {
$('#error_msg').html(error);
}
});
});
</script>
I discovered the issue. I was not passing the id through the form correctly to the jquery.