load 2 pages in 2 different divs simultaneously on onlick of 1 button

Question

$('#menuhome').click(function(){
            $('#leftcolumncontainer').load('pages/homemenu.php');

        });

the above will load the home menu on left when on its own it ok..now i want to add this

 $('#menuhome').click(function(){
                $('#middlcolumncontainer').load('pages/homecontent.php');

            });

the code above will load the home content in the middle

what i want to achieve is when i click the button home menu will load in the left and home content will load in the center..but this code does something odd when i click the button the content load in the center and in the left so i tried something like this

$('#menuhome').click(function(){
                $('#leftcolumncontainer').load('pages/homemenu.php');
                $('#middlcolumncontainer').load('pages/homecontent.php');
            });

same thing happens my question is how to achieve what i want with this code what is wrong

"UPDATE"

$.when($('#leftcolumncontainer').load('pages/homemenu.php', $('#middlcolumncontainer').load('pages/imagegallerycolumn.php'))).done(function(x){
            return(x);

        });

this is the code i am working on right now

update

$('a.menuhome').click(function(e) {
                 $.when($('#leftcolumncontainer').load('pages/homemenu.php')).then(function() {
            $.ajaxSetup({
                url: "pages/homecontent.php",
                success: function(result) {
                    $("#middlcolumncontainer").html(result);
                }
            });
            $.ajax();
                  });});

this is the new code i used the only problem here is that the middlecontainer does not load homecontent

homecontent page:

<div id="middlecontainerimagegallerycolumn" >
    <div id="imagegallerycorner">
        <div id="bigimage_container"></div>
        <div id="bigimage_description"></div>
        <div id="carousel_container">
        <div id="left_scroll"><img src='images/left.png' /></div>
        <div id="carousel_inner">
        <ul id="carousel_ul" >
        <li><a href='#'><img src='images/image1.jpg' id="1"/></a></li>
        <li><a href='#'><img src='images/image2.jpg' id="2"/></a></li>
        <li><a href='#'><img src='images/image3.png' id="3"/></a></li>
        <li><a href='#'><img src='images/image4.jpg' id="4"/></a></li>
        <li><a href='#'><img src='images/image5.jpg' id="5"/></a></li>
        <li><a href='#'><img src='images/image6.png' id="5"/></a></li>
        <li><a href='#'><img src='images/image7.png' id="5"/></a></li>
        <li><a href='#'><img src='images/image8.png' id="5"/></a></li>
        </ul>
        </div>
        <div id='right_scroll'><img src='images/right.png' /></div>
        </div>

    </div>
</div>

js:

$("#bigimage_container").ready(function() {
        document.getElementById("bigimage_container").style.background = 'url('+$('#carousel_ul li:first img').attr("src") +') ';
        document.getElementById("bigimage_container").style.backgroundPosition = "center center";
        document.getElementById("bigimage_container").style.backgroundRepeat = "no-repeat";
        document.getElementById("bigimage_container").style.backgroundSize = "100% 100%";
        document.getElementById("bigimage_description").innerHTML = $('#carousel_ul li:first img').attr("src");
        });
    $(document).ready(function() {
        //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
        $('#carousel_ul li:first').before($('#carousel_ul li:last'));


        //when user clicks the image for sliding right        
        $('#right_scroll img').click(function() {
            document.getElementById("bigimage_container").style.background = 'url(' + $('#carousel_ul li:nth-child(3) img').attr("src") + ') ';
            document.getElementById("bigimage_description").innerHTML = $('#carousel_ul li:nth-child(3) img').attr("src");
            //alert($('#carousel_ul li:nth-child(2) img').attr("src"));
            document.getElementById("bigimage_container").style.backgroundPosition = "center center";
            document.getElementById("bigimage_container").style.backgroundRepeat = "no-repeat";
            document.getElementById("bigimage_container").style.backgroundSize = "100% 100%";
            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width = $('#carousel_ul li').outerWidth() + 10;

            //calculate the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;

            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul:not(:animated)').animate({
                'left': left_indent
            }, 100, function() {

                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                $('#carousel_ul li:last').after($('#carousel_ul li:first'));

                //and get the left indent to the default -150px
                $('#carousel_ul').css({
                    'left': '-150px'
                });


            });
        });

        //when user clicks the image for sliding left
        $('#left_scroll img').click(function() {
            document.getElementById("bigimage_container").style.background = 'url(' + $('#carousel_ul li:first img').attr("src") + ') ';
            document.getElementById("bigimage_description").innerHTML = $('#carousel_ul li:first img').attr("src");
            document.getElementById("bigimage_container").style.backgroundPosition = "center center";
            document.getElementById("bigimage_container").style.backgroundRepeat = "no-repeat";
            document.getElementById("bigimage_container").style.backgroundSize = "100% 100%";
            var item_width = $('#carousel_ul li').outerWidth() + 10;

            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
            var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;

            $('#carousel_ul:not(:animated)').animate({
                'left': left_indent
            }, 100, function() {

                /* when sliding to left we are moving the last item before the first list item */
                $('#carousel_ul li:first').before($('#carousel_ul li:last'));

                /* and again, when we make that change we are setting the left indent of our unordered list to the default -150px */
                $('#carousel_ul').css({
                    'left': '-150px'
                });
            });


        });

    });

