0

I have the following event listener:

jQuery(document).ready(function() {
$('.start-selling').click(function(event){
    $('#sale-value').val($(this).data("value"));
    $('#mark_sold_modal').modal();
});
});

This returns an error, namely Uncaught TypeError: $(...).modal is not a function. Searching the internet reveals that this is normally because bootstrap-modal.js hasn't been loaded at the time the function is called. However, not only is the code wrapped in jQuery(document).ready but I have checked the console and it shows that the Bootstrap Javascript was loaded before my JS file containing this code:

enter image description here

If I use Bootstrap's data-API instead of my own Javascript, it works and opens the popup:

<button class="btn btn-success start-selling" data-toggle="modal" data-target="#mark_sold_modal" data-id="123" data-value="16.99">Mark as Sold</button>

Which is strange to me, because all this data API essentially does is call the modal() function from inside bootstrap-modal.js:

$(function () {
    $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
      var $this = $(this), href
        , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
        , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data())

      e.preventDefault()
      $target.modal(option)
    })
  })

I would be happy to use this without thinking further about this but I need to use a Javascript event of my own because I need to populate the modal with some data relevant to the item clicked before showing it to the user.

Please help. If need be I can rewrite the modal functionality completely but I would rather not spend valuable time on that.

This is the modal element:

<div class="modal" id="mark_sold_modal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Item sale confirmation</h3>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <label for="sale-value" class="col-md-4 control-label">Value</label>

            <div class="col-md-6">
                <input id="save-value" class="form-control span4" name="save_value" value="" required autofocus maxlength="64">
                <div class="help-block" id="save-value-error"></div>
            </div>
        </div>
        <div class="form-group">
            <label for="sale-date" class="col-md-4 control-label">Date</label>

            <div class="col-md-6">
                <input id="save-date" class="form-control span4" name="save_date" value="{{ $today }}" required maxlength="64">
                <div class="help-block" id="save-date-error"></div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a class="btn" data-dismiss="modal">Cancel</a>
        <a class="btn btn-success" id="filter-save">Mark as sold</a>
    </div>
</div>
sveti petar
  • 3,637
  • 13
  • 67
  • 144
  • I don't see the `mark_sold_modal` modal element?! Please add everything to the question. – eisbehr Jan 22 '18 at 15:50
  • Added, although I don't think it would help find a solution, seeing how it works fine when the data-API approach is used. – sveti petar Jan 22 '18 at 15:52
  • Having recently done something similar, I would put your code that populates the modal form inside a `show.bs.modal` handler. Generally inside such a handler you check which modal was invoked, the button that invoked it, and run the appropriate code. – James Jan 22 '18 at 16:00
  • Sorry but, your code works fine?! https://jsfiddle.net/d4spnaw4/1/ – eisbehr Jan 22 '18 at 16:01
  • put your reference to `bootstrap.min.js` to the bottom of your page and not on top – Cesar Bielich Jan 22 '18 at 19:46
  • @James This seems to be what I'm looking for, but how do I check which button invoked the modal from within the handler? EDIT: actually no, the handler never fires off at all. – sveti petar Jan 23 '18 at 11:21
  • @CesarBielich All bootstrap stuff is at the bottom. Below jQuery and above my client_functions.js – sveti petar Jan 23 '18 at 11:23

0 Answers0