jquery .post with $("html").html(data), body css not working_问答_开发者

i'm using the following code to submit a form:

function submitfilter(){
 alert("in here");
 var o = $("#opentimes").val();
 var p = $("#price").val();
 var d = $("#distance").val();
 var t = $("#type").val();
 $.post("eateries.php", { opentimes: o, price: p, distance: d, type: t }, function(data) { $("html").html(data); } );
 return false;
}

i'm running this from eateries.php, so as you can see i want to reload the same page (like a regular form submit does). everything is working fine except that some of my CSS isn't working. specifically:

body{font-family:Arial, Helvetica, sans-serif; font-size:14px; margin:0px;color:red;}

the rest of the CSS seems to be working fine. what's going on here??

edit: another thing i should probably mention is the CSS does work for a second.. while that alert("in here") is up (the text is Arial and red). however, after i hit "Ok", the font goes back to black serif.

thanks.

edit: here's the head section as requested.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<title>Eateries Gadget</title>
<link href="styles.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//alert ("you're using "+navigator.platform);
if(navigator.platform == 'iPhone' || navigator.platform == 'iPod')
{
 //alert("it's an iphone!");
 $(function(){ 
  $("body").css("font-size", "16px");
/* $("#footer").css("background-color", "blue");
     $("#footer").css("position", "static");*/
   $("select").css("font-size", "16px");
  $("input.btn").css("font-size", "14px");
  }); 
};
开发者_开发技巧
navigator.geolocation.getCurrentPosition(foundLocation, noLocation);

function foundLocation(position)
{
 var currLat = position.coords.latitude;
 var currLng = position.coords.longitude;
 //alert('Found location: ' + lat + ', ' + lng);
}
function noLocation()
{
 alert('Could not find your location.');
 var currLat = null;
 var currLng = null;
}

</script>

<script type="text/javascript">


function submitfilter(){
 alert("in here");
 var o = $("#opentimes").val();
 var p = $("#price").val();
 var d = $("#distance").val();
 var t = $("#type").val();
 $.post("eateries.php", { opentimes: o, price: p, distance: d, type: t }, function(data) { $("html").html(data); } );
 return false;
}


 function setstate(opentimes,price,distance,type){
  for(var i = 0; i < document.filters.opentimes.options.length; i++) {
   if(document.filters.opentimes.options[i].value == opentimes){
    document.filters.opentimes.selectedIndex = i;
    break;
   }
  }
  for(var i = 0; i < document.filters.price.options.length; i++) {
   if(document.filters.price.options[i].value == price){
    document.filters.price.selectedIndex = i;
    break;
   }
  }
  for(var i = 0; i < document.filters.distance.options.length; i++) {
   if(document.filters.distance.options[i].value == distance){
    document.filters.distance.selectedIndex = i;
    break;
   }
  }
  for(var i = 0; i < document.filters.type.options.length; i++) {
   if(document.filters.type.options[i].value == type){
    document.filters.type.selectedIndex = i;
    break;
   }
  }
 }
</script>

</head>

You are replacing the innerHTML of the <html> tag in the callback to the $.post! If you use firebug, you might notice that the body is disappearing all together.

A quick fix would be to target $("body") instead of $("html") in that $.post callback. Otherwise, make another element to populate with the return of that callback.

Assuming that line of CSS is in style.css in the same directory as this html file, there is no reason to believe that the CSS "isn't working" as your syntax is perfectly correct. Maybe make sure that you have a proper doctype directly above the <html> tag.

~~Also, as Nick mentioned in a comment to your question, why are you using AJAX if you desire to reload the page anyway?~~ (just noticed your reply concerning the proxy, however I'd start by looking into this)

UPDATE: You never even mention what gives you the impression that the "CSS isn't working."

NOTE: I'll update this as you give more information.