Question posted in
You can find the official documentation here.

open card on click to display more details – Jquery ajax

I am trying to display more detail with the openDetail function for one card at a time. How would I get that detail to just show up in the window once the card is clicked? right now I get an error that function is not defined at HTMLButtonElement.onclick. but it is passing the correct id to the on click.I copied my problem below. 

const formatAuthors = (authors) => {
  return authors.map(author => author.person).join(', ') || 'Anonymous';
};

$(() => {
  const url = "https://data.azgs.arizona.edu/api/v1/metadata";

  $('.destinations-form').on('submit', function(e) {
    e.preventDefault();
    let searchstring = $('input[type="text"]').val();
    let requestUrl = url + `?text=${searchstring}&title=${searchstring}`;

    $.ajax({
      type: 'GET',
      url: requestUrl,
      success: function(res) {
        //Create a button to see more info, or add an click event handler for the whole .res-entry div
        //Change item.metadata.id for whatever property contains the ID
        let repo = res.data.map(item =>
          `<div class="res-entry" href="#" onclick="openDetails(${item.collection_id},event)">
					<div class="res-entry-title">${item.metadata.title}</div>
					<div class="res-entry-author">${formatAuthors(item.metadata.authors)}</div>         
					<div class="res-entry-series">${item.metadata.series}</div>
					<div class="res-entry-download">
					  <a href="${item.links[0].href}">Download</a>
					</div>
				  </div>`);

        $("#results").empty().append(repo); // Empty previous...
      }
    });
  });

  function openDetails(id, ev) {
    //This is for crossbrowser compatibility
    (ev || event).preventDefault();
    //Fetch the item's details (replace detailsRequestUrl for whatever URL can return the contents)
    $.get({
      url: "https://data.azgs.arizona.edu/api/v1/metadata?collection_id=",
      data: {
        id: id
      },
      success: function(res) {
        var details = $("#details");
        //Build the HTML
        details.html(res.data.map(item =>
          `....`));
        //And open the popup
        details.show().fadeTo(200, 1);
      }
    });
  }

})
#results {
  margin-top: 1em;
}

.res-entry {
  border: thin solid grey;
  margin: 0.667em;
  padding: 0.5em;
}

.res-entry .res-entry-title {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.res-entry .res-entry-author {
  font-size: 0.8em;
  font-style: italic;
  margin-bottom: 0.25em;
}

.res-entry .res-entry-author:before {
  content: 'By: ';
}

.res-entry .res-entry-series {
  font-size: 0.9em;
}

.res-entry .res-entry-download {
  margin-top: 0.5em;
}

.res-entry .res-entry-download a {
  display: block;
  text-align: right;
  /* If you want it on the right */
}

.res-entry .res-entry-download a button {
  border: thin solid grey;
  background: #FFF;
}

.res-entry .res-entry-download a button:hover {
  border: thin solid grey;
  background: #EE7;
  cursor: pointer;
}

#details {
  display: none;
  position: fixed;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="destinations-form" role="search">
  <div class="input-line">
    <input id="searchForm" type="text" class="form-input check-value" placeholder="Search Documents" />
    <button type="submit" class="form-submit btn btn-special">Search</button>
  </div>
</form>
<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xs-24">
        <div class="boat-box">
          <div id="results"></div>
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="grid">
      <div class="col-md-18 col-md-30 center">
        <div id="details"></div>
      </div>
    </div>
  </div>
</section>
Tags:

2

Answers


  1. 0

    This is possible happened because the insert openDetails after the DOM load, I’m not sure about this.
    Therefore you can use “.on” instead on every element called .res-entry

    const formatAuthors = (authors) => {
  return authors.map(author => author.person).join(', ') || 'Anonymous';
};

$(() => {
  const url = "https://data.azgs.arizona.edu/api/v1/metadata";

  $('.destinations-form').on('submit', function(e) {
    e.preventDefault();
    let searchstring = $('input[type="text"]').val();
    let requestUrl = url + `?text=${searchstring}&title=${searchstring}`;

    $.ajax({
      type: 'GET',
      url: requestUrl,
      success: function(res) {
        //Create a button to see more info, or add an click event handler for the whole .res-entry div
        //Change item.metadata.id for whatever property contains the ID
        let repo = res.data.map(item =>
          `<div class="res-entry" href="#" data-id="${item.collection_id}">
					<div class="res-entry-title">${item.metadata.title}</div>
					<div class="res-entry-author">${formatAuthors(item.metadata.authors)}</div>         
					<div class="res-entry-series">${item.metadata.series}</div>
					<div class="res-entry-download">
					  <a href="${item.links[0].href}">Download</a>
					</div>
				  </div>`);

        $("#results").empty().append(repo); // Empty previous...
        
        $(document).on("click", "div.res-entry" , function(ev) {
            const id = this.getAttribute('data-id');
            // Then do your request
            openDetails(ev, id);
        });
      }
    });
  });
  
  

  function openDetails(ev, id) {
    //This is for crossbrowser compatibility
    (ev || event).preventDefault();
    
    console.log(id);
    //Fetch the item's details (replace detailsRequestUrl for whatever URL can return the contents)
    $.get({
      url: "https://data.azgs.arizona.edu/api/v1/metadata?collection_id=",
      data: {
        id: id
      },
      success: function(res) {
        var details = $("#details");
        //Build the HTML
        details.html(res.data.map(item =>
          `....`));
        //And open the popup
        details.show().fadeTo(200, 1);
      }
    });
  }

})
    #results {
  margin-top: 1em;
}

