javascript - bootstrap - w3schools jquery



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

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>

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

https://src-bin.com


Answer #1

হালনাগাদ

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

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

যদি কোনও দূরবর্তী ইউআরএল সরবরাহ করা থাকে তবে .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>

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


Answer #2

মনে রাখবেন যে আপনি যদি বুটস্ট্র্যাপ 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