William William - 2 months ago 16
Ajax Question

Bootstrap Confirmation Does not work with ajax call

Where is the possible problem, I have a service that returns a json, use this returns to ride my table.

If I leave the statisc record it works the plugin as confirmation code below:

<td><strong>Fatura Abril</strong><br /> Este é um aviso de que sua fatura do mÊs 04 está vencendo</td>
<td class="text-right"></a>
<a data-toggle="confirmation" class="label label-danger" type="button" id="not-basic"><i class="fa fa-times"></i></a>
</td>


But if you use function to return and assemble the data via json, the table is monstada but the plugin confirmation does not work.

<script type="text/javascript">

$(document).ready(function(){

var url="phptabela.php"; // PHP File
//var url="getposts.json"; // JSON File

$.getJSON(url,function(data){

console.log(data);
$.each(data.data, function(i,post){

var newRow =
"<tr>"

+"<td><strong>"+post.titulo+"</strong><br />" +post.texto+"</td>"
+"<td class='text-right'></a> "
+"<a data-toggle='confirmation' class='btn btn-default label label-danger' type='button' id='not-basic'> "
+"<i class='fa fa-times'></i></a> "
+"</td>"


+"</tr>" ;
$(newRow).appendTo("#json-data");
});
});
});
</script>


I am using this plugin:
http://bootstrap-confirmation.js.org/

Answer

After you receive the data from ajax and append it to json-data you need to initialise the new confirmation

From doc I can see that you need to do this :

$('[data-toggle=confirmation]').confirmation({
  rootSelector: '[data-toggle=confirmation]',
  // other options
});
Comments