Bonjour,

Je souhaite intégrer MarkItUp dans un modal (bootstrap).

Ce que je fais

Voici mon appel:

    <li data-toggle="modal" data-target="#creer_billet"><a href="#">Ajouter un billet</a></li>

Voici mon footer:

                $('#creerbillet').empty();
                $('#creerbillet').append('<div class="modal fade" id="creer_billet" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="exampleModalLabel">Ajouter un billet</h4></div><div class="modal-body"><form id="form_billet" method="post"><div class="row"><div class="form-group"><div class="col-md-2"><label for="titre">Titre</label></div><div class="col-md-10"><input type="text" name="titre" id="titre" maxlength="40" size="41" autofocus/></div></div></div><div class="row"><div class="form-group"><div class="col-md-2"><label for="contenu">Contenu</label></div><div class="col-md-10"><textarea name="contenu" id="contenu"></textarea></div></div></div><div class="row"><div class="form-group"><div class="col-md-2"><label for="tag">Tag</label></div><div class="col-md-10"><input type="text" name="tag" id="tag" maxlength="40" size="41"/></div></div></div><br/><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button><input class="btn btn-primary" type="submit" id="soumettreB" value="Soumettre" /></div></div></div></div>');

            $(function () {
                    $("#soumettreB").click(function (event) {
                        event.preventDefault(); // pour ne pas que le bouton fasse un postback
                        ajouterB();
                    });
                });
            function ajouterB(){
                var dataFormBillet = $("#form_billet").serialize();
                var jqxhr = $.ajax({ 
                        type: 'post',
                        url: "<?php echo base_url(); ?>" + "index.php/front/blog/creerBillet",
                        contentType: "application/x-www-form-urlencoded; charset=UTF-8", 
                        data: dataFormBillet
                })
                .done(function (response, textStatus, jqXHR) {
                        console.log('OK - done');
                        console.log(textStatus);
                        console.log(jqXHR);
                        })
                .fail(function (jqXHR, textStatus, errorThrown) {
                        console.log('NO - fail');
                        console.log(textStatus);
                        console.log(jqXHR);
                })
                .always(function (jqXHR, textStatus, errorThrown) {
                        $('#creer_billet').empty();
                });
            }

Voici mon header :

    <script type="text/javascript" >
       $(function() {
                $('textarea').markItUp(mySettings);
       });
    </script>

Ce que je veux

si je place un textarea sur ma page principale, le MarkItUp fonctionne. Mais lorsque j'appelle le modal, il n'apparait pas.
J'imagine qu'il est question d'ordre du DOM...

Pourriez-vous m'aider ?

Merci d'avance !

1 réponse


aluc
Auteur

une solution est de placer le code de mon modal dans la div devant le contenu plutôt que de le générer en javascript...
Or ça, si quelqu'un à une idée quand même je suis preneur pour la curiosité et / ou l'explication ;O)