создать рамочную структуру в php / html? - PullRequest
2 голосов
/ 21 января 2012

Мне нужно создать страницу, имеющую две, рамочные структуры.Слева я всегда хочу показать небольшую форму с примерно 10 записями, которая после нажатия кнопки отправки выполняет некоторую обработку и показывает результат.Мне нужно иметь доступ к левой части в любое время.Правая часть предназначена для обработки данных, доступа к базе данных и отображения результатов.Ранее я создал страницу с фреймами, но у меня есть некоторые проблемы с Chrome и тем, что слава ограничена, я хочу перейти к какой-то другой структуре.Мне комфортно с php и html.Кто-то предложил мне AJAX, но я ноль в этом.

Как создать фреймоподобную структуру, состоящую из двух частей, которые загружают разные файлы?Спасибо


Причина, по которой я не хочу использовать фрейм, указана ниже:

У меня есть файл testframe.php, который загружает testinpform.php в правый фрейм, содержащий код для создания 3 кнопок.когда я загружаю testframe.php, он показывает все кнопки в правой рамке, и все кнопки работают как нужно в первый раз.после нажатия кнопки ни одна из кнопок не работает после этого нажатия.Когда я перехожу на другую страницу по какой-либо другой ссылке и возвращаюсь, эти кнопки снова начинают работать.

Это поведение отображается только браузером Chrome.Если я не использую frame и просто загружаю testinpform.php, все кнопки работают как нужно.

В Firefox один и тот же код прекрасно работает с или без рамки.

Итак, это так?проблема chrome или мне нужно добавить что-то в мой код, чтобы он работал во всех браузерах.

Мой код выглядит следующим образом.

testframe.php

<?php
function generateFrames() {
echo "<FRAMESET  COLS=\"360,*\">\n";
echo "<FRAME noresize NAME=\"input\" SRC=\"otherfile.php?page=left\">\n";
echo "<FRAME NAME=\"output\" SRC=\"testinpform.php?page=right\">\n";
echo "</FRAMESET>";
}

if($page=="left") {
echo "<BODY BGCOLOR=\"#FFFFFF\">";
echo "<FONT FACE=\"Arial,Verdana,Helvetica\" COLOR=\"FF0000\" SIZE=\"3\">PHP Tester</FONT>";
echo "<FORM METHOD=\"get\" ACTION=\"processForm.php?page=right\"TARGET=\"output\">\n";
echo "<TABLE BORDER=\"0\" CELLSPACING=\"0\" CELLPADDING=\"0\">\n";
echo "<TR><TD><TEXTAREA NAME=\"input\" COLS=\"100\" ROWS=\"40\"
WRAP=\"virtual\">".$input."</TXTAREA></TD></TR>\n";
echo "<TR><TD ALIGN=\"center\"><INPUT TYPE=\"submit\"
VALUE=\"Execute\"></TD></TR></TABLE></FORM>\n";
echo "</BODY>";
}

else if ($page=="right") {
echo "<BODY BGCOLOR=\"#FFFFFF\">";
if(empty($input)) {
echo "Ready to parse...";
}
else {
$input=stripSlashes($input);
eval($input); 
}
echo "</BODY>"; 
}

else {
generateFrames();
}
?>

testinpform.php

<?php
$filenames =  array("file1.txt", "file2.txt", "file3.txt");
$namesToshow = array("file1", "file2", "file3");
$numfiles = count($filenames);

for ($i = 0; $i< $numfiles; $i++)
 {
 echo"<form enctype=multipart/form-data method=GET
 action='viewResult.php' target='_blank' >";
 echo"<input type='hidden' name='filetoview' value= $filenames[$i] >";
 echo"<input type='submit' value= $namesToshow[$i] >";
 echo'</FORM>';
  }

 echo"<a href= abc.com>click here to go to next page and then come back using the back button>";
 ?>

Спасибо


@ Silvertiger Спасибо за ваш ответ.Я смотрю на ваш код и пытаюсь настроить его в соответствии с моими потребностями.

Я приведу самый простой пример для моего случая.

frame.php содержит код, предложенный @silvertiger.

В левой части я хочу включить «inputform.php», который имеет (например) следующий код:

<form name="secondForm" method="POST" enctype="multipart/form-data" action = 'process.php' target = "output">      
<input type="hidden" name="organism" value="human" >
Enter the input in the text box:<br />
<textarea name="textArea" cols="40" rows="6" >Enter your query here</textarea> <br />
<input type="submit" value="submit" class="html-text-box"> 
</form>

Когда я вызываю frame.php и нажимаю кнопку отправки,форма ввода передает все данные в process.php, который покажет свой результат в правой половине.

