CODEWITHSUNDEEP
javascriptajaxformshtmlrefresh
KillDash9
KillDash9

Reputation: 909

Javascript Ajax Reload Div

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>

Upvotes: 2

Views: 2375

Answers (2)

ebram khalil
ebram khalil

Reputation: 8321

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;
            });
        }
    });
});

Upvotes: 2

Vadym Kovalenko
Vadym Kovalenko

Reputation: 652

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;
});

Upvotes: 0

Related Questions