如何通过模型显示在 ajax 请求中传递动态 url？

Question

我正在使用 Foundation Reveal 模型，但我无法将动态 url 传递给 data-ajax-url。

我想在 url 中传递动态 project_site.id 但我无法附加动态 url .

目前我在本地测试 url："http://0.0.0.0:3000/project_sites/21/attendances/" 这里 21 是硬编码的 url 我想传递动态 url.

我使用的参考资料：- https://codepen.io/sujayjaju/pen/akAYzP?editors=1010

这是我的代码-

<div class="full reveal" id="exampleModal1" data-reveal data-ajax-url="http://0.0.0.0:3000/project_sites/21/attendances/">

  <button class="close-button" data-close aria-label="Close modal" type="button">
   <span aria-hidden="true">&times;</span>
   </button>
 </div>

 <p><button class="button small warning button-margin-top fi-eye" data-open="exampleModal1"> View</button></p>

application.js

  $(document).on('open.zf.reveal', "#exampleModal1", function (e) {
  var $modal = $(this);
  var ajax_url = $modal.data("ajax-url");
  if (ajax_url) {
    $modal.html("Now Loading: "+ajax_url);
    $.ajax(ajax_url).done(function (response) {
      $modal.html(response);
    });
  }
});

Answer 1

如果你想传递一个动态的URL，你为什么不直接在jquery中传递它而不是依赖data-attributes？

var ajax_url = "http://0.0.0.0:3000/project_sites/" + project_site.id + "/attendances/";

Answer 2

如果您必须与data-attributes一起工作，做这样的事情怎么样：

$(document).foundation();

$(document).on('open.zf.reveal', "#login", function (e) {
  var $modal = $(this);
  var project_site_id = 21
  var ajax_url = $modal.data("ajax-url");
  var lastpos = ajax_url.lastIndexOf("/");
  var newUrl = ajax_url.substring(0, lastpos);
  var lastWord = ajax_url.substring(lastpos);
  newUrl += '/' + project_site_id + lastWord;
  $modal.attr("data-ajax-url", newUrl);
  
  console.log(newUrl);
  
  if (ajax_url) {
    $modal.html("Now Loading: "+ajax_url);
    $.ajax(ajax_url).done(function (response) {
      $modal.html(response);
    });
  }
});

<link href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/what-input/1.1.4/what-input.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>

<html>
  <body>
    <div id="login"  class="reveal text-center" data-reveal
         data-ajax-url="https://codepen.io/sujayjaju/pen/VKkxKY.html">
      
    </div>
    <a href="#login" data-open="login" class="button">
      Open Modal Form
    </a>
  </body>
</html>

显然，您需要将我的 project_site_id 变量替换为您的 project_site.id 变量。

如何通过模型显示在 ajax 请求中传递动态 url？

how to pass dynamic url in ajax request via model reveal?

javascript

jquery

ajax

zurb-foundation