I dont know why my Ok and close button is not working in Invalid Data in bootstraps

Question

I have bootsrap file in twig. I am using php in backend. I want to know why my close and OK.When i fill up form and hit save one dialog will come with invalid address.I am not able to close that using close button and OK button is also not working in that div.button is not working

{% extends container %}

{% block content %}

  {% if error %}
  
    
      {{ error }}
    
  
  {% endif %}

  
  
    
      
        ORG Name
      
      
        {{ form.org_name.render }}
      
    
  
  
    
      
        Prac Name
      
      
          {{ form.prac_name.render }}
          {{ form.prac_id.render }}
      
      
         Matched Prac
      
    
  
  
    
      
        Networkbound
(Overrides provider value)
      
      
        {{ form.networkbound.render }}
        {{ form.network_id.render }}
      
    
  
  
    
      
        Address
      
      
        {{ form.address1.render }}
      
    
  
  
    
      
        City
      
      
        {{ form.city.render }}
      
    
  
  
    
      
        State
      
      
        {{ form.state.render }}
      
    
  
  
    
      
        ZIP
      
      
        {{ form.zip.render }}
      
    
  
{% for item in attributes %}
  
    
      
        {{ item.name }}
      
      
        
          
        
      
    
  
{% endfor %}
{% if form.insurance_template is defined %}
  
    
      
        Insurance Template
      
      
        {{ form.insurance_template.render }}
      
    
  
  
    
      
      
      
        
      
    
  
{% endif %}

  
    
      
        Phone number
      
      
        {{ form.contact_phone.render }}
      
    
  

  
    
      
        Fax number
      
      
        {{ form.contact_fax.render }}
      
    
  

  
    
      
        Direct message address
      
      
        {{ form.direct_message_address.render }}
      
    
  

  
    
      
        EMR
      
      
        {{ form.EMR.render }}
      
    
  

  
    
      Referral Delivery Preferences
    
  

  
    
      
        Delivery Preference
      
      
        {{ form.primary_delivery_preference.render }}
      
    
  

  {{ form.list_of_location_ids.render }}
  {{ form.organization_id.render }}
  {{ form.id.render }}

  
    
  



  
    
      
        
        Matched Practice
      
      
        By choosing one of the practice names, you will prepopulate the fields in the form  Note that any existing fields will be overwritten.

        
          
            
              
                Address
                City, State
                Zip
                Phone
                Fax
              
            
            
              
                
                  
                
                , 
                
                
                
              
            
          
        
      
      
        
      
    
  



  
    
      
        
        Invalid Address
      
      
        
          The address provided did not geolocate properly.
          Please try a different address.
        
      
      
        
      
    
  



  
    
      
        
        Multiple Addresses Found
      
      
        
          The address provided returned more than one result.  Please
          choose the best option to use for the provider's location.
          If none of the options available are acceptable, please contact
          an administrator.
        

        
      
      
        
      
    
  


{{ geolocator_on }}

{% endblock %}

{% block page_js %}
  {% javascripts 'js/autocomplete.js'
  'js/autocomplete_sources.js'
  'js/admin/provider/location-update.js'

  output='compiled/js/admin-provider-location-edit.js'
 %}
  
  {% endjavascripts %}
{% endblock %}

I have attached my js file also

