बूटस्ट्रैप मोडल को डेटा पास करना

526

मुझे कुछ हाइपरलिंक मिले हैं जिनमें से प्रत्येक में एक आईडी संलग्न है। जब मैं इस लिंक पर क्लिक करता हूं, तो मैं एक मोडल ( http://twitter.github.com/bootstrap/javascript.html#modals ) खोलना चाहता हूं , और इस आईडी को मोडल को पास करना चाहता हूं । मैंने Google पर खोज की, लेकिन मुझे ऐसा कुछ नहीं मिला जो मेरी मदद कर सके।

यह कोड है:

<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>

जो खोलना चाहिए:

<div class="modal hide" id="addBookDialog">
    <div class="modal-body">
        <input type="hidden" name="bookId" id="bookId" value=""/>
    </div>
</div>

इस कोड के टुकड़े के साथ: 

$(document).ready(function () {
    $(".open-AddBookDialog").click(function () {
        $('#bookId').val($(this).data('id'));
        $('#addBookDialog').modal('show');
    });
});

हालांकि, जब मैं हाइपरलिंक पर क्लिक करता हूं, तो कुछ भी नहीं होता है। जब मैं हाइपरलिंक देता हूं <a href="#addBookDialog" ...>, तो मोडल ठीक खुलता है, लेकिन इसमें कोई डेटा नहीं होता है।

मैंने इस उदाहरण का अनुसरण किया: बूटस्ट्रैप में modal.show () फ़ंक्शन के लिए मान तर्क कैसे पास करें

(और मैंने यह भी कोशिश की: एक मामूली संवाद में इनपुट मूल्य कैसे सेट करें? )

javascript  jquery  asp.net-mvc  twitter-bootstrap 
— लियोन कुलीन
स्रोत

जवाबों:

533

मुझे लगता है कि आप jQuery के .on ईवेंट हैंडलर का उपयोग करके यह काम कर सकते हैं ।

यहाँ आप परीक्षण कर सकते हैं एक बेला है; बस फिड में HTML फ्रेम का विस्तार करना सुनिश्चित करें ताकि आप मोडल देख सकें।

http://jsfiddle.net/Au9tc/605/

एचटीएमएल

<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<p>&nbsp;</p>


<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<div class="modal hide" id="addBookDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

JAVASCRIPT

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
     // As pointed out in comments, 
     // it is unnecessary to have to manually call the modal.
     // $('#addBookDialog').modal('show');
});
— mg1075
स्रोत
2
यह ठीक काम करता है जब मेरे पास केवल एक हाइपरलिंक होता है, लेकिन मेरे पास कई हाइपरलिंक होते हैं, जिनमें से प्रत्येक की अपनी आईडी होती है। मैंने दूसरी आईडी के साथ दूसरा हाइपरलिंक जोड़ा, लेकिन मोडल में हमेशा पहली हाइपरलिंक की आईडी होती है।
— लियोन कलन्स
1
@ लॉयन कुल्सेंस - मैंने फिडेल और कोड को अपडेट किया है। क्या यह आपके इच्छित तरीके से काम करता है?
— mg1075
2
अच्छा उत्तर - लेकिन क्या modal('show')आवश्यक है? data-toggle="modal"लिंक पर लगता है कि ध्यान रखना होगा।
— टेक्नोफोबिया
7
बस $(this).data('id');यह अपने आप पर अमूल्य था! मुझे इस बात का अंदाजा नहीं था कि आप इसके साथ डेटा एट्रीब्यूट पा सकते हैं। मैं प्रत्येक दिन अधिक बूटस्ट्रैप प्यार कर रहा हूँ! = पी
— मैनटैक्स
23
@ मैनटैक्स - $(this).data()jQuery का हिस्सा है। api.jquery.com/data/#data-html5
— mg1075
365

यदि आप बूटस्ट्रैप 3.2.0 का उपयोग कर रहे हैं, तो यह करने के लिए एक क्लीनर तरीका है ।

HTML लिंक करें

<a href="#my_modal" data-toggle="modal" data-book-id="my_id_value">Open Modal</a>

मोडल जावास्क्रिप्ट

//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {

    //get data-id attribute of the clicked element
    var bookId = $(e.relatedTarget).data('book-id');

    //populate the textbox
    $(e.currentTarget).find('input[name="bookId"]').val(bookId);
});

http://jsfiddle.net/k7FC2/

— LostInComputer
स्रोत
1
$ (e.currentTarget) .find ( 'इनपुट [नाम = "bookId"]') वैल (bookId)। क्या आप मुझे बता सकते हैं कि यह क्या करता है? इसलिए यदि मोडल खुला है जिसका अर्थ है कि इनपुट नाम बुकआईड का मान वह मान है जिससे इसे राइट क्लिक किया गया था?
— treblaluch
@treblaluch e.currentTargetक्लिक किया गया तत्व है, जिसे क्लिक इवेंट से लिया गया है e। यह रेखा inputनाम के साथ मिलती है bookIdऔर उस पर मान सेट करती है।
— आलाप
5
जगह $(this)के साथ $(e.relatedTarget)अच्छा काम करता है
— मुहम्मद Ibnuh
1
यह बहुत अच्छा है, बूटस्ट्रैप 4 के लिए भी काम करता है
— jarrettyeo
36

यहां बताया गया है कि मैंने इसे @ mg1075 के कोड से कैसे काम किया। मैं थोड़ा और अधिक सामान्य कोड चाहता था ताकि मॉडल ट्रिगर लिंक / बटन को कक्षाएं आवंटित न करूं:

