Зареждане на HTML страница в контейнер с java от страница в контейнера

Аз съм нов в кодирането и това е първият ми път тук, така че по-спокойно :)

също така, моля, не се колебайте да ми кажете, че това е глупав начин за постигане на желания ефект.

Разработвам интранет страницата на компанията и започнах да зареждам страници в контейнер в рамките на страницата index.php. което работи добре!

Проблемът, който имам, е, че същият този метод не работи за бутони, които създавам в рамките на страниците, които се зареждат в контейнера.

Пример:

index.html

       <ul class="nav navbar-nav">
            <li><a href="/bg#" id="load_HR"> HR</a>
            </li>
            <li><a href="/bg#" id="load_FAQ"> FAQ</a>
            </li>
            <li><a href="/bg#" id="load_info"> Info</a>
            </li>
            <li><a href="/bg#" id="load_directory"> Directory</a>
            </li>
        </ul>

$( document ).ready(function() {
    $("#load_HR").on("click", function() {
    $("#content").load("HR.html");
});
    $("#load_FAQ").on("click", function() {
    $("#content").load("FAQ.php");
});
    $("#load_Info").on("click", function() {
    $("#content").load("info.html");
});
    $("#load_directory").on("click", function() {
    $("#content").load("directory.php");
});
});

<div id="content"></div>

Ето как моите бутони Navbar зареждат страници в контейнера, това работи добре.

Сега искам да заредя страница в рамките на, да речем, страницата HR.html в контейнера, който в момента е зает от страницата HR.html.

изглежда лесно, звучи сложно и се въртя в кръг.

Моля помогнете! :)


java html single-page-application
person Liam Mead    schedule 19.04.2017    source източник

Отговори (2)


arrow_upward
0
arrow_downward

Изглежда, че функциите JQuery .load() се опитват да изпълнят XMLHttpRequest, което води до следната грешка

cannot load Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Опитайте да използвате обикновен JS, той работи за мен.

$( document ).ready(function() { $("#load_HR").on("click", function() { document.getElementById("content").innerHTML='<object type="text/html" data="HR.html" ></object>'; });

Така че вашият код трябва да изглежда нещо подобно

       <ul class="nav navbar-nav">
            <li><a href="/bg#" id="load_HR"> HR</a>
            </li>
            <li><a href="/bg#" id="load_FAQ"> FAQ</a>
            </li>
            <li><a href="/bg#" id="load_info"> Info</a>
            </li>
            <li><a href="/bg#" id="load_directory"> Directory</a>
            </li>
        </ul>

$( document ).ready(function() {
    $("#load_HR").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="HR.html" ></object>';
});
    $("#load_FAQ").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="FAQ.php" ></object>';
});
    $("#load_Info").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="info.html" ></object>';
});
    $("#load_directory").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="directory.php" ></object>';
});
});

<div id="content"></div>
person DevKimo    schedule 19.04.2017
comment
Благодаря за вашата помощ DevKimo! В крайна сметка разбрах, че мога да заобиколя проблема си, като добавя функция към страницата, която се зарежда в контейнера. - person Liam Mead; 21.04.2017

arrow_upward
0
arrow_downward

Намерих своя jQuery отговор:

чрез добавяне на тази функция към страницата, която се зареди в контейнера за съдържание, например, когато заредих страницата HR.html:

function loadbenefits() {
    $('#hrContent').load('CompanyBenefits.html');
}

след това направете бутон, който зарежда новата страница в контейнера с onClick(="loadbenefits()" така:

<button onClick="loadbenefits()" class="btn" type="button" value="Go"> Some Text </button>
person Liam Mead    schedule 21.04.2017