javascript - for - jquery




একটি বুটস্ট্র্যাপ মোডাল তথ্য পাস (4)

আপনার কোড সঠিক মোডাল এইচটিএমএল গঠন সঙ্গে কাজ করেছে।

$(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>

আমি প্রতিটি সংযুক্ত একটি আইডি সংযুক্ত হাইপারলিঙ্ক একটি দম্পতি আছে। যখন আমি এই লিঙ্কে ক্লিক করি, আমি একটি মোডাল খুলতে চাই ( http://twitter.github.com/bootstrap/javascript.html#modals ), এবং এই আইডিটি মোডালে পাস করে। আমি গুগল অনুসন্ধান করেছি, কিন্তু আমাকে এমন কিছু খুঁজে পাইনি যা আমাকে সাহায্য করতে পারে।

এই কোডটি হল:

<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');
    });
});

যাইহোক, যখন আমি হাইপারলিঙ্ক ক্লিক করি, কিছুই ঘটবে না। যখন আমি হাইপারলিঙ্কটিকে একটি href = "# অ্যাডবুক ডায়ালগ" প্রদান করি, মডলটি ঠিক সূক্ষ্ম খোলে তবে এতে কোনও তথ্য থাকে না।

আমি এই উদাহরণটি অনুসরণ করেছি: বুটস্ট্র্যাপে modal.show () ফাংশনে মান আর্গুমেন্টগুলি কিভাবে পাস করবেন

(এবং আমি এটিও চেষ্টা করেছি: একটি মোডাল কথোপকথনে ইনপুট মান কিভাবে সেট করবেন? )


আপনি simpleBootstrapDialog চেষ্টা করতে পারেন। এখানে আপনি শিরোনাম, বার্তা, বাতিল এবং জমা দেওয়ার জন্য কলব্যাক বিকল্পগুলি প্রেরণ করতে পারেন ...


আমি মনে করি আপনি jQuery এর .on ইভেন্ট হ্যান্ডলার ব্যবহার করে এই কাজটি করতে পারেন।

এখানে আপনি একটি পরীক্ষার পরীক্ষা করতে পারেন; যত তাড়াতাড়ি সম্ভব ফয়েলড এ এইচটিএমএল ফ্রেম প্রসারিত করতে ভুলবেন না যাতে আপনি মোডালটি দেখতে পারেন।

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 superfluous to have to manually call the modal.
     // $('#addBookDialog').modal('show');
});

এখানে আমি কিভাবে এটি @ 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);
  })
});




twitter-bootstrap