单击按钮

Question

这里我有一个按钮，如果我点击按钮我想要获取属性ID并传递API意味着他们将提供属性详细信息，我想在我的模态中显示结果，如果我点击意味着该模板不是showig怎么能这样做，因为我不需要显示和隐藏我想使用这个方法

// Property View
$(document).on('click', '.prlstbtn_view_btn', function() {
  id = $(this).closest('tr').find('.myHidden').val();
  console.log(id);
  viewproperty_modal(id);
});

function viewproperty_modal(property_id) {
  htmlString = "";
  
  $.ajax({
    url: 'http://www.example.com/properties/' + property_id,
    type: 'GET',
    contentType: 'application/json; charset=utf-8',
    success: function(viewresult) {
      console.log(viewresult);
      $.each(result, function(key, p_typevalue) {
        htmlString += '<div id="viewproperty" class="modal fade" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">View Property Details</h4></div><div class="modal-body"><div class="row"> <label class="col-md-4" id="head">Name:</label> <label class="col-md-8">Rashmita Das</label></div><div class="row"><label class="col-md-4" id="head">Email Address:</label> <label class="col-md-8">das76rashmita.gmail.com</label></div><div class="row"><label class="col-md-4" id="head">Mobile Number:</label> <label class="col-md-8">77751068862</label></div><div class="row"><label class="col-md-4" id="head"> Property Type:</label> <label class="col-md-8">Apartment</label></div><div class="row"> <label class="col-md-4" id="head">Listed For:</label> <label class="col-md-8">SALE</label></div><div class="row"> <label class="col-md-4" id="head">Country Name:</label> <label class="col-md-8">India</label></div><div class="row"> <label class="col-md-4" id="head">State Name:</label> <label class="col-md-8">Karnataka</label></div><div class="row"> <label class="col-md-4" id="head">City Name:</label> <label class="col-md-8">Bengalore</label></div><div class="row"> <label class="col-md-4" id="head">Property Name:</label> <label class="col-md-8">3 BHK Apartment In Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Address Line1:</label> <label class="col-md-8">Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Address Line2:</label> <label class="col-md-8">Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Pincode:</label> <label class="col-md-8">560037</label></div><div class="row"> <label class="col-md-4" id="head">Block No:</label> <label class="col-md-8">8TH Block</label></div><div class="row"> <label class="col-md-4" id="head">House No:</label> <label class="col-md-8">10</label></div><div class="row"> <label class="col-md-4" id="head">Built Up Area:</label> <label class="col-md-8">200 sqft</label></div><div class="row"> <label class="col-md-4" id="head">No of Bedrooms:</label> <label class="col-md-8">3</label></div><div class="row"> <label class="col-md-4" id="head">No of Bathrooms:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">No of Balconies/Sitouts:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">No of other Rooms:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">Monthly rent:</label> <label class="col-md-8">1000000</label></div> <div class="row"> <label class="col-md-4" id="head">Security deposit amount :</label> <label class="col-md-8">100000</label></div><div class="row"> <label class="col-md-4" id="head">Maintenance Charges:</label> <label class="col-md-8">10000</label></div><div class="row"> <label class="col-md-4" id="head">Property Ready for Possession:</label> <label class="col-md-8">02/01/2017</label></div><div class="row"> <label class="col-md-4" id="head">Construction of Your Property:</label> <label class="col-md-8">1009</label></div><div class="row"> <label class="col-md-4" id="head">Type of Ownership:</label> <label class="col-md-8">Freehold</label></div><div class="row"> <label class="col-md-4" id="head">Total Floors:</label> <label class="col-md-8">3</label></div><div class="row"> <label class="col-md-4" id="head">Property Face Type:</label> <label class="col-md-8">North</label></div><div class="row"> <label class="col-md-4" id="head">Bachelor Allowed:</label> <label class="col-md-8">yes</label></div><div class="row"> <label class="col-md-4" id="head">Non-Vegetarians Allowed:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Pets Allowed:</label> <label class="col-md-8">4</label></div><div class="row"> <label class="col-md-4" id="head">Carpet Area:</label> <label class="col-md-8">2400 sqft</label></div><div class="row"> <label class="col-md-4" id="head">Property Status:</label> <label class="col-md-8">Ready to move in</label></div><div class="row"> <label class="col-md-4" id="head">separate dining space:</label> <label class="col-md-8">yes</label></div><div class="row"> <label class="col-md-4" id="head">Servant Accommodation:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Furnishing:</label> <label class="col-md-8">Fully Furnished  </label></div><div class="row"> <label class="col-md-4" id="head">Parking Type :</label> <label class="col-md-8">4 Wheeler</label></div><div class="row"> <label class="col-md-4" id="head">Parking Count:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Parking Count:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Floor Plan :</label> <label class="col-md-8"></label></div><div class="row"> <label class="col-md-12"><img src="../../img/3b.jpg" style="width:100%;" /></label></div><div class="row"> <label class="col-md-4" id="head">Specifications :</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Housing Loans :</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Properties Images :</label> <label class="col-md-8"></label></div><div class="row"> <label class="col-md-12"><img src="../../img/b.jpg" style="width:100%;" /></label></div><div class="row"> <label class="col-md-4" id="head">Property Map  :</label> <label class="col-md-8">NO</label></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal" style="background-color: #f47c3c;">Close</button></div></div></div></div>';
        //$('#modal_property').empty().append(htmlString);
      });
    },
    error: function(errMsg) {
      console.log(errMsg);
    }
  });
}

