jquery modal with ajax內容加載onclick並不是全部一次

我對我的情況感到有些莫名其妙，我希望你們可以在我的挑戰中閃耀一絲光芒！jquery modal with ajax內容加載onclick並不是全部一次

好的，我已經做了一個查詢，加載大約1000我的數據庫中的名稱。我成功地創建了一個echo，它會在每個模態div的內部加載一個模式窗口和配置文件詳細信息。

問題是，當我有1,000個名稱來填充，它必須建立每個模式與配置文件內的細節，它需要一段時間來加載頁面。

我正在尋找一種更好的方式來檢索某種類型的onclick動作的模式窗口，因此所有的模式窗口將不必在頁面加載時進行。所以也許只是一個動作，當用戶點擊鏈接時，它會以某種方式加載它？

這裏是我的代碼工作，但再次 - 是所有加載在每個頁面加載的信息：

<div id="myModal_."$pageID"" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-body"> 
    <script> 
    $("#".$pageID."").load("admin/page1.php?m=".$pageID.""); 
    </script> 
    </div> 
</div> 

<a data-toggle="modal" href="#myModal_'.$pageID.'">'.$name.'</a>

在此先感謝！

編輯

這裏是我的html我看到的螢火 - 它不是在模態窗口裝什麼？

<div class="modal-body"> 
    <div id="7"></div>             
    <script> 
     $('a[href="#myModal7"]').on('click',function(){ 
     $("#7").load("admin/page1.php?m=7"); 
     }); 
    </script> 
</div> 

<a href="#myModal7" data-toggle="modal">Name goes here</a>

來源

2013-03-25 eberswine

您是否正在考慮可以即時生成模態HTML的JavaScript函數，然後執行加載函數？ – 2013-03-25 19:09:56

只是一個更好，更有效的方式來加載這些許多模態窗口？ – eberswine 2013-03-25 19:17:28

是的。這將節省您不必爲所有pageID加載html。我在做這個工作。 – 2013-03-25 19:19:42

$('#mylink').click(function(){ 
    $("#".$pageID."").load("admin/page1.php?m=".$pageID.""); 
});

這是你在找什麼？

來源

2013-03-25 18:59:59

<div id="myModal_."$pageID"" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-body"> 
     <script> 
      $('a[href="#myModal'.$pageID.'"]').on('click',function(){ 
       $("#myModal_".$pageID." .modal-body").load("admin/page1.php?m=".$pageID.""); 
      }); 
     </script> 
     </div> 
    </div> 


<a data-toggle="modal" href="#myModal'.$pageID.'">'.$name.'</a>

來源

2013-03-25 19:04:38

所以當我點擊鏈接 - 那麼它會加載模態窗口中的細節？ – eberswine 2013-03-25 19:09:53

是的..這將加載您的模態窗口內的數據 – 2013-03-25 19:11:11

我認爲..你有不同的鏈接不同的模態？ – 2013-03-25 19:12:09

此函數在用戶點擊鏈接時創建HTML。這樣做是爲了避免浪費大量的時間加載HTML的，將不能使用：

$(".modalLink").click(function(){ 
    var id = $(this).attr('id'); 
    if($("#myModal_" + id).length == 0) { 
     var div1 = $('<div id="myModal_' + id + '" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" />'); 
     var div2 = $('<div class"modal-body"/>'); 
     $('body').append(div1); 
     div1.append(div2); 
    } 
    $('#myModal_' + id + ' div').load("admin/page1.php?m=" + id); 
    $("#myModal_" + id).modal(); 
    return false; 
});

每一個環節應該有類「modalLink'and一個唯一的ID：

<a id="$pageID" class="modalLink" href="#">$name</a>

因爲我不不知道你使用的是哪種模態腳本，我編碼爲我在這裏找到的那個：http://kylefox.ca/jquery-modal/examples/。我測試了它，它按預期工作。

來源

2013-03-25 19:36:57

太棒了！我很耐心！謝謝NINJA！ – eberswine 2013-03-25 19:38:05

我做了一些編輯，所以如果你有麻煩，你可能想再試一次。 – 2013-03-25 21:15:50

謝謝我現在就試試這個！ – eberswine 2013-03-25 23:14:13

jquery modal with ajax內容加載onclick並不是全部一次

回答

相關問題