在打開Magnific Popup時在AJAX調用中包含$（this）.data（）

我試圖在打開Magnific Popup時發送帶有AJAX請求的data對象。但是，好像$(this)在插件中沒有被正確翻譯。

考慮以下代碼：

<div class="my-div"> 
    <a href="/path/to/file.php" data-name="John" data-location="Boston">Click here</a> 
</div> 

$('.my-div a').magnificPopup({ 
    type: 'ajax', 
    ajax: { 
    settings: { 
     data: $(this).data() 
    } 
    } 
});

的數據對象無法正常返回。但是，如果我用這個替換數據行：

data: { name: "John", location: "Boston" }

然後我可以引用$_GET中的那些對象。

編輯：要推動這一$(this)未能在magnificPopup正常的事實，我改變了數據線：

data: { href: $(this).attr('href') }

仍然沒有返回。

我所做的一切似乎在$(this)沒有插件內尊重點。我如何從原始錨標記中獲取data對象並將它們傳遞給AJAX請求？

來源

2014-04-10 Michael Irigoyen

我想就不得不提到在.data（）方法的關鍵。 http://api.jquery.com/data/ – Pazza22

不，一個簡單的'.data（）'將返回所有'data- *'值作爲JavaScript對象。例如：http://jsfiddle.net/7nvgL/ –

是因爲您傳遞的對象沒有必需的參數名稱。試試數據：{myObj：$（this）.data（）}。這可能會傳遞名稱爲myObj – Pazza22

$('.my-div a').magnificPopup({ 
     type: 'ajax', 
     elementParse: function(item) { 
      this.st.ajax.settings = item.el.data(); 
     } 
});

來源

2014-04-10 19:11:20

然後你如何從彈出窗口中訪問這些值？ – froadie

你可以試試這個

data: { name:$(this).data('name'), location:$(this).data('location') }

來源

2014-04-10 16:12:56

你是錯誤的，'$（this）.data（）'不會捕獲所有'data- *'元素並將它們作爲JavaScript對象返回。無論如何，你的答案是行不通的。 –

@MichaelIrigoyen ok更新 –

你的答案仍然不能解決問題。在'magnificPopup'調用中''（this）'似乎不存在。我正在尋找另一種獲取'data'屬性值的方法。 –

我發現，調用數據的Ajax響應的最佳方式，在請求屬性被簡單地呼籲點擊一個Ajax請求，而不是直接調用magnificpopup。然後只需將響應插入標準的內聯mfp。

$('a.popup').magnificPopup({ 
    type: 'ajax', 
    ajax: { 
     settings: { 
      type: "POST", 
      url: '/ajax.php', 
      data: { 
       action : 'ajax_action', 
       postid : this.currItem.el.data('id') 
       // this doesn't actually work because 'this.currItem' 
       // is only accessible in a callback 
      } 
     } 
    } 
});

而是執行此操作：

$('a.popup').click(function(){ 
    $.ajax({ 
     type: "POST", 
     url: '/ajax.php', 
     data: { 
      action : 'ajax_action', 
      postid : $(this).data('id'), 
      //$(this).data() works because it's a standard AJAX call 
     }, 
     success: function(data){ 
      $.magnificPopup.open({ 
       type: 'inline', 
       items: { 
        src: data 
       } 
      }) 
     } 
    }); 
});

來源

2015-07-10 14:11:24

最佳解決方案... –

在打開Magnific Popup時在AJAX調用中包含$（this）.data（）

回答

相關問題