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">×</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 !