Open link created via jquery in modal window?

Asked

Viewed 59 times

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>&nbsp;</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(){

  • 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 thanks a lot worked the last way he passed me! (y) so it works tbm $('body'). on('click','a. showModal', Function () {

  • @Paulosaldanhadasilva your problem is delegation. I marked as duplicate because the other question has a good answer that explains the problem.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.