La demostración y el código completo es así: https://jsfiddle.net/xzxrp7nn/9/

Mi código HTML es así:

<button type="button">Click Me</button>

<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>

Mi código Javascript es así:

$(document).ready(function(){
        $("button").click(function(){
            $.ajax({
                //type: 'POST',
                //url: 'script.php',
                success: function(data) {
                    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+'">Test get parameter json array</button>';
                    $("#tes").html(isitable);
                }
            });
        });

        $('#priceModal').on('show.bs.modal', function(e) {
             //console.log('yes');
            var param = e.relatedTarget.id;
            // var hotel_code = $(this).data('id');
            console.log(param);
            // console.log(hotel_code);
        })
    });

Cuando haga clic en el botón "Haga clic en mí", se mostrará el botón "Prueba obtener parámetro json array".

Cuando haga clic en el botón "Probar el parámetro json array", quiero enviar el parámetro priceModal a modal. El parámetro priceModal contiene una matriz json. Hago console.log (param); en $('#priceModal').on('show.bs.modal', function(e) {.

Pero el resultado: priceModal={. No logró obtener el valor de priceModal

¿Alguna solución para resolver mi problema?

Gracias

0
moses toh 14 may. 2016 a las 07:15

3 respuestas

La mejor respuesta

Cuando llamas a id="priceModal='+priceModal+'" estás agregando incorrectamente tu json a la identificación de tu elemento.

Un atributo de datos sería mucho más apropiado, algo más como esto:

success: function(data) {
  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" data-price-modal="">Test get parameter json array</button>';
  $("#tes").html(isitable).find('[data-price-modal]').data('price-modal',priceModal);
}


$('#priceModal').on('show.bs.modal', function(e) {
  var param = $('[data-price-modal]').data('price-modal');
  console.log(param);
})

jsFiddle de trabajo


Alternativamente, puede hacer que su servidor devuelva la cadena JSON codificada para su uso en el atributo. Por ejemplo, si estuviera utilizando php, esto funcionaría:

echo htmlspecialchars(json_encode(someArray), ENT_QUOTES, 'UTF-8'));
1
Wesley Smith 14 may. 2016 a las 06:00

Si quieres simplemente obtener la matriz json en modo modal, usa de esta manera:

<button type="button" data-toggle="modal" data-target="#priceModal" data-whatever="value">Click Me</button>

En jquery:

 $('#priceModal').on('show.bs.modal', function(e) {

             //get data from trigger element fire the modal
             var sample= $(this).data('whatever');

        // you can send parameter to server and get data to display in modal
        $.ajax({
                type: 'GET',
                url: 'action url',
                data:{param:sample},
                async:false,
                success: function(data) {
                    console.log(data);
                },
               error:function(xhr){
                 console.log(xhr.responseText);
                }
            });
        })

Si desea usar su forma, cambie esta línea para obtener sus datos. los atributos html comienzan "y terminan" debido a esto, solo obtiene este valor priceModal = {

 var priceModal = "{'attributes':{'Code':'DBL','Total':'200000'},'DayPrice':{'Date':'2016-05-26','Rate':'200000'}}"
-1
Ali Panahian 9 oct. 2018 a las 12:54

Coloque su JSON en Datos HTML5 - *

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="priceModel" data-json='+priceModal+'">Test get parameter json array</button>';

Acceda a los datos de JSON al hacer clic en el botón recién creado.

var json = $("#priceModel").attr("data-json");
$(".modal-body").html(json); //For eg.

JSFiddle

1
Jenson M John 14 may. 2016 a las 12:59