Modal 在本地工作正常,但在托管网络中无法工作

问题描述 投票:0回答:3

这是我的代码,在本地主机上运行良好,但在托管上无法运行。

  {% extends 'layout2.html' %}

  {% block content %}
  
  
  <div class="container">
      <div class="row">
          <ol class="col-12 breadcrumb">
              <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
              <li class="breadcrumb-item active">Menu</li>
          </ol>
          <div class="col-12">
             <h5 style="font-size: 30px">Menu</h5>
             <hr>
          </div>
      </div>   
  </div>
  
  <div class="container">
      <div class="row">
          <div class="col-sm">
            <!-- card start -->
              <div class="card" style="width: 18rem;">
                  <img class="card-img-top" src="../static/images/cake.jpeg" alt="Cake" style="width:100%;height: 185px;">
                  <div class="card-body">
                    <h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.250</span></h5>
                    <h2></h2>
                    <p class="card-text">Different varities of cakes. With customized design. You can select you own flavour. Click below to view details and order.</p>
                    <a href="#" data-toggle="modal" data-target="#myModal" class="btn btn-primary" style="width: 100%"> View Details</a>
                    <!-- <button type="button" class="btn btn-info btn-lg" >Open Modal</button> -->
                    <!-- Modal-1 -->
                    <div id="myModal" class="modal fade" role="dialog">
                        <div class="modal-dialog modal-lg">
                      
                          <!-- Modal content-->
                          <div class="modal-content">
                            <div class="modal-header">
                              <h4 class="modal-title">Order cake now.</h4>
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                          
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <img src="../static/images/cake.jpeg" alt="" style="widows: 100px;height: 185px;">
                                    </div>
                                    <div class="col-md-8">
                                        <address >
                                          <h6> Product Name: Cake</h6> 
                                          <h6> Product Flavour: customized</h6>
                                          <h6> Product category: Best seller</h6>
                                          <hr>
                                          <h6> Availible in both veg and non-veg.</h6>
                                          <h6> Weight of cake is as per customer reqirement.</h6>
                                          <h6> You can place order below.</h6>
                                        </address>
                                    </div>
                                  </div>
                                  <hr>
                                  <form action="{% url 'home' %}" method="POST">
                                      {% csrf_token %}
                                      <div class="form-row">
                                          <div class="col-md-6">
                                          <label>Customer Name</label>
                                          <input type="text" placeholder="Full Name" class="form-control" name="name" required>
                                      </div>
                                      <div class="col-md-6"> <label>Email</label>
                                          <input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div>
                                      </div>
                                      
                                      <div class="form-row">
                                          <div class="col-md-6">
                                          <label>Product name</label>
                                          <input type="text" placeholder="Cake" value="cake" class="form-control" name="product" readonly>
                                      </div>
                                      <div class="col-md-6"> <label>Select category</label><br>
                                          <select name="category" id="" style="width:180px">
                                              <option value="Veg">Veg</option>
                                              <option value="Non-veg">Non-veg</option>
                                          </select>
                                        </div>
                                        </div>
                                      
                                      <div class="form-row">
                                          <div class="col-md-6">
                                          <label>Quantity</label>
                                          <input type="text" placeholder="Quantity" class="form-control" name="quantity" required>
                                      </div>
                                      <div class="col-md-6"> <label>Mobile</label>
                                          <input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div>
                                      </div>
                                      <div class="form-group">
                                            <label for="">Address</label>
                                            <textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea>
                                      </div>
                                      <div class="form-group">
                                          <button type="submit" class="btn btn-success">Order</button>
                                      </div>
                                  </form> 
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                          </div>
                      
                        </div>
                      </div>
                    <!-- Modal-1 -->
                  </div>
                </div>
          </div>
          <!-- card end -->
          <div class="col-sm">
              <div class="card" style="width: 18rem;">
                  <img class="card-img-top" src="../static/images/pin.jpg" alt="Cake" style="width:100%">
                  <div class="card-body">
                    <h5 class="card-title">Rolls <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.20</span></h5>
                    <h2></h2>
                    <p class="card-text">A roll can be served and eaten whole or cut transversely and dressed with filling between the two halves.Click below to order.</p>
                    <a href="#" class="btn btn-primary"  data-toggle="modal" data-target="#myModal2" style="width: 100%">Order Now</a>
  
                    <!-- Modal -->
                    <!-- Modal-2 -->
                    <div id="myModal2" class="modal fade" role="dialog">
                        <div class="modal-dialog modal-lg">
                      
                          <!-- Modal content-->
                          <div class="modal-content">
                            <div class="modal-header">
                              <h4 class="modal-title">Order  now.</h4>
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                          
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <img src="../static/images/pin.jpg" alt="" style="width: 220px;height: 185px;">
                                    </div>
                                    <div class="col-md-8">
                                        <address >
                                          <h6> Product Name: Rolls</h6> 
                                          <h6> Product Flavour: Regular</h6>
                                          <h6> Product category: Best seller</h6>
                                          <hr>
                                          <h6> Availible in both veg and non-veg.</h6>
                                          <h6> Made with best flour.</h6>
                                          <h6> You can place order below.</h6>
                                        </address>
                                    </div>
                                  </div>
                                  <hr>
                                  <form action="{% url 'home' %}" method="POST">
                                      {% csrf_token %}
                                      <div class="form-row">
                                          <div class="col-md-6">
                                          <label>Customer Name</label>
                                          <input type="text" placeholder="Full Name" class="form-control" name="name" required>
                                      </div>
                                      <div class="col-md-6"> <label>Email</label>
                                          <input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div>
                                      </div>
                                      
                                      <div class="form-row">
                                          <div class="col-md-6">
                                          <label>Product name</label>
                                          <input type="text" placeholder="rolls" value="Rolls" class="form-control" name="product" readonly>
                                      </div>
                                      <div class="col-md-6"> <label>Select category</label><br>
                                          <select name="category" id="" style="width:180px">
                                              <option value="Veg">Veg</option>
                                              <option value="Non-veg">Non-veg</option>
                                          </select>
                                        </div>
                                        </div>
                                      
                                      <div class="form-row">
                                          <div class="col-md-6">
                                          <label>Quantity</label>
                                          <input type="text" placeholder="Quantity" class="form-control" name="quantity" required>
                                      </div>
                                      <div class="col-md-6"> <label>Mobile</label>
                                          <input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div>
                                      </div>
                                      <div class="form-group">
                                            <label for="">Address</label>
                                            <textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea>
                                      </div>
                                      <div class="form-group">
                                          <button type="submit" class="btn btn-success">Order</button>
                                      </div>
                                  </form> 
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                          </div>
                      
                        </div>
                      </div>
                    <!-- Modal -->
  
  
                  </div>
                </div>
          </div>
          <div class="col-sm">
              <div class="card" style="width: 18rem;">
                  <img class="card-img-top" src="../static/images/tray.jpeg" alt="Cake" style="width:100%">
                  <div class="card-body">
                    <h5 class="card-title">Cookies <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.50 per pack</span></h5>
                    <h2></h2>
                    <p class="card-text">These cookie recipes represent the best of the best, including chewy chocolate chip cookies.Click below for order .</p>
                    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal3"  style="width: 100%">Order Now</a>
  
                    <!-- Modal -->
                    <!-- Modal-3 -->
                    <div id="myModal3" class="modal fade" role="dialog">
                        <div class="modal-dialog modal-lg">
                      
                          <!-- Modal content-->
                          <div class="modal-content">
                            <div class="modal-header">
                              <h4 class="modal-title">Order  now.</h4>
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                          
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <img src="../static/images/tray.jpeg" alt="" style="width: 220px;height: 185px;">
                                    </div>
                                    <div class="col-md-8">
                                        <address >
                                          <h6> Product Name: Cookies</h6> 
                                          <h6> Product Flavour: Regular-chocolate</h6>
                                          <h6> Product category: Best seller</h6>
                                          <hr>
                                          <h6> Availible in both veg and non-veg.</h6>
                                          <h6> Made with best flour.</h6>
                                          <h6> You can place order below.</h6>
                                        </address>
                                    </div>
                                  </div>
                                  <hr>
                                  <form action="{% url 'home' %}" method="POST">
                                      {% csrf_token %}
                                      <div class="form-row">
                                          <div class="col-md-6">
                                          <label>Customer Name</label>
                                          <input type="text" placeholder="Full Name" class="form-control" name="name" required>
                                      </div>
                                      <div class="col-md-6"> <label>Email</label>
                                          <input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div>
                                      </div>
                                      
                                      <div class="form-row">
                                          <div class="col-md-6">
                                          <label>Product name</label>
                                          <input type="text" placeholder="rolls" value="cookies" class="form-control" name="product" readonly>
                                      </div>
                                      <div class="col-md-6"> <label>Select category</label><br>
                                          <select name="category" id="" style="width:180px">
                                              <option value="Veg">Veg</option>
                                              <option value="Non-veg">Non-veg</option>
                                          </select>
                                        </div>
                                        </div>
                                      
                                      <div class="form-row">
                                          <div class="col-md-6">
                                          <label>Quantity</label>
                                          <input type="text" placeholder="Quantity" class="form-control" name="quantity" required>
                                      </div>
                                      <div class="col-md-6"> <label>Mobile</label>
                                          <input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div>
                                      </div>
                                      <div class="form-group">
                                            <label for="">Address</label>
                                            <textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea>
                                      </div>
                                      <div class="form-group">
                                          <button type="submit" class="btn btn-success">Order</button>
                                      </div>
                                  </form> 
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                          </div>
                      
                        </div>
                      </div>
                    <!-- Modal-3 -->
  
  
                  </div>
                </div>
          </div>
          </div>
      </div>   
      
  </div>
  <br>
  <br>
  <!-- <div class="container">
      <div class="row">
          <div class="col-sm">
              <div class="card" style="width: 18rem;">
                  <img class="card-img-top" src="../static/images/pastries.jpeg" alt="Cake" style="width:100%">
                  <div class="card-body">
                    <h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5>
                    <h2></h2>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a>
  
                    
                  </div>
                </div>
          </div>
          <div class="col-sm">
              <div class="card" style="width: 18rem;">
                  <img class="card-img-top" src="../static/images/donuts.jpeg " alt="Cake" style="width:100%">
                  <div class="card-body">
                    <h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5>
                    <h2></h2>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a>
  
             
  
  
                  </div>
                </div>
          </div>
          <div class="col-sm">
              <div class="card" style="width: 18rem;">
                  <img class="card-img-top" src="../static/images/breads.jpg" alt="Cake" style="width:100%">
                  <div class="card-body">
                    <h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5>
                    <h2></h2>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a>
  
                 
  
  
                  </div>
                </div>
          </div>
          </div>
      </div>   
      
  </div>
   -->
  
  
  
  
  {% endblock %}

