Wie Parameter json Array senden, wenn Modal geöffnet?

Question

Demo und vollständige Code ist wie folgt: https://jsfiddle.net/xzxrp7nn/5/

Mein HTML-Code ist wie folgt:

<div id="tes"> 

</div> 


<!-- Modal Currency--> 
<div class="modal fade" id="priceModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 


      </div> 
      <div class="modal-body"> 

      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 

Mein Javascript-Code ist dies wie:

$(document).ready(function(){ 

     var priceModal = '{"attributes":{"Code":"DBL","Total":"200000"},"DayPrice":{"Date":"2016-05-26","Rate":"200000"}}'; 

     var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModal='+priceModal+'">tes</button>'; 

     $("#tes").html(isitable); 
     $('#priceModal').on('show.bs.modal', function(e) { 
      var param = e.relatedTarget.id; 
      console.log(param); 
     }) 
    }) 

Wenn offenen modale, möchte ich Parameter priceModal. Ich mache console.log(param); in $('#priceModal').on('show.bs.modal', function(e) {.

Aber das Ergebnis: priceModal={

Jede Lösung, um mein Problem zu lösen?

Danke

Answer 1

JSFiddle

Sie verwenden nicht korrekt zitiert:

$(document).ready(function(){ 

     var priceModal = "{'attributes':{'Code':'DBL','Total':'200000'},'DayPrice':{'Date':'2016-05-26','Rate':'200000'}}"; 

     var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModal'+priceModal+'">tes</button>'; 

     $("#tes").html(isitable); 
     $('#priceModal').on('show.bs.modal', function(e) { 
      var param = e.relatedTarget.id; 
      console.log(param); 
     }); 
    }); 

Answer 2

Gut, das nicht vorgeschlagen, aber immer noch, wenn Sie es erreichen wollen, dann können Sie einfach entfernen " während id Zuordnung für button. DOM fügt immer noch "" in den Attributwert ein, aber dies hilft Ihnen, den Wert abzurufen. Auch hier ist es nicht ratsam, einen solchen Wert für id zu speichern. Sie können es in einem beliebigen data-* Attribut für denselben element speichern.

Unten Beispiel zeigt, was passiert, wenn man "" entfernen, während id

$(document).ready(function() { 
 

 
    var priceModal = '{"attributes":{"Code":"DBL","Total":"200000"},"DayPrice":{"Date":"2016-05-26","Rate":"200000"}}'; 
 

 
    var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal"' 
 
    +' id=priceModal=' + priceModal + '>tes</button>'; 
 
     //^Remove "" from here 
 
    $("#tes").html(isitable); 
 
    $('#priceModal').on('show.bs.modal', function(e) { 
 
    var param = e.relatedTarget.id; 
 
    $('.modal-body').html(param); 
 
    }) 
 
})

.clsDatePicker { 
 
    z-index: 100000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="tes"> 
 

 
</div> 
 

 

 
<!-- Modal Currency--> 
 
<div class="modal fade" id="priceModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 

 

 
     </div> 
 
     <div class="modal-body"> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div>

Zuordnung