Answer 1

您似乎忘了将change添加到modal并将其打开。

请试试这个：

DOM

success: function (viewresult) {
    console.log(viewresult);    
     $.each( result, function( key, p_typevalue ) {

     htmlString+='<div id="viewproperty" class="modal fade" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">View Property Details</h4></div><div class="modal-body"><div class="row"> <label class="col-md-4" id="head">Name:</label> <label class="col-md-8">Rashmita Das</label></div><div class="row"><label class="col-md-4" id="head">Email Address:</label> <label class="col-md-8">das76rashmita.gmail.com</label></div><div class="row"><label class="col-md-4" id="head">Mobile Number:</label> <label class="col-md-8">77751068862</label></div><div class="row"><label class="col-md-4" id="head"> Property Type:</label> <label class="col-md-8">Apartment</label></div><div class="row"> <label class="col-md-4" id="head">Listed For:</label> <label class="col-md-8">SALE</label></div><div class="row"> <label class="col-md-4" id="head">Country Name:</label> <label class="col-md-8">India</label></div><div class="row"> <label class="col-md-4" id="head">State Name:</label> <label class="col-md-8">Karnataka</label></div><div class="row"> <label class="col-md-4" id="head">City Name:</label> <label class="col-md-8">Bengalore</label></div><div class="row"> <label class="col-md-4" id="head">Property Name:</label> <label class="col-md-8">3 BHK Apartment In Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Address Line1:</label> <label class="col-md-8">Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Address Line2:</label> <label class="col-md-8">Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Pincode:</label> <label class="col-md-8">560037</label></div><div class="row"> <label class="col-md-4" id="head">Block No:</label> <label class="col-md-8">8TH Block</label></div><div class="row"> <label class="col-md-4" id="head">House No:</label> <label class="col-md-8">10</label></div><div class="row"> <label class="col-md-4" id="head">Built Up Area:</label> <label class="col-md-8">200 sqft</label></div><div class="row"> <label class="col-md-4" id="head">No of Bedrooms:</label> <label class="col-md-8">3</label></div><div class="row"> <label class="col-md-4" id="head">No of Bathrooms:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">No of Balconies/Sitouts:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">No of other Rooms:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">Monthly rent:</label> <label class="col-md-8">1000000</label></div> <div class="row"> <label class="col-md-4" id="head">Security deposit amount :</label> <label class="col-md-8">100000</label></div><div class="row"> <label class="col-md-4" id="head">Maintenance Charges:</label> <label class="col-md-8">10000</label></div><div class="row"> <label class="col-md-4" id="head">Property Ready for Possession:</label> <label class="col-md-8">02/01/2017</label></div><div class="row"> <label class="col-md-4" id="head">Construction of Your Property:</label> <label class="col-md-8">1009</label></div><div class="row"> <label class="col-md-4" id="head">Type of Ownership:</label> <label class="col-md-8">Freehold</label></div><div class="row"> <label class="col-md-4" id="head">Total Floors:</label> <label class="col-md-8">3</label></div><div class="row"> <label class="col-md-4" id="head">Property Face Type:</label> <label class="col-md-8">North</label></div><div class="row"> <label class="col-md-4" id="head">Bachelor Allowed:</label> <label class="col-md-8">yes</label></div><div class="row"> <label class="col-md-4" id="head">Non-Vegetarians Allowed:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Pets Allowed:</label> <label class="col-md-8">4</label></div><div class="row"> <label class="col-md-4" id="head">Carpet Area:</label> <label class="col-md-8">2400 sqft</label></div><div class="row"> <label class="col-md-4" id="head">Property Status:</label> <label class="col-md-8">Ready to move in</label></div><div class="row"> <label class="col-md-4" id="head">separate dining space:</label> <label class="col-md-8">yes</label></div><div class="row"> <label class="col-md-4" id="head">Servant Accommodation:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Furnishing:</label> <label class="col-md-8">Fully Furnished  </label></div><div class="row"> <label class="col-md-4" id="head">Parking Type :</label> <label class="col-md-8">4 Wheeler</label></div><div class="row"> <label class="col-md-4" id="head">Parking Count:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Parking Count:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Floor Plan :</label> <label class="col-md-8"></label></div><div class="row"> <label class="col-md-12"><img src="../../img/3b.jpg" style="width:100%;" /></label></div><div class="row"> <label class="col-md-4" id="head">Specifications :</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Housing Loans :</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Properties Images :</label> <label class="col-md-8"></label></div><div class="row"> <label class="col-md-12"><img src="../../img/b.jpg" style="width:100%;" /></label></div><div class="row"> <label class="col-md-4" id="head">Property Map  :</label> <label class="col-md-8">NO</label></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal" style="background-color: #f47c3c;">Close</button></div></div></div></div>';
     $('#modal_property').empty().append(htmlString);
     $('#viewproperty').modal();
    });     
}

