0
My problem is as follows when the user clicks on the add link this opens a modal window by clicking save sends the data pro server-side via ajax if it is all right to create a new Row in the table on the index page with the new data containing two links one for editing and one for deletion, both of these should open a pop-up window but when I click on these link in the new record does not work, only works if the page is reloaded. Someone could help me?
js:
$("#btnsubmit").on('click',function(event){
event.preventDefault();
var title = $("input[name=title]").val();
var artist = $("input[name=artist]").val();
var action = 'add';
$.post("album/ajax",{
action : action,
title : title,
artist : artist
},
function(data){
if(data.response == true){
alert("Inserido com sucesso!");
var row_data= "";
row_data +="<tr><td>"+title+"</td><td>"+artist+"</td><td><a href='album/edit/"+data.id+"' class='showModal'>Edit</a> <a href='album/delete/"+data.id+"' class='showModal'>Delete</a></td></tr>";
$("#table").append(row_data);
} else {
alert("Nao foi possivel Add!");
}
},'json');
});
js code to open modal window
$(function (){
function handler() {
if (this.readyState == this.DONE) {
if (this.status == 200 && this.responseText != null) {
$("#modal").html(this.responseText);
return;
}
console.log('Something went wrong! Status = ' + this.status);
}
}
var client = new XMLHttpRequest();
client.onreadystatechange = handler;
$(document).ready(function () {
$("a.showModal").click(function () {
//$("#modal").html('Loading ' + $(this).attr("href"));
client.open("GET", $(this).attr("href"),true);
client.send();
var dialog;
dialog = $("#modal").dialog({
autoOpen:true,
width: 400,
height: 450,
modal: true,
/*close: function () {
$("#modal").html('');
}*/
buttons: [{
text: "Cancelar",
click: function() {
dialog.dialog("close");
}
}],
close: function () {
$("#modal").html('');
}
});
return false;
});
});
});
index (main page):
<?php
$title = 'My albums';
$this->headTitle($title);
?>
<h1><?php echo $this->escapeHtml($title); ?></h1>
<a href="<?php echo $this->url('album', array(
'action'=>'add'));?>" class="showModal">Add Modal</a>
<table class="table" id="table">
<tr>
<th>Title</th>
<th>Artist</th>
<th> </th>
</tr>
<?php foreach($albums as $album) : ?>
<tr>
<td><?php echo $this->escapeHtml($album->title);?></td>
<td><?php echo $this->escapeHtml($album->artist);?></td>
<td>
<a href="<?php echo $this->url('album', array(
'action'=>'edit', 'id' => $album->id));?>" class="showModal">Edit Modal</a>
<a href="<?php echo $this->url('album', array(
'action'=>'delete', 'id' => $album->id));?>" class="showModal">Delete Modal</a>
</td>
</tr>
<?php endforeach; ?>
</table>
<div id="teste">+</div>
<p id="p"></p>
<div id="modal"></div>
Can you put the code that opens the modal? I think you need to delegate, like $(Document). on('click', '.showModal', Function(){
– Sergio
Here
$("a.showModal").click(function () {
tried something like$("a.showModal").on('click', function () {
or even something like$(document).on('click', '.showModal', function (event) {
?– Marcelo Diniz
Marcelo Diniz thanks a lot worked the last way he passed me! (y) so it works tbm $('body'). on('click','a. showModal', Function () {
– Paulo Saldanha da silva
@Paulosaldanhadasilva your problem is delegation. I marked as duplicate because the other question has a good answer that explains the problem.
– Sergio