2016-02-19 75 views
0

我試圖動態加載ajax內容到引導模式,當一個鏈接被點擊。我可以在沒有模態的情況下加載內容,但不知道如何同時觸發模態窗口打開。它會干擾onclick功能。 Here's the page I'm working on。目標是單擊縮略圖並在模式窗口中打開其詳細信息。加載引導模式與onclick功能

以下的onclick功能觸發功能加載WordPress的職位類型:

<?php 
    if (has_post_thumbnail(get_the_ID())) { 
     echo '<a href="#" onclick="displayAntiqueDetails('.get_the_ID().');return false;" title="' . esc_attr(get_the_title()) . '">'; 
     echo get_the_post_thumbnail(get_the_ID(), 'thumbnail', array('class'=>'img-responsive', 'alt'=>get_the_title())); 
     echo '<span class="caption">'.get_post_meta(get_the_ID(), 'antique_item_number', true). '</span>'; 
     echo '</a>'; 
    } 
?> 

JS的這行調用的內容:

function displayAntiqueDetails(post_id){ 
var urlPart = getUrlPart(); 
jQuery('.antique-details-container').load(urlPart + '/wp-content/themes/moniqueshay/antique-details.php', {antique_post_id: post_id}); 
} 

我的模式是這樣的:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="antique-details well"> 
      <?php 
      if($reserved)echo '<div class="marked reserved"></div>'; 
      if($sold)echo '<div class="marked sold"></div>'; 
      if($new)echo '<div class="marked new"></div>'; 
      ?> 
      <div class="row"> 
       <div class="col-md-8 antique-image"> 
        <?php 
        if (has_post_thumbnail($post_id)) { 
         echo get_the_post_thumbnail($post_id, 'full', array('class'=>'img-responsive', 'alt'=>$post_title)); 
        } 
        ?> 
       </div> 
       <div class="col-md-4"> 
        <div class="antique-thumbs"> 
         <?php 
         global $antique_attachment_id_set; 
         $antique_attachment_id_set = 1; 
         echo do_shortcode($post_content); 
         $antique_attachment_id_set = 0; 
         ?> 
        </div> 
        <div class="details-list"> 
         <h3 class="text-red"><?php echo $post_title; ?></h3> 
         <p><span>Length: </span><?php echo esc_html($length); ?></p> 
         <p><span>Depth: </span><?php echo esc_html($depth); ?></p> 
         <p><span>Height: </span><?php echo esc_html($height); ?></p> 
         <p><span>Item #: </span><?php echo esc_html($item_number); ?></p> 
        </div> 
        <a class="btn btn-default" href="<?php echo home_url('contact/?contact-subject=I am inquiring about '.urlencode($post_title).' ('.urlencode($item_number).')'); ?>">Inquiry about this piece <i class="fa fa-share text-red"></i></a> 
        <div class="social-buttons btn btn-default"> 
         <!-- social buttons go here --> 
         <?php if(function_exists('ADDTOANY_SHARE_SAVE_KIT')) { ADDTOANY_SHARE_SAVE_KIT(); } ?> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

+0

你的工作似乎並不頁正在工作。我看到一個包含以下文本的頁面:「在此服務器上無法找到所請求資源的適當表示,此錯誤由Mod_Security生成。」 – Yass

回答

1

使用的jQuery.load()complete參數指定顯示模式的回調,一旦它的加載:

jQuery('.antique-details-container').load(url, {antique_post_id: post_id}, 
    function(text,status,jqXHR) { $('#myModal').modal().show() } 
); 

UPDATE

它可以打開模式的兩倍,因此無法將其關閉。 此(未測試的)替換功能應該做的伎倆:

var displayingPopup = false; 
function displayAntiqueDetails(post_id) { 
    if (displayingPopup) return; 
    displayingPopup = true;  
    var urlPart = getUrlPart(); 
    jQuery('.antique-details-container').load(urlPart + '/wp-content/themes/moniqueshay/antique-details.php', {antique_post_id: post_id}, 
    function() { 
     jQuery('#myModal').modal().show() 
     .one('hidden.bs.modal', function() { displayingPopup = false }) 
    } 
); 
} 

所添加的線.one('hidden.bs.modal', function(){...})復位布爾; .one.on相同,只是一旦事件被觸發,處理程序就會被取消註冊。

+0

感謝您的幫助!這似乎起初工作,但經過測試後,我注意到一些問題。也許你可以告訴我發生了什麼問題: 當我雙擊一個縮略圖(僅用於測試目的)時,模式被鎖定,無法關閉。當打開一個模式,關閉並快速打開另一個模式時,也會出現同樣的問題。它凍結了。你可以在這裏自己測試一下:http://moniqueshay.com/antiques/4/ – user2466010

+0

我從Mod_Security得到一個**不可接受的**錯誤。瀏覽器控制檯中的任何內容?它可能會嘗試打開模式兩次。你加載的內容中是否有任何JS? – Kenney

+0

含義您無法訪問該網站?那不會很好!我在控制檯中看到的唯一錯誤是:傳遞給getElementById()的空字符串。 是的,我正在加載頁面上的其他各種JS ......可能是衝突的。 – user2466010

0

我沒有看到任何觸發模態顯示的東西。

如果你想有一個按鈕,觸發模式顯示:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 

或者,如果你想使用JavaScript來顯示它:

$('#myModal').modal('show');