Bonjour,
Je souhaite intégrer MarkItUp dans un modal (bootstrap).
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">×</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>
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 !
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)