CODEWITHSUNDEEP
jqueryhtmlcss
Sich
Sich

Reputation: 39

Having problems with load() function

The following is part of my site, just removed some code that i know is not necessary fro the question;

<div id="Container">
<div id="Header"></div>
<div id='TopNav'>
<ul>
  <li> <a href=''>Home</a></li>
  <li><a  href ='' id='bt1'>Contact EHC</a></li>
  <li><a href=''>Student Portal</a></li>
  <li><a href=''>Lecturer Portal</a></li>
  <li><a href=''>How To Apply</a></li>
  <li><a href=''>Student Union</a></li>
  <li><a href=''>News</a></li>
  <li><a href=''>Tutorials</a></li>
  <li><a href=''>Log In</a></li>
  <li class='last'><a href=''>Graduation</a></li>
</ul>
</div>
<!-- topNav closes here -->

<div id="Content"></div>
<!-- Content div ends here -->

<div id="Footer"></div>
</div> <!-- conatiner closes here-->

The css for #content is the following:

#Content {
float: left;
height: auto;
width: 800px;
border-style: solid;
border-width: thin;
background-color: #F5FDFE;
text-indent: 0px;
text-align: justify;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
}

My jQuery function looks like this:

$(document).ready(function(){

   $('#bt1').click(function() {
       $('#content').load('other.html');
   });

});

When I try to use the jQuery function above it does not work, the #content div just stays blank when I click on "Contact EHC". The console does not show any errors, I am using WAMP as my testing server. Is there anything wrong with my code that can prevent the jQuery function from working? a simple code like alert('Hello'); works just fine if I include it in there. I apologize if the problem is obvious, i am teaching myself web development, it is for my final year project at college.

Upvotes: 0

Views: 55

Answers (4)

Sich
Sich

Reputation: 39

After some research i discovered that i was forgetting to include some code that will prevent the link from being followed. The following code worked for me just fine. Thank you or your answers.

$('#bt1').click(function() {
$('#content').load('other.html');
return false; <----------- This is the code i was missing out
});

Upvotes: 2

Kanan tuteja
Kanan tuteja

Reputation: 135

Try this:

<script type="text/javascript">
        $(document).ready(function() {
            $('#bt1').click(function() {
                $("#content").load('/jquery/result.html');
            });
        });
    </script>

Upvotes: 0

Damien
Damien

Reputation: 4093

  1. Maybe a path problem, but you would have a 404 error : jQuery ajax load() file not working in localhost - (w3scools.com jQuery AJAX sample tutorial).

  2. Are you sure to use your local server? http: // localhost? load () function does not work in file: //

  3. If you are using Google Chrome browser take a look in the dev tools "Network" tab, to be sure the ajax call works correctly.

Upvotes: 0

NomNomNom
NomNomNom

Reputation: 871

use this

 $("#content").html('<object data="http://other.html/">');

Upvotes: 0

Related Questions