Unable to call specific content from an external file inside jquery

Question

I am unable to load a specific content located inside of an external html file using jquery inside DIV container :/

Please visit a link: http://www.flyingcowproduction.com/123 to have a better idea of a problem I am experiencing by pressing any button of the main menu. Each button should show a content assigned to it but instead the entire content inside the load.php file is displayed inside the container

Does anyone know what the problem is? I am also providing the code for the menu, javascript and the link to the loader page (view source).

MENU:

<ul id="menu">

        <li><a href="home" class="openContentLink"><img src="img/menu/logo.png" alt="Platinum Limo Services" /></a>
        <li><a id="services1" href="#Services" class="services openContentLink"></a></li>
        <li><a id="rates1" href="#Rates" class="rates openContentLink"></a></li>
        <li><a id="reservations1" href="#Reservations" class="reservations openContentLink"></a></li>
        <li><a id="fleet1" href="#Fleet" class="fleet openContentLink"></a></li>

</ul>

JAVASCRIPT:

function loadPostUsingAjax(section) {
loading('on');

var loadStr = "load.php" + section;


$('#singleContentInside').load(loadStr, function(){

    loading('off');

    $("#services1").click(function() {
        loadPostUsingAjax("#services")
    });
    $("#services2").click(function() {
        loadPostUsingAjax("#services")
    });
    $("#rates1").click(function() {
        loadPostUsingAjax("#rates")
    });
    $("#rates2").click(function() {
        loadPostUsingAjax("#rates")
    });
    $("#reservations1").click(function() {
        loadPostUsingAjax("#reservations")
    });
    $("#reservations2").click(function() {
        loadPostUsingAjax("#reservations")
    });
    $("#fleet1").click(function() {
        loadPostUsingAjax("#fleets")        
    });
    $("#fleet2").click(function() {
        loadPostUsingAjax("#fleets")        
    });

});

}

LOADER:

http://www.flyingcowproduction.com/123/load.php

Billion thanks in advance!!!

I suggest you to check your website with a tool as like Firebug at Firefox. There are some errors on page. — kamaci, Aug 19 '12 at 06:53

score 0 · Answer 1 · answered Aug 19 '12 at 06:36

You're loading the whole page if you want to load specific content you need to put a selector after the url but you need a space between them which you are missing var loadStr = "load.php " + section;. I would reconsider adding handlers in the .load() callback`.

Also I see in the console

Uncaught ReferenceError: showArea is not defined PageNavigation.js:312

score 0 · Answer 2 · answered Aug 19 '12 at 07:20

You can link to somewhere at same page as like described here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_locations

so if you have some problems you can try that way. Give to link at same page and call that click or relate your tab click functions to fire it.

Unable to call specific content from an external file inside jquery

2 Answers2

Linked