Question posted in
You can find the official documentation here.

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

i am using foundation reveal model but i am not able to pass dynamic url to data-ajax-url.

i want to pass dynamic project_site.id in url but not i am able to append dynamic url .

currently i test on local url: "http://0.0.0.0:3000/project_sites/21/attendances/" here 21 is hard coded url i want to pass dynamic url.

reference i used:- https://codepen.io/sujayjaju/pen/akAYzP?editors=1010

here is my code-

<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);
    });
  }
});
Tags:

2

Answers


  1. 0

    If you want to pass a dynamic URL, why don’t you just pass it in jquery instead of relying on data-attributes?

    var ajax_url = "http://0.0.0.0:3000/project_sites/" + project_site.id + "/attendances/";
    Login or Signup to reply.
  2. 0

    If you must work with data-attributes what about doing something like this:

    $(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>

    Obviously, you would need to replace my project_site_id variable with your project_site.id variable.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search