Adding a modal to JavaScript output

JavaScript
1

I’m using eventbrite API to output events from an account. I have used a basic ajax to call the json into my website yet I’d like to jazz up the UI.

Ideally I want to output the event title and description into a modal (using bootstrap - like this https://codepen.io/stevan/pen/oJqvoN) but to do this I would need to use a unquie #ID for each modal. Can I do that via javascript?

console.dir(event);
					s += "<div class='col-md-6 col-lg-4'>";
                    s += "<img src='" + event.logo.url + "'>";
					s += "<h2><a href='" + event.url + "'>" + event.name.text + "</a></h2>";
					s += "<p><b>Location: " + event.venue.address.address_1 + "</b><br/>";
					s += "<b>Date/Time: " + eventTime + "</b></p>";
					s += "<p>" + event.description.text + "</p>";
					s += "</div>";
				}
				$events.html(s);
			} else {
				$events.html("<p>Sorry, there are no upcoming events.</p>");
			}
		});
2

Yup. How are you iterating over the events?

3

Hi Pullo haven’t really thought too much about that but looking at an approach like this;

https://blackrockdigital.github.io/startbootstrap-freelancer/ - portfolio section - so that the img will be event.logo.url and then when the modal is open the title and description and a button to book tickets will open.

It would look something like;

<div class="col-md-6 col-lg-4">
            <a class="portfolio-item d-block mx-auto" href="#portfolio-modal-**{unique number for modal to work}**">
              <div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
                <div class="portfolio-item-caption-content my-auto w-100 text-center text-white">
                  <i class="fas fa-search-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="**{event.logo.url}**" alt="">
            </a>
          </div>

Each corresponding modal would be;

 <!-- Portfolio Modal 1 -->
    <div class="portfolio-modal mfp-hide" id="portfolio-modal-**{linked modal number}**">
      <div class="portfolio-modal-dialog bg-white">
        <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
          <i class="fa fa-3x fa-times"></i>
        </a>
        <div class="container text-center">
          <div class="row">
            <div class="col-lg-8 mx-auto">
              <h2 class="text-secondary text-uppercase mb-0">Event Name</h2>
              <hr class="star-dark mb-5">
              <img class="img-fluid mb-5" src="{event.url.logo}" alt="">
              <p class="mb-5">{event.description.html}</p>
              <a class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="{event.url}">
                <i class="fa fa-close"></i>
                Close Event</a>
            </div>
          </div>
        </div>
      </div>
    </div>
4

Sorry, I think we got our wires crossed.

You’re calling an API and getting a list of events as JSON. You posted some code which seems to indicate you are building one (or more) modals from the JSON.

How are you getting from calling the API to creating the modal? Could you post the code showing your Ajax call and what you’re doing with the response.

5

https://codepen.io/stevan/pen/oJqvoN all markdown here.

6

Like this:

for (var i = 0; i < res.events.length; i++) {
  var event = res.events[i];
  var eventTime = moment(event.start.local).format('d/MM/YY h:mm A');

  s += "<div class='col-md-6 col-lg-4' id='modal-" + id + "'>";
  ...
}

Although that is hard to read. So I would use a template string:

for (var i = 0; i < res.events.length; i++) {
  var event = res.events[i];
  var eventTime = moment(event.start.local).format('d/MM/YY h:mm A');

  s += `<div class='col-md-6 col-lg-4' id='modal-${id}''>";
  ...
}
7

Would the ID automatically match that of the modal div so that it opens the right one?

I’ll try and rehash the codepen now to see if it works?

(PS thanks for your help BTW!)

8

IDs should be unique to a page, so making them match is not the best idea.

Could you post what the JSON response looks like.

10

Surely an example would be;

{
    "description": {
        "text": "Rozlyn Sheridan is one half of the hit comedy duo Nuala & Noleen.",
        "html": "<P>Rozlyn Sheridan is one half of the hit comedy duo Nuala &amp; Noleen.</P>"
    },
    "long_description": {
        "text": null,
        "html": null
    },
    "logo": null,
    "resource_uri": "https://www.eventbriteapi.com/v3/organizers/18005188196/",
    "id": "18005188196",
    "name": "Rozlyn Sheridan, Newry.",
    "url": "https://www.eventbrite.co.uk/o/rozlyn-sheridan-newry-18005188196",
    "num_past_events": 0,
    "num_future_events": 0,
    "logo_id": null
}

Ideally I’d like the logo to be the image that when clicked on opens up the modal showing the title and description and a link to booking the event (url).

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.