0 
$('#homemenubutton').click(function() {

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




$.ajaxSetup({
                url: "pages/mayorscolumn.php",
                success: function(result) {
                    $("#leftcolumncontainer").html(result);
                }
            });
            $.ajax();
            $('#menuhome').click(function() {
            location.reload(true);
            //$('#leftcolumncontainer').load('pages/mayorscolumn.php');
            //$('#middlecolumncontainer').load('pages/imagegallerycolumn.php');
            });

i have this code above to load a page in left side of page this page is a menu page while the middle page will be content.my question is very simple why does it behave odd sometimes and perfectly other times..there are times when i press the button middle pages is loaded in both container there are times that it load both pages.what may cause this to happened?any suggestion is appreciated

Improve this question
12
  • there's nothing in that code that would cause what you describe, there must be something else going on. Use the Javascript debugger to troubleshoot it, that's what it's there for. Commented Sep 4, 2014 at 2:34
  • i get nothing on the debugger im using chrome i run the page while i run the inspect element it does not stop the page.. Commented Sep 4, 2014 at 2:36
  • Quite likely you have other click event listeners. Is this all the code you have on the page? How does your markup look like? Commented Sep 4, 2014 at 2:37
  • 1
    @Barmar I think the possible execution sequence and the default success handler passed to the ajaxSetup is a good place to start Commented Sep 4, 2014 at 3:16
  • 1
    @ArunPJohny He hadn't posted the ajaxSetup when I made my earlier comments. That appears to be the "something else going on", as you pointed out in your answer. Commented Sep 4, 2014 at 17:01

1 Answer 1

Reset to default
2

The one problem I could see is, look at the following steps

  1. pages/homemenu.php request is sent
  2. 'pages/homecontent.php' request is sent
  3. the left panel request is completed, now since you have an ajax setup along with the default load handler, the handler in ajax setup also fires
  4. the middle panel request is completed, so the content is loaded to the middle panel by the default handler, now the success handler in the ajax setup fires so the same content is loaded in the left panel also

So if the middle request is completed after the left request, you will get the same result in both the panels because of the default success handler set in the ajaxSetup, but if the left panel request is completed after the middle panel then it look Okay even though you are updating the left multiple times....

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

$('#leftcolumncontainer').load('pages/mayorscolumn.php');
$('#menuhome').click(function () {
    location.reload(true);
    //$('#leftcolumncontainer').load('pages/mayorscolumn.php');
    //$('#middlecolumncontainer').load('pages/imagegallerycolumn.php');
});
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

sir can i just remove the request and make the code stay the same i will try and i will be back on you on this
@satinekianne sorry, didn't get you. What do you mean by i just remove the request and make the code stay the same? which request do you want to remove
wait sir i will try your approach i fail on my approach

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.