1. дома
  2. Вопрос и ответ
  3. Хром не хочет принимать $ Ajax, $ .Get, .load() или что-нибудь еще, что я пытаюсь

Хром не хочет принимать $ Ajax, $ .Get, .load() или что-нибудь еще, что я пытаюсь

2013-02-28 1 views
0

У меня есть правильный кошмар с Chrome и один запрос Ajax на маленькой странице, которую я создаю. Я в порядке, когда дело доходит до Javascript/jQuery, но это сводит меня с ума.

В основном у меня есть страница http://www.neuralnode.com/STARMAN/ (Предупреждение, похоже, иногда это может привести к поломке Chrome), и оно работает на большинстве версий Firefox и IE 9+, но всякий раз, когда я пытаюсь использовать его на хроме, он не работает вообще, тогда, если вы Оставьте его слишком долго. Я понятия не имею, что не так, и я искал повсюду. Позвольте мне объяснить код:

У нас есть на базе 2 страницы, index.php и viewer.php. index.php загружает viewer.php, используя различные методы, $.ajax в настоящее время, но я пробовал $.get, .load().

Вот полный код со всеми другими функциями Javascript, удаленными для большей ясности. На живом сайте весь код, кроме нагрузки ajax, закомментирован.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>StarViewer V1</title> 
<style type="text/css"> 
<!-- 
html { 
    width:100%; 
    height:100%; 
} 
body { 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    background-color: #666; 
    width:100%; 
    height:100%; 
    overflow:hidden; 
} 
#controls { 
    position: absolute; 
    left: 50%; 
    margin-left:-450px; 
    top: 0px; 
    background-color: #333; 
    width: 900px; 
    height: 100px; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #CCC; 
    font-size: 12px; 
    z-index: 999999; 
    opacity: 90%; 
    border: 2px solid; 
    border-radius: 5px; 
    -moz-border-radius: 5px; /* Old Firefox */ 
    box-shadow: 3px 3px 3px #3E3E3E; 
    margin-top: 20px; 
} 
#container { 
    width: 100%; 
    height: 100%; 
    background-image: url(img/bkg_full.gif); 
} 
#bigcontainer { 
    height: 100%; 
    width: 100%; 
    overflow: scroll; 
    position: relative; 
    z-index: 1; 
} 
.navigation { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 8px; 
} 
--> 
</style></head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script language="javascript" type="application/javascript"> 
$(document).ready(function() { 

    function navigation(typ){ 
     var Top = $('#bigcontainer').scrollTop(); 
     var Left = $('#bigcontainer').scrollLeft(); 

     var zoomspeed = $("#Speed").val(); 
     var speed = parseFloat(zoomspeed); 

     if(typ == 'LEFT UP') { 
      NewLeft = Left - speed; 
      NewTop = Top - speed; 
     } else if (typ == 'UP') { 
      NewLeft = Left; 
      NewTop = Top - speed; 
     } else if (typ == 'RIGHT UP') { 
      NewLeft = Left + speed; 
      NewTop = Top - speed; 
     } else if (typ == 'RIGHT') { 
      NewLeft = Left + speed; 
      NewTop = Top; 
     } else if (typ == 'RIGHT DN') { 
      NewLeft = Left + speed; 
      NewTop = Top + speed; 
     } else if (typ == 'DN') { 
      NewLeft = Left; 
      NewTop = Top + speed; 
     } else if (typ == 'LEFT DN') { 
      NewLeft = Left - speed; 
      NewTop = Top + speed; 
     } else if (typ == 'LEFT') { 
      NewLeft = Left - speed; 
      NewTop = Top; 
     } else if (typ == '+') { 
      NewLeft = 12100; 
      NewTop = 4400; 
     } 

     $('#bigcontainer').animate({ scrollTop: NewTop, scrollLeft: NewLeft}, 300); 
     //$('#bigcontainer').animate({ }, 500); 

     return false; 
    }; 
    var currlevel = $("#currzoom").attr("value"); 

    function LoadDataIntoDiv(data) { 
     $('#bigcontainer').html(data); 
     navigation('+'); 
    } 
     $.ajax({ 
       url: "viewer.php", 
       data: { 
        zoom:'-250' 
        }, 
       method: 'POST', 
       datatype: 'html', 
       async: true, 
       success: function(html) { 
        LoadDataIntoDiv(html) 
        }, 
       error: function(XMLHttpRequest, textStatus, errorThrown) { 
        alert(textStatus+" - "+errorThrown); 
        } 
     }); 

    /*$('#bigcontainer').load('', function() { 
     navigation('+'); 
    });*/ 


}); 


