current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I am trying to navigate through pages with ajax. I have a header and footer a div with id="content" between those two. What I want to do is to replace the content, in order to this I have an onclick on a button that starts the following JavaScript method:

$("#content").load("home.html", function() {
    });

Well it works, but the problem is that the stuff in home.html doesn't have the jQuery css. I tried to link it in the home.html file. It actually works then but it duplicates the footer like this:

http://i.stack.imgur.com/x8TZF.png (I cannot post pictures, because of reputation..)

I just cannot found something on the web, probably because it's hard to describe this issue in a few words.

I hope someone can help me out. :)

Thanks.

share|improve this question
    
What is "jQuery css"? Note that your home.html should be just snippet, not a entire html page, and all resources like css should be defined in parent page. –  Tommi Jun 7 '13 at 9:09
    
I have this: <link rel="stylesheet" href="code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css"; /> <script src="code.jquery.com/jquery-1.8.3.min.js"></script>; <script src="code.jquery.com/mobile/1.2.1/…; in my head in index.html, home.html is just <html> jQuery Mobile list </html> –  user2437856 Jun 7 '13 at 9:41
    
you should not put <html> tag into home.html snippet, it's invalid because it will be nested <html><html></html></html> DOM tree –  Tommi Jun 7 '13 at 9:59
    
Oh, good to know. But it doesn't solve the problem. x_X –  user2437856 Jun 7 '13 at 16:41

2 Answers 2

up vote 0 down vote

When loading content from another HTML page into the current page with jQuery, I've found $.load() to be difficult to work with and quite inflexible at times.

Another approach is to use the $.get() method and parse the returned HTML, like this:

$.get('home.html', function(response){    
    var myHtml = $('#content', response); //get the section of HTML we want
    $('#content').html(myHtml); //load the returned content into the current page    
});

This doesn't work all that well if you're using the same ID for the selectors (I normally use a class) but aside from that it gives you much more control over what gets loaded.

Hope this helps.

http://api.jquery.com/get/

share|improve this answer
    
Sounds good, I have this code now: "$.get('home.html', function (response){ var myHtml = $('#homecontent', response); $('#content').html(myHtml); });", when I click my button the content disappears but the home.html content won't appear. :/ Did I do some syntax mistake? –  user2437856 Jun 7 '13 at 9:25
    
check what the response html was with firebug in the console. the value of myHtml must be null or empty which means that there is a problem with your selector for the returned html. try using classnames if you can instead of IDs, I had a little trouble using IDs with this method before. –  jammypeach Jun 7 '13 at 9:58
up vote 0 down vote

here is a code that works fine. I tested it right now.

//index.html

    <html>
        <head>
            <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

        </head>
        <body>
            <input type="button" id ="click_me" Value="click me to show some content" ></input>
            <div id = "content">

            </div>
        </body>
        <script type="text/javascript">
                $('#click_me').click(function(){

                    $('#content').load("test.html");
                });
        </script>
    </html>

//test.html
<div>

    <p>Loaded content here</p>

</div>

Hope this helps :)

share|improve this answer
    
Thanks, but try to put a jquery object in test.html. I am sure it won't show, since I have kind of the same code. –  user2437856 Jun 7 '13 at 16:36
    
In that case you need to declare <script> tag with jquery code for those objects that are inside test.html, inside the code for test.html. Works quite fine. If you need any source codes, please let me know. I will send you everything you need –  Nikola Milutinovic Jun 7 '13 at 19:07
    
Here is the example... kernel-studios.org/stackoverflow I did that there so you would believe me :) –  Nikola Milutinovic Jun 7 '13 at 19:15
    
Hmm.. but you didn't use jQuery buttons, right? Can you upload this file so I can try out something? When I download the page out of my browser it doesn't work. :( –  user2437856 Jun 8 '13 at 8:25
    
Ajax wont work offline... I believe you need to upload it to some server, or run WAMP, XAMP, MAMP (depending on your operating system) Here is the link docs.google.com/file/d/0B83aAHSWFPb2N2tkX2prSk1zUWM/… –  Nikola Milutinovic Jun 9 '13 at 8:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.