$(function() {
  var LocationUpdate = function() {
    var self = this;

    self.action = ko.observableArray();
    self.insuranceName = ko.observable();
    self.practiceMatchLink = ko.observable(false);
    self.locationMatchModal = $('#location-match-modal').modal({show: false});
    self.invalidAddressModal = $('#invalid-address-modal').modal({show: false});
    self.multipleAddressesModal = $('#multiple-addresses-modal').modal({show: false});
    self.geocodedResults = [];

    self.initialAddress1 = $('#address1').val();
    self.initialCity = $('#city').val();
    self.locationId = ko.observable($('#id').val());

    self.orgId = ko.observable($('#organization_id').val());
    self.orgName = ko.observable($('#organization_name').val());
    window.organizationObejct.setOrg(self.orgId());

    self.practiceId = ko.observable($('#practice_id').val());
    self.practiceName = ko.observable($('#practice_name').val());

    self.networkId = ko.observable($('#network_id').val());
    self.networkName = ko.observable($('#network').val());

    self.matchedLocations = ko.observableArray([]);

    $('#contact_email').attr('type', 'email');

    self.organizationAutocomplete = {
      source: window.fetchOrganizations,
      response: function(event, ui) {
        if (ui.item == null) {
          self.orgId(null);
          window.organizationObejct.setOrg(self.orgId());
          self.clearPractice()
        }
        self.orgName($('#organization_name').val() );
      },
      onItemSelected: function(event, ui) {
        self.orgName(ui.item.label);
        self.orgId(ui.item.value);
        window.organizationObejct.setOrg(self.orgId());
        self.clearPractice();
      },
      onItemChanged: function(event, ui) {
        if (ui.item == null) {
          self.orgId(null)
          window.organizationObejct.setOrg(self.orgId());
          self.clearPractice();
        }
      }
    };

    self.clearPractice = function() {
      self.practiceId(null);
      self.practiceMatchLink(false);
      $('#practice_id').val('');
    }

    self.networkAutocomplete = {
      source: window.fetchNetworks,
      onItemSelected: function(event, ui) {
        self.networkId (ui.item.value);
        self.networkName (ui.item.label);
        $('#network_id').val(self.networkId());
      },
      onItemChanged: function(event, ui) {
        if (ui.item === null) {
          self.networkId(null);
          self.networkName(null);
          $('#network_id').val('');
        }
      }
    };

    self.practiceAutocomplete = {
      source : window.fetchPractices,
      response: function(event, ui) {
          self.practiceMatchLink(false);
      },
      onItemSelected: function(event, ui) {
          self.practiceId (ui.item.value);
          self.practiceName (ui.item.label);
          self.practiceMatchLink(true);
          $('#practice_id').val(self.practiceId());
      },
      onItemChanged: function(event, ui) {
          if (ui.item == null) {
              self.practiceId(null);
              self.practiceMatchLink(false);
              $('#practice_id').val('');
          }
      }
    };

    self.validatedAddress = false;
    self.checkGeocoding = function() {

      if ($('#geolocator-on').text() == 'false') {
        return true;
      }

      if (self.validatedAddress) {
        return true;
      }

      var url = urls.ajax('location/get-geocode-results');

      var params = {
        'address1': $('#address1').val(),
        'city': $('#city').val(),
        'state': $('#state').val(),
        'zip': $('#zip').val()
      };

      $.post(url, params, function(result) {
        self.geocodedResults = result.data;

        if (result.data.length < 1) {
          self.invalidAddressModal.modal('show');
          return false;
        } else if (result.data.length == 1) {
          self.validatedAddress = true;
          var loc = result.data[0];
          $('#address1').val(loc.address);
          $('#city').val(loc.city);
          $('#state').val(loc.state).change();
          $('#zip').val(loc.zip);
          $('#edit_location').submit();
        } else {
          self.showMultipleAddressPossibiliesDialog();
          return false;
        }
      }, 'json');
    };

    var editLocationValidator = formJQueryValidate({
      formSelector: '#edit_location',
      ignore: 'radio',
      rules: {
        "speciality_name" : {
          validateAutocomplete: { "selector_uuid": "#speciality_uuid", "selector_text": "#speciality_name" }
        },
        "contact_phone": {
          validatePhoneExt: { "value": $('#contact_phone').val() },
          validatePhone: { "value": $('#contact_phone').val() }
        },
        "contact_fax": {
          validatePhoneExt: { "value": $('#contact_fax').val() },
          validateFax: { "value": $('#contact_fax').val() },
          FieldValueDependentNotEmpty: {
            "fieldValue": '#primary_delivery_preference',
            "requiredValue": "Fax"
          }
        },
        "zip": {
          validateZIP: { "value": $('#zip').val() }
        },
        "direct_message_address": {
          realEmail: true,
          FieldValueDependentNotEmpty: {
            "fieldValue": '#primary_delivery_preference',
            "requiredValue": "Direct Message"
          }
        },
        "EMR": {
          FieldValueDependentNotEmpty: {
            "fieldValue": '#primary_delivery_preference',
            "requiredValue": "EMR"
          }
        }
      },
      messages: {
        "direct_message_address": {
          FieldValueDependentNotEmpty: "This field is required because of Delivery Preference."
        },
        "contact_fax": {
          FieldValueDependentNotEmpty: "This field is required because of Delivery Preference."
        },
        "EMR": {
          FieldValueDependentNotEmpty: "This field is required because of Delivery Preference."
        }
      },
      errorPlacement: function(error, element) {
        if (typeof $(element).data('bind') !== 'undefined' && $(element).data('bind').indexOf('fbSelect:{}') !== -1) {
          error.insertAfter($(element).siblings('.bootstrap-select'));
        }
      },
      submitHandler: self.checkGeocoding
    });

    self.showLocationMatchDialog = function() {
      self.matchedLocations([]);
      var url = urls.ajax('location/search');
      $.getJSON(url, {filter: self.practiceName(), page_size: 25, deleted_dt: true}, function(result) {
        for (i in result.data) {
          self.matchedLocations.push({
            'address1': result.data[i].address1,
            'city': result.data[i].city,
            'state': result.data[i].state,
            'zip': result.data[i].zip,
            'phone': result.data[i].phone,
            'fax': result.data[i].fax
          });
        }
      }).success(function() {
        self.locationMatchModal.modal('show');
      });
    };

    self.selectLocationToPrepopulate = function() {
      $('#address1').val(this.address1);
      $('#city').val(this.city);
      $('#state').val(this.state).change();
      $('#zip').val(this.zip);
      $('#contact_phone').val(this.phone);
      $('#contact_fax').val(this.fax);
      self.locationMatchModal.modal('hide');
    };

    self.buildMatchedLocationsList = function(response){
      $('#locations_list').empty()
      for(i in response.locations){
        //Do not show the same practice location that we are already on
        if(self.locationId() != response.locations[i].id){
          var tr = document.createElement('tr');
          var td_input = document.createElement('td');
          var td_label = document.createElement('td');

          var checkbox = document.createElement('input');
          var description = document.createTextNode(
              response.locations[i].first_name + ' ' +  response.locations[i].last_name + ' - ' +
              response.locations[i].practice_name + ' - ' +
              response.locations[i].address1 + ' ' +
              response.locations[i].city + ' ' +
              response.locations[i].state + ' ' +
              response.locations[i].zip
          );

          checkbox.type = 'checkbox';
          checkbox.value = response.locations[i].id;
          checkbox.name = 'location_checkboxes';
          checkbox.id = 'checkbox_' + response.locations[i].id;

          td_input.appendChild(checkbox);
          td_label.appendChild(description);

          $(td_input).css('vertical-align','top');
          $(td_label).css('padding','0px 5px');

          tr.appendChild(td_input);
          tr.appendChild(td_label);
          $('#locations_list').append(tr);
        }
      }
      $('#locations_list').parent().scrollTop;
    };

    self.showMultipleAddressPossibiliesDialog = function() {
      $('#geolocated-addresses').html('');

      var ret = '';
      for (var i = 0; i < self.geocodedResults.length; i++) {
        var row = self.geocodedResults[i];
        ret += '';
          ret += 'Address:';
          ret += '' + row.address + '';
        ret += '';

        ret += '';
          ret += 'City:';
          ret += '' + row.city + '';
        ret += '';

        ret += '';
          ret += 'State:';
          ret += '' + row.state + '';
        ret += '';

        ret += '';
          ret += 'Zip:';
          ret += '' + row.zip + '';
        ret += '';
        
        ret += '';
          ret += '';
            ret += '';
          ret += '';
        ret += '';
      }

      $('#geolocated-addresses').html(ret);
      self.multipleAddressesModal.modal('show');
    };

    $('#multiple-addresses-modal').on('hidden.bs.modal', function () {
      $('#save-button').attr('disabled', false);
    });


   /* $('#invalid-address-modal').on('hidden.bs.modal', function () {
      $('#save-button').attr('disabled', false);
    });
*/

    // this will submit the form
    $(document).on('click', '.choose-address', function() {
      var index = parseInt($(this).attr('id').replace('choose-address-', ''));
      var loc = self.geocodedResults[index];
      $('#address1').val(loc.address);
      $('#city').val(loc.city);
      $('#state').val(loc.state);
      $('#zip').val(loc.zip);
      self.validatedAddress = true;
      $('#edit_location').submit();
    });
  };

  window.page = new LocationUpdate();
  ko.applyBindings(window.page, document.getElementById('content'));

});

I dont know why my Ok and close button is not working in Invalid Data in bootstraps

0 Answers