//? 
</script> 
<body> 
<div id="container"> 
<div id="controls"> 
    <table width="100%" border="0" cellspacing="2" cellpadding="2"> 
    <tr> 
     <td width="39%" align="center"><div id="zoommenu">Zoom [ <span class="item" title="-250">200%</span> | <span class="item" title="-110">150%</span> | <span class="item" title="-10">100%</span> | <span class="item" title="40">50%</span> | <span class="item" title="75">25%</span> | <span class="item" title="90">10%</span> ]</div></td> 
     <td width="15%" align="center">Selected Locations</td> 
     <td width="14%" align="right"><label> 
     <input type="button" name="lu" class="navigation" value="LEFT UP"/> 
     </label></td> 
     <td width="6%" align="center"><label> 
     <input type="button" name="up" class="navigation" value="UP"/> 
     </label></td> 
     <td width="9%" align="left"><label> 
     <input type="button" name="ru" class="navigation" value="RIGHT UP" /> 
     </label></td> 
     <td width="17%">Curr H 
     <label> 
      <input name="CurrHPos" type="text" id="CurrHPos" size="7" /> 
     </label></td> 
    </tr> 
    <tr> 
     <td align="right">From: 
     <input name="starsearch" type="text" id="starsearch" size="45" /> 
     <input name="currzoom" type="hidden" id="currzoom" value="-250" /></td> 
     <td align="center"><div id="searchreturn"></div></td> 
     <td align="right"><label> 
     <input type="submit" name="LEFT" id="LEFT" class="navigation" value="LEFT" /> 
     </label></td> 
     <td align="center"><label> 
     <input type="submit" name="CENTER" id="CENTER" class="navigation" value="+" /> 
     </label></td> 
     <td align="left"><label> 
     <input type="submit" name="RIGHT" id="RIGHT" class="navigation" value="RIGHT" /> 
     </label></td> 
     <td>Curr V 
     <label> 
      <input name="CurrVPos" type="text" id="CurrVPos" size="7" /> 
     </label></td> 
    </tr> 
    <tr> 
     <td align="right">To:<input name="starsearch2" type="text" id="starsearch2" size="45" /></td> 
     <td align="center"><div id="searchreturn2"></div></td> 
     <td align="right"><label> 
     <input type="button" name="ld" class="navigation" value="LEFT DN" /> 
     </label></td> 
     <td align="center"><label> 
     <input type="button" name="dn" class="navigation" value="DN" /> 
     </label></td> 
     <td align="left"><label> 
     <input type="button" name="rd" class="navigation" value="RIGHT DN" /> 
     </label></td> 
     <td>Scroll Speed: 
     <label> 
      <input name="Speed" type="text" id="Speed" value="300" size="7" /> 
     </label></td> 
    </tr> 
    </table> 
</div> 
<div id="bigcontainer"></div> 
</div> 
</body> 
</html>

и viewer.php - это довольно OFC петля длиной Еогеасп, и имеет грязный код в целом, но это не должно ничего особенного повлиять, как она работает в двух других Основные браузеры - я планирую привести в порядок позже, просто нужно, чтобы понять это ...

<?php 
include 'database.class.php'; 
$database = new DatabaseConnector; 
$Query = "SELECT * FROM startrekplanets"; 
$current = $database->ExecuteQuery($Query,"SELECT"); 
$zoomlevel=$_POST['zoom']; 
?> 
<style type="text/css"> 
<!-- 
body { 
    background-color: #000; 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
} 
.roundedname { 


} 
.roundedname span { 
    font-family: "Arial Black", Gadget, sans-serif; 
    color: #FFF; 
    opacity:0.9; /* Transparent Background 50% */ 
    display: inline-block; 
    width: 150px; 
} 
#planetinformation { 
    overflow: hidden; 
    position: absolute; 
    z-index: 888888888; 
    width: 185px; 
    background-color: #005BCC; 
    border: 2px solid; 
    border-radius: 5px; 
    -moz-border-radius: 5px; /* Old Firefox */ 
    box-shadow: 3px 3px 3px #3E3E3E; 
} 
#planetinformation .ItemTitle{ 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 18px; 
    font-weight: bold; 
    color: #F60; 
    padding: 3px; 
    margin: 0px; 
} 
#planetinformation td { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: normal; 
    color: #000; 
    padding: 0px; 
} 
--> 
</style> 

