2012-01-03 232 views
0

我想加載谷歌地圖與jQuery的 邏輯文件是很容易的,我想的是,頁面重新加載每當我發送一個新的變數查詢時間...jQuery的負荷谷歌地圖

的問題是內容不加載..

這裏是代碼的JavaScript ....

<script type="text/javascript"> 
$(document).ready(function(){ 
function Display_Load() 
{ 
    $("#loading").fadeIn(900,0); 
    $("#loading").html("<img src='img/bigLoader.gif' style='border:none;' />"); 
} 
//Hide Loading Image 
function Hide_Load() 
{ 
    $("#loading").fadeOut('slow'); 
}; 
$("#pagination li").click(function(){ 
Display_Load(); 
$("#content").load("file_map.php", Hide_Load()); 
} 
}); 
</script> 

,這裏的HTML代碼

<body> 
<div id="loading" ></div> 
<div id="content" ></div> 
    </body> 

本例是與其他文件PHP或HTML,但只是還沒有與谷歌地圖的工作,我認爲這個問題是在初始化()函數在頁面加載,但我不工作得很好知道如何解決它,請誰可以幫我

th'x很多

回答

0

有沒有在你的JavaScript代碼中的錯誤,你有沒有完成click調用(或ready通話;語法錯誤的本質意味着我們不知道哪一個是不完整的)。因此,沒有任何代碼正在運行,您應該會在JavaScript控制檯中看到語法錯誤。

使用正確的縮進可以幫助您發現錯誤,這非常值得養成這樣做的習慣。這是你的代碼的正確縮進版本:

<script type="text/javascript"> 
$(document).ready(function(){ 
    function Display_Load() 
    { 
     $("#loading").fadeIn(900,0); 
     $("#loading").html("<img src='img/bigLoader.gif' style='border:none;' />"); 
    } 
    //Hide Loading Image 
    function Hide_Load() 
    { 
     $("#loading").fadeOut('slow'); 
    }; 
    $("#pagination li").click(function(){ 
     Display_Load(); 
     $("#content").load("file_map.php", Hide_Load()); 
    } 
}); 
</script> 

如你(現在)看,你錯過了第二至最後一行);完成click通話。

一旦你解決這個問題,分別有一個錯誤在這條線:

$("#content").load("file_map.php", Hide_Load()); 
//        here -----^^ 

就像任何其他函數調用,還有你調用Hide_Load並通過其返回值load。如果你想Hide_Load是完成回調,你不想呼叫它,你只是想通過函數引用  —溝()

$("#content").load("file_map.php", Hide_Load); 

隨着(),這就像你」因爲對不使用return的函數的函數調用的結果是undefined,所以重新調用$("#content").load("file_map.php", undefined);

+0

地圖內容我已經儘量不要使用Hide_Load()函數,但同樣的錯誤仍然會出現 – Boumaili 2012-01-03 15:11:12

+0

@Boumaili:這裏面有我的答案已經指出的另一個問題;你一定已經閱讀了一個陳舊的答案。 – 2012-01-03 15:11:38

0

這裏谷歌地圖file_map.php的爲例文件的內容.....

<?php include_once($_SERVER['DOCUMENT_ROOT'] . "/config.php"); 
require_once($lib_path."mysql.class.php"); 
require_once($lib_path."document.php"); 
require_once $lib_path . "userAccount.php"; 
require_once($lib_path."adsearch_class.php"); 
?> 


<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=------------------------------------" type="text/javascript"></script> 

<script type="text/javascript"> 

function initialize() { 
    if (GBrowserIsCompatible()) { 
    var map = new GMap2(document.getElementById("map_canvas")); 
    map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
    map.setUIToDefault(); 
    } 
} 

</script> 


</head> 
    <body onload="initialize()" onunload="GUnload()"> 
    <div id="map_canvas" style="width: 500px; height: 300px"></div> 
    </body> 
</html> 

這個文件是工作良好,沒有jQuery的... ,但沒有結果,當我與jQuery的調用它..

該索引。PHP文件是在這裏

<?php 
include_once($_SERVER['DOCUMENT_ROOT'] . "/config.php"); 
require_once($lib_path."mysql.class.php"); 
require_once($lib_path."document.php"); 
require_once $lib_path . "userAccount.php"; 
require_once($lib_path."adsearch_class.php"); 

$per_page = 5; 

//getting number of rows and calculating no of pages 
$rsd=new db_publish; 
$rsd->connect(); 
$sql = "SELECT *FROM `table` LIMIT 0 , 30"; 
$rsd->query($sql); 
$counteur = $rsd->count(); 
$pages = ceil($counteur/$per_page); 
?> 


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ 
libs/jquery/1.3.0/jquery.min.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function(){ 

    //Display Loading Image 
    function Display_Load() 
    { 
     $("#loading").fadeIn(900,0); 
     $("#loading").html("<img src='img/bigLoader.gif' />"); 
    } 
    //Hide Loading Image 
    function Hide_Load() 
    { 
     $("#loading").fadeOut('slow'); 
    }; 


    //Default Starting Page Results 

    $("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'}); 

    Display_Load(); 

    $("#content").load("file_map.php"); 



    //Pagination Click 
    $("#pagination li").click(function(){ 

     Display_Load(); 

     //CSS Styles 
     $("#pagination li") 
     .css({'border' : 'solid #dddddd 1px'}) 
     .css({'color' : '#0063DC'}); 

     $(this) 
     .css({'color' : '#FF0084'}) 
     .css({'border' : 'none'}); 

     //Loading Data 
     var pageNum = this.("#pagination li").id; 

     $("#content").load("file_map.php?page=" + pageNum); 
    }); 


}); 
    </script> 

<style> 
body { margin: 0; padding: 0; font-family:Verdana; font-size:15px } 
a 
{ 
text-decoration:none; 
color:#B2b2b2; 

} 

a:hover 
{ 

color:#DF3D82; 
text-decoration:underline; 

} 
#loading { 
width: 100%; 
position: absolute; 
} 

#pagination 
{ 
text-align:center; 
margin-left:120px; 

} 
li{ 
list-style: none; 
float: left; 
margin-right: 16px; 
padding:5px; 
border:solid 1px #dddddd; 
color:#0063DC; 
} 
li:hover 
{ 
color:#FF0084; 
cursor: pointer; 
} 


</style> 


    <div align="center"> 


    <div id="loading" ></div> 
    <div id="content" ></div> 


    <table width="800px"> 
    <tr><Td> 
      <ul id="pagination"> 
       <?php 
       //Show page links 
       for($i=1; $i<=$pages; $i++) 
       { 
        echo '<li id="'.$i.'">'.$i.'</li>'; 
       } 
       ?> 
    </ul> 
    </Td></tr></table> 
    </div> 

,我告訴你,第一時間本例是結果頁面我剛纔

<div id="map_canvas" style="width: 500px; height: 300px"></div> 
上工作也只是與谷歌地圖的內容無法加載....

沒有內部