jquery automatically refresh page

Question

I am trying to load content of a file to a division using jquery. After loading contents the page refresh automatically.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn1").click(function(){
                    $("#div1").load("file.txt");
                });
            });
        </script>
    </head>
    <body>
        <form name='form1'>

            <input id="btn1" type="submit">
        </form>
        <div id="div1"></div>
    </body>
</html>

So the contents in division with id div1 never show up. I put break points to check whether file loads or not. It load successfully. Because of page refresh automatically the contents never displays.

Help me to fix it

I would go with type='button'..Simple!

Rayon
– Rayon

2015-11-02 18:45:52 +00:00
Commented Nov 2, 2015 at 18:45 — Rayon
– Rayon, Commented Nov 2, 2015 at 18:45

Sushanth -- · Accepted Answer · 2015-11-02 18:45:20Z

4

Prevent the default action of the submit button.

$("#btn1").click(function(e){
    e.preventDefault();
    $("#div1").load("file.txt");
});

answered Nov 2, 2015 at 18:45

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sushanth -- Over a year ago

@AbhijithPHaridas . Glad to have helped.

giorgio · Accepted Answer · 2015-11-02 18:45:51Z

0

That because you have put the button inside a form without an action attribute, which then defaults to the page itself. So basically what happens is that it is loading the contents of your file and then posting a form to itself, which causes the refresh.

Why do you need a form anyway? Change the button to <button id="btn1">Click here to load</button> and place it outside of the form. Or change the function to:

$(document).ready(function(){
    $("#btn1").click(function(e){ // e is the event object
        e.preventDefault(); // this prevents the form from posting.
        $("#div1").load("file.txt");
    });
});

answered Nov 2, 2015 at 18:45

giorgio

10.2k2 gold badges30 silver badges41 bronze badges

Comments

Gonzalo.- · Accepted Answer · 2015-11-02 18:49:54Z

0

That is because you have a button inside your form

add a e.preventDefault(); and you should be fine

$("#btn1").click(function(e){
      $("#div1").load("file.txt");
      e.preventDefault();
});

the other way would be change your html and make your input as

type="button" instead of type="submit"

The submit button inside a button will trigger a submit when clicked, which is causing your page to reload

edited Nov 2, 2015 at 18:49

answered Nov 2, 2015 at 18:44

Gonzalo.-

12.7k5 gold badges53 silver badges84 bronze badges

1 Comment

Carlos2W Over a year ago

That won't work, you forgot the e inside function parameters $("#btn1").click(function(e){

Collectives™ on Stack Overflow

jquery automatically refresh page

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related