When I call the function for the first time nothing happens but on second click it works fine. On subsequent click result of the previous click is displayed. Below is my code
<table class="table">
<thead>
<tr class="text-center" style="font-weight: bold">
<td></td>
<td>Name</td>
<td>ID</td>
<td>Age</td>
<td>Registered On</td>
<td>View Prescription</td>
</tr>
</thead>
<tr ng-repeat="x in patientList | filter:filter_patient_list" class="text-center">
<td>{{x.list}}</td>
<td>{{x.name}}</td>
<td>{{x.patient_id}}</td>
<td>{{x.age}}</td>
<td>{{x.date_registered}}</td>
<td><button data-toggle="modal" data-target="#view_prescription_from_patient_list{{x.patient_id}}" ng-click="getPrescriptionModal(x.patient_id)">/button></td>
</tr>
</table>
below is my angularJs code
$scope.getPrescriptionModal = function(patient_id)
{
$http.get("ajax_get_data.php?get_what=prescription_list_for_patient_list&patient_id="+patient_id).success(function(response2)
{
$('#view_prescription_from_patient_list'+patient_id).modal('show');
$('.modal_show').append(response2);
}).error(function()
{
alert("Unable to fetch");
})
}
and my php code to get modal window
if($get_what == "prescription_list_for_patient_list")
{
$patient_id = $_GET['patient_id'];
echo"
<div class='modal fade' id='view_prescription_from_patient_list$patient_id' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
<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='myModalLabel'>Modal title</h4>
</div>
<div class='modal-body'>
...
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
<button type='button' class='btn btn-primary'>Save changes</button>
</div>
</div>
</div>
</div>
";
I tried calling Ajax with Jquery that too had the same Issue.
It seems you are trying to open a modal before it exists in the DOM.
Try appending the response to <body>
first so that the selector you use to search for it will exist.
If the ID you are using is still only in the response html, using $('#id')
searches for existing DOM elements and therefore won't find it
$http.get(url, function(response){
$('body').append(response);
$(selector).modal();
});
Alternatively you could also try;
$(response).modal();
I'm not sure if bootstrap will automatically append the response to the DOM or not doing it this way.
ALso strongly suggest getting rid of bootstrap.js and using angular-ui-bootstrap directive.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.