부트 스트랩 3 모달을 동적 데이터로 다시로드

처음에는 두 개의 <div> 요소가 들어있는 모달을 가지고 있습니다. 그러나 사용자는 추가로 <div> 요소를 동적으로 추가 할 수 있습니다.부트 스트랩 3 모달을 동적 데이터로 다시로드

내가하고 싶은 일은 모달을 닫았다가 다시 열 때마다 기본값 인 <div> 개만 표시하는 것입니다.

$('#modal').on('show.bs.modal', function() { 
    $(this).removeData('bs.modal'); 
});

그것은 도움이되지 않았다 :

나는 다음 시도했다.

어떻게하면됩니까?

초기 모달 몸 :

<div class="row" id="leg-1"> 
    .... 
</div> 

<hr> 

<div class="row" id="leg-2"> 
    .... 
</div> 

<button>Add Leg</button>

처음 두 div의 초기 기본값은 다음과 같습니다

<div class="modal-body"> 
     <div class="row" id="leg-1"> 
      <div class="col-md-5" id="pickup-info-1"> 
       <div class="row"> 
        <div class="col-md-1"> 
         <p class="split-location__leg-number">1</p> 
        </div> 
        <div class="col-md-11"> 
         <p><span id="pickup-name-1"></span> <br/> <span id="pickup-address-1"></span> <br/> <strong><span id="pickup-city-1"></span>, <span id="pickup-state-1"></span> <span id="pickup-zip-1"></span></strong> <br/> Contact: <span id="pickup-contact-1"></span><br/> Phone: <span id="pickup-phone-1"></span></p> 
         <p id="pickup-date-1"></p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-7" id="delivery-info-1"> 
       <div class="row"> 
        <div class="col-md-10"> 
         <form class="split-location-form"> 
          <div class="form-group"> 
           <input type="text" class="form-control" id="delivery-name-1" placeholder="Name" value="BusinessName"> 
          </div> 
          <div class="form-group"> 
           <input type="text" class="form-control" id="delivery-contact-1" placeholder="Contact" value="ContactName"> 
          </div> 
          <div class="form-group"> 
           <input type="text" class="form-control" id="delivery-phone-1" placeholder="Phone" value="+99893497989"> 
          </div> 
          <div class="form-group"> 
           <input type="text" class="form-control" id="delivery-address-1" placeholder="Address" value="ContactAddress"> 
          </div> 
          <div class="row"> 
           <div class="col-md-6"> 
            <div class="form-group"> 
             <input type="text" class="form-control" id="delivery-city-1" placeholder="City" value="ContactCity"> 
            </div> 
           </div> 
           <div class="col-md-3"> 
            <div class="form-group"> 
             <select class="form-control split-location__state" id="delivery-state-1"> 
              <option value="AL">Alabama</option> 
              <option value="AK">Alaska</option> 
              <option value="AS">American Samoa</option> 
              <option value="AZ">Arizona</option> 
              <option value="AR">Arkansas</option> 
              <option value="CA">California</option> 
              <option value="CO">Colorado</option> 
              <option value="CT">Connecticut</option> 
              <option value="DE">Delaware</option> 
              <option value="DC">District Of Columbia</option> 
              <option value="FM">Federated States Of Micronesia</option> 
              <option value="FL">Florida</option> 
              <option value="GA">Georgia</option> 
              <option value="GU">Guam</option> 
              <option value="HI">Hawaii</option> 
              <option value="ID">Idaho</option> 
              <option value="IL">Illinois</option> 
              <option value="IN">Indiana</option> 
              <option value="IA">Iowa</option> 
              <option value="KS">Kansas</option> 
              <option value="KY">Kentucky</option> 
              <option value="LA">Louisiana</option> 
              <option value="ME">Maine</option> 
              <option value="MH">Marshall Islands</option> 
              <option value="MD">Maryland</option> 
              <option value="MA">Massachusetts</option> 
              <option value="MI">Michigan</option> 
              <option value="MN">Minnesota</option> 
              <option value="MS">Mississippi</option> 
              <option value="MO">Missouri</option> 
              <option value="MT">Montana</option> 
              <option value="NE">Nebraska</option> 
              <option value="NV'">Nevada</option> 
              <option value="NH">New Hampshire</option> 
              <option value="NJ">New Jersey</option> 
              <option value="NM">New Mexico</option> 
              <option value="NY">New York</option> 
              <option value="NC'">North Carolina</option> 
              <option value="ND">North Dakota</option> 
              <option value="MP">Northern Mariana Islands</option> 
              <option value="OH">Ohio</option> 
              <option value="OK">Oklahoma</option> 
              <option value="OR">Oregon</option> 
              <option value="PW">Palau</option> 
              <option value="PA">Pennsylvania</option> 
              <option value="PR">Puerto Rico</option> 
              <option value="RI">Rhode Island</option> 
              <option value="SC">South Carolina</option> 
              <option value="SD">South Dakota</option> 
              <option value="TN">Tennessee</option> 
              <option value="TX">Texas</option> 
              <option value="UT">Utah</option> 
              <option value="VT">Vermont</option> 
              <option value="VI">Virgin Islands</option> 
              <option value="VA">Virginia</option> 
              <option value="WA">Washington</option> 
              <option value="WV">West Virginia</option> 
              <option value="WI">Wisconsin</option> 
              <option value="WY">Wyoming</option> 
             </select> 
            </div> 
           </div> 
           <div class="col-md-3"> 
            <div class="form-group"> 
             <input type="number" class="form-control split-location__zip" id="delivery-zip-1" placeholder="ZIP" value="100189"> 
            </div> 
           </div> 
          </div> 
          <div class="row"> 
           <div class="col-md-6"> 
            <div class="form-group"> 
             <input type="date" class="form-control" id="delivery-date-1" placeholder="Delivery date" value="2016-10-10"> 
            </div> 
           </div> 
           <div class="col-md-6"> 
            <div class="form-group"> 
             <label for="split-location-form__price">Price:</label> 
             <input type="number" id="delivery-price-1" class="form-control split-location-form__price" value="600"> 
            </div> 
           </div> 
          </div> 
         </form> 
        </div> 
        <div class="col-md-2"> 
         <button type="button" class="btn btn-default btn-sm split-location__delete-leg-btn" title="Delete this leg" data-id="1" id="delete-btn-1">Delete</button> 
        </div> 
       </div> 
      </div> 
     </div> 

     <hr/> 

     <div class="row" id="leg-2"> 
      <div class="col-md-5" id="pickup-info-2"> 
       <div class="row"> 
        <div class="col-md-1"> 
         <p class="split-location__leg-number">2</p> 
        </div> 
        <div class="col-md-11" id="pickup-info-exists-2"> 
         <p><span id="pickup-name-2"></span> <br/> <span id="pickup-address-2"></span> <br/> <strong><span id="pickup-city-2"></span>, <span id="pickup-state-2"></span> <span id="pickup-zip-2"></span></strong> <br/> Contact: <span id="pickup-contact-2"></span><br/> Phone: <span id="pickup-phone-2"></span></p> 
         <div class="form-group"> 
          <input type="date" id="pickup-date-2" class="form-control split-location__pickup-date"> 
         </div> 
        </div> 
        <div class="col-md-11" id="no-pickup-info-2"> 
         <p class="text-muted">Pickup information is <br/> not available yet</p> 
         <div class="form-group"> 
          <input type="date" id="pickup-date-2" class="form-control split-location__pickup-date"> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-7" id="delivery-info-2"> 
       <div class="row"> 
        <div class="col-md-10"> 
         <p><span id="delivery-name-2"></span><br/><span id="delivery-address-2"></span> <br/> <span id="delivery-city-2"></span>, <span id="delivery-state-2"></span> <span id="delivery-zip-2"></span><br/> Contact: <span id="delivery-contact-2"></span><br/> Phone: <span id="delivery-phone-2"></span></p> 
         <div class="form-group"> 
          <p> 
           <span style="margin-right: 30px" id="delivery-date-2"></span> Price: 
           <input type="number" class="form-control split-location-form__price" id="delivery-price-2"> 
          </p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <hr/> 

     <div class="row"> 
      <div class="col-md-12"> 
       <button type="button" id="add-leg-btn" class="btn btn-success split-location__add-leg-btn">Add New Leg</button> 
      </div> 
     </div> 
