Selection of Dropdown results in PDF not loading

I am facing an issue with my function that selects a PDF from a dropdown list. Instead of loading and displaying the PDF, it only shows a blank modal. Any suggestions on how to fix this?

<li>
  <a href="">Case Studies</a>
  <ul class="rd-navbar-dropdown">
    <li class="rd-navbar-aside-right">
     <a id="ai_dropdown" data-toggle="modal" data-target="#myModal" href="white-papers/transformation_of_the_cookie/1.pdf#toolbar=0">Case Study 1</a><br>
     <a id="ai_dropdown" data-toggle="modal" data-target="#myModal" href="white-papers/transformation_of_the_cookie/2.pdf#toolbar=0">Case Study 2</a><br>
     <a id="ai_dropdown" data-toggle="modal" data-target="#myModal" href="white-papers/transformation_of_the_cookie/3.pdf#toolbar=0">Case Study 3</a><br>
    </li>
  </ul>
</li>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"  width="960" height="600">
  <div class="modal-dialog" width="700px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <iframe id="iframe" src="" width="100%" height="600px" frameborder="0" allowtransparency="true"></iframe>  
      </div>
    </div>
  </div>
</div>

$(document).ready(function() {
  $("#ai_dropdown").on('click', function(e) {
    var option = $('a:selected', this).data('href');
    console.log(option);
    $('#iframe').attr('src', option);
  }); 
});
javascriptbootstrap-modaldropdown

Answer №1

Ensure each anchor tag (a) is within its own list item (li) instead of giving them IDs directly. Assign the ID "ai_dropdown" to the unordered list (ul) element.

<ul id="ai_dropdown" class="rd-navbar-dropdown">
    <li  class="rd-navbar-aside-right">
     <a  data-toggle="modal" data-target="#myModal" href="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg">Case Study 1</a></li>         
     <li class="rd-navbar-aside-right">
     <a  data-toggle="modal" data-target="#myModal" href="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">Case Study 2</a></li>
     <li class="rd-navbar-aside-right">
     <a  data-toggle="modal" data-target="#myModal" href="https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297__340.jpg">Case Study 3</a>
    </li>
  </ul>

To target the clicked element and retrieve the href attribute:

 $("#ai_dropdown li>a").on('click', function(e) {
    var option = $(this).attr('href');
    $('#iframe').attr('src', option);
  });

Test the functionality by using this code snippet:

