2011-03-09 65 views
0

我有一個場地表,每個場地都屬於一個區域,我試圖學習有關jQuery在我的應用程序中使用的技巧。我在場地索引頁面上有一個過濾器表格,可按地區過濾場地部分。我也有一個.png地圖圖像,顯示所有區域,並通過絕對定位放置圖標,顯示場地在這些區域的位置。jQuery提交函數是否可以改變jQuery代碼或更改哪個塊被讀取?

我index.html.erb jQuery的代碼更改地圖圖像:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("form").submit(function() { 
     if ($("#area-1").is(':checked')) 
     $(".map_container").addClass("area1"); 
     else if ($("#area-2").is(':checked')) 
     $(".map_container").addClass("area2"); 
     else if ($("#area-3").is(':checked')) 
     $(".map_container").addClass("area3"); 
     else 
     nil; 
    }); 
    }); 
</script> 

jQuery代碼在我的場地部分顯示的地圖圖標:

<script type="text/javascript"> 
    document.getElementById("venue_map_icon_<%= venue.id %>").style.left= "<%= venue.iconleftpx %>px"; 
    document.getElementById("venue_map_icon_<%= venue.id %>").style.top= "<%= venue.icontoppx %>px"; 
</script> 

有沒有一種辦法在索引頁面中改變地圖圖像的代碼也會改變部分代碼?

因此,如果區域1被選中,那麼在地圖圖像的變化,而且在分音的代碼線目前讀取「<%= venue.iconleftpx%> PX」和「<%= venue.icontoppx%> PX」讀取「<%= venue.iconleftpx2%> px」和「<%= venue.icontoppx2%> px」而不是?這樣,地圖圖像改變過濾的場地圖標的位置就隨之改變。或者是否有可能有2個代碼塊,並根據過濾器表單中選擇的內容進行更改?

感謝您的任何幫助和抱歉,如果我的問題是空缺或缺乏,我是超新的這一點。

回答

0

我沒有完全關注你,但我認爲你可以在同一時間加載地圖和表格,並在用戶提交時用ajax-get-request從數據庫中提取地圖圖標的座標。

在服務器端,您可以添加一個JSON回覆,例如show動作,並讓rails將會場(或座標)呈現給JSON。 或者你可以有一個特殊的動作來接受一個venue-id:s的數組並返回一個座標數組。

在客戶端,您可以使用jQuery.ajax()方法中的成功或完成函數來使用您收到的JSON數據移動地圖圖標。

Information about jQuery ajax (jQuery API)