<script language="javascript" type="application/javascript"> 

$(document).ready(function() { 

    $("#planetinformation").hide();  

    $(".planetaryobject").click(function() { 
     var planid = $(this).attr("title"); 
     $.ajax({ 
       type: "POST", 
       url: "starquery.php", 
       data: "sstring="+planid+"&currzoom="+<?php echo $zoomlevel; ?>, 
       success: function(html) { 
        var SortedVars = new Object; 
        var SplitVars = html.split(','); 
        SortedVars = CollectVars(SplitVars); 
        $('#planetinformation').show('slow', function() { 
         $("#planetinformation").css("margin-top", SortedVars.V+40); 
         $("#planetinformation").css("margin-left", SortedVars.H+40); 
         $('#planetinformation').show('slow', function() { 
          $("#planetinformation .ItemTitle").html(SortedVars.Name); 
          $("#planetinformation .ItemQuadrant").html(SortedVars.Quadrant); 
          $("#planetinformation .ItemGrid").html(SortedVars.Grid); 
          $("#planetinformation .ItemCords").html(SortedVars.HCord+'/'+SortedVars.VCord); 
          $("#planetinformation .ItemStatus").html(SortedVars.Status); 
          $("#planetinformation .ItemOwnership").html(SortedVars.Zoned); 
          if (SortedVars.WikiLink) { 
           var formattedlink = '<a href="'+SortedVars.WikiLink+'">Link!</a>'; 
           $("#planetinformation .ItemLink").html(formattedlink); 
          }else{ 
           $("#planetinformation .ItemLink").html(''); 
          } 
         }); 
        }); 

       }, 
       complete: function (html) { 

       } 
      }); 
    }); 

    function CollectVars(varsin) { 
     var ReturnVars = new Object; 
     ReturnVars.H = parseFloat(varsin[0]); 
     ReturnVars.V = parseFloat(varsin[1]); 
     ReturnVars.IdName = varsin[2]; 
     ReturnVars.Name = varsin[3]; 
     ReturnVars.Special = varsin[4]; 
     ReturnVars.NewW = parseFloat(varsin[5]); 
     ReturnVars.NewH = parseFloat(varsin[6]); 
     ReturnVars.Col = varsin[7]; 
     ReturnVars.Done = varsin[8]; 
     ReturnVars.Quadrant = varsin[9]; 
     ReturnVars.Grid = varsin[10]; 
     ReturnVars.HCord = parseFloat(varsin[11]); 
     ReturnVars.VCord = parseFloat(varsin[12]); 
     ReturnVars.Status = varsin[13]; 
     ReturnVars.Zoned = varsin[14]; 
     ReturnVars.WikiLink = varsin[15]; 
     ReturnVars.ItemImage = varsin[16]; 
     ReturnVars.ImageH = parseFloat(varsin[17]); 
     ReturnVars.ImageV = parseFloat(varsin[18]); 
     return ReturnVars; 
    } 


}); 
</script> 
<?php 
$z=1; 
foreach($current as $key=>&$val) { 
if(empty($zoomlevel)) { 
    $zoomlevel = -250; 
} 
$minusH = ($val['Three']/100) * $zoomlevel; 
$minusV = ($val['Four']/100) * $zoomlevel; 
$H = $val['Three'] - $minusH; 
$V = $val['Four'] - $minusV; 
if(empty($val['Col'])) { 
    $colo = 'FFFFFF'; 
}else{ 
    $colo = $val['Col']; 
} 

if($zoomlevel == '-250') { 
    $fold = 'zoom200/'; 
    $Vsize = 47; 
    $HSize = 47; 
    $textsize = 14; 
}elseif($zoomlevel == '-110') { 
    $fold = 'zoom150/'; 
    $Vsize = 30; 
    $HSize = 30; 
    $textsize = 12; 
}elseif($zoomlevel == '-10') { 
    $fold = 'zoom100/'; 
    $Vsize = 22; 
    $HSize = 22; 
    $textsize = 10; 
}elseif($zoomlevel == '40') { 
    $fold = 'zoom50/'; 
    $Vsize = 15; 
    $HSize = 15; 
    $textsize = 8; 
}elseif($zoomlevel == '75') { 
    $fold = 'zoom25/'; 
    $Vsize = 8; 
    $HSize = 8; 
    $textsize = 7; 
}elseif($zoomlevel == '90') { 
    $fold = 'zoom10/'; 
    $Vsize = 4; 
    $HSize = 4; 
    $textsize = 5; 
} 
$z++; 
if($val['Special'] == 1) { 
    $HSize = $val['NewH']; 
    $Vsize = $val['NewW']; 
    $H = $H - ($val['NewW']/1.5); 
    $V = $V - ($val['NewH']/1.5); 
    $op = 'opacity:0.4; filter:alpha(opacity=40);'; 
}else{ 
    $op = ''; 
} 
$CurrName = str_replace(' ','',str_replace('(','',str_replace(')','',$val['Name']))); 
?> 
<div class="planetaryobject" title="<?php echo $val['Id']; ?>" style="margin-left:<?php echo $H; ?>px; margin-top:<?php echo $V; ?>px; width:<?php echo $Vsize; ?>px; height:<?php echo $HSize; ?>px; position: absolute; z-index: <?php echo $z; $z++; ?>; <?php echo $op; ?> background-image: url(img/<?php echo $fold.$colo; ?>);" id="<?php echo $CurrName; ?>"></div> 
<?php 
if($val['Special'] == 1) { 
    $H = $H+($HSize/2); 
    $V = $V + 50; 
}else{ 
    $H = $H+10; 
    $V = $V-15; 
} 
?> 
<div style="margin-left:<?php echo $H; ?>px; margin-top:<?php echo $V; ?>px; position: absolute; z-index: <?php echo $z; ?>; font-size: <?php echo $textsize; ?>px; font-family: Arial, Helvetica, sans-serif;"><div class="roundedname"><span><?php echo $val['Name']; ?></span></div></div> 

<?php } ?> 