$(document).ready(function() {
  $("#ai_dropdown li>a").on('click', function(e) {
    var option = $(this).attr('href');
    $('#iframe').attr('src', option);
  }); 
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <a href="">Case Studies</a>
  <ul id="ai_dropdown" class="rd-navbar-dropdown">
    <li  class="rd-navbar-aside-right">
     <a  data-toggle="modal" data-target="#myModal" href="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg">Case Study 1</a></li>
     
     <li class="rd-navbar-aside-right">
     <a  data-toggle="modal" data-target="#myModal" href="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">Case Study 2</a></li>
     <li class="rd-navbar-aside-right">
     <a  data-toggle="modal" data-target="#myModal" href="https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297__340.jpg">Case Study 3</a>
    </li>
  </ul>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"  width="960" height="600">
  <div class="modal-dialog" width="700px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <iframe id="iframe" src="" width="100%" height="600px" frameborder="0" allowtransparency="true"></iframe>  
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<li>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble retrieving data passed between functions

One of my Vue components looks like this: import '../forms/form.js' import '../forms/errors.js' export default{ data(){ return{ form: new NewForm({ email: '&apos ...

javascriptvue.js

Changing a date string to MM DD format in React without using plain JavaScript

I'm familiar with how to handle this outside of React. My issue is that I have a date string coming from an API within an object, and I need to reformat it. The current format is "2022-12-13T06:00Z" but I want it to display as "December 13". The objec ...

javascriptreactjsdate

Error: Attempting to access properties of an undefined variable (specifically 'document') is not allowed

The other day, while working on a project, I encountered an issue with my GraphQL implementation using the JavaScript graphql-request library. Here is the snippet of code that caused the error: import { request, gql } from 'graphql-request' const ...

javascriptreactjsgraphqlnext.jsgraphql-js

Execute the strace command using the child_process module in Node.js

Having received no answers and being unsatisfied with the previous approach, I am now attempting a different method to monitor the output of a program that is currently running. Inspired by a thread on Unix Stack Exchange, the goal is simply to retrieve th ...

javascriptnode.jslinuxloggingchild-process

Guide on importing a React.Component from a Content Delivery Network (CDN) and displaying it within a separate React

Note: None of the solutions provided are effective [DO NOT REMOVE THIS NOTE] Here's a simple question for you - I have a project named Project Y, created using the command npx create-react-app react-project. Now, in the App.js file of Project Y, I h ...

javascriptreactjswebpackcdn

Guide to delivering a PDF document from a controller

In my pursuit to send a PDF file from a Controller Endpoint using NestJs, I encountered an interesting issue. Without setting the Content-type header, the data returned by getDocumentFile function is successfully delivered to the user. However, when I do ...

javascriptnode.jsnestjs

Increase the date by one day in the minimum date field using the date picker

I've been struggling with adding one day to the minDate in my code. Despite trying multiple solutions from Stackoverflow, none of them have worked successfully. Here is the code I currently have: $('#cal_mulamhn').datepicker({ minDate ...

javascriptphpjquerycodeigniter

What is the process by which browsers manage AJAX requests when they are made across

I have encountered an issue that is puzzling to me, and I suspect it might be due to my misunderstanding of how the browser handles AJAX requests. Just for context, I am using Codeigniter on an Apache server and triggering AJAX requests with jQuery. The b ...

javascriptphpjqueryajaxcodeigniter

Tips for transmitting an array of Objects to AngularJS

Summary I'm curious about how I can successfully send the following array of objects from NodeJS to an AngularJS app. var players = [ Footer: { username: 'Footer', hp: 200, exp: 1 }, Barter: { username: 'Barter', hp: 200, e ...

javascriptarraysangularjsnode.js

Transmit information using the buttonRenderer feature in Ag-Grid for Angular applications

Struggling to transfer data between two unrelated components by clicking on a cell in ag-Grid and passing the data to a form component. I utilized the buttonRenderer function to extract row data from ag-Grid, but I'm unsure how to pass it to the secon ...

javascriptangulartypescriptag-grid

Using data-attribute, JavaScript and jQuery can be used to compare two lists that are ordered

I am looking to implement a feature that allows me to compare two lists using data attributes in either JavaScript or jQuery. Unfortunately, I haven't been able to find any examples of this online and I'm not sure how to approach it. The first l ...

javascriptjqueryarraysmatchcustom-data-attribute

Issues with the display property

After setting the display of a div tag as none in the style property, I am trying to show it based on an on-click function. However, the issue I am facing is that when I click on the function, the div displays for a brief moment then disappears again. Ca ...

javascriptjqueryhtml

Navigating the storing and organizing of user data through Firebase's simplistic login feature for Facebook

As I work on my AngularJS and Firebase-powered website project, I aim to leverage Facebook login for seamless user connectivity. While Firebase's simple login feature promises an easier authentication process, I face the challenge of effectively acces ...

javascriptfacebookangularjsfirebasefacebook-login

What is the best way to iterate through an ID using jQuery?

After pulling the list of doctors in my area from the database and displaying it on my webpage, I now want to load each doctor's "About" content inside a Bootstrap modal. I added an "about" column within the same database table where the doctors' ...

javascriptphpjquerytwitter-bootstrapmysqli

What causes performance issues when utilizing mouseover events in JQuery?

var mouseX; var mouseY; $(document).mousemove( function(e) { mouseX = e.pageX; mouseY = e.pageY; }); $(".test").mouseover(function(){ $('#DivToShow').css({'top':mouseY,'left':mouseX, 'display':'block&ap ...

javascriptjqueryhtml

Make the card change to gray when clicked using Bootstrap

Is it possible to achieve a common function in an infinite list using HTML, CSS, JS, jQuery (on the user's side) where an item will be grayed out after being clicked? How can we implement this effect? 1.) When the user clicks on the card element htt ...

javascripthtmljquerybootstrap-4

What could be causing this code to keep looping?

This is my submission for a class project. The task given was: "Create a function that will kickstart the program and name it main(). From the main() function, invoke a function named getValue(). The getValue() function will prompt the user to input a num ...

javascriptfunctionparametersarguments

Tips for utilizing Vue 'component' with just Vue added as a page add-on using <script>:

I am trying to incorporate a Vue component called vue-timeago: import VueTimeago from 'vue-timeago' Vue.use(VueTimeago, { name: 'Timeago', // Component name, `Timeago` by default locale: undefined, // Default locale locales: { ...

javascriptvue.jsvuejs2

I am attempting to assign a default value to a TextField by retrieving data from a GetMapping call in React, however, the value is not being successfully set

I am facing an issue with setting a default value for a TextField in my code. Even though I am trying to populate it with data from a GetMapping call, the value is not being set as expected. Here is the JSON response I receive from the API call: { "id": 1 ...

javascripthtmlreactjsmaterial-ui

How can you interact between a parent's named controller and JavaScript files in AngularJS?

Lately, I've been exploring the use of named controllers in my code and find it to be a much better alternative to using traditional $scope variables. It makes accessing parent controller attributes and functions within the DOM seamless. See an exampl ...

javascriptangularjscontrollerrequirejsnamed