我使用了引导模式。它在本地主机中运行良好。但是当我在 pythonanywhere 上托管 Django 网站时,所有模式都不起作用。下拉菜单也不起作用。但是除了这两个之外的每个引导组件都工作正常。

django bootstrap-modal dropdown web-hosting pythonanywhere
3个回答
3
投票

引导加载可能存在问题。

{% block content %}
标签之后,尝试复制并粘贴到bootstrap的CDN下方。

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

如果您的代码有效,请删除上述 CDN 并根据 bootstrap starter 模板调整您的layout2.html https://getbootstrap.com/docs/4.5/getting-started/introduction/


1
投票
<button data-target="#myModal" ...>

id="myModal"
为目标模态,但您的模态具有
id="#myModal"

#
前缀表示“id of”(它是一个CSS选择器)。与
.modal
相同,意思是“
modal
班级
”。

总之,将

id="#myModal"
更改为
id="myModal"
即可。

我对你的问题是:如果它在本地工作,这显然意味着在本地你已经正确编写了它。为什么要在上传之前更改它?
原则是:远程上传本地的内容,无需修改任何内容!

除此之外,请注意您还有一堆需要修复的

404
(未找到)错误。
控制台是你的朋友。


0
投票

回答这个问题可能已经晚了,但不要忘记每次静态文件更改时在生产服务器上运行collectstatic。

© www.soinside.com 2019 - 2024. All rights reserved.