Load dynamic content in modal window using AJAX

[donboe]

For a catering company I have a listing with the different barbecue packages they offer. All packages are very comprehensive which makes the listing kind of confusing. So what I would like to achieve is to show just 5 or 6 items of each packages with a read more button beneath. When that button is clicked the complete package should appear in a modal window. However, I have no idea how I pass the package_id AJAX so that the correct package is shown. Does anyone perhaps know an example or tutorial covering this. Thank you in advance

[m3g4p0p]

If it’s only text, why not load the entire content from the start and truncate it for the preview using CSS… then you don’t even need AJAX to pass the content to a modal. Like

var truncated = document.querySelectorAll('.truncate');

Array.from(truncated).forEach(function(el) {
  el.addEventListener('click', function() {

    // Get the text content to append it to a 
    // modal or something, like
    // window.alert(this.textContent);

    // Or with arbitrary content
    // window.alert(this.innerHTML);

    // Or maybe just expand the content
    // this.classList.toggle('truncate');

    // You can basically do anything with `this` now...
  })
});

fiddle

If it’s some more heavy content you don’t want to load initially, you might store the content URI as a data attribute when generating the previews. You can then easily access this value like

<p class='preview' data-uri="http://foo.bar">Lorem ipsum...</p>

var previewElement = document.querySelector('.preview');

previewElement.addEventListener('click', function() {
  var uri = this.dataset.uri;

  // Do some AJAX stuff
});

PS: For a no-JS fallback, you might implement those previews with actual links, like

<p class='preview'>Lorem ipsum...<a href="https://foo.bar">more</a></p>

var previewLink = document.querySelector('.preview a');

previewLink.addEventListener('click', function(e) {
  var uri = this.href;

  e.preventDefault();

  // etc.
});