2011-11-05 56 views
2

我需要幫助,結合兩個jQuery UI的可選(網格)和花哨的框(燈箱解決方案)。如何將附加數據傳遞給ajax後jquery ui可選網格 - > fancybox?

現在,花式框讓ajax帖子非常簡單(ahref="link to page")並顯示它!問題是,jQuery ui selectable爲我抓取數據並將其附加到頁面,但我想用ajax將它發佈到fancybox,在我的php分析數據後彈出提示。

這裏是我到目前爲止

$x = array(); 
    while($row = mysql_fetch_array($bq)){ 
     $x[]= " 
     <li class=\"ui-widget-content\" 
     data-morph=\"".$row['morph']."\" 
     data-price=\"".$row['price']."\" 
     id=\"".$row['id']."\"> 
     $ ".$row['price'].".00&nbsp; 
     ".$row['morph']."&nbsp; 
     ".$row['sex']."&nbsp; 
     </li>"; 
    } 


} 
<p id="feedback"> 
<span>You've selected:</span> <span id="select-result">none</span>. 
</p> 
<ol><? echo "Total Snakes ($ts)"; if($ts != '0'){echo "<button class=\"ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all\"> 
     <span class=\"ui-button-text\" href=\"?ready\">Buy</span> 
    </button>";} ?></ol> 
<ol id="selectable"> 
<?php 
shuffle($x); 
foreach($x as $z){ 
    echo $z;  
} 
?> 
</ol> 
<script>  
$(function() { 
     $("#selectable").selectable({ 
      stop: function() { 
       var result = $("#select-result").empty(); 
       $(".ui-selected").each(function() { 
        var id = $(this).attr('id'); 
        var morph = $(this).attr('data-morph'); 
        var price = $(this).attr('data-price'); 

        result.append((id)+','); 
/// this gets displayed on the page but i want this data to be passed to fancy box .... 
        }); 


      } 
     }); 

    }); 
    $('button span').fancybox({ 
// maybe somebody would kno how ? 
}); 
</script> 
+0

你能試着解釋你想要的東西很簡單呢? :)難道你只需要在數據的ajax之後創建一個新的div,將該div的名稱添加到鏈接並啓動fancybox? –

回答

3

你知道,你可以真正避免把所有的斜線使用單引號在PHP如下:

$x[]= '<li class="ui-widget-content" data-morph="'.$row['morph'].'" data-price="'.$row['price'].'" id="'.$row['id'].'">' ; // and so on 

至於問題,我有同樣的任務。我發現這個鏈接有用:

post array jquery serialize

就個人而言,我只是通過一個JS數組到我的PHP腳本的ajax:

function saveOrder(){ 
    var ids = new Array(); 

    $('#sortable').find('li').each(function(i){ 
     ids.push($(this).attr('id')); 
    }); 

    $.ajax({ 
     type: "POST", 

     url: 'ajax/reorder_panel.php', 

     data: { 
      order: ids 
     }, 

     success: function(data, textStatus, jqXHR){ 
      alert(data); 
     }, 

     error: function(jqXHR, textStatus, errorThrown){ 
      alert("Server connection error..."); 
     } 
    }); 
} 
相關問題