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 with creating a new Next.js app using the latest version with npx?

Having some difficulty with the "npx create-next-app@latest" command while setting up Next.js. As a newcomer to both the community and Next.js, I could use some assistance in resolving this problem. Upon running the command, an unfamiliar message was displ ...

javascriptnode.jsnpmnext.jsnpx

Load as soon as the browser is launched

I have developed a unique button that utilizes JavaScript to display the server status through an API. However, I am facing an issue where the server status does not automatically load when the browser is opened for the first time. You need to manually cli ...

javascriptjqueryfirefoxtoolbaradd-on

Exploring how to access properties of objects in javascript

As a novice on this platform, I'm uncertain if the title may be deceiving, but I have a question regarding the following scenario: var someObject ={} someObject.info= { name: "value" }; How can I acce ...

javascriptobject

Getting the Correct Nested Type in TypeScript Conditional Types for Iterables

In my quest to create a type called GoodNestedIterableType, I aim to transform something from Iterable<Iterable<A>> to just A. To illustrate, let's consider the following code snippet: const arr = [ [1, 2, 3], [4, 5, 6], ] type GoodN ...

javascripttypescripttypesconditional-types

Tips for bringing in pictures from outside directories in react

I am new to React and trying to import an image from a location outside of the project's root folder. I understand that I can store images in the public folder and easily import them, but I specifically want to import them from directories outside of ...

javascripthtmlnode.jsreactjs

Is the branch of ExtJS 4.1 TreeStore lazy loading extending?

I am working on implementing lazy loading of tree branches in an MVC application using extjs4.1. The branches are located on different URLs and I have faced several challenges along the way. Unfortunately, at this point, the branching functionality is not ...

javascriptextjsextjs4.1

Creating a dynamic map in AngularJS by parsing and utilizing data from a JSON file

Looking to create a map from JSON data returned by a RESTFUL WEB Service using AngularJS. Here is an example of the JSON format: myJSON = [{ id: 8, color: "red", value: "#f00" }, { id: 37, color: "green", value: "#0f0" }, { id ...

javascriptangularjsjson

Instead of using a v-if condition, add a condition directly in the Vue attribute

Apologies for the unclear title, as I am unsure of what to name it with regards to my current issue, I am attempting to create a component layout using vuetify grid. I have a clear idea of how to do this conventionally, like so: <template> <v-fl ...

javascriptvue.jsvuetify.js

How big should the placeholder image be for the image area?

How can I create a loading image to replace a .gif while it loads? I need a placeholder image of about 325x325 (same size as the gif) to keep content in place. I've attempted using background: url() without success and haven't explored JS/jQuery ...

javascriptjqueryimagebackgroundplaceholder

Creating React elements dynamically with material-ui can be done by utilizing state expressions in properties. This allows for the generation

Within a functional component, I aim to dynamically generate material-ui context menus by utilizing a state object: let legendContextMenuStatesObject = {}; for (let key of keys) { legendContextMenuStatesObject[key] = initialState; } const [lege ...

javascriptreactjsmaterial-uinext.js

Error: The Node Express Server is unable to locate the requested resource at "/

const http = require("http"); const myApp= require('./myApp'); const portNumber = 8080; const myServer = http.createServer(myApp); myServer.listen(portNumber) ...

javascriptexpressget

The remaining visible portion of a viewport is equivalent to the height of an element

Is there a way to dynamically set a div's height so that it expands from its starting position to the end of its parent div, which is 100% of the viewport minus 20 pixels? Here is an example of how you can achieve this using jQuery: $(document).read ...

javascriptjqueryhtmlcss

Injecting Ajax-loaded content into an HTML modal

Hey there! I'm currently working on a project involving the IMDb API. The idea is that when you click on a film title, a popup should appear with some details about the movie. I've made some progress, but I'm stuck on how to transfer the mov ...

javascriptphpjqueryhtmlajax

Incorporate a generic type into a React Functional Component

I have developed the following component: import { FC } from "react"; export interface Option<T> { value: T; label: string; } interface TestComponentProps { name: string; options: Option<string>[]; value: string; onChang ...

javascriptreactjstypescript

The development server fails to respond when initializing a new project following the NextJs documentation for an empty project

After consulting the NextJs framework documentation, I meticulously followed the setup instructions to initialize an empty project : mkdir hello-next cd hello-next npm init -y npm install --save react react-dom next mkdir pages Subsequently, I included t ...

javascriptreactjsnext.js

What is the best way to initiate a collapsed jQuery toggle?

Is there a way to make a jQuery toggle collapsed by default? I've looked at some examples, but none of them seemed to fit my specific setup and I couldn't quite figure them out. Here's the HTML code: <table border="0" width="100%" alig ...

javascriptjqueryhtmltoggle

Utilizing jQuery UI Slider for Calculating Percentage

I recently worked on an example where I incorporated 5 sliders, which you can see here: Example: http://jsfiddle.net/redsunsoft/caPAb/2/ My Example: http://jsfiddle.net/9azJG/ var sliders = $("#sliders .slider"); var availableTotal = 100; ...

javascriptjqueryuser-interfaceslider

A guide on parsing a stringified HTML and connecting it to the DOM along with its attributes using Angular

Looking for a solution: "<div style="text-align: center;"><b style="color: rgb(0, 0, 0); font-family: "Open Sans", Arial, sans-serif; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing e ...

javascriptangulartypescript

Leveraging React Native to retrieve information from a promise in JSON format

After successfully fetching the JSON data, I now have an array. My question is how can I utilize the elements within this array in a React Native environment? Below is my current approach: export default function display() { const fetching = async() => ...

javascriptreactjsreact-nativefetchasync.js

The HTML button triggers a function to execute on a different webpage when clicked

I'm facing a straightforward issue that I can't seem to figure out due to my limited experience with Angular and web development. The problem revolves around two components, namely home and dashboard. In the home.component.html file, there's ...

javascripthtmlcssangulartypescript