views:

43

answers:

2

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"&gt;&lt;/script&gt;
<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>
A: 

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.

tjko
yes, that is line is in style.css, which is in the same directory as eateries.php. my doctype is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
vee
@vee, what gives you the impression that that "CSS isn't working?" Are those properties just not being applied like you'd expect?
tjko
it's not working because the font is serif and is not red. i added an additional comment in the original post: 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.
vee
@vee, I posted another answer. Let me know if that's the issue.
tjko
A: 

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.

tjko
changing it to "body" worked, but i'm confused about why! it's true that when i looked at the code in firebug, the body tag had disappeared. however when i viewed source, everything looked correct (<body> was there).also, when i do $.post("eateries.php", { opentimes: o, price: p, distance: d, type: t }, function(data) { console.log(data) } ); i can see that data includes the html, head, body tags and everything else. how can when you set body to data, only the appropriate stuff goes in there?i hope that made sense.
vee
@vee, I think that it may be because the source doesn't display the updated version of the DOM while Firebug does? And about your second question, I'm really not sure why that happens. I'd guess it's some jQuery awesome, but I may be wrong. You could always check it out yourself: http://github.com/jquery/jquery/blob/master/src/manipulation.js ;)In any case, I'm glad we figured out what was up.
tjko
okay, thankyou!
vee