2013-05-21 3 views
0

Я читал бесчисленные статьи о замене <div> другим контентом более конкретно другим файлом PHP. Кажется, я не могу заставить это работать. Когда я нажимаю любую кнопку, абсолютно ничего не происходит. Я пытался убедиться, что все id = "XXX" верны для всех и функции JavaScript, но я новичок в Javascript. Я включил приведенный ниже код и ссылки на страницу, на которую я пытаюсь установить это, и тестовую страницу.Перезагрузка другого PHP в DIV

Orginal Page - http://www.havenswatch.com/records/player.php?playerID=1

Test Page - http://www.havenswatch.com/records/testdivswap.php

<html> 
    <head> 
     <script> 
      function loadbioPage() { 
       $("#rightpage").load('bio.php'); 
      } 
      function loadcreditsPage(){ 
       $("#rightpage").load('creditsmod.php'); 
      } 
     </script>  
    </head> 
    <body> 
     <input type="button" value="Bio" onclick="loadbioPage()"/> 
     <input type="button" value="Credits" onclick="loadcreditsPage()"/> 
     <div id="rightpage"> 
      <?php include('creditsmod.php'); ?> 
     </div> 
    </body> 
</html> 
+0

«Оба bio.php и creditsmod.php использование $ переменных из исходной страницы», вы имеете в виду, что вы используете переменные со страницы, показанной выполнить запрос на '.load' страницах? потому что вам нужно будет соответствующим образом передать эти переменные. – PlantTheIdea

+0

Ваша тестовая страница не включает jQuery, это, вероятно, достойное место для начала. –

+0

Вам нужно использовать переменные сеанса. Регулярные переменные PHP не разделяются между страницами. – Barmar

ответ

2

Включить JQuery и использовать соответствующие обработчики событий, если вам нужна помощь с выводом правильных данных в ваших PHP скриптов, показывают нам сценарии и задать вопрос:

<html> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('#loadbioPage').on('click', function() { 
       $("#rightpage").load('bio.php'); 
      }); 

      $('#loadcreditsPage').on('click', function() { 
       $("#rightpage").load('creditsmod.php'); 
      }); 
     }); 
    </script>  
</head> 
<body> 
    <input type="button" value="Bio" id="loadbioPage"/> 
    <input type="button" value="Credits" id="loadcreditsPage"/> 
    <div id="rightpage"> 
     <?php include('creditsmod.php'); ?> 
    </div> 
</body> 
</html> 
+0

Еще лучше, '<... class = 'load' data-page =" ... ">' then '$ ('. Load'). Click (..);' –

+0

@PaoloBergantino - почему это лучше , требуется больше усилий для поиска классов и атрибутов данных, а затем одного идентификатора? – adeneo

+0

@adeneo, предложение Паоло делает его более модульным и, следовательно, более расширяемым, ценой некоторой эффективности. Какой бы он ни был «лучше», вероятно, зависит от обстоятельств и целей программиста. – jmeas

-1
<script> 
<script> 
function loadbioPage(){ 
$("#rightpage").load('bio.php'); 
} 
function loadcreditsPage(){ 
$("#rightpage").load('creditsmod.php'); 
} 
</script> 

// Пожалуйста, проверьте открытие тега скрипта в нашем коде и установите последнюю версию jQuery.

0

Прежде всего Firebug consol показывает ошибку в теге.

Попробуйте приведенный ниже код

<html> 
<head> 

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script type="text/javascript"> 
function loadbioPage(){ 
    $("#rightpage").load('bio.php'); 
} 
function loadcreditsPage(){ 
$("#rightpage").load('creditsmod.php'); 
} 
</script>  
</head> 
<body> 
<input type="button" value="Bio" onclick="javascript:loadbioPage(); return false;"/> 
<input type="button" value="Credits" onclick="javascript:loadcreditsPage(); return false;"/> 
<div id="rightpage"> 
    <?php include('creditsmod.php'); ?> 
</div> 

Остальная часть кода кажется прекрасным.

Пожалуйста, проверьте его.

Спасибо Вам

1

хорошо ваши используя методы Jquery но Idon't см JQuery упоминается в голове. также вы должны, вероятно, очистить div сначала пример сценария ниже того, что я сделал бы для достижения этого.

<html> 
<head> 

//reference jquery 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>           
<script type="text/javascript"> 

//make sure the document is ready for changes 
$(document).ready(function(){ 

//listen for btn 1 to be clicked 
$('#btn1').click(function(){ 
$('#rightpage').html(""); //clear html inside the div so new content can replace it 
$('#rightpage').load('creditsmod.php'); //load new data 
}); 

//listen for btn 2 to be clicked  
$('#btn2').click(function(){ 
$('#rightpage').html(""); //clear html inside the div so new content can replace it 
$('#rightpage').load('bio.php'); //load new data 
}); 

}) 
</script> 
</head> 
<body> 
<button id="btn1">CreditsMod</button> //great html5 option compared to input for buttons. 
<button id="btn2">Bio</button> 
<div id="rightpage"><?php include('creditsmod.php'); ?></div> 
</body> 
</html> 
Смежные вопросы