Javascript Ajax Reload Div

Question

I have the following code, but it refreshes the whole page instead of the "terminal" div.

Any clues?

<div id="terminal" name="terminal" class="terminal"><?php include('terminal.php');?></div>

<script type="text/javascript" >
$('#com').submit(function(e) {
   e.preventDefault();
   $.ajax({  
     type: "POST",  
     url: "comandos.php",  
     data: $(this).serialize(),  
     success: function() {  
       $('#terminal').load('terminal.php');
     }  
   });
});
</script>

<form id="com" name="com" action="" method="post">
<pre><?php echo $prompt;?> <input id="text" type="text" name="text" class="inputclass"     size=60 autofocus="true"/></pre>
  <input name="submit" id="submit" type="submit" style="display:none"     class="inputclass"/>
</form>

Because you are submitting a form – ODelibalta Jul 11 '13 at 19:26 — ODelibalta, Jul 11 '13 at 19:26

score 2 · Answer 1 · edited May 23 '17 at 12:05

2

the normal action or result from submitting a form is to reload it again and that's what you get. So to stop this "normal" behavior all you need is to return fasle.

Kindly check this out javascript-to-stop-form-submission

$('#com').submit(function (e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "comandos.php",
        async: false,
        data: $(this).serialize(),
        success: function () {
            $('#terminal').load('terminal.php', function () {
                return false;
            });
        }
    });
});

edited May 23 '17 at 12:05

Community

1
1

answered Jul 11 '13 at 19:28

ebram khalil

8,252
7
42
60

it's not about the e.. in the complete function of load put this "return false" – ebram khalil Jul 11 '13 at 19:37
I see, but still not working. The whole page reloads instead of the 'terminal' div – KillDash9 Jul 11 '13 at 19:44
could it be that the script is not being called at all? – KillDash9 Jul 11 '13 at 20:07
I added an alertbox and is not being called... any clues? – KillDash9 Jul 11 '13 at 20:24

Vadym Kovalenko · Answer 2 · 2013-07-11T19:37:32.020

0

Yours submit listener should return false, to prevent the browser submit the form normally

$('#com').submit(function(e) {
   e.preventDefault();
   $.ajax({  
     type: "POST",  
     url: "comandos.php",  
     data: $(this).serialize(),  
     success: function() {  
       $('#terminal').load('terminal.php');
     }  
   });
   return false;
});

edited Jul 11 '13 at 19:37

answered Jul 11 '13 at 19:25

Vadym Kovalenko

652
1
5
14

I see, but still not working. The whole page reloads instead of the 'terminal' div – KillDash9 Jul 11 '13 at 19:46
could it be that the script is not being called at all? – KillDash9 Jul 11 '13 at 20:07

Javascript Ajax Reload Div

2 Answers2