</div>

기본적으로, 세 가지 주요 부분으로 구성됩니다. 사용자가 Add Leg 버튼을 누르면 ID가 leg-3 인 다른 div (등등)가 템플릿에 삽입됩니다.

출처

2016-07-07 Jahongir Rahmonov

템플릿이 크고으로 가득하다 @madalinivascu html로 또는 코드의 나머지 부분을 붙여하지 않습니다, 우리는 마술이 – madalinivascu

볼 수 있습니다 django 프레임 워크 태그. 그래서 내가 사건을 단순화하고 말로 설명하는 이유입니다. –

컴파일 된 HTML을 붙여 넣기가 힘들지 않습니까? – madalinivascu

는 다음과 같은 시도 :

$('#modal').on('show.bs.modal', function() { 
    // Get the added divs within the modal and remove all except the first 2 
    $('div[id^="leg"]').not('#leg-1,#leg-2').remove(); 
});

데모 : https://jsfiddle.net/hmf2v4bj/

출처

2016-07-07 09:52:51 madalinivascu

그것은 작동합니다! 고맙습니다! –

클래스를 추가 한 <div>에 추가하십시오. '.addedDivClass',

그런 다음 모달을 표시 할 때 jQuery .remove()을 사용하여 요소를 제거하십시오.

$('#modal').on('show.bs.modal', function() { 
    // Get the added divs within the modal and remove them 
    $('.addedDivClass', this).remove(); 
});

더 읽기에 대한 remove()here.

출처

2016-07-07 09:27:06

부트 스트랩 3 모달을 동적 데이터로 다시로드

답변

관련 문제