Wählen Sie Option funktioniert nicht für Modal

Question

Kann jemand helfen, hier zu klären? Ich versuche, das gleiche wie post zu tun, aber den Wert dynamisch einzustellen. Wenn ich dies tue, obwohl ich die Werte vor dem Öffnen des Modals einstelle, scheint der Wert nicht gesetzt zu sein.

Ich habe eine Neue Kampagne erstellen Taste als Teil einer Tabelle, die beim Anklicken ruft die JavaScript-Methoden wie folgt dar:

<th data-field="create_campaign"><span class="create_campaign" text="{{product.id}}"><a class="" href="#" data-target="campaign_modal" value="{{product.id}}">create new campaign</a></span><br></th> 

HTML

<div id="campaign_modal" class="modal"> 
    <div class="modal-content"> 
     <blockquote> 
      Product Campaign 
     </blockquote> 
     <div id="" class="row"> 
      <div class="input-field col s5"> 
       <select id="product_selector" name="product_selector"> 
        <option disable value=" ">Select a Product </option> 
        {% for product in all_org_products %} 
         <option value="{{product.id}}">{{product.name}}</option> 
        {% endfor %} 
       </select> 
      </div> 
      <div class="input-field col s5"> 
       <input type="text" id="campaign" class=""/> 
       <label for="campaign" id="label_campaign"> Campaign </label> 
      </div> 
      <div class="input-field col s2"> 
       <a class="btn-floating btn-small waves-effect waves-light teal" onclick="submitCampaign()"><i class="material-icons">add</i></a> 
      </div> 
     </div> 
     <div class=" center"> 
      <span class="done_btn"><button id="done_btn" class="btn blue waves-effect waves-light modal-action"><i class="material-icons left" >done</i>Done</button></span> 
     </div> 
    </div> 
</div> 

Javascript

$('.create_campaign').click(function() { 
     product_id = $(this).attr('text'); 
     var product_select = document.getElementById('product_selector'); 
     console.log(product_select); 
     var index=0; 
     for (var i=0; i<product_select.options.length; i++){ 
      if (product_select.options[i].value == product_id){ 
       index=i; 
       product_select.value=product_id 
       break; 
      } 
     } 
     product_select.selectedIndex = index; 
     openCampaignModal(); 
    }); 

    function openCampaignModal(){ 
     $('#campaign_modal').openModal(); 
    }; 

Answer 1

Stellen Sie sicher, dass Ihr Javascript ohne Fehler läuft und es über Ihrem Modal liegt. Ihr Modal wird kompiliert, bevor Ihr Javascript ausgeführt wird, und so können Daten nicht abgerufen werden, wenn Sie auf Modal klicken.

Answer 2

Ich bin nicht vertraut mit Django Vorlagen, aber Ihr Markup schlägt vor, dass die Vorlage möglicherweise nicht gerendert wird, bis openModal() aufgerufen wird. Ist das der Fall?

Wenn ja, dann müssten Sie Ihren Auto-Select-Code ausführen, nachdem die <option> Elemente des Modales gerendert wurden.

Um dies zu testen, könnten Sie eine console.log innerhalb Ihrer for-Schleife setzen, um zu prüfen, welche Optionen verfügbar sind, wenn das click-Ereignis eintritt.

for (var i=0; i<product_select.options.length; i++){  
    console.log(product_select.options[i]) 
} 

Answer 3

Das Problem war, dass der Code unter dem $ (document) .ready war (function()) weshalb es nicht in der Lage war zu dieser Zeit den Wert zu erhalten. Ich habe meine Funktionen außerhalb der document.ready Methode genommen und es funktioniert jetzt!