Answer 1

You need to check the asynchronous behaviour of load, this working fiddle will help you

Code Snippet:

$('#menuhome').click(function(){
    $.when($('#leftcolumncontainer').load('http://fiddle.jshell.net/webdevem/JfcJp/show/')).done(function(x){
    $('#middlcolumncontainer').load('http://www.yahoo.com');
});
});

Do note that www.yahoo.com wont get loaded because of cross site scripting but in the console you will get to know that it tried to load this url instead of the top one

Answer 2

load() is just a shortcut for $.get that automagically inserts the loaded content into the DOM, and it does so whenever the content is ready.

To load the content of two pages and insert both at the same time, we'll have to move away from load() and use $.get instead so we can manually insert the content when both pages have loaded

$('#menuhome').click(function(){
    $.when(

        $.get('pages/homemenu.php'),
        $.get('pages/homecontent.php')

    ).done(function(menuData, contentData) {

        $('#leftcolumncontainer').html(menuData.shift());
        $('#middlcolumncontainer').html(contentData.shift());

    });
});

This does both ajax calls, and only when both are successful and have completed is the content is inserted at the same time in both elements.

Answer 3

Simply like this :

$('#menuhome').click(function() {
   $('#leftcolumncontainer').load($(this).attr('pages/homemenu.php'));
   $('#middlecolumncontainer').load('pages/homecontent.php');
   return false;
});

Have a look at this Stackoverflow

Answer 4

Give this a shot to force loading the resources serially:

$(function(){$('#menuhome').click(function(){
    $('#leftcolumncontainer').load('pages/homemenu.php', function(){
        $('#middlcolumncontainer').load('pages/homecontent.php');
    });
})});

However, it's not clear why you're observing the behavior you are. As far as I can tell, it should work as you'd expect. A reduced test case would help cancel out any environmental factors...

Answer 5

Your first try should simply work, assuming you're fine with loading both contents simultaneously and inserting them when they become available.

$('#menuhome').click(function(){
    $('#leftcolumncontainer').load('pages/homemenu.php');
    $('#middlecolumncontainer').load('pages/homecontent.php');
});

DEMO

I think the middle content may not be loading due to a typo. You've written #middlcolumncontainer without an e .

Otherwise, it could be a same origin policy issue. Are you testing on a web server or on your local file system?

EDIT:

Let's go back to the basics then. The following works on the file system for me.

index.html

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div>
        <div id="left"></div>
        <div id="middle"></div>
        <input type="button" id="menuhome" value="menu home" />
    </div>
    <script>
        $(function() {
            $('#menuhome').click(function() {
                $('#left').load('pages/menu.html');
                $('#middle').load('pages/content.html');
            });
        });
    </script>
</body>
</html>

pages/menu.html

<div>menu</div>

pages/content.html

<div>content</div>