Estoy construyendo una aplicación Rails, y quiero colocar el contenido de un Rieles parcial en el modal a través de AJAX.

En un Twitter Bootstrap 2.3.2 modal, he leído a través de la documentación que se puede cargar contenido mediante ajax usando la tecla del control remoto.

http://getbootstrap.com/2.3.2/javascript.html#modals

Sin embargo, esto sólo permite que el contenido se inyecta en el .modal-body, en lugar de construir todo el modal de forma dinámica.

Hay una manera de construir la totalidad de modal, incluyendo .modal-header, .modal-footer, de forma dinámica con JS?

Parece muy torpe para ello con una cadena de texto, como sigue:

partial = render_to_string(:partial => 'some-partial').gsub(%{"}, %{'}).gsub(/'/,"\\'").gsub("\n", "")
  • Hice esto una vez por la definición de una función en JavaScript que crea dinámicamente el código html para todo el modal como una cadena de caracteres (dependiendo de los parámetros que desea para encabezado etc.) y, a continuación, ajuste el innerHTML del recipiente que contiene el modal. De esta manera usted puede controlar cada aspecto de la modal que desee.
  • ¿tienes algún código de las muestras que podrías compartir para esto?

5 Comentarios

  1. 33

    Actualización:

    Desde la publicación de este, he encontrado un elegante bootstrap 3 modal función de contenedor aquí, que no requiere de la adición de un div en el código html.


    He aquí un ejemplo de código que muestra esto. De usar, basta con agregar un div en su <body> (dentro de bootstrap del <div class=»contenedor»>, por ejemplo:

    <div id="idMyModal"></div>

    y, a continuación, usted puede utilizar a través de:

    var header = "This is my dynamic header";
    var content = "This is my dynamic content";
    var strSubmitFunc = "applyButtonFunc()";
    var btnText = "Just do it!";
    doModal('idMyModal', header, content, strSubmitFunc, btnText);

    Para cerrar el modal, un llamado a la hideModal, también se define a continuación:

    function doModal(placementId, heading, formContent, strSubmitFunc, btnText)
    {
        var html =  '<div id="modalWindow" class="modal hide fade in" style="display:none;">';
        html += '<div class="modal-header">';
        html += '<a class="close" data-dismiss="modal">×</a>';
        html += '<h4>'+heading+'</h4>'
        html += '</div>';
        html += '<div class="modal-body">';
        html += '<p>';
        html += formContent;
        html += '</div>';
        html += '<div class="modal-footer">';
        if (btnText!='') {
            html += '<span class="btn btn-success"';
            html += ' onClick="'+strSubmitFunc+'">'+btnText;
            html += '</span>';
        }
        html += '<span class="btn" data-dismiss="modal">';
        html += 'Close';
        html += '</span>'; //close button
        html += '</div>';  //footer
        html += '</div>';  //modalWindow
        $("#"+placementId).html(html);
        $("#modalWindow").modal();
    }
    
    
    function hideModal()
    {
        //Using a very general selector - this is because $('#modalDiv').hide
        //will remove the modal window but not the mask
        $('.modal.in').modal('hide');
    }
    • El primer enlace conduce a un sitio web que tiene problemas de codificación. Convierte las entidades html en la sección de código por dos lo que es malo. Debe descargar el archivo de aquí, o el código no funciona: raw.githubusercontent.com/mohdovais/utilities/master/…
    • Sólo una sugerencia. Con el advenimiento de la plantilla de literales, que hace que escribir el código html de este código mucho mucho más limpio. Ver más información de aquí.
    • muchas gracias, es definitivamente más limpio, pero actualmente sólo se admite en los últimos navegadores y no se admite en IE pero
    • permitir que este en bootstrap 4?
  2. 27

    Actualización

    Hace poco me topé con bootbox.js que es toda una biblioteca dedicada a crear dinámicamente bootstrap modales y reaccionar a los usuarios la interacción con ellos. Aunque diferente que el método de abajo, bootbox acepta devoluciones de llamada en lugar de un nombre de función. No he utilizado personalmente todavía, porque no puedo justificar un 26kb biblioteca, fundamentalmente, en hacer lo que la función siguiente. Pero pensé que alguien podría encontrar útil.

    Actualización 8/17/2016

    Yo ahora uso bootbox para casi todos los proyectos que necesita dinámica verbos modales. Funciona muy bien yo lo recomiendo.

    Actualización 10/1/2018

    Bootbox no admite oficialmente bootstrap 4, pero hay un bootbox v5.x rama donde se encuentran trabajando en bootstrap 4 de apoyo. De acuerdo a la 5.0.0 hoja de ruta y Bootbox 5.0 nave lista billete suena como la rama es bastante dispuesto a ir, pero ellos no se han publicado todavía. Pero hay algunas instrucciones sobre cómo utilizarlo. Descargo de responsabilidad: todavía no he utilizado a v5.x rama y no puede dar fe de su integridad.

    Actualización 3/25/2019

    Bootbox 5.0 se publicó que apoya Bootstrap 4.

    Post Original

    Código de tomar de Amón de la respuesta anterior. Actualización para el bootstrap 3.0

    function doModal(placementId, heading, formContent, strSubmitFunc, btnText)
    {
        html =  '<div id="modalWindow" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal" aria-hidden="true">';
        html += '<div class="modal-dialog">';
        html += '<div class="modal-content">';
        html += '<div class="modal-header">';
        html += '<a class="close" data-dismiss="modal">×</a>';
        html += '<h4>'+heading+'</h4>'
        html += '</div>';
        html += '<div class="modal-body">';
        html += formContent;
        html += '</div>';
        html += '<div class="modal-footer">';
        if (btnText!='') {
            html += '<span class="btn btn-success"';
            html += ' onClick="'+strSubmitFunc+'">'+btnText;
            html += '</span>';
        }
        html += '<span class="btn" data-dismiss="modal">';
        html += <?php echo "'".__t("Close")."'"; ?>;
        html += '</span>'; //close button
        html += '</div>';  //footer
        html += '</div>';  //content
        html += '</div>';  //dialog
        html += '</div>';  //modalWindow
        $("#"+placementId).html(html);
        $("#modalWindow").modal();
        $("#dynamicModal").modal('show');
    }

    Esto es lo terminé usando para mis necesidades. También incluye un controlador de eventos para la eliminación de la modal desde el DOM una vez que se cierra. Sólo necesitaba una información modal, así que se llevó a cabo la función de envío y el texto del botón de argumentos.

    function doModal(heading, formContent) {
        html =  '<div id="dynamicModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal" aria-hidden="true">';
        html += '<div class="modal-dialog">';
        html += '<div class="modal-content">';
        html += '<div class="modal-header">';
        html += '<a class="close" data-dismiss="modal">×</a>';
        html += '<h4>'+heading+'</h4>'
        html += '</div>';
        html += '<div class="modal-body">';
        html += formContent;
        html += '</div>';
        html += '<div class="modal-footer">';
        html += '<span class="btn btn-primary" data-dismiss="modal">Close</span>';
        html += '</div>';  //content
        html += '</div>';  //dialog
        html += '</div>';  //footer
        html += '</div>';  //modalWindow
        $('body').append(html);
        $("#dynamicModal").modal();
        $("#dynamicModal").modal('show');
    
        $('#dynamicModal').on('hidden.bs.modal', function (e) {
            $(this).remove();
        });
    
    }
    • bootbox es agradable, sin embargo unfortulately todavía no hay soporte para el bootstrap 4
    • Están trabajando en bootbox v5 que ha bootstrap 4 como la característica principal. Pero lo más probable es que no será publicado hasta bootstrap 4 está fuera de beta. (la opinión, no un hecho). Hay una v5 rama que podría ser útil (no lo he probado)
  3. 5

    Mediante DOM, he creado el Botón así como el Bootstrap modal que aparece tan pronto como se pulsa el Botón.

    Incluir también estas en la sección head de la página HTML:

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=      
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script  
    src= "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    <script  
    src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">     
    </script>

    Totalidad de este código debe ser escrito en el archivo JS.

    //En primer lugar, la creación de un botón que al hacer clic se muestra el Modal de Bootstrap

    var button = document.createElement("input");
    button.className = 'btn btn-info btn-lg';
    button.setAttribute("type", "button");
    button.setAttribute("data-toggle", "modal");
    button.setAttribute("data-target", "#myModal");              
    button.setAttribute("value", "More Information...");
    document.getElementsByTagName('body')[0].appendChild(button);   

    //MODAL CREACIÓN:

    var div1 = document.createElement('div');
    div1.id = 'myModal';
    div1.className = 'modal fade';
    div1.setAttribute("role", "dialog");     
    var innerDiv1m = document.createElement('div');
    innerDiv1m.className = 'modal-dialog modal-sm';
    div1.appendChild(innerDiv1m);              
    var innerDiv2m = document.createElement('div');
    innerDiv2m.className = 'modal-content';
    innerDiv1m.appendChild(innerDiv2m);
    var innerDiv3 = document.createElement('div');
    innerDiv3.className = 'modal-header';
    innerDiv2m.appendChild(innerDiv3);
    var buttonM = document.createElement("button");
    buttonM.className = 'close';
    buttonM.setAttribute("data-dismiss", "modal");
    buttonM.setAttribute("aria-hidden", "true");
    buttonM.setAttribute("value", "Close");
    innerDiv3.appendChild(buttonM); 
    var headerM = document.createElement("H4");
    headerM.className = 'modal-title';
    innerDiv3.appendChild(headerM);
    var innerDiv31 =  document.createElement('div');
    innerDiv31.className = 'modal-body';
    innerDiv2m.appendChild(innerDiv31);
    var para =  document.createElement('p'); 
    innerDiv31.appendChild(para);
    para.innerHTML = "paragraph";
    var innerDiv32 =  document.createElement('div');
    innerDiv32.className = 'modal-footer';
    innerDiv2m.appendChild(innerDiv32);
    var closeButton = document.createElement("input");
    closeButton.className = 'btn btn-default';
    closeButton.setAttribute("data-dismiss", "modal");
    closeButton.setAttribute("type", "button");
    closeButton.setAttribute("value", "Close");
    innerDiv32.appendChild(closeButton);
    document.getElementsByTagName('body')[0].appendChild(div1); 

    //Por lo tanto, se hace clic en el creado botón, el modal aparece en la pantalla.

  4. 4

    Tema muy similar a aceptado contestar, pero escrito como un plugin de jQuery. Yo estaba buscando algo de lógica para construir en un paquete de herramientas con la que estoy trabajando, pero no podía encontrar nada así que escribió esto.

    Hay un montón de código de abajo, pero está diseñado para ser escrito de una vez y, a continuación, llamado más tarde con facilidad, así como un spoiler, una vez que la configuración es tan fácil de usar como:

    $.fn.alert("utils.js makes this so easy!");

    Y como un ejemplo de trabajo:

    https://jsfiddle.net/63zvqeff/

    Hay ninguna necesidad existente <div /> a estar en la página, y funciona con anidada diálogos, su toma de un kit de herramienta de la que estoy trabajando por lo que me han incluido todos los bits de modo que es un trabajo de copiar /pegar ejemplo.

    (function ($)
    {
    $.utils = {
    //http://stackoverflow.com/a/8809472
    createUUID: function ()
    {
    var d = new Date().getTime();
    if (window.performance && typeof window.performance.now === "function")
    {
    d += performance.now(); //use high-precision timer if available
    }
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c)
    {
    var r = (d + Math.random() * 16) % 16 | 0;
    d = Math.floor(d / 16);
    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
    }
    }
    $.fn.dialogue = function (options)
    {
    var defaults = {
    title: "", content: $("<p />"),
    closeIcon: false, id: $.utils.createUUID(), open: function () { }, buttons: []
    };
    var settings = $.extend(true, {}, defaults, options);
    //create the DOM structure
    var $modal = $("<div />").attr("id", settings.id).attr("role", "dialog").addClass("modal fade")
    .append($("<div />").addClass("modal-dialog")
    .append($("<div />").addClass("modal-content")
    .append($("<div />").addClass("modal-header")
    .append($("<h4 />").addClass("modal-title").text(settings.title)))
    .append($("<div />").addClass("modal-body")
    .append(settings.content))
    .append($("<div />").addClass("modal-footer")
    )
    )
    );
    $modal.shown = false;
    $modal.dismiss = function ()
    {
    //loop until its shown
    //this is only because you can do $.fn.alert("utils.js makes this so easy!").dismiss(); in which case it will try to remove it before its finished rendering
    if (!$modal.shown)
    {
    window.setTimeout(function ()
    {
    $modal.dismiss();
    }, 50);
    return;
    }
    //hide the dialogue
    $modal.modal("hide");
    //remove the blanking
    $modal.prev().remove();
    //remove the dialogue
    $modal.empty().remove();
    $("body").removeClass("modal-open");
    }
    if (settings.closeIcon)
    $modal.find(".modal-header").prepend($("<button />").attr("type", "button").addClass("close").html("&times;").click(function () { $modal.dismiss() }));
    //add the buttons
    var $footer = $modal.find(".modal-footer");
    for(var i=0; i < settings.buttons.length; i++)
    {
    (function (btn)
    {
    $footer.prepend($("<button />").addClass("btn btn-default")
    .attr("id", btn.id)
    .attr("type", "button")
    .text(btn.text)
    .click(function ()
    {
    btn.click($modal)
    }))
    })(settings.buttons[i]);
    }
    settings.open($modal);
    $modal.on('shown.bs.modal', function (e) {
    $modal.shown = true;
    });
    //show the dialogue
    $modal.modal("show");
    return $modal;
    };
    })(jQuery);

    Entonces escribí una función de ayuda para aquellos momentos en los que simplemente quería una alerta básicas()

    (function ($)
    {
    $.fn.alert = function (message)
    {
    return $.fn.dialogue({
    title: "Alert", 
    content: $("<p />").text(message),
    closeIcon: true,
    buttons: [
    { text: "Close", id: $.utils.createUUID(), click: function ($modal) { $modal.dismiss(); } }
    ]
    });
    };
    })(jQuery);

    De lo contrario, usted necesita para construir su contenido como un objeto jQuery y, a continuación, pasar en en la forma de un objeto como:

    {
    title: "", //what ever you want in the title bar
    content: $("<p />"), //any DOM structure you can build as a jQuery object
    closeIcon: false, //does the dialogue have a X in the tilte bar to close it
    id: $.utils.createUUID(), //a reference id 
    open: function () { }, //a function called after the DOM structure is built but BEFORE rendering
    buttons: [ //an array of buttons to include in the footer
    //example "close" button, all buttons get a reference to $modal passed into them 
    //.dismiss() is a function attached to $modal to revert the DOM changes
    { text: "Close", click: function ($modal) { $modal.dismiss(); } }
    ]
    };
    • Gracias. Esto todavía es muy útil. Funciona como un encanto con Bootstrap4, sólo el botón de cierre tiene que ser añadido, no al principio.
  5. 0

    Tuve el mismo problema, después de investigar mucho, que finalmente se construyó una función js para crear verbos modales dinámicamente en función de mis necesidades. Con esta función, usted puede crear popups en una línea, tales como:

    puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})

    O puede utilizar otras funciones complejas tales como iframe, vídeo, ventanas emergentes, etc.

    Encontrar en https://github.com/aybhalala/puymodals Para la demo, vaya a http://pateladitya.com/puymodals/

Dejar respuesta

Please enter your comment!
Please enter your name here