Afaf Afaf - 20 days ago 7
Ajax Question

CakePHP use ajax to load modal content

I want to add a notification box on my navigation bar. so when I click on a new notification div I want to show my modal with my notification text and here I used the following ajax function but it can't show me the modal text .

function viewPost(IDnotif){
var notifId = IDnotif;

var data = "id="+ notifId;
$.ajax({
type: "post", // Request method: post, get
url: base_url + "/icicpermis/notifications/getNotification/"+notifId,
data: data,
success: function(response) {

document.getElementById("myModal").style.display = "block";

document.getElementById("titre").text('New notification ');

},
error:function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
return false;
}

</script>


and that's my modal :

<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content" id="content">
<span class="close">x</span>

<p id='titre'>Nouvelle notification </p>
</div>

</div>

Answer

In javascript .text() will not work. You have to change the html of #titre

So, In javascript use innerHTML,

document.getElementById("titre").innerHTML = "New notification";

You can use jQuery too

$('#titre').html('New notification');

Remove return false; after ajax call because it will hide the errors.

Comments