বুটস্ট্র্যাপ মডেলে ডেটা পাঠানো

Question

আমি বেশ কয়েকটি হাইপারলিঙ্ক পেয়েছি যার প্রত্যেকটির একটি আইডি সংযুক্ত রয়েছে। আমি যখন এই লিঙ্কটিতে ক্লিক করি তখন আমি একটি মডেল ( 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');
    });
});

যাইহোক, যখন আমি হাইপারলিঙ্ক ক্লিক করি তখন কিছুই হয় না। আমি যখন হাইপারলিংক দিই <a href="#addBookDialog" ...>, তখন মডেলটি ঠিকঠাকভাবে খোলে তবে এতে কোনও ডেটা থাকে না।

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

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

Answer 1

আমি মনে করি আপনি 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 unnecessary to have to manually call the modal.
     // $('#addBookDialog').modal('show');
});

Comments

যখন আমার কাছে কেবল একটি হাইপারলিংক থাকে এটি ঠিকঠাক কাজ করে তবে আমার নিজস্ব আইডি সহ একাধিক হাইপারলিঙ্ক রয়েছে। আমি অন্য আইডির সাথে একটি দ্বিতীয় হাইপারলিঙ্ক যুক্ত করেছি, তবে মডেলটিতে সর্বদা প্রথম হাইপারলিংকের আইডি থাকে।

— লিওন কালেনস

@ লিওনকুলেনস - আমি ফিডল এবং কোডটি আপডেট করেছি। আপনি এখন যেভাবে চান এটি কি কাজ করে?

— এমজি 1075

ভাল উত্তর - তবে modal('show')প্রয়োজনীয়? data-toggle="modal"লিঙ্কগুলির মতো মনে হয় এটি যত্ন নেবে।

— টেকনোফোবিয়া

কেবল $(this).data('id');দামটি ছিল নিজের হাতে! আমার কোনও ধারণা ছিল না যে আপনি এটির সাথে ডেটা সংযুক্তি পেতে পারেন। আমি প্রতিদিন বুটস্ট্র্যাপ আরও ভালবাসি! = পি

— মানাটেক্স

@ মানাটােক্স - $(this).data()jQuery এর অংশ is api.jquery.com/data/#data-html5

— mg1075

Answer 2

এখানে একটি ক্লিনার উপায় যদি আপনি ব্যবহার করছেন এটা করতে বুটস্ট্র্যাপ 3.2.0 ।

লিঙ্ক এইচটিএমএল

<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/

Comments

$ (e.currentTarget) .find ( 'ইনপুট [NAME = "bookId"]') Val (bookId)। আপনি কি আমাকে বলতে পারেন এটি কি করে? সুতরাং যদি মডেলটি ওপেন মানে ইনপুট নামের বইয়ের মান হয় যা থেকে এটি ডানদিক থেকে ক্লিক করা হয়েছিল?

— ট্রেব্লালুচ

@ ট্র্যাব্লালুচ e.currentTargetহ'ল ক্লিক উপাদান, যা ক্লিক ইভেন্ট থেকে নেওয়া হয় e। এই রেখাটি inputনামের সাথে একটি সন্ধান করে bookIdএবং এর উপরে মান নির্ধারণ করে।

— আলাপ 21

দুর্দান্ত কাজের $(this)সাথে প্রতিস্থাপন$(e.relatedTarget)

— মুহাম্মদ ইবনুহ

এটি দুর্দান্ত, বুটস্ট্র্যাপ 4

— এও

Answer 3

@ এমজি 1075 এর কোড থেকে আমি কীভাবে এটি কার্যকর করেছিলাম তা এখানে। আমি আরও কিছু জেনেরিক কোড চেয়েছিলাম যাতে মডেল ট্রিগার লিঙ্ক / বোতামগুলিতে ক্লাস বরাদ্দ না করতে হয়:

টুইটার বুটস্ট্র্যাপ 3.0.3.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);
  })
});

Comments

আপনি এর !! $(this).data('id') পরিবর্তে ব্যবহার করতে পারেনtypeof $(this).data('id') !== 'undefined'

— হাসিব জুলফিকার

Answer 4

আপনি যদি বুটস্ট্র্যাপ 3+ এ থাকেন তবে জ্যাকুয়ারি ব্যবহার করে এটি আরও কিছুটা ছোট করা যেতে পারে।

এইচটিএমএল

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

Answer 5

আপনার কোডটি সঠিক মডেল এইচটিএমএল কাঠামোর সাথে কাজ করবে।

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

Answer 6

বুটস্ট্র্যাপ 4.3 - এখানে আরও নীচে থেকে স্নিপেট কোড ব্যবহার করুন

$('#exampleModal').on('show.bs.modal', function (event) {
  let bookId = $(event.relatedTarget).data('bookid') 
  $(this).find('.modal-body input').val(bookId)
})

a.btn.btn-primary.open-AddBookDialog {color: white }

<!-- Initialize Bootstrap 4 -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- BUTTON -->

<a 
  class="btn btn-primary open-AddBookDialog" 
  data-toggle="modal" 
  data-target="#exampleModal" 
  data-bookid="@book.Id" 
  title="Add this item"
>Open</a>

<!-- MODAL -->

<div class="modal fade" id="exampleModal" 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=""/>
        <input type="text" class="form-control" id="recipient-name">    
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Answer 7

এভাবে আপনি কোনও মডেলে 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);
     })
    });

Answer 8

এটি দিয়ে চেষ্টা করুন

$(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') 
  })
})

Comments

তবে আপনি যদি ডায়লগটি বন্ধ করেন এবং এটি অন্য একটি এলিমেন্টের জন্য খোলেন ... আপনি 2 টি লুকানো ক্ষেত্র যুক্ত করবেন এবং ডায়ালগটির ফর্ম পাঠানোর পরে

— গোলমাল হবে

Answer 9

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

Comments

স্ট্যাক ওভারফ্লোতে স্বাগতম! লিঙ্কগুলি জ্ঞান ভাগ করে নেওয়ার দুর্দান্ত উপায়, ভবিষ্যতে যদি তারা ভাঙা যায় তবে তারা সত্যই প্রশ্নের উত্তর দেবে না। আপনার উত্তরে লিঙ্কটির প্রয়োজনীয় সামগ্রীটি যুক্ত করুন যা প্রশ্নের উত্তর দেয়। যদি বিষয়বস্তু এখানে জটিল বা খুব বেশি ফিট হয় তবে প্রস্তাবিত সমাধানটির সাধারণ ধারণাটি বর্ণনা করুন। মূল সমাধানের ওয়েবসাইটে সর্বদা একটি লিঙ্কের রেফারেন্স রাখতে ভুলবেন না। দেখুন: আমি কীভাবে ভাল উত্তর লিখব?

— সুনুন ןɐ কিউপি

Answer 10

এটি 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')
    // ...
    // ...
})