Pop up alert doesn't work

Question

I try to display a pop up alert using modal but the pop up doesn't appear Here is the code that I have written

 function CallService() { $.ajax({ url: '/url, type: "POST", dataType: "xml", success: function(xml, status) { $(xml).find('occurrences').each(function() { alert("Demande soumise avec succès"); }); $(xml).find('errors').each(function() { $(this).find("error").each(function() { var label = $(this).find('label').text(); $(document).ready(function() { $(".erreur").append("<div class='alert alert-danger' role='alert' style='width=50%'> <strong>" + label + "<strong></div>").modal('show'); }); }); }); }, }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="erreur"></div> 

Answer 1

close quotes in url parameter. Change url: '/url, to url: '/url',

Try this

 $(document).ready(function(){ $("#openme").click(function(){ $("#myModal").modal(); }); }); 

 <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <button id="openme" class="btn btn-default">open!</button> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">modal title </h4> </div> <div class="modal-body"> <p>confirm </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">no</button> <button type="button" class="btn btn-default" data-dismiss="modal">yes</button> </div> </div> </div> </div> 

Updated

I change your function to open alert popup try this,

 function CallService(){ var label ='your success response'; var modalContent ='<div class="modal fade" id="myModal" role="dialog">'+ '<div class="modal-dialog"><div class="modal-content">'+ '<div class="modal-header">'+ '<button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">Alert</h4></div><div class="modal-body">'+ '<p>'+label+'</p></div></div></div></div>'; $(".erreur").html(modalContent); $("#myModal").modal(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="erreur"></div> <button onclick="CallService()">click me</button>