ट्विटर बूटस्ट्रैप 3.0.3 में परीक्षण किया गया।

एचटीएमएल

<a href="#" data-target="#my_modal" data-toggle="modal" data-id="my_id_value">Open Modal</a>

JAVASCRIPT

$(document).ready(function() {

  $('a[data-toggle=modal], button[data-toggle=modal]').click(function () {

    var data_id = '';

    if (typeof $(this).data('id') !== 'undefined') {

      data_id = $(this).data('id');
    }

    $('#my_element_id').val(data_id);
  })
});
— जेडब्ल्यू
स्रोत
2
आप !! $(this).data('id') इसके बजाय का उपयोग कर सकते हैंtypeof $(this).data('id') !== 'undefined'
— हसीब ज़ुल्फ़िकार
13

यदि आप बूटस्ट्रैप 3+ पर हैं, तो Jquery का उपयोग करते समय इसे थोड़ा और छोटा किया जा सकता है।

एचटीएमएल

<a href="#" data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="my_id_value">Open Modal</a>

<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel">
<div class="modal-dialog" role="dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
        </div>
        <div class="modal-body">
            Modal Body
            <input type="hidden" name="hiddenValue" id="hiddenValue" value="" />
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary">Yes</button>
        </div>
    </div>
</div>

jQuery

<script type="text/javascript">
    $(function () {
        $(".identifyingClass").click(function () {
            var my_id_value = $(this).data('id');
            $(".modal-body #hiddenValue").val(my_id_value);
        })
    });
</script>
— VTStampede
स्रोत
10

आपके कोड ने सही मोडल html संरचना के साथ काम किया होगा।

$(function(){
  $(".open-AddBookDialog").click(function(){
     $('#bookId').val($(this).data('id'));
    $("#addBookDialog").modal("show");
  });
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<a data-id="@book.Id" title="Add this item" class="open-AddBookDialog">Open Modal</a>

<div id="addBookDialog" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
       <input type="hidden" name="bookId" id="bookId" value=""/>
      </div>
    
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</html>
स्निपेट का विस्तार करें

— फिल
स्रोत
9

बूटस्ट्रैप 4.3 - स्निपेट के नीचे से कोड का उपयोग करें - यहां अधिक

कोड स्निपेट दिखाएं

— कामिल कियॉलेजवस्की
स्रोत
1

यह है कि आप एक मॉडल को id_data कैसे भेज सकते हैं:

<input
    href="#"
    data-some-id="uid0123456789"
    data-toggle="modal"
    data-target="#my_modal"
    value="SHOW MODAL"
    type="submit"
    class="btn modal-btn"/>

<div class="col-md-5">
  <div class="modal fade" id="my_modal">
   <div class="modal-body modal-content">
     <h2 name="hiddenValue" id="hiddenValue" />
   </div>
   <div class="modal-footer" />
</div>

और जावास्क्रिप्ट: 

    $(function () {
     $(".modal-btn").click(function (){
       var data_var = $(this).data('some-id');
       $(".modal-body h2").text(data_var);
     })
    });
— अभिषेक राणा
स्रोत
1

इस के साथ प्रयास करें

$(function(){
 //when click a button
  $("#miButton").click(function(){
    $(".dynamic-field").remove();
    //pass the data in the modal body adding html elements
    $('#myModal .modal-body').html('<input type="hidden" name="name" value="your value" class="dynamic-field">') ;
    //open the modal
    $('#myModal').modal('show') 
  })
})
— डे-डे
स्रोत
लेकिन क्या होगा अगर आप डायलॉग को बंद करते हैं, और इसे अन्य तत्व के लिए खोलते हैं ... आप 2 छिपे हुए फ़ील्ड जोड़ेंगे और संवाद के रूप में भेजते ही गड़बड़ हो जाएगी
— Pitzas
0

आप simpleBootstrapDialog आज़मा सकते हैं । यहां आप शीर्षक, संदेश, कॉलबैक विकल्प रद्द करने और सबमिट करने आदि के लिए पास कर सकते हैं ...

— जितिन विजयन
स्रोत
4
ढेर अतिप्रवाह में आपका स्वागत है! जबकि लिंक ज्ञान साझा करने का बहुत अच्छा तरीका है, अगर वे भविष्य में टूट जाते हैं तो वे वास्तव में इस सवाल का जवाब नहीं देंगे। अपने उत्तर में उस लिंक की आवश्यक सामग्री को जोड़ें जो प्रश्न का उत्तर देती है। यदि सामग्री बहुत जटिल है या यहां फिट होने के लिए बहुत बड़ी है, तो प्रस्तावित समाधान के सामान्य विचार का वर्णन करें। हमेशा याद रखें कि मूल समाधान की वेबसाइट पर एक लिंक संदर्भ रखें। देखें: मैं एक अच्छा उत्तर कैसे लिखूं?
— s --unıɐ ɐ qɐp
0

यह jquery के साथ इतना आसान है:

यदि नीचे आपका लंगर लिंक है:

<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>

अपने मोडल के शो इवेंट में आप नीचे दिए गए एंकर टैग तक पहुंच सकते हैं

//triggered when modal is shown
$('#modal_id').on('shown.bs.modal', function(event) {

    // The reference tag is your anchor tag here
    var reference_tag = $(event.relatedTarget); 
    var id = reference_tag.data('id')
    // ...
    // ...
})
— एहसान अहमदी
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.