<div id="planetinformation"> 
<table width="100%" border="0" cellspacing="1" cellpadding="0"> 
    <tr> 
    <td colspan="2"><h1 class="ItemTitle">Title</h1></td> 
    </tr> 
    <tr> 
    <td width="48%">Quadrant:</td> 
    <td width="52%" class="ItemQuadrant">&nbsp;</td> 
    </tr> 
    <tr> 
    <td>Grid:</td> 
    <td class="ItemGrid">&nbsp;</td> 
    </tr> 
    <tr> 
    <td>Cordinates:</td> 
    <td class="ItemCords">&nbsp;</td> 
    </tr> 
    <tr> 
    <td>Status:</td> 
    <td class="ItemStatus">&nbsp;</td> 
    </tr> 
    <tr> 
    <td>Ownership:</td> 
    <td class="ItemOwnership">&nbsp;</td> 
    </tr> 
    <tr> 
    <td>Link:</td> 
    <td class="ItemLink">&nbsp;</td> 
    </tr> 
</table> 

</div>

в моем ограниченном знании этого, я никогда не сталкивался с такой проблемой, как это, где браузер сбой, прежде чем я могу даже посмотрите, что должен сказать об этом firebug. Может ли кто-нибудь помочь мне пролить свет на то, что может происходить здесь. Буду признателен за любую оказанную помощь.

источник

2013-02-28 David Robilliard

+0

я такой придурок, я попытаюсь сейчас. Cheers –

+0

Это все еще не работает на хроме, похоже ... –

+0

Появляется ли ошибка в консоли JavaScript Chrome? Вы также можете попытаться выполнить код через отладчик javascript, см. Http://odetocode.com/blogs/scott/archive/2012/03/15/debugging-javascript-with-chrome.aspx – VolkerK

ответ

-2

Google Chrome поддерживается jQuery. Кажется, ваш jQuery не загружен.

Ваш URL-адрес сценария jQuery, похоже, ошибочно написан.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Попробуйте вместо этого:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

источник

2013-02-28 14:03:17 Naypa

+0

Не рекомендуется использовать 'http:'. Таким образом, по возможности будет загружена либо https, либо http-версия, не приводящая к сообщениям, например, «ненадежный контент будет загружен». –

+0

Я согласен с вами: рекомендуется, но в этом конкретном случае браузер пытается загрузить сценарии и не работает. – Naypa

+0

Я изменил его на выбранную строку, а также сместил как скрипт, так и связанный файл в раздел главы, который я, должно быть, пропустил изначально.Как бы то ни было, это все еще не работает с Chrome. –

Смежные вопросы

 Смежные вопросы