Skip to content
Fix Code Error

Passing data to a bootstrap modal

March 13, 2021 by Code Error
Posted By: Anonymous

I’ve got a couple of hyperlinks that each have an ID attached. When I click on this link, I want to open a modal ( http://twitter.github.com/bootstrap/javascript.html#modals ), and pass this ID to the modal. I searched on google, but I couldn’t find anything that could help me.

This is the code:

<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>

Which should open:

<div class="modal hide" id="addBookDialog">
    <div class="modal-body">
        <input type="hidden" name="bookId" id="bookId" value=""/>
    </div>
</div>

With this piece of code:

$(document).ready(function () {
    $(".open-AddBookDialog").click(function () {
        $('#bookId').val($(this).data('id'));
        $('#addBookDialog').modal('show');
    });
});

However, when I click the hyperlink, nothing happens. When I give the hyperlink <a href="#addBookDialog" ...>, the modal opens just fine, but it does’t contain any data.

I followed this example: How to pass values arguments to modal.show() function in Bootstrap

(and I also tried this: How to set the input value in a modal dialogue?)

Solution

I think you can make this work using jQuery’s .on event handler.

Here’s a fiddle you can test; just make sure to expand the HTML frame in the fiddle as much as possible so you can view the modal.

http://jsfiddle.net/Au9tc/605/

HTML

<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<p>&nbsp;</p>


<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<div class="modal hide" id="addBookDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

JAVASCRIPT

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
     // As pointed out in comments, 
     // it is unnecessary to have to manually call the modal.
     // $('#addBookDialog').modal('show');
});
Answered By: Anonymous

Related Articles

  • Is CSS Turing complete?
  • setTimeout function not working : javascript
  • Reference - What does this regex mean?
  • Fetching Data from API using NextJS and Material UI React
  • Simple POST request from Angular client to Spring…
  • Navbar not filling width of page when reduced to mobile view
  • What is a NullReferenceException, and how do I fix it?
  • Form field border-radius is not working only on the…
  • How to add 'load more' functionality to items on a…
  • React get component prop on click
  • Simplest PHP example for retrieving user_timeline…
  • sql query to find priority jobs
  • Problems Installing CRA & NextJS from NPM…
  • Polymer paper-dialog: how can I know when an…
  • Only one element is appended in the div
  • Set focus on a input control contained in a second…
  • Do not close the mode in the mouse up event
  • Sort table rows In Bootstrap
  • Wrong focus after closing a 2nd modal
  • Change the Bootstrap Modal effect
  • Split string array evenly into sub arrays whilst…
  • How to add class active on specific li on user click…
  • After a little scroll, the sticky navbar just is not…
  • Is it possible to apply CSS to half of a character?
  • Multiple modals overlay
  • React API call in useEffect runs only when parameter…
  • Not submit any value if checkbox is empty
  • What are the new features in C++17?
  • Active tab issue on page load HTML
  • What does this symbol mean in JavaScript?
  • Simple Popup by using Angular JS
  • Why the value of input file missing when I input the…
  • How to use html template with vue.js
  • jqGrd hyperlink or showlink
  • How can I display a modal dialog in Redux that…
  • Vuejs use modal component twice on same page
  • Show/hide 'div' using JavaScript
  • How to resize Twitter Bootstrap modal dynamically…
  • Confirm deletion in modal / dialog using Twitter Bootstrap?
  • Style jQuery autocomplete in a Bootstrap input field
  • How can I pattern match ID only making sure the…
  • For-each over an array in JavaScript
  • Pure JavaScript equivalent of jQuery's $.ready() -…
  • How to access elements of a JArray (or iterate over them)
  • How to implement a Navbar Dropdown Hover in Bootstrap v4?
  • How to render web component in Polymer
  • How to reset the bootstrap modal when it gets closed…
  • Prevent submit on route change Formik AutoSave
  • Trying to keep dropdown menus flush to the edge of…
  • Aurelia/Karma/Istanbul Cannot read property 'skip'…
  • Missing visible-** and hidden-** in Bootstrap v4
  • How to make a radio button look like a toggle button
  • next/link losing state when navigating to another page
  • Javascript validate all checkboxes are selected
  • How to find Control in TemplateField of GridView?
  • jQuery Mobile: document ready vs. page events
  • jQuery.on() Delegation: Slightly complex selector…
  • React onClick() doesn't trigger when inside map function
  • Ukkonen's suffix tree algorithm in plain English
  • Send parameter to Bootstrap modal window?
  • Example using Hyperlink in WPF
  • Expanded calendar in modal
  • What are the undocumented features and limitations…
  • Java Spring JPA DB. Connections between tables
  • How does PHP 'foreach' actually work?
  • boostrap modal not updating with vue js v2 two way binding
  • How to filter a RecyclerView with a SearchView
  • Understand Backbone.js REST calls
  • how to use canvas in JavaScript flappy bird code
  • Google Forms file upload complete example
  • How to handle the modal closing event in Twitter Bootstrap?
  • Typeerror: n is undefined in underscore.min.js
  • What does "Fatal error: Unexpectedly found nil while…
  • Cannot set property '_onButtonClick' of null with…
  • Examples of GoF Design Patterns in Java's core libraries
  • Bootstrap modal in React.js
  • How to specify typecllass function type to operate…
  • Error stopping function after alert message is shown
  • How to add a regular list view in the extended part…
  • Bootstrap 3.0 Popovers and tooltips
  • Jquery If radio button is checked
  • JS inserting content multiple times
  • Polymer 1.0: Sorting iron-list
  • How do access to vee-validate errors and clear them…
  • Remove similar tuple from dictionary of tuples
  • Unable to get Notification pop-up
  • How do i update a javascript variable as its value changes?
  • Backbone.js - instantiate Models/Views from exisiting html
  • Bootstrap modal opens wrong one
  • How to use Servlets and Ajax?
  • How to reset after dynamically loading data using in…
  • CSS animation as a Google Map Marker (Polymer 1.0)?
  • Custom element based on bootstrap-toggle not…
  • Interdependent properties in Vue.js
  • Clearing a polyline on a Polymer Google Map
  • What's the difference between eval, exec, and compile?
  • display other inputs based on the value of another…
  • Polymer focus() has to be wrapped in setTimeout() to work?
  • Js Calculation based on radio button, and some problems
  • Is there a better, cleaner way to write this…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Find a value in an array of objects in Javascript

Next Post:

Check if a string contains another string

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error