1

After ajax call, my form doesn't work.

I have a table of servers like this :

||server_name || server_port || report_date || isMonitored || Status || delete.jpg update.jpg ||

Created by this code in : table.php

$edit ="<input id=\"updating\" title=\"Change Monitoring Status\" type=\"image\" name=\"action\" value=\"Update\" src=\"add/img/edit.png\" alt=\"edit\" height=\"12\" width=\"12\">";

$delete ="<input id=\"deleting\" title=\"Delete this server\" type=\"image\" name=\"action\" value=\"Delete\" src=\"add/img/delete.png\" alt=\"edit\" height=\"12\" width=\"12\">";

$table .= "
    <form id=\"serverform\" action=\"action.php\" method=\"POST\"><tr class=".$tr_class.">
    <td><input type=\"hidden\" name=\"server_name\" value=\"".$row['server_name']."\"><a target=\"blank\" href=\"http://".$row['server_name'].":".$row['server_port']."\">".$row['server_name']."</a></td>
    <td><input type=\"hidden\" name=\"server_port\" value=\"".$row['server_port']."\">".$row['server_port']."</td>
    <td>".$row['report_date']."</td>
    <td>".$row['monitored']."</td>
    <td>".$status."</td>
    <td>".$edit." ".$delete."</td>
    </tr></form>";      

echo $table;

In my index.php, I call table.php like this :

<tbody id="table"></tbody>

<script>
  (function worker() {
    $.ajax({
      url: 'table.php', 
      success: function(data) {
        $('#table').html(data);
      },
      complete: function() {
        // Schedule the next request when the current one's complete
        setTimeout(worker, 30000);
      }
    });
  })();
</script>

The table refresh every 30s. If I used the url server/table.php, the form is working, but not if i go on server/index.php, the form is only displayed.

I'm new in ajax, I did some research and it seems that's what I'm doing wrong, can you help me to fix my problem ?

  • 2
    What do you mean by 'it doesn't work'? Any errors in the console. I'd also note that your HTML is invalid; you cannot have a `form` as a child of a `table`. You should also look in to using WebSockets instead of AJAX poling. – Rory McCrossan Jun 21 '17 at 12:14
  • It doesn't work when I click on a .jpg. If I go on server/table.php and click on delete.jpg, the server is deleted. But on server/index.php, nothing happen when I click on my submit button :( –  Jun 21 '17 at 12:18
  • Show us your click function. – Jay Blanchard Jun 21 '17 at 12:24
  • I don't have a click function.. Is that what i've missed ? –  Jun 21 '17 at 12:26
  • I see nothing which makes your images clickable. In addition, pay attention to what @RoryMcCrossan said - you have some invalid markup. – Jay Blanchard Jun 21 '17 at 12:28
  • It is in a form. Why does it not work when it's called with Ajax but work on the original page ? –  Jun 21 '17 at 12:29
  • If it doesn't work when you call it with AJAX then you must have a click handler somewhere. In addition, inputs with `type="image"` are not automatically clickable. jQuery is only aware of the elements in the page at the time it runs, so new elements added to the DOM are unrecognized by jQuery. – Jay Blanchard Jun 21 '17 at 12:32
  • If I had to guess (which I am now doing because I cannot see the rest of your code) I think you might need to use [event delegation](http://learn.jquery.com/events/event-delegation/), bubbling events from newly added items up to a point in the DOM which was there when jQuery ran on page load. Many people use `document` as the place to catch the bubbled event, but it isn't necessary to go all the way up the DOM tree. Ideally [you should delegate to the nearest parent existing at the time of page load.](http://stackoverflow.com/a/12824698/1011527) – Jay Blanchard Jun 21 '17 at 12:33
  • Oh I see now thanks. So I just have to add a click handler ? Or the fact that I use .jpg made this impossible to work out ? –  Jun 21 '17 at 12:33
  • You can create a click handler for the images. And you really need to fix your markup. – Jay Blanchard Jun 21 '17 at 12:34
  • You mean that is not okay to create a form for each I have ? –  Jun 21 '17 at 12:35
  • You can put a whole form inside of a `` but a form cannot be a child of ``
     – Jay Blanchard Jun 21 '17 at 12:38
  • But, isn't what I did ? Putting a whole form inside a ? –  Jun 21 '17 at 12:42
  • No - it would appear your form is not that way. Look at the markup generated. – Jay Blanchard Jun 21 '17 at 12:50
  • OH OKAY, I just got it. Sorry. I'm a bit tired.. –  Jun 21 '17 at 12:54
  • 1
    If you're tired step back and take a break. Grab some water and relax for a few, then come back to it. – Jay Blanchard Jun 21 '17 at 12:55
  • ^ that is a *novel* idea. – Funk Forty Niner Jun 21 '17 at 12:56
  • @JayBlanchard, That's a good advice actually :D –  Jun 21 '17 at 13:00
  • @JayBlanchard, +Rory McCrossan, thank you, both of you, my problem was the awful markup. I will post the answer when my work is done. Thank you. –  Jun 21 '17 at 13:22

0 Answers0