I need part of the page to be changed dynamically with ajax

Question

I just finished wireframing and need to dynamically change main part of the page which is a div class=\"container\" with sliced parts of the page which represent other conte

Answer 1

this error Uncaught SyntaxError: Unexpected end of input happens propably due to missing a closing parenthesis. So in your jquery click function, outer closing parenthesis will be missing. I have examined your code and yes you are missing closing paranthesis.

Also this error related answer is alreday here:JavaScript error (Uncaught SyntaxError: Unexpected end of input)

$(function () { $(".branding").click(function () {
                    $.ajax({
                        url: 'branding.html',
                        data: { id: $(this).attr('id') },
                        cache: false,
                        success: function (data) {
                            $(".container").replaceWith(data);  //try with double qoutes
                        }
                    });
                });
                });//this is the missing paranthesis


$(function () { $(".3d").click(function () {
                        $.ajax({
                            url: '3d.html',
                            data: { id: $(this).attr('id') },
                            cache: false,
                            success: function (data) {
                                $(".container").replaceWith(data);  //try with double qoutes
                            }
                        });
                    });
                    });//this is the missing paranthesis

Answer 2

Usually, what I do is create a route handler full of url hashes mapped to urls. That way, when I listen for a window hashchange event, I can route to that hash's corresponding url. The object would look like this:

var router = {
    "#ajax" : "http://fiddle.jshell.net"
};

Then I use this object to acquire html from the url asynchronously, using the router and a jquery get request (on hashchange):

$(window).on("hashchange", function(){
    var route = router[location.hash];
    if (typeof route === 'undefined') return;            
    $.get( route, function( data ) {
        $( ".sliderContent" ).html( data );
    });                
});

As you can see from the jquery get's callback, the ajax data retrieved is injected into the DOM in the sliderContent div. I hope this helps :)

See the working jsfiddle here: http://jsfiddle.net/zrLLhq30/5/

Edit: the AJAX takes a little while to process, so give it a bit of time to load.

UPDATE

I've updated my fiddle to include multiple links (as well as replacing the jquery get with a jquery load, just to speed up the resource retrieval) and, as you can see, the content inside the divs load into the container without a page refresh.

If you implement the solution they way I did, using different hashes for each resource URL, then it should work great. I hope this is what you meant :)

Updated jsfiddle here: http://jsfiddle.net/zrLLhq30/7/