$('#mymodal').click(function(){
  modal='';
  modal += '<div id="viewproperty" class="modal fade" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">View Property Details</h4></div><div class="modal-body"><div class="row"> <label class="col-md-4" id="head">Name:</label> <label class="col-md-8">Rashmita Das</label></div><div class="row"><label class="col-md-4" id="head">Email Address:</label> <label class="col-md-8">das76rashmita.gmail.com</label></div><div class="row"><label class="col-md-4" id="head">Mobile Number:</label> <label class="col-md-8">77751068862</label></div><div class="row"><label class="col-md-4" id="head"> Property Type:</label> <label class="col-md-8">Apartment</label></div><div class="row"> <label class="col-md-4" id="head">Listed For:</label> <label class="col-md-8">SALE</label></div><div class="row"> <label class="col-md-4" id="head">Country Name:</label> <label class="col-md-8">India</label></div><div class="row"> <label class="col-md-4" id="head">State Name:</label> <label class="col-md-8">Karnataka</label></div><div class="row"> <label class="col-md-4" id="head">City Name:</label> <label class="col-md-8">Bengalore</label></div><div class="row"> <label class="col-md-4" id="head">Property Name:</label> <label class="col-md-8">3 BHK Apartment In Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Address Line1:</label> <label class="col-md-8">Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Address Line2:</label> <label class="col-md-8">Marathahalli</label></div><div class="row"> <label class="col-md-4" id="head">Pincode:</label> <label class="col-md-8">560037</label></div><div class="row"> <label class="col-md-4" id="head">Block No:</label> <label class="col-md-8">8TH Block</label></div><div class="row"> <label class="col-md-4" id="head">House No:</label> <label class="col-md-8">10</label></div><div class="row"> <label class="col-md-4" id="head">Built Up Area:</label> <label class="col-md-8">200 sqft</label></div><div class="row"> <label class="col-md-4" id="head">No of Bedrooms:</label> <label class="col-md-8">3</label></div><div class="row"> <label class="col-md-4" id="head">No of Bathrooms:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">No of Balconies/Sitouts:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">No of other Rooms:</label> <label class="col-md-8">1</label></div><div class="row"> <label class="col-md-4" id="head">Monthly rent:</label> <label class="col-md-8">1000000</label></div> <div class="row"> <label class="col-md-4" id="head">Security deposit amount :</label> <label class="col-md-8">100000</label></div><div class="row"> <label class="col-md-4" id="head">Maintenance Charges:</label> <label class="col-md-8">10000</label></div><div class="row"> <label class="col-md-4" id="head">Property Ready for Possession:</label> <label class="col-md-8">02/01/2017</label></div><div class="row"> <label class="col-md-4" id="head">Construction of Your Property:</label> <label class="col-md-8">1009</label></div><div class="row"> <label class="col-md-4" id="head">Type of Ownership:</label> <label class="col-md-8">Freehold</label></div><div class="row"> <label class="col-md-4" id="head">Total Floors:</label> <label class="col-md-8">3</label></div><div class="row"> <label class="col-md-4" id="head">Property Face Type:</label> <label class="col-md-8">North</label></div><div class="row"> <label class="col-md-4" id="head">Bachelor Allowed:</label> <label class="col-md-8">yes</label></div><div class="row"> <label class="col-md-4" id="head">Non-Vegetarians Allowed:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Pets Allowed:</label> <label class="col-md-8">4</label></div><div class="row"> <label class="col-md-4" id="head">Carpet Area:</label> <label class="col-md-8">2400 sqft</label></div><div class="row"> <label class="col-md-4" id="head">Property Status:</label> <label class="col-md-8">Ready to move in</label></div><div class="row"> <label class="col-md-4" id="head">separate dining space:</label> <label class="col-md-8">yes</label></div><div class="row"> <label class="col-md-4" id="head">Servant Accommodation:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Furnishing:</label> <label class="col-md-8">Fully Furnished  </label></div><div class="row"> <label class="col-md-4" id="head">Parking Type :</label> <label class="col-md-8">4 Wheeler</label></div><div class="row"> <label class="col-md-4" id="head">Parking Count:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Parking Count:</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Floor Plan :</label> <label class="col-md-8"></label></div><div class="row"> <label class="col-md-12"><img src="../../img/3b.jpg" style="width:100%;" /></label></div><div class="row"> <label class="col-md-4" id="head">Specifications :</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Housing Loans :</label> <label class="col-md-8">NO</label></div><div class="row"> <label class="col-md-4" id="head">Properties Images :</label> <label class="col-md-8"></label></div><div class="row"> <label class="col-md-12"><img src="../../img/b.jpg" style="width:100%;" /></label></div><div class="row"> <label class="col-md-4" id="head">Property Map  :</label> <label class="col-md-8">NO</label></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal" style="background-color: #f47c3c;">Close</button></div></div></div></div>';
   $('body').append(modal);
   $('#viewproperty').modal();
});