.res-entry {
  border: thin solid grey;
  margin: 0.667em;
  padding: 0.5em;
}

.res-entry .res-entry-title {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.res-entry .res-entry-author {
  font-size: 0.8em;
  font-style: italic;
  margin-bottom: 0.25em;
}

.res-entry .res-entry-author:before {
  content: 'By: ';
}

.res-entry .res-entry-series {
  font-size: 0.9em;
}

.res-entry .res-entry-download {
  margin-top: 0.5em;
}

.res-entry .res-entry-download a {
  display: block;
  text-align: right;
  /* If you want it on the right */
}

.res-entry .res-entry-download a button {
  border: thin solid grey;
  background: #FFF;
}

.res-entry .res-entry-download a button:hover {
  border: thin solid grey;
  background: #EE7;
  cursor: pointer;
}

#details {
  display: none;
  position: fixed;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="destinations-form" role="search">
  <div class="input-line">
    <input id="searchForm" type="text" class="form-input check-value" placeholder="Search Documents" />
    <button type="submit" class="form-submit btn btn-special">Search</button>
  </div>
</form>
<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xs-24">
        <div class="boat-box">
          <div id="results"></div>
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="grid">
      <div class="col-md-18 col-md-30 center">
        <div id="details"></div>
      </div>
    </div>
  </div>
</section>
    Login or Signup to reply.
  2. 0

    You are adding onclick dynamically which will not work. You need to add an .on listener to the document for your .res-entry class:

    $(document).on("click", ".res-entry", e => {    
    openDetails($(e.target).data("id"), e)
})

    Check the code below:

    const formatAuthors = (authors) => {
  return authors.map(author => author.person).join(', ') || 'Anonymous';
};

$(() => {
  const url = "https://data.azgs.arizona.edu/api/v1/metadata";

  $('.destinations-form').on('submit', function(e) {
    e.preventDefault();
    let searchstring = $('input[type="text"]').val();
    let requestUrl = url + `?text=${searchstring}&title=${searchstring}`;

    $.ajax({
      type: 'GET',
      url: requestUrl,
      success: function(res) {
        //Create a button to see more info, or add an click event handler for the whole .res-entry div
        //Change item.metadata.id for whatever property contains the ID
        let repo = res.data.map(item =>
          `<div class="res-entry" href="#" data-id="${item.collection_id}">
					<div class="res-entry-title">${item.metadata.title}</div>
					<div class="res-entry-author">${formatAuthors(item.metadata.authors)}</div>         
					<div class="res-entry-series">${item.metadata.series}</div>
					<div class="res-entry-download">
					  <a href="${item.links[0].href}">Download</a>
					</div>
				  </div>`);

        $("#results").empty().append(repo); // Empty previous...
      }
    });
  });


  $(document).on("click", ".res-entry", e => {    
    openDetails($(e.target).data("id"), e)
  })

  function openDetails(id, ev) {
    //This is for crossbrowser compatibility
    (ev || event).preventDefault();
    //Fetch the item's details (replace detailsRequestUrl for whatever URL can return the contents)
    $.get({
      url: "https://data.azgs.arizona.edu/api/v1/metadata",
      data: {
        collection_id: id
      },
      success: function(res) {
        console.log(res)
        /*var details = $("#details");
        //Build the HTML
        details.html(res.data.map(item =>
          `....`));
        //And open the popup
        details.show().fadeTo(200, 1);*/
      }
    });
  }

})
    #results {
  margin-top: 1em;
}

.res-entry {
  border: thin solid grey;
  margin: 0.667em;
  padding: 0.5em;
}

.res-entry .res-entry-title {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.res-entry .res-entry-author {
  font-size: 0.8em;
  font-style: italic;
  margin-bottom: 0.25em;
}

.res-entry .res-entry-author:before {
  content: 'By: ';
}

.res-entry .res-entry-series {
  font-size: 0.9em;
}

.res-entry .res-entry-download {
  margin-top: 0.5em;
}

.res-entry .res-entry-download a {
  display: block;
  text-align: right;
  /* If you want it on the right */
}

.res-entry .res-entry-download a button {
  border: thin solid grey;
  background: #FFF;
}

.res-entry .res-entry-download a button:hover {
  border: thin solid grey;
  background: #EE7;
  cursor: pointer;
}

#details {
  display: none;
  position: fixed;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="destinations-form" role="search">
  <div class="input-line">
    <input id="searchForm" type="text" class="form-input check-value" placeholder="Search Documents" />
    <button type="submit" class="form-submit btn btn-special">Search</button>
  </div>
</form>
<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xs-24">
        <div class="boat-box">
          <div id="results"></div>
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="grid">
      <div class="col-md-18 col-md-30 center">
        <div id="details"></div>
      </div>
    </div>
  </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search