Javascript Dynamically replace div content on button click

Question

I am trying to make a HTML5 app and i need to dynamically change the content of a div with different html files depending on the menu select. The code I currently have loads the menu however when I click on a button I receive a short message "Error loading page" that disappears after a few seconds. I've fiddled around with it myself and can't quite figure out what is going wrong so I'll show the code I currently have.

index.html -

<body>
<div data-role="page" id="index">
<div id="wrapper">
    <div data-role="controlgroup" data-corners="false" data-position="left">
        <a href="/html/home.html" id="home" data-role="button">HOME</a>
        <a href="/html/tracking.html" id="track" data-role="button">TRACKING</a>
        <a href="/html/favourites.html" id="fav" data-role="button">FAVOURITES</a>
        <a href="/html/setting.html" id="set" data-role="button">SETTINGS</a>
        <a href="/html/login.html" id="login" data-role="button">LOG IN</a>
    </div>
    <div id="main">
        <div id="header" data-role="header" data-theme="b">
            <a id="bars-button" data-icon="bars" class="ui-btn-right" style="margin-top:0px;" href="#navpanel">MENU</a>

        </div>
        <div id="dMain"> </div>
    </div>
</div>
</div>  

<script> 
//$(document).ready(function(){
//$('#home').click(function(){  
//    $('#dMain').load('/html/home.html');
// });
//});

</script>    
</body>

home.html -

<body>
<div data-role="page" id="home">
<h1>Hello</h1>
<h2>This is the home page</h2>
<p>it will contain about us information</p> 
</div>
</body>

I have changed bits and pieces so it is not in a working state currently but any suggestions on how to fix/improve this code would be greatly appreciated.

Suketu · Accepted Answer · 2014-04-09 11:29:11Z

2

Assuming you have jquery library loaded properly which supports ajax if not load jquery 1.11 and jquery ui 1.10.3 and theme Try,

<script> 
$(document).ready(function(){
$('#home').click(function(e){  
    $('#dMain').load('/html/home.html');
    e.preventDefault();
 });
});

</script>

answered Apr 9, 2014 at 11:29

Suketu

3691 silver badge7 bronze badges

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

5 Comments

TriangleBanana Over a year ago

This method highlights the active button which leads me to believe that the code is working however I am still unable to view the content from home.html in the dMain div in the index.html, the "error loading page" no longer appears, could it be something to do with my home.html page?

Suketu Over a year ago

if all files are in /html/ directory then try loading by file name itself. e.g. home.html only. I believe error loading page means your page is not available on that location.

TriangleBanana Over a year ago

okay, I've restarted my IDE and it appears to still be receiving "Error Loading Page" even with the changes to file name

Suketu Over a year ago

Did you corrected your code? instead of "/html/home.html" try "home.html" only

TriangleBanana Over a year ago

Yes I did, and it still doesn't appear to be working. I am still working on it just now.

Milan and Friends · Accepted Answer · 2014-04-09 11:31:26Z

2

Try this

$(function() {

  $('#home').click(function(e) {

    e.preventDefault();

    $.ajax({
      type: 'GET',
      url: '/html/home.html',
      dataType: 'html',
      success: function(response) {
        $('#dMain').html(response);
      }
    });

  });

});

answered Apr 9, 2014 at 11:31

Milan and Friends

5,6101 gold badge23 silver badges28 bronze badges

4 Comments

TriangleBanana Over a year ago

This method works similarly to the answer by Suketu, but I am still unable to see the home.html content in the dMain div, would it be an error with my home.html?

Milan and Friends Over a year ago

@TriangleBanana that depends on the content of home.html. If home.html is in the html folder in your root folder than it must work. Of course you must include jQuery library in the head section for this to work.

TriangleBanana Over a year ago

Would I need to include the JQuery library in the home.html as well? I have the library included in the index.html and have tried altering "/html/home.html" to just "home.html"

Milan and Friends Over a year ago

@TriangleBanana No, if you have jQuery library included in the <head> section of your index.html document there's no need to include it in home.html.

TriangleBanana · Accepted Answer · 2014-04-09 21:14:23Z

0

The error I had lay in my home.html file. An incorrect statement in a div that was affecting the ability to display it.

answered Apr 9, 2014 at 21:14

TriangleBanana

792 silver badges11 bronze badges

Collectives™ on Stack Overflow

Javascript Dynamically replace div content on button click

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related