javascript - bootstrap - w3schools jquery



অন্য পৃষ্ঠা থেকে বুটস্ট্র্যাপের মডেল সামগ্রী পাওয়া (2)

হালনাগাদ

আপনি যেভাবে অন্য পৃষ্ঠা থেকে মডেলের সামগ্রী পেতে চেষ্টা করছেন তা ভুল।

বুটস্ট্র্যাপের ডকুমেন্টেশন অনুসারে:

যদি কোনও দূরবর্তী ইউআরএল সরবরাহ করা থাকে তবে .modal-content jQuery এর লোড পদ্ধতির মাধ্যমে এক সময় লোড হবে এবং .modal-content মধ্যে ইঞ্জেকশন করা হবে। আপনি যদি ডেটা-এপিআই ব্যবহার করে থাকেন তবে আপনি বিকল্পভাবে দূরবর্তী উত্স নির্দিষ্ট করতে href বৈশিষ্ট্যটি ব্যবহার করতে পারেন। এর উদাহরণ নীচে দেখানো হয়েছে:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

সুতরাং, প্রথমত, আপনার নিজের menu.html ফাইলটি উপরের কোডের মতো হতে হবে:

<li><a href="Lab6.html" data-target="#theModal" data-toggle="modal">Lab 6</a></li>

এবং তারপরে, আপনার Lab6.html পৃষ্ঠার কিছু অংশ অবশ্যই আপনার Lab6.html পৃষ্ঠার অভ্যন্তরে থাকতে হবে। উদাহরণ:

<div class="modal fade text-center" id="theModal">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

অবশেষে, আপনার LAB6.html ভিতরে কেবল কোড থাকবে। উদাহরণ:

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">X</button>
  <h1>Lab 6</h1>
</div>
<div class="modal-body">
  <div class="panel panel-default">
    <div class="panel-heading text-center">
      Employee Information
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="text-right col-xs-2">Title:</div>
        <div class="text-left col-xs-3" id="title"></div>
        <div class="text-right col-xs-2">First:</div>
        <div class="text-left col-xs-3" id="firstname"></div>
      </div>
      <div class="row">
        <div class="text-right col-xs-2">Phone#</div>
        <div class="text-left col-xs-3" id="phone"></div>
        <div class="text-right col-xs-2">Email</div>
        <div class="text-left col-xs-3" id="email"></div>
      </div>
      <div class="row">
        <div class="text-right col-xs-2">Dept:</div>
        <div class="text-left col-xs-3" id="departmentname"></div>
        <div class="text-left col-xs-2">Surname:</div>
        <div class="text-left col-xs-4">
          <input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" />
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <div class="panel-footer">
      <input type="button" value="Find Employee" id="empbutton" />
      <div class="col-xs-10" id="lblstatus"></div>
    </div>
  </div>
</div>

আপনার জন্য আমি যে প্লঙ্কার তৈরি করেছি তা একবার দেখুন।

https://src-bin.com

Lab6.html নামে একটি পৃষ্ঠায় আমার একটি অ্যাঙ্কর menu.html এবং Lab6.html নামে অন্য একটি পৃষ্ঠা থেকে ডেটা প্রদর্শন করতে বুটস্ট্র্যাপ Lab6.html পেতে আমার সমস্যা হচ্ছে।

menu.html

<div class="collapse navbar-collapse navbar-exl-collapse">
  <ul class="nav navbar-nav" id="menu">
    <li><a href="/emplookup.html">Lookup</a></li>
    <li><a href="/modalexample.html">Modals</a></li>
    <li><a href="/Lab6.html#theModal" data-toggle="modal">Lab 6</a></li><!-- this one -->
  </ul>
</div>

Lab6.html

<div class="modal fade text-center" id="theModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h1>Lab 6</h1>
      </div>
      <div class="modal-body">
        <div class="panel panel-default">
          <div class="panel-heading text-center">
            Employee Information
          </div>
          <div class="panel-body">
            <div class="row">
              <div class="text-right col-xs-2">Title:</div>
              <div class="text-left col-xs-3" id="title"></div>
              <div class="text-right col-xs-2">First:</div>
              <div class="text-left col-xs-3" id="firstname"></div>
            </div>
            <div class="row">
              <div class="text-right col-xs-2">Phone#</div>
              <div class="text-left col-xs-3" id="phone"></div>
              <div class="text-right col-xs-2">Email</div>
              <div class="text-left col-xs-3" id="email"></div>
            </div>
            <div class="row">
              <div class="text-right col-xs-2">Dept:</div>
              <div class="text-left col-xs-3" id="departmentname"></div>
              <div class="text-left col-xs-2">Surname:</div>
              <div class="text-left col-xs-4">
                <input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="panel-footer">
            <input type="button" value="Find Employee" id="empbutton" />
            <div class="col-xs-10" id="lblstatus"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>

আমি কি কিছু ভুল করছি?


Answer #1

মনে রাখবেন যে আপনি যদি বুটস্ট্র্যাপ 4 ব্যবহার করেন তবে গৃহীত উত্তরটি কার্যকর হয় না, কারণ remote বিকল্প সম্পর্কে বুটস্ট্র্যাপের ডক্স অনুসারে:

এই বিকল্পটি v3.3.0 থেকে অবচয় করা হয়েছে এবং v4-তে সরানো হয়েছে। আমরা পরিবর্তে ক্লায়েন্ট-সাইড টেম্প্লেটিং বা একটি ডেটা বাঁধাই কাঠামো ব্যবহার করে বা নিজেকে jQuery.load কল করার পরামর্শ দিই।

যদি কোনও দূরবর্তী ইউআরএল সরবরাহ করা থাকে তবে .modal-content jQuery এর load পদ্ধতির মাধ্যমে এক সময় লোড হবে এবং .modal-content মধ্যে ইঞ্জেকশন করা হবে। আপনি যদি ডেটা-এপিআই ব্যবহার করে থাকেন তবে আপনি বিকল্পভাবে দূরবর্তী উত্স নির্দিষ্ট করতে href বৈশিষ্ট্যটি ব্যবহার করতে পারেন। এর উদাহরণ নীচে দেখানো হয়েছে:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

এটি কার্যকর করতে, প্রথমে লিঙ্কটি থেকে data-target এবং data-toggle বৈশিষ্ট্যগুলি সরান। আপনি এখানে href বৈশিষ্ট্যটি ছেড়ে যেতে পারেন।

<li><a href="Lab6.html" class='li-modal'>Lab 6</a></li>

JQuery ব্যবহার করে আমরা <a> উপাদানটিতে ক্লিক শ্রোতাদের যুক্ত করতে পারি, তবে আমরা href বৈশিষ্ট্য দ্বারা নির্দেশিত পৃষ্ঠায় সরাসরি যেতে চাই না তাই আমরা preventDefault() ব্যবহার preventDefault() । কেবল jQuery এর load পদ্ধতি ব্যবহার করে আমরা lab6.html পৃষ্ঠার সামগ্রীটি lab6.html modal-content লোড করতে পারি।

$('.li-modal').on('click', function(e){
      e.preventDefault();
      $('#theModal').modal('show').find('.modal-content').load($(this).attr('href'));
    });

এখানে সম্পূর্ণ উদাহরণ।





modal-dialog