Файл process.php:

<?php
$organism= $_POST['organism'];
$textArea = $_POST['textArea'];
print ("\n$organism, $textArea");
?>

Какие изменения мне нужны в файле frame.php ниже:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Some Page</title>
        <script type="text/javascript" src="includes/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
            function loadform1() {
                jQuery.ajax({ // create an AJAX call...
                    data: jQuery('#myform1').serialize(), // get the form data
                    type: 'POST', // GET or POST
                    url: 'process.php', // the file to call
                    success: function(response) { // on success..             
                        $('#displaydata').html(response); // update the DIV
                    }
                // might need to add a return false here so the page won't reload
                });
            };            
        </script>
    </head>
    <body>
        <div style="float:left;width:50%;">
            <form id="myform1" name="myform1" onsubmit="loadform1()">
                <div style="float:left; width: 150px;">Criteria 1</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria1" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <div style="float:left; width: 150px;">Criteria 2</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria2" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <input type="submit" value="Show Form 1 results" />

            </form>            
     <div style="clear:both; height: 30px;"><hr></div>         
        </div>

        <div id="displaydata" style="float:left;width:50%; text-indent: 30px;">
        <?php include('defaultpage.php'); ?>
        </div>
    </body>
</html>

Большое спасибо.

Ответы [ 3 ]

1 голос
/ 21 января 2012

Способ сделать это без фреймов, используя JQuery.Вам нужно будет получить копию, версия jquery, которую я здесь использую, немного устарела, но образец все еще действителен и не так страшен, как вы думаете.Статическая форма слева, которая содержит переменные, которые вы хотите отправить / отслеживать, а затем вызов JQuery (просто javascript), который я называю загрузкой другой страницы внутри div.все динамические, перезагрузка страницы не требуется и т. д.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Some Page</title>
        <script type="text/javascript" src="includes/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
            function loadform1() {
                jQuery.ajax({ // create an AJAX call...
                    data: jQuery('#myform1').serialize(), // get the form data
                    type: 'POST', // GET or POST
                    url: 'form1resultpage.php', // the file to call
                    success: function(response) { // on success..             
                        $('#displaydata').html(response); // update the DIV
                    }
                // might need to add a return false here so the page won't reload
                });
            };
            function loadform2() {
                jQuery.ajax({ // create an AJAX call...
                    data: jQuery('#myform2').serialize(), // get the form data
                    type: 'POST', // GET or POST
                    url: 'form2resultpage.php', // the file to call
                    success: function(response) { // on success..             
                        $('#displaydata').html(response); // update the DIV
                    }
                // might need to add a return false here so the page won't reload
                });
            };
        </script>
    </head>
    <body>
        <div style="float:left;width:50%;">
            <form id="myform1" name="myform1" onsubmit="loadform1()">
                <div style="float:left; width: 150px;">Criteria 1</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria1" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <div style="float:left; width: 150px;">Criteria 2</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria2" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <input type="submit" value="Show Form 1 results" />
            </form>
            <div style="clear:both; height: 30px;"><hr></div>
            <form id="myform2" name="myform2" onsubmit="loadform2()">
                <div style="float:left; width: 150px;">Criteria 1</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria1" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <div style="float:left; width: 150px;">Criteria 2</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria2" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <input type="submit" value="Show form 2 results" />
            </form>
        </div>
        <div id="displaydata" style="float:left;width:50%; text-indent: 30px;">
            This is the display page, it will change            
        </div>
    </body>
</html>

, тогда нужно просто создать форму для каждой «функции», которую вы хотите отобразить, а затем скопировать / вставить и изменить вызов jquery для отправки другогоФорма на другую страницу ... Я отредактирую пример, чтобы иметь 2 формы :).Если вам просто нужна 1 форма, которая выполняет функции с 10 или 12 полями, удалите «myform2» и все готово!

1 голос
/ 21 января 2012

Использовать framesets :

<frameset cols="25%,*,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>
0 голосов
/ 21 января 2012

см. Ниже

myfile.html

<frameset cols="25%,*">
<frame src="myFileA.html" />
<frame src="myFileB.html" name="main"/>
</frameset>

myFileA.html

<html>
<body>
<a href="a.html" target="main">File A</a><br>
<a href="b.html" target="main">File B</a><br>
<a href="c.html" target="main">File C</a>
</body>
</html>

myFileB.html

<html>
<body>
Default Page
</body>
</html>

Также создайте a.html, b.html и c.html.

Откройте myFile.html в браузере и увидите ВОЛШЕБСТВО ...

Дайте мне знать, если что-то еще нужно !!!

Удачи !!! Ура !!!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...