Hi List

I am having a problem Ajax.Updater that only seems to occur with Safari.

The application is a dynamic "drop-down" based on categories and subcategories. You select the primary category and the page shows you the correct sub-categories, in a standard <SELECT> construction.

In Safari, on the screen it works fine, but the "subcategory" value is empty on the SUBMITted page.

This is my javascript:


function ajaxhandler() {

var thevalue = document.getElementById("pcategory").value;
if (thevalue != ' ') {
new Ajax.Updater('subcatdiv', 'sq-subcatdisplay.lasso',{method:'post', parameters: {xcategory: thevalue} });
}
}


Here is the primary category bit, invoking the js function, this [] stuff is actually lasso code but should be fairly easy to follow.


<select name="pcategory" id="pcategory" size="1" onchange="ajaxhandler();">
<option selected="selected" value="">Please Select</option>

<option selected="selected" value="[field: 'categoryid']">[field: 'title']</option>

</select>


This is the subcategory bit:


<td colspan="3">
<div name="subcatdiv" id="subcatdiv">
Please Select the Category
</div>
</td>


the meat of this is the 'sq-subcatdisplay.lasso' page, it receives the xcategory parameter each time and generates a select statement, something like:


<select name="subcategory">
<option value="one">First</option>
<option value="two">Second</option>
<option value="three">Third</option>
</select>


I hope this all makes sense, I really have no idea why it doesn't work so any pointers appreciated.

I have put in a work around which fixed this.

It seems Safari does know the new value of the form element, whilst its on the screen, it just doesn't know it when the form is submitted. I have put in a line of javascript before the form is submitted to set the value of a hidden element to the value of the element updated by the ajax updated element.

So instead of just submitting the form, I do this:


ajaxfix() ;
document.updateform.submit() ;


This is my ajaxfix() which could be just one line:

{
var testvar = document.getElementById('ajaxsubcat').value ;
document.getElementById('subcategory').value = testvar ;
}



So now my select uses "ajaxsubcat" not subcategory, so the effect is this:


<div id="ajaxdiv">
<select name="ajaxsubcat">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<input type="hidden" name="subcategory" id="subcategory" value="0" />


Please note this is not the full code, just a technique.