dropdown select menu loses css style after ajax response

ipBlazed

New Member
I have a form where the user can choose his country and then depending on the country that is chosen, the dropdown (select) of the form changes to a list of states/provinces of that country. So far so good. The problem is that the dropdown select form is styled with CSS. When the page initially loads, everything is perfect, but when the ajax script is called that then changes the states/provinces dropdown, it returns unstyled, so basically it loses all styling. Does anyone know how to get around this? The code is styled correctly, for some reason it's just not executing it when ajax returns it.Here is the jquery code:\[code\]function state_box(country, user_id){ xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; } var url = relative_path + 'states.php'; var action = url + '?country_id=' + country.value; xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { var response = xmlHttp.responseText; document.getElementById('stateBox').innerHTML = response; } }; xmlHttp.open("GET", action, true); xmlHttp.send(null);}\[/code\]And the content of states.php, basically just returns the dropdown, nothing fancy:\[code\] $display_output = '<select class="mystyle" name="dropdown" id="dropdown"> '; $display_output .= '<option value="" selected>Select a State</option> '; while ($state_details = $this->fetch_array($sql_select_states)) { $display_output .= '<option value="' . $state_details['id'] . '" ' . (($selected_value =http://stackoverflow.com/questions/14435468/= $state_details['id']) ? 'selected' : ''). '>' . $state_details['s.name'] . '</option>'; } $display_output .= '</select>'; $display_output = ($in_ajax) ? $display_output : '<div id="stateBox">' . $display_output . '</div>'; return $display_output;\[/code\]The only problem basically is that CSS class "mystyle" is not formatted in the browser after it's returned by ajax.
 
Back
Top