CakePHP use ajax to load modal content

Question

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>

@Poonam When I removed it i got the following error Uncaught TypeError: document.getElementById(...).text is not a function(…) so I dont know how can I set the content text — Afaf, Nov 15 '16 at 09:24
@Poonam Still got the same error Uncaught TypeError: document.getElementById(...).html is not a function(…) — Afaf, Nov 15 '16 at 09:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/128139/discussion-between-poonam-and-afaf). — Poonam, Nov 15 '16 at 09:28
Use `document.getElementById("titre").innerHTML = "New notification";` — Poonam, Nov 15 '16 at 09:49
Simple google search gives [this](http://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery). Consider learning jquery a bit. — skywalker, Nov 15 '16 at 10:07

score 2 · Accepted Answer · answered Nov 15 '16 at 09:57

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.

CakePHP use ajax to load modal content

1 Answers1