CODEWITHSUNDEEP
javascriptphpjquerylaravel
iuuujkl
iuuujkl

Reputation: 2384

Javascript not responding to on click event [Laravel 5.5]

I want a pop-up screen with a contact form when clicking on a button. My Javascript function is not reacting on a on-click..

I import the JS-file in the main html page where I import cantact.blade

  <script type="text/javascript" src="{{ URL::asset('js/provider/contact-provider.js') }}"></script>

Loading the Javascript files works, the program also goes into the init function when loading. But never in the on-click function..

contact.blade.php:

        <div class="o-grid">
            <div class="o-grid__col u-7/12@lg u-border--contact">
                <td><a href="#" class="c-btn c-btn--red c-btn--small contact-form-result .contact-form-result-modal"
                       data-location=""id="contact-provider-button"
                       data-detail-route="{{ route('vendor.contact', ['profile' => $profile],true) }}"
                       data-modal-open="contact-provider-form">@lang('profile.btnContact')</a></td>
            </div>
        </div>

JAVASCRIPT (contact-provider.js):

var ExtendedForm = ExtendedForm || {};

/**
 * Show search form modal with detailed info
 * @type {{init}}
 */
ExtendedForm.showSearchDetail = (function ($) {

  var _$container;
  var _$modal;

  var _clearAndShow = function () {
    $('.modal-content', _$modal).html('');
    _$modal.css({display: 'block'});
  };

  var _getContent = function (url) {
    $.get(url, function (res) {
      $('.modal-content', _$modal).html(res);
    });
  };

  /**
   * DOM ready inits
   * @private
   */
  var _init = function () {

    _$container = $('.contact-provider-button');
    _$modal = $('#contact-provider-form');

    $(function () {

      // click search result
      _$container.on('click', '.contact-form-result-modal', function (evt) {
        alert("message");
        evt.preventDefault();
        var url = $(this).data('detail-route');
        $('body').addClass('u-overflow--hidden u-relative');
        _clearAndShow();
        _getContent(url);
      });

    });

  };

  return {
    init: _init
  }

})(jQuery);

ExtendedForm.showSearchDetail.init();

Upvotes: 0

Views: 405

Answers (1)

piscator
piscator

Reputation: 8699

It seems you are referencing a class instead of an id. Change

_$container = $('.contact-provider-button');

to 

_$container = $('#contact-provider-button');

Additionally, as @Pointy mentions in the comments, it is better to only reference DOM elements in the ready handler, otherwise you might get an exception or unexpected behaviour.

Upvotes: 1

Related Questions