Load an HTML file via a button using jQuery

Question

I am trying to call a HTML file when a button is clicked using jQuery.

Here is my html code:

<!DOCTYPE html>
<head>

    <title>Buttons</title>

    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="buttonscript.js">
    </script>
</head>
<body>  
<input type ="button" id="myButton" value="Click Here">

<div id="dictionary">
</div>
</body>
</html>

then here is my script:

$(document).ready(function(){
    $('myButton').click(function(){
        $('dictionary').load('a.html');
        return false;
    });
  });

Alex · Accepted Answer · 2015-12-19 18:04:40Z

2

You have two wrong things in your script:

You are not assigning the selectors with the right syntax;
You are using document ready syntax on an external file;

The first point is fixed using # before the id name and . before the class name (see below the fix).

The document.ready() function should be included into the html itself: it tells jquery to run the script only when the DOM is ready. Including it in an external file will make jQuery check for DOM ready on the external file and not on the one you are including to. So move your script to the html itself and change it a bit:

.

$(document).ready(function(){
    $('#myButton').click(function(e){
    // prevent page submit
        e.preventDefault(); 
        // load the page into #dictionary
        $('#dictionary').load('a.html');
    });
});

edited Dec 19, 2015 at 18:04

Alex

8,6956 gold badges40 silver badges51 bronze badges

answered Oct 17, 2015 at 12:27

user2399035

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

2 Comments

eee Over a year ago

I need to have my script as a seperate file to my html file, just the way my lecturer requested it to be. used the above script but all it does is displays the name of my html file im calling "a.html" not the actual file

user2399035 Over a year ago

Sorry! I fixed the error in the script. I used .html but it should be .load

Adam Azad · Accepted Answer · 2015-10-17 12:35:06Z

0

Add # to your selectors like, and instead of using return false, you could prevent default behavior of the button (if the type attribute is set to submit).

$(document).ready(function(){
    $('#myButton').click(function(event){

        // prevent page submit
        event.preventDefault(); 

        // load the page into #dictionary
        $('#dictionary').load('a.html');

    });
});

edited Oct 17, 2015 at 12:35

answered Oct 17, 2015 at 11:46

Adam Azad

11.3k5 gold badges31 silver badges74 bronze badges

6 Comments

eee Over a year ago

Still nothing happening. I added some text into the dictionary div and when i click the button the text disappears, thats the most its doing. Thanks for trying though!

Adam Azad Over a year ago

I highly recommend creating a fiddle for this or at least commit your files to the server, and put the link here in a comment. The path for a.html could not be right or, the file doesn't exist at all.

Adam Azad Over a year ago

Additionally, you should check your console log, and report the errors you catch here.

user2399035 Over a year ago

@AdamAzad why do you think it is necessary to use stopPropagation? it works fine with preventing the default behaviour only. To stop propagation can lead to undesired results if it is not used with the right syntax. (just for my knowledge here)

user2399035 Over a year ago

trust me it is not needed at all. My applications use a lot of buttons designed with only preventDefault and everything is fine and smooth!

|

Collectives™ on Stack Overflow

Load an HTML file via a button using jQuery

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related