बूटस्ट्रैप

Question

में modal.show() फ़ंक्शन के मान तर्कों को कैसे पास करें मेरे पास एक पृष्ठ स्थानीय कैफे की एक सूची दिखाता है। जब उपयोगकर्ता एक निश्चित कैफे पर क्लिक करता है, तो एक मॉडल संवाद दिखाया जाता है, जिसमें पहले से ही "कैफे नाम" पूर्व-भरा होता है। पृष्ठ में कई कैफे नाम हैं, और फ़ॉर्म में "कैफे नाम" होना चाहिए जिस पर उन्होंने क्लिक किया था।

नीचे दिए गए लिंक बटन

  <table class="table table-condensed table-striped"> 
     <tbody> 
     <tr> 
      <td>B&Js 
      </td> 
      <td>10690 N De Anza Blvd </td> 
      <td> 
       <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a> 
      </td> 
     </tr> 

     <tr> 
      <td>CoHo Cafe 
      </td> 
      <td>459 Lagunita Dr </td> 
      <td> 
       <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a> 
      </td> 
     </tr> 


     <tr> 
      <td>Hot Spot Espresso and Cafe 
      </td> 
      <td>1631 N Capitol Ave </td> 
      <td> 
       <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a> 
      </td> 
     </tr> 

     </tbody> 
    </table> 

यहाँ के साथ पाठ के रूप में उत्पन्न कैफे नामों की सूची मोडल प्रपत्र

प्रश्न कैसे में वास्तविक मूल्य पारित करने के लिए है कि " मूल्य "मोडल फॉर्म की विशेषता?

<input type="hidden" name="cafeId" value="104" /> 

प्रपत्र "शो" घटना "onlick" घटना से चालू होने वाले

<a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a> 

Answer 1

आप इसे इस तरह कर सकता है:

<a class="btn btn-primary announce" data-toggle="modal" data-id="107" >Announce</a> 

तो क्लिक बाँध और भेजने के लिए jQuery का उपयोग मॉड्यूल में मूल्य के रूप में डेटा-आईडी की घोषणा #cafeId:

$(document).ready(function(){ 
    $(".announce").click(function(){ // Click to only happen on announce links 
    $("#cafeId").val($(this).data('id')); 
    $('#createFormId').modal('show'); 
    }); 
}); 

Answer 2

$(document).ready(function() { 
    $('#createFormId').on('show.bs.modal', function(event) { 
     $("#cafeId").val($(event.relatedTarget).data('id')); 
    }); 
}); 

Answer 3

मैं साझा करना चाहता हूं कि मैंने यह कैसे किया। मैंने बूटस्ट्रैप मोडल संवाद में कुछ पैरामीटर को पारित करने के साथ पिछले कुछ दिनों में अपने सिर को झुकाया। बहुत सिर झुकाव के बाद, मैं ऐसा करने का एक आसान तरीका आया। सरल जावास्क्रिप्ट gid बदलने के लिए है, और इनपुट मानों gname यहाँ

<div class="modal fade" id="editGroupNameModal" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div id="editGroupName" class="modal-header">Enter new name for group </div> 
     <div class="modal-body"> 
      <%= form_tag({ action: 'update_group', port: portnum }) do %> 
      <%= text_field_tag(:gid, "", { type: "hidden" }) %> 
      <div class="input-group input-group-md"> 
      <span class="input-group-addon" style="font-size: 16px; padding: 3;" >Name</span> 
      <%= text_field_tag(:gname, "", { placeholder: "New name goes here", class: "form-control", aria: {describedby: "basic-addon1"}}) %> 
     </div> 
     <div class="modal-footer"> 
      <%= submit_tag("Submit") %> 
     </div> 
     <% end %> 
     </div> 
    </div> 
    </div> 
</div> 

और::

यहाँ मेरी मोडल कोड है

function editGroupName(id, name) { 
    $('input#gid').val(id); 
    $('input#gname.form-control').val(name); 
    } 

मैं सिर्फ एक कड़ी में ऑनक्लिक ईवेंट प्रयोग किया है:

//                    ' is single quote 
//                     ('1', 'admin') 
<a data-toggle="modal" data-target="#editGroupNameModal" onclick="editGroupName(&#39;1&#39;, &#39;admin&#39;); return false;" href="#">edit</a> 

ऑनक्लिक आग पहले इनपुट बॉक्सों की मूल्य संपत्ति को बदलता है, इसलिए डायल करते समय और पॉप अप, फ़ॉर्म जमा करने के लिए मूल्यों के स्थान पर हैं।

मुझे उम्मीद है कि यह किसी दिन किसी की मदद